Irodori彩り

外観とデザイントークン

Irodori を構成する配色システム——面・文字・罫線・ブランドカラー・形。

ロゴの説明

Irodori logo

Irodori は「彩り」=色彩の豊かさを意味します。マークはアクセントカラー 5 つで描かれた雲で、その中に「彩り」を伝統の赤と藍で置いています。中央を横切る白い帯はページそのもの——すべてのツールはニュートラルなキャンバス上で動き、色はあなたが持ち込みます。

  • 5 つの弧、5 つのアクセント雲の各リングはブランドアクセントを順に示し、このマークはそのままパレットプレビューでもあります。
  • 中の「彩り」二文字には伝統色で最も彩度の高い紅(彩)と藍(り)を使っています。
  • 白い帯横の帯が作業面です。ライトモードは白、ダークモードは漆黒で、同じキャンバスです。
  • ひとつの形、いくつものサイズ同じ絵が 32px のタブ、192/512px のアプリアイコン、maskable アイコン、そしてこのページになります。
16px24px32px48px96px

ライトとダークの比較

ライトlight
Aa

The quick brown fox jumps over the lazy dog.

ButtonChip
ダークdark
Aa

The quick brown fox jumps over the lazy dog.

ButtonChip

デザイントークン

面

--bg #ffffff #12101a
--bg-elev #ffffff #1a1822
--bg-sunken #f5f5f6 #17151f
--bg-muted #fafafa #16141d
--header-bg rgba(255,255,255,.82) rgba(18,16,26,.82)

文字

--ink #111113 #f5f5f7
--ink-2 #52525b #a1a1aa
--ink-3 #8a8a93 #71717a

罫線

--line #e7e7ea rgba(255,255,255,.10)
--line-strong #d4d4d8 rgba(255,255,255,.20)

ブランド

--brand #5b4be0 —
--accent-2 #22b8e6 —
--accent-3 #3fbf6a —
--accent-4 #f5b22e —
--accent-5 #ec6f9e —

形状

--r-sm 8px —
--r-md 12px —
--r-lg 16px —
--r-xl 22px —
--r-full 999px —
--header-h 64px —
--container 1152px —

ブランドカラー

--brand #5B4BE0
--accent-2 #22B8E6
--accent-3 #3FBF6A
--accent-4 #F5B22E
--accent-5 #EC6F9E

タイポグラフィ

UI はシステムフォントスタックを使い、表示は即時、フォントのダウンロード待ちはゼロです。数値とコードは常に等幅フォントへフォールバックします——色値は正確に読めて初めて意味を持つからです。

Display40px / 700Color, in its true space
Title30px / 700WCAG contrast
Heading20px / 650Palette generator
Body15px / 400Convert #FF5733 to OKLCH and check the ratio
Caption12.5px / 500ΔE76 · oklch(0.421 0.118 252.7)

余白と形

余白は 4px を基準に、ガターは 20px。パネル角丸 22px、カード 16px、コントロールは完全なカプセルです。階層は罫線ではなく影で表現し、ダークモードでもフラットな見た目を保ちます。

--r-sm--r-md--r-lg--r-xl--r-full