Cha · Style guide

The quiet leaf, as built.

A working reference for Cha's design system. Every colour, type style and component below is drawn from the site's own stylesheets, so it always matches the live site.

Left
The name in code. Tokens start with --, classes with a dot.
Right
The real thing, rendered from css/base.css.
Specimens
For display only. Buttons and fields here don't do anything.

01

Paper and ink, lit by one green and one gold

Paper and ink carry the page. Green marks what matters on paper; gold does the same on the band. Never both at once.

Paper

  • --canvasThe page you're reading. Every light section; never pure white.
  • --canvas-cardLift state for hovered rows. A whisper of elevation.

Ink

  • --inkBody text and headings on paper.
  • --ink-softSupporting text: descriptions, captions.

Accent

  • --accentLinks, CTAs, active states, focus. Spent like ink.
  • --accent-deepHover and pressed fills; live timer numerals.

Lines

  • --hairlineInk at low opacity. The only border the system draws.

Band

  • --bandNight Pine. Hero, ritual, signup and footer.
  • --band-midThe lighter end of a band gradient.
  • --band-deepThe footer, and text on gold.

Gold and text on dark

  • --goldThe accent on the band only. Never on paper.
  • --on-darkWarm Paper reused as text on Night Pine.
  • --on-dark-softSecondary text on Night Pine, at 70 percent.

02

Set light, so scale does the talking

Fraunces at 300 for display, Karla for everything functional. Shown at true size, largest first. One italic word per headline carries the section's accent.

Headline

.section-title--serif 300 · section titles

What one cup quietly does

Title

--title-size--serif 400 · benefit names and ritual stops

Calm, steady focus

Small title

--title-size-sm--serif 400 · brew steps, where titles sit in a compact list

Measure and steep

Intro

.section-intro--sans 400 · under a section title

Five effects, in order of evidence. No miracle claims. Just what decades of research keep finding, cup after cup.

Body

body--sans 400 · running copy

L-theanine is a calming amino acid found only in tea. It rides alongside caffeine and softens its edges. The result is calm, steady focus that lasts for hours.

Label

.sec-kicker--sans 600 · kickers, nav, buttons

The ledger

On the band

Display

.hero-headline--serif 300 · the hero only

Steep slower. Live greener.

Headline

.section-title--dark--on-dark · italic in --gold

The day has a rhythm.

Label

.sec-kicker--dark--gold

A day in five cups

Intro

.section-intro--dark--on-dark-soft

Different hours ask different things of you. Match the steep to the moment.

03

Drifts, never bounces

Two curves carry every transition. Both leave quickly and arrive slowly. With reduced motion turned on, each demo rests in its finished state.

Ease out

--ease-outUse for anything the reader causes: reveals, button lift, the tea picker.

Ease soft

--ease-softUse for slow ambient change: the cup filling, steam.

Blob frame

.blob-frameUse for every photograph. The one non-geometric shape in the system; drifts over 18 seconds.
A steaming cup of green tea in soft golden morning light

04

Soft pills, unhurried hands

Every interactive surface is a full pill. Hover lifts 3px on the slow curve; press snaps back in 0.08s, the one fast transition in the system.

The specimens in this section are for display and don't perform any action.

Primary

.btn-solidUse for the one main action on a paper section.
Rest
Hover
Focus
Pressed

Secondary

.btn-ghostUse beside a primary, for the quieter path.
Rest
Hover
Focus

Toggle pill

.tea-pickUse to choose one option from a short set. The selected state lives in aria-pressed, not a class.
Rest
Hover
Focus
Selected

On the band

Gold

.btn-solid--goldUse for the big ask. Dark sections only, one per section.
Rest
Hover
Focus
Pressed

Secondary

.btn-ghost--darkUse beside the gold button on a dark section.
Rest
Hover
Focus

Email field

.form-groupOne pill holds the field and the button. Focus turns the pill gold; the message line underneath carries error and success.
Rest
Focus

That address doesn’t look quite right. Try once more.

Error

You’re on the list. Thank you.

Success

05

Four rules, kept quietly

  1. One accent, used like ink: green on paper, gold on the band, never both.

    Do
    Spend it on links, active states and CTAs.
    Don't
    Use it as a large fill.

  2. One italic word per headline, on the word that carries the weight.

    Do
    Pick the word with the emotional payload of the line.
    Don't
    Italicise for convenience, or italicise two words.

  3. Motion drifts on a slow exponential curve.

    Do
    Give every animation a complete static version for reduced motion.
    Don't
    Reach for spring, bounce or elastic curves.

  4. No pure white, no pure black, no shadow on anything that isn't floating.

    Do
    Keep shadow for photographs, the cup, a hovered button.
    Don't
    Shadow a static card or container.