UCK CARPETBrand kitBack to the site

Kit · Foundations

Colour, type & surface

Every token lives in src/app/tokens.css. Use the token, never the hex — the hexes below are rendered from the tokens themselves, so this page cannot go stale.

Colour

Light mode first: white pages, deep purple ink, marigold for punch. Inverse purple-950 bands carry the drama — heroes, footers, the villain callouts.

Marigold is for emphasis and CTAs only. Never body text on white; it does not carry the contrast.

Purple

50surface tint
100
200
300
400
500
600brand
700
800
900
950ink · text

Marigold

50
100
200
300
400accent · CTA
500
600
700
800
900

Type

One family across the whole system, no second typeface. Headlines ALL CAPS at --leading-display; body sentence case. Only the Ultrabold cut ships, so every display weight resolves to Ultrabold — the Black cut was dropped on purpose because its closed counters hurt legibility.

Display · PP Neue Corp Compact Ultrabold

Your carpet is gross. We’ll say it.

Body · PP Neue Corp Normal Medium

Carpet holds onto everything — bacteria, VOCs, every accident every pet ever had. We tear it out and lay floors that actually come clean.

Surface & shadow

The signature is a hard offset shadow with zero blur against a decisive 2px purple border. Flat colour fields, small sharp radii, nothing bubbly, no gradients. The soft shadow exists only for dialog overlays.

--shadow-punch · 4px 4px 0
--shadow-punch-sm · 2px 2px 0
--shadow-punch-accent · marigold

Motion

Fast and snappy: --dur-fast 120ms, --dur-med 220ms, --ease-snap. Hover darkens and grows the shadow; press is the stomp — translate 2px with the shadow collapsing under it. No fade-ins on scroll, no bounces.