How Stackable looks.

The visual half of our brand — colour, type, and the little hand-made touches. Pulled straight from global.css, so what you see here is what ships.

How Stackable sounds →

Colour.

Every swatch below is a live --token from global.css — not a copy. The brand runs on a warm cream ground, near-black ink, one amber pop, and a deep eggplant.

Foundation — the base three

Cream --background #F0EBE3 The page ground. The warm base everything sits on.

Ink --foreground #1A1A1A Body copy and headings. Near-black, never pure black.

White --card #FFFFFF Cards, polaroids, surfaces that lift off the cream.

Accent — the brand pop

Amber --primary #F2BC1B The signature pop. Primary buttons, highlighter swipes, active states.

Eggplant --primary-foreground #261526 The deep accent. Text on amber, emphasis, dark sections.

Neutrals — the quiet support

Off-white --muted #FAF7F4 Subtle raised panels and table headers.

Muted grey --muted-foreground #8A8278 Secondary text, captions, eyebrow labels.

Border --border #E8E3DA Hairlines, dividers, card edges.

Type.

Two workhorses and one accent. Fraunces carries the voice, DM Sans does the talking, Caveat is the human in the margin.

Fraunces --font-display Display serif. Headings and the page's editorial voice. Set at weight 500.

DM Sans --font-sans Body sans. Paragraphs, UI, buttons, labels. The everyday text.

Caveat handwritten accent The human voice — sticky notes, margin asides, signatures. Never for body copy.

The hand-made bits.

What stops us looking like every other tech company. Use them where they add warmth — never so many that a page gets noisy.

highlighter

Highlighter An amber swipe on the one word that matters. One per heading, max.

good idea →

Sticky note A handwritten aside, pinned. The human talking back to the formal copy.

Washi tape Divides sections like a scrapbook. Slightly tilted, never ruler-straight.

a moment

Polaroid Photos and people, framed and tilted. Handwritten caption underneath.

the old way

Strikethrough The status quo, crossed out by hand. Honesty over marketing.

— and a little aside

Handwritten aside Caveat in the margin. Honest, warm, a touch self-aware.

That's how we look. Here's how we sound.

Read the voice guide →