🧩 Design system

Stickers: the Unstuck design system

Thick ink outlines, hard shadows that press in when you tap, one bright colour per category, and Atkinson Hyperlegible for type. Every component below is cloned live from the real page and drawn with that page's own styles, with its markup and the CSS it uses. Each page gets a coverage check that lists any class not shown here.

Specimen width

Foundations

Tokens from src/styles/global.css, read live, so they follow the theme switch.

Surfaces and ink

--paper

--card

--sunk

--ink

--muted

--edge

--focus-ring

Category colours

--sun

--sky

--tomato

--mint

--lilac

--peach

--pink

Type · Atkinson Hyperlegible

.display

Stuck? Let’s go.

.h1

What’s in the way?

.h2

Skills by what you need

.h3

Shrink it to the first move

.lead

Pick what’s in the way. You’ll get the tiny first step.

body 17px

Make the goal the very first physical action, nothing more.

.eyebrow

⚡ Tiny version

.hl

Get you moving

Shape, outline and shadow

--r 18 · --shadow

--r-sm 12 · -sm

pill 999

dashed = “tiny”

Outline: --bw 2.5px. Shadow offset: --lift 4px; pressing a sticker moves it into its shadow.