The room does the ordering
No borders, no boxes. Planes of washi paper sit on the ground with a soft shadow and a lot of air, and the empty space between them says what belongs together. You read the emptiness first, then the mark inside it.
- Outer margin, desktop
- 40 to 96px
- Outer margin, tablet
- 24 to 40px
- Outer margin, phone
- 16 to 24px
- Between clusters
- 64px
- Between planes
- 96px
- Border width
- 0px
One stroke, where you are
A single wet fude stroke pools under the live control, the focused field or the heading at hand. It is the only linework on the page, and it moves with you. Try the three below.
Planes sit on ma. Shadow is soft and grounded, never a border.
Three hands, one voice
Mincho sets the title, a quiet gothic carries the work, and labels stay the same gothic at a slightly wider tracking. Hierarchy is position and space before it is weight or colour.
Ink
Display, Zen Old Mincho 900, 56 to 120px here, 88 to 440px on the hero
Planes on ma
Heading, Zen Old Mincho 700, 34 to 86px
The work is read in a gothic that stays out of the way.
Body, Zen Kaku Gothic New 400, 17 to 19px, line height 1.75
Counts and labels
Label, Zen Kaku Gothic New 500, 17px, tracking .08em
One seal, kept for what is true
Vermilion is a seal, not a colour to spread around. It stamps a status, a count or a confirmation at a two degree tilt, and shows up once in a view. The same square comes in three states.
The ink is ground
Tokens, rules and the portable DESIGN.md are published with the language.
Read the DESIGN.md