Palette
Every color is a CSS variable that responds to light/dark. Components reference semantic tokens (--accent, --surface), never raw hex. The accent is a single “mark” - roughly one vermilion moment per screen.
Typography
Three families: Zen Old Mincho (display + native script - its brush-derived strokes carry the concept), Zen Kaku Gothic New (UI & body), and JetBrains Mono (counts, intervals, tokens, IDs).
Buttons
Pill-shaped, generous hit targets (≥48px). Primary uses the vermilion fill; secondary is a hairline ghost; destructive is outlined, never loud. Press state scales to 0.97 and deepens the accent.
Form controls
Inputs sit on the highest surface with a strong hairline. A custom chevron on selects; the toggle uses the accent when on.
Badges & pills
Status and metadata read as calm tints, never hard fills. The four FSRS grade hues double as the badge palette.
Spacing, radii & elevation
A 4px base unit (4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64). Screens are sparse and centered - breathing room is intentional. Radii: 12 buttons/cards, 18 flashcards/sheets, 26 bottom sheets, pill for chips. Shadows are low, warm, and sumi-tinted - paper lifting off paper, never harsh.
Icon set
Phosphor, in the duotoneweight - the shared Bells & Pixels icon language. The two-tone fill (a solid figure over a faint ground) suits the paper-and-ink feel; icons inherit currentColor, so they sit in sumi by default and take the vermilion accent only where one is intended. Core review-loop glyphs below.
Note: the Phase-0 Android build still ships Material Symbols Rounded (from brand-kit/); migrating the app to Phosphor duotone is tracked separately.