Green Heart

Styleguide

The tokens this app is built from, rendered with the tokens themselves. Change a value in src/styles.css and this page changes with it.

Colour

--ink

Body text, and the darkest ground

--heart-deep

Dark sections and headers

--heart

Primary buttons and links

--pulse

Accent fills only

⚠ As small text on mist: 2.36:1 — fails as text

--pulse-deep

Green text, focus rings

As small text on mist: 3.26:1 — passes

--mist

Page background

--sage

Borders and dividers

--sun

One warm accent, used sparingly

--urban

Secondary text

The one rule worth memorising

Green text on a light ground is --pulse-deep. Green fill is --pulse. Every label on the marketing site was the wrong one until somebody measured it.

Type

text-display — Fraunces, for headlines

Každé město potřebuje zelené, tlukoucí srdce.

text-section — Section headings, fluid

Každé město potřebuje zelené, tlukoucí srdce.

text-lead — Standfirst under a heading

Každé město potřebuje zelené, tlukoucí srdce.

text-box — Body copy inside cards

Každé město potřebuje zelené, tlukoucí srdce.

text-overline — Small caps label above a heading

Každé město potřebuje zelené, tlukoucí srdce.

Radius

--r-sm

--r-md

--r-lg

--r-xl

Interaction

Tab through this page. Every focusable thing gets a visible ring, and it has to stay that way — the app is used outdoors, on a phone, often one-handed.

The star is a 44 px target with a small glyph inside it. That is the point of tap-target: the hit area is not the drawn shape.

On dark

On a dark ground, --pulse is fine

It reaches 4.32:1 here.

Contrast is a relationship, not a property of a colour. The same green that fails on mist passes comfortably on heart-deep.