Colors

Five canonical colors: Washi, Millennium Washi, Kodama, Sumi, and Kin. Every swatch below is read live from the published tokens — click any chip or value to copy it.

Background

primary#fffef5var

secondary#f7f5davar

dark mode#1b3848var

Text

primary#1b3848var

on dark#fffef5var

support#8a9a82var

Border

default#fffef5var

subtle#1b3848var

Brand primitives

white#ffffffvar

kin#ffc916var

sumi#1b3848var

millennium washi#f7f5davar

kodama#8a9a82var

washi#fffef5var

Two tiers

The system has two tiers. Semantic tokens (--color-text-*, --color-background-*, --color-border-*) describe a job and are what code should use. Brand primitives (--color-brand-*) define the palette so the semantic tokens have something to point at — reach for them only when no semantic token fits. Write var(--color-text-primary), not var(--color-brand-sumi): if the brand ever re-points its text color, code using the semantic token follows automatically.

Using color

• The washi tones carry everything. Washi and Millennium Washi carry nearly every surface — backgrounds, cards, large fields. The identity should feel like paper, not like a screen.
• Sumi is the voice of the type. Body text, headings, primary UI on light backgrounds.
• Kodama supports. Dividers, quiet accents, secondary states. Never a shout.
• Kin is a gleam, never a background. A rule, a small mark, a single moment on a page. If a layout feels busy, the fix is less Kin, not more.
• Do not invent tints, shades, or opacities. If a value is needed that doesn’t exist, it goes into Tokens Studio first — not into a stylesheet.

Contrast

--color-text-support (Kodama, #8a9a82) is named for captions and secondary labels, but only reaches 2.95:1 on Washi and 2.71:1 on Millennium Washi — both below WCAG AA (4.5:1) for text. Treat it as decorative until it’s re-pointed at the source; don’t use it for anything someone needs to read. --color-text-primary (Sumi) clears AAA (11–12:1) on both backgrounds — use it for any real body copy.

The live source

The authoritative token file is https://assets.cocolotravel.com/brand/tokens.css — this page (and every COCOLO app) reads from it directly. Nothing here is a hand-copied value that can drift out of date.