ロゴの説明

Irodori は「彩り」=色彩の豊かさを意味します。マークはアクセントカラー 5 つで描かれた雲で、その中に「彩り」を伝統の赤と藍で置いています。中央を横切る白い帯はページそのもの——すべてのツールはニュートラルなキャンバス上で動き、色はあなたが持ち込みます。
- 5 つの弧、5 つのアクセント雲の各リングはブランドアクセントを順に示し、このマークはそのままパレットプレビューでもあります。
- 中の「彩り」二文字には伝統色で最も彩度の高い紅(彩)と藍(り)を使っています。
- 白い帯横の帯が作業面です。ライトモードは白、ダークモードは漆黒で、同じキャンバスです。
- ひとつの形、いくつものサイズ同じ絵が 32px のタブ、192/512px のアプリアイコン、maskable アイコン、そしてこのページになります。
96px
ライトとダークの比較
ライト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