Identity · 04

Color

Three core colors do most of the work. Everything is defined in oklch and generated from a single token source — so these swatches and the app read the exact same values.

Core

The brand anchors. Treat Coral as a spice, not a base.

ink

--uprys-ink

bone

--uprys-bone

coral

--uprys-coral

Full palette

Ink

--color-ink-50…950

Primary text & dark surfaces. 900 is the brand navy.

Coral

--color-coral-50…950

Accent & emphasis. 500 is the brand coral.

Stone

--color-stone-50…950

Warm neutrals — backgrounds, borders, captions.

Mist

--color-mist-50…500

Cool secondary surfaces and quiet panels.

Success

--color-success-50…700

Positive status, confirmations.

Warning

--color-warning-50…700

Caution, pending states.

Error

--color-error-50…700

Errors, destructive actions.

Info

--color-info-50…700

Neutral information.

Usage ratio

Bone · 60%

Ink · 30%

Coral · 10%

Treat Coral as a spice, not a base. If a layout reads as “coral first,” pull it back. The accent should land, then disappear.

Contrast checker

Pick any foreground and background — or a brand swatch — and check it against WCAG AA/AAA, live.

Foreground

Background

17.05: 1 contrast

AA · normal

AA · large

AAA · normal

AAA · large

Elevating organizations.

Body copy at a normal size — the quick brown fox jumps over the lazy dog.

Caption / fine print at 12px.

Reference pairings

Bone on Ink

14.8 : 1

AAA

Ink on Bone

14.2 : 1

AAA

Ink on Coral

5.1 : 1

AA Large