Design System 2026

Design System

モノクロ × 蛍光グリーンのブランドシステム

I'm Hopping 自身のデザインガイドラインを、そのまま公開しています。色・書体・部品・運用ルールを1ページに。クライアントにお渡しするガイドラインも、この「最小構成で、毎日使える」考え方で設計します。実装の正は css/style.css の :root トークンです。

Mascot

ホッピン

三つの円——コア(理念)・戦略・表現——から生まれた、ブランドの「核」を象徴する存在。モノクロ基調の画面で唯一、常時カラーで扱う要素です。

ホッピン(基本)
基本
ホッピン(旗)
旗
ホッピン(横向き)
横向き
ホッピン(虫眼鏡)
虫眼鏡

Color

カラートークン

モノクロ階調+蛍光グリーン1色。蛍光は「1画面1役割」(マーカー / 罫線・ドット / ホバー / CTA)に限定します。

Base / Mono

  • Ink#0A0A0A
  • Paper#F7F7F5
  • White#FFFFFF
  • Gray 100#ECECEA
  • Gray 300#C9C9C6
  • Gray 500#8A8A86
  • Gray 700#4A4A47

Accent

  • Neon#C8FF00

Typography

タイポグラフィ

欧文ディスプレイはChonburi(単一ウェイト・イタリック非搭載のため疑似スタイル禁止)。和文はNoto Sans JP。英語セクション名を巨大に、日本語見出しは小さめに組む型階層が基本です。

Section Label / Chonburi + 蛍光ピリオド

Service

Hero EN / Chonburi

Your Vision.

JP見出し / Noto Sans JP Bold

核をつくる。届ける。育てる。

本文 / Noto Sans JP Regular 14.5px 行間2

経営者の想いを言語化し、デザインで視覚化し、AI検索時代に届く形で実装する。中小企業のための言語設計パートナーです。

マーカー強調 / mark

6つの「伝わらない」問題

Buttons

ボタン

Primary=蛍光ピル(CTA専用)。Secondary=墨のアウトラインピル。テキストリンクは蛍光の下線。

30分の無料相談に申し込む Works All 相談する

Rules

運用ルール

01

蛍光グリーンは1画面1役割

マーカー・罫線ドット・ホバー・CTAのどれかに限定。面で多用しない。

02

実写はグレースケール、ホバーで彩色

実績・ブログカバーはモノクロで一覧し、触れると色が戻る。ブランドシンボル(ホッピン・診断イラスト)はカラーのまま。Knowledgeカバーはトリミング禁止(contain)。

03

ダーク面は「思想を語る場所」

墨面+角丸48pxのインセットはPartner/Valuesなどブランドの主張に限定。強調は蛍光ボックス+黒文字。

04

Markdown的太字禁止・体言止めと構造で強調

本文の強調はマーカー・鉤括弧・見出し階層で行う(❾ルール)。