DESIGN · みやびブランド

みやびデザインシステム

みやびブランドのすべて——色、文字、余白、コンポーネント——を「触れるドキュメント」として1ページに。 tokens.css から自動生成された想定のリファレンスです。

カラーパレット

紫を中心に、シャンパンゴールドと生成りでやさしさを足したパレット。

みやび紫

--purple

#8B5CF6

薄紫

--purple-light

#C084FC

深紫

--purple-deep

#6D28D9

シャンパンゴールド

--gold

#D4AF37

モダングリーン

--green

#6EE7B7

生成り（背景）

--cream

#FAF7F2

墨色（本文）

--ink

#2A2233

霞色（補足）

--muted

#7A6F85

タイポグラフィ

見出しは Noto Serif JP（明朝）、本文は Noto Sans JP（ゴシック）のハイブリッド。

H1 記事タイトル 40 / 700 / serif

H2 見出し（章） 28 / 700 / serif

H3 見出し（節） 20 / 700 / serif

Body 本文。読者が一番長く眺める文章なので、読みやすさを最優先に。 16 / 400 / sans

Small 補足・キャプション・メタ情報用 13 / 400 / sans

スペーシング

4pxを基準に倍々で展開。みやびはゆとりを大事にするので、--sp-5（24px）以上をよく使う。

--sp-1

--sp-2

--sp-3

--sp-4

--sp-5

--sp-6

--sp-7

--sp-8

角丸とシャドウ

尖らせず、浮かせすぎず。みやびの世界観は「やわらかい品」がキーワード。

Radius SM

--r-sm / 8px

Radius MD + Elev SM

--r-md / 14px

Radius LG + Elev MD

--r-lg / 22px

コアコンポーネント

記事内・サイト内で繰り返し使う部品たち。

BUTTONS

LINEに登録する続きを読むプレミアムで購入

BADGES（記事種別）

🟢 無料 🟡 単発有料 💎 プレミアム

ALERTS

💡 ここはちょっとしたヒントを置く場所

⚠️ 読者が見落としがちな注意点はここで強調

FORM

みやびの一言（カスタムブロック）

🌸 みやびより： 配色は3色までに絞ると、自然と「みやびっぽさ」が出ますよ。迷ったら紫・金・生成りの3色だけで作ってみてください。

コピペ用CSS変数

このまま tokens.css に貼り付ければ、みやびのカラーがどこでも使えます。

/* みやびブランドトークン */
:root {
  --cream:        #FAF7F2;
  --ink:          #2A2233;
  --muted:        #7A6F85;
  --purple:       #8B5CF6;
  --purple-light: #C084FC;
  --purple-deep:  #6D28D9;
  --gold:         #D4AF37;
  --green:        #6EE7B7;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
}