Style guide
Two systems, one language. First the app's — copied from its own style guide screen. Then where the browser differs. Last, this site's own.
The app
The app's design system — a reference for development and design.
01 · Colors
- Washi#F5F2EA
- Sumi#211E19
- Zinnober#B5442C
- Green#5A7D5AExclusively for the “keep running” choice.
02 · Typography
03 · Controls
04 · Surfaces & lines
Light (washi)
Aa 風
Ink (sumi)
Aa 風
05 · Characters
風 静 寂 時 鍵 心 型
Meanings in the glossary: Settings → The characters.
06 · Rules
- Hairlines instead of cards, no shadows.
- Generous whitespace; page margin 26 pt, radii 12–14.
- Remaining times as h:mm, rounded up to the minute — sole exception: the 15-second pause.
- Green exclusively for the “keep running” choice.
- No statistics, streaks or accounts — deliberately simple.
Where the browser differs from the phone
This page replaces the style guide screen in the app. Where a value cannot be the same in a browser, it is named here rather than quietly adjusted.
The typeface matches only on Apple devices
The app uses Hiragino Mincho ProN, preinstalled on iOS. This page asks for the same face first; where it is missing it falls back to Yu Mincho, Noto Serif JP, Source Serif 4 and finally Georgia. On a Windows machine the specimens above therefore look different from the phone.
Sizes are in pixels, not points
The app measures in pt and scales through Dynamic Type. This page measures in px and scales with the browser's font size. The numbers are not directly comparable; the proportions are.
Dark mode has its own tones
The app derives its dark scheme from the same three base tones (ground sumi #211E19, accent vermilion #B5442C). This page carries its own dark row, frozen in the design mockup — ground #171511, accent #C9563C. The four values under Colors are therefore always the app's, not those of the page you are reading them on.
The controls are images of controls
Switch, button and capsule below are rebuilt to show shape, colour and proportion. They are not iOS components and they do nothing.
This website
These values are the ones in the site's stylesheet. They come from the same frozen design mockup as the app's — which does not make them identical everywhere.
Colours
Seven values, each of them twice: the site follows the system's light/dark setting. So does the app, with its own dark tones — which is why the numbers here differ from the ones above.
| Light | Dark | |
|---|---|---|
Ground--ground | #f5f2ea | #171511 |
Surface--card | #fbf9f3 | #1e1b16 |
Text--ink | #211e19 | #eae5da |
Text, muted--ink-soft | #6e675c | #a39b8c |
Line--line | #e0dacb | #33302a |
Accent (vermilion)--accent | #b5442c | #c9563c |
Accent for small text--accent-ink | #933723 | #d8735c |
Type
--serifHeadings, the name in the header, the characters in the glossary.
"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Source Serif 4", Georgia, serif
--sansBody text, labels, figures in tables.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Sizes
17 px · line height 1.7The base measure of the site.2 – 2.9 rem (home up to 4 rem)One per page, in vermilion.1.35 remSections.1 rem · weight 500The anchors in the handbook, the entries in the glossary.16 px, MinchoMeasured larger than body text so that it looks the same size.at most 62 charactersPast roughly 75 the eye loses the line.Navigation
- Five content pages in the header, in ink and in the Mincho.
- Privacy, imprint and this style guide live in the footer only, muted.
- The current page carries an underline in vermilion — it is the only signal now that every item shares one colour.
- Below 640 px a menu unfolds; above it the bar is spelled out.
Icons
Not part of the app's style guide screen — added on the website.
32 pxBrowser tab
180 pxHome screen (Apple)
192 pxHeader of this site
One character, one ratio, three sizes. All rendered from the same source as the app icon: Hiragino Mincho ProN W6 on vermilion, character height 660/1024 of the edge length, opaque without transparency. Below 32 px no separate image ships — 風 has nine strokes and is unreadable there at any stroke weight; what carries recognition then is the ground, not the character.