The logo
Irodori means 彩り — the variety of colours. The mark is a cloud drawn in the five accent colours, with 彩り set inside it in the traditional red and indigo. The white band across the middle is the page itself: every tool works on a neutral canvas, and the colour is what you bring.
- Five arcs, five accentsEach ring of the cloud is one of the five brand accents, in order, so the mark doubles as a palette preview.
- 彩り insideThe characters sit in the red 彩 and indigo り of the traditional palette — the two most saturated colours in the system.
- The white bandThe horizontal band is the working surface: white in light mode, near-black in dark mode, the same canvas either way.
- One shape, many sizesThe same drawing becomes the 32 px tab icon, the 192/512 px app icons, the maskable icon and this page.
16px24px32px48px96px
Light and dark, side by side
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Design tokens
Surfaces
Text
Lines
Brand
Shape
Brand palette
Typography
The interface uses the system UI stack so it renders instantly and never waits on a font download. Numbers and code always fall back to the monospace stack, because a colour value is only useful if you can read it exactly.
Spacing and shape
Spacing follows a 4 px base with a 20 px gutter; panels use 22 px radii, cards 16 px, and controls are fully rounded. Elevation is expressed with shadow rather than borders, so the interface stays flat in dark mode.