标志设计
Irodori 意为「彩り」，即色彩的缤纷。这个标志是一朵由五个强调色绘成的云，「彩り」二字以传统的红与靛写在里面。横贯中间的白带就是页面本身：所有工具都在中性画布上运行，颜色由你带来。
- 五道弧，五个强调色云朵的每一圈依次对应五个品牌强调色，所以这个标志本身就是一张色卡预览。
- 里面的「彩り」两个字用的是传统色板里饱和度最高的红（彩）与靛（り）。
- 那道白带横向的白色带就是工作面：浅色模式是白，深色模式是近黑，两种模式共用同一张画布。
- 一个形状，多种尺寸同一张图变成 32 px 标签页图标、192/512 px 应用图标、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)
间距与形状
间距以 4 px 为基准、栏间距 20 px；面板圆角 22 px、卡片 16 px，控件完全胶囊化。层级用阴影而非描边表达，因此深色模式下界面依然保持扁平。
--r-sm--r-md--r-lg--r-xl--r-full