Colour

Fresh & clean. A light base, graphite for strength, lime as the signature, and a few fresh accents.

Palette

Six colours. One star.

Tap a colour to copy its hex.

Provisional values. The direction is validated; the hex codes were presented as Color System v1.0 and may still move after tests on a real iPhone, in sunlight and for contrast. In code, always use a token, never a hard-coded hex. Semantic states (error, success, warning, disabled, focus) are not defined yet.

Balance

Mostly white. Flashes of lime.

The light background dominates. Lime pulls the eye to a few key moments. It is a signature, not an automatic fill for every component.

The app icon is the one place lime gets to be loud: a graphite h on a lime square. Inside the app, screens stay mostly off-white.

Tuesday

Your couch can wait.

This week

12.4 km

Start run

Contrast

Readable, always.

WCAG ratios for text on our colours. 4.5:1 for body text, 3:1 for large text and UI shapes.

Still counts.

Graphite on Off-white

17.7 · AAA

Still counts.

Graphite on Lime

15.9 · AAA

Still counts.

Lime on Graphite

15.9 · AAA

Still counts.

Off-white on Graphite

17.7 · AAA

Still counts.

Graphite on Soft lime

17.5 · AAA

Still counts.

Graphite on Sky

12.5 · AAA

Still counts.

Lime on Off-white

1.1 · Fail

Still counts.

Sky on Off-white

1.4 · Fail

Start run

✓A lime CTA carries graphite text or icons.

Plot twist. You actually like running now.

✕Never use lime as long text on off-white. It disappears.

✓Keep the identity recognisable in black and white: shape, type and motion carry it.

Everything is lime

so nothing stands out

✕Don't flood a screen with lime by default, or signal a state with colour alone.

Next up

Typography