Color
The palette is austere by design—Koko.
Philosophy
The palette is austere by design—Koko. Like sumi ink on handmade paper, the system finds its richness in restraint: a single hue (crimson), a near-black, and a warm-neutral ground. Additional tones exist only as functional necessities, never as decoration. This is a palette that does not tire the eye, one that rewards sustained viewing—the chromatic equivalent of a shibui object.
Primary Palette
The three primaries form the chromatic skeleton of every screen.
Crimson. Accent, logo, links, emphasis. The single point of colour in the system. CSS: var(--color-beni)
Ink. Primary text, headings, high-contrast elements. Not a pure black — it carries the warmth of aged ink. CSS: var(--color-sumi)
Japanese paper. Primary background. The colour of unbleached paper under soft light. CSS: var(--color-washi)
Secondary / Neutral Palette
Five neutral tones provide surface, border, and muted text contexts.
#F2F2F0
Fog. Lighter background for cards, alternating sections, hover states. CSS: var(--color-kiri)
#C8C8C4
Thin ink. The pale grey left when sumi is heavily diluted with water on washi. CSS: var(--color-usuzumi)
#A0A09C
Ash. Muted text, captions, disabled states. Large text only (≥18px). CSS: var(--color-hai)
#6B6B67
Mouse. Mid-tone for borders, dividers, subtle UI elements. CSS: var(--color-nezumi)
#1A1918
Night. Dark surface for inverted sections, footer, dark-mode base. CSS: var(--color-yoru)
Beni Scale — Interactive States
The crimson tint scale provides all interactive state colours: hover, visited, active, pressed, and highlight.
| Token | Hex | CSS Variable | Use |
|---|---|---|---|
| Beni Dark | #6A0818 | var(--color-beni-dark) | Active / pressed state |
| Beni | #900B20 | var(--color-beni) | Primary accent (default) |
| Beni Muted | #C75566 | var(--color-beni-muted) | Visited links, secondary buttons |
| Beni Light | #B83A4E | var(--color-beni-light) | Hover on light bg, dark-mode primary |
| Beni Pale | #F2D5DA | var(--color-beni-pale) | Selection bg, tag backgrounds |
Usage Ratio — 70 / 25 / 5
Use Beni sparingly — like the seal of a Hanko pressed once onto a page.
Contrast Matrix (WCAG 2.1)
All text pairings must meet at minimum AA (4.5:1 for body text, 3:1 for large text). The table auto-computes WCAG contrast ratios.
| fg \ bg | Washi | Kiri | Sumi | Yoru |
|---|---|---|---|---|
Sumi | 15.56:1 AAAAA | 17.32:1 AAAAA | 1.00:1 AAAAA | 1.11:1 AAAAA |
Beni | 7.46:1 AAAAA | 8.31:1 AAAAA | 2.08:1 AAAAA | 1.88:1 AAAAA |
Washi | 1.00:1 AAAAA | 1.11:1 AAAAA | 15.56:1 AAAAA | 14.07:1 AAAAA |
Beni Light | 4.48:1 AAAAA | 4.99:1 AAAAA | 3.47:1 AAAAA | 3.14:1 AAAAA |
Hai | 2.10:1 AAAAA | 2.34:1 AAAAA | 7.40:1 AAAAA | 6.69:1 AAAAA |
Rule: Never set Beni text directly on Sumi or near-black backgrounds (2.08:1 — fails all levels). For crimson-on-dark contexts, use Beni Light (#B83A4E) or switch to Washi text. Hai (#A0A09C) on Washi is ~2.7:1 — restrict to large text (≥18px) or decorative use only.
CMYK & Pantone — Print
| Colour | Hex | CMYK | Pantone |
|---|---|---|---|
Beni | #900B20 | C:22 M:100 Y:86 K:17 | Pantone 187 C |
Sumi | #0E0D0C | C:67 M:58 Y:53 K:76 | Pantone Black 6 C |
Washi | #E6E6E6 | C:0 M:0 Y:0 K:10 | Pantone Cool Gray 1 C |