Sticker

Sticker is a buttercream specimen sheet cut by five sunset stripes, stamped with monumental wide capitals and tiny pixel labels. It is warm, loud, playful and flat. Ink outlines and flat colour do all the work: no shadows, no blur. Light is native, and dark is the same sheet after sunset.

Read this before you add a screen, a component or a colour. The tokens live in src/app/globals.css, the faces in src/app/fonts.ts, the kit in src/components/ui/.

At a glance

Theme	Light native. Dark turns the sheet to carbon and keeps the stripes.
Type	Unbounded 800 capitals for display, Archivo for text, DotGothic16 pixel caps for labels and buttons.
Colour	Black ink on buttercream, a merlot accent (amber at night) and a five-band sunset: amber, ember, red, merlot, plum.
Shape	Pills act, 14px corners hold. Nothing rounder than 14px except a pill.
Depth	Flat. 1px ink outlines and colour. No shadows in light mode.
Signature	A carbon header strip, a tilted amber sticker, sunset stripes behind the product and a plum closing band.

Principles

1. Pills act, 14px corners hold.
2. Ink outlines, never shadows.
3. The sunset keeps its order: amber, ember, red, merlot, plum.
4. Capitals belong to display titles and pixel labels only.
5. Name left, pills right. Nothing centred.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fef9e6	#12110e	The page floor
surface-soft	#faf4de	#171612	Section bands, sidebars, table heads
surface-card (--muted)	#f6efd6	#1f1e1a	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ebe2c4	#2c2a24	Pressed fills, progress tracks
surface-solid (--popover)	#fffcf0	#1e1d19	Menus, selects, toasts: always opaque
card	#fef9e6	#1a1915	The card fill
surface-dark	#060606	#060606	The inverted panel
hairline (--border)	#c7c3b4	#34322b	Every border and divider
ink (--foreground)	#000000	#fef9e6	Headings and primary text
body-strong	#1c1b17	#f1ebd5	Emphasised body text
body	#33312b	#d8d2bd	Running text
muted (--muted-foreground)	#67645a	#aca796	Secondary text, captions
muted-soft	#8d8b80	#86826f	Placeholders, disabled text, icons at rest
primary	#060606	#fef9e6	The action colour
accent (--accent-fill)	#b4213d	#fdc331	The saturated accent: links, the accent badge
accent-soft	#fcecb0	#33290b	The tint an accent label sits on
danger (--destructive)	#c21d12	#ff6a55	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #256b2c, #8a4b00 and #c21d12 in light, #74cf7c, #ff9a4a and #ff6a55 in dark.

Sticker's own variables, read by the landing hooks and the kit: --band-1 (#fdc331 light, #fdc331 dark), --band-2 (#fe5722 light, #fe5722 dark), --band-3 (#f0353c light, #f0353c dark), --band-4 (#b4213d light, #b4213d dark), --band-5 (#671c3b light, #671c3b dark), --on-band-1 (#000000 light, #000000 dark), --on-band-2 (#000000 light, #000000 dark), --on-band-3 (#000000 light, #000000 dark), --on-band-4 (#fef9e6 light, #fef9e6 dark), --on-band-5 (#fef9e6 light, #fef9e6 dark), --flip (#060606 light, #fef9e6 dark), --on-flip (#fef9e6 light, #000000 dark), --on-flip-muted (rgb(254 249 230 / 0.72) light, rgb(0 0 0 / 0.68) dark), --on-dark-muted (rgb(254 249 230 / 0.72) light, rgb(254 249 230 / 0.72) dark), --dark-line (rgb(254 249 230 / 0.16) light, rgb(254 249 230 / 0.16) dark), --outline (#000000 light, rgb(254 249 230 / 0.4) dark).

How colour is used

• Buttercream is the only page colour, and floating panels sit on a slightly lighter cream. Never white, never grey.
• Black ink carries text and the 1px outlines. Driftwood hairlines divide inside things, and stone edges hold fields at rest.
• Merlot by day and amber by night is the accent: links, focus and small stickers, never a background behind body text.
• The five sunset bands always appear in order. Ink text sits on amber, ember and red; cream text sits on merlot and plum.
• Carbon is for strips and small dark things: the header, the footer, tooltips and the product window bar.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Merlot, ochre, dusk blue, ember, plum and stone, in that order. Every series clears 3:1 on the page in both modes, and stone is the natural Other. Assign them in order; never let colour be the only way to tell two series apart.

Dark mode

The palette is declared twice in src/app/globals.css: light on :root, dark under @media (prefers-color-scheme: dark) and again on .dark, where the class wins in both directions. @theme inline points every utility at those variables, so bg-canvas is one class that follows the mode. src/lib/design.ts sets the theme a first visit opens in: light here, because Sticker is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Unbounded (font-display): headings and display type.
• Archivo (font-body): running text and interface copy (with italics).
• DotGothic16 (font-mono): code, ids and tabular labels (weights 400).

Unbounded 800 gives squared, monumental wide capitals. Archivo is a calm grotesque that holds 14px interface copy, and DotGothic16 is a bitmap face for the pixel labels, keys and ids.

Every face loads through next/font/google in src/app/fonts.ts: downloaded at build time and served from this app. Change a face there and here, together.

Scale

Token	Size	Line	Tracking	Weight	Use
text-display-xl	88px	0.88	-0.02em	800	The hero headline, desktop
text-display-lg	64px	0.9	-0.02em	800	The hero headline, tablet
text-display-md	40px	0.95	-0.01em	800	Section headlines, the hero on phones
text-display-sm	32px	1	-0.01em	800	Section headlines on phones, big numbers
text-title-lg	24px	1.15	-0.01em	700	Page titles in the app
text-title-md	18px	1.25	-0.005em	600	Card titles
text-title-sm	16px	1.3	0	600	Small headings, table titles
text-body-lg	18px	1.4	0	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	14px	1.45	0	400	Interface copy, table cells
text-caption	13px	1.35	0	500	Metadata, helper text
text-caption-uppercase	14px	1	0.04em	400	Eyebrows above headings
text-button	14px	1	0.04em	400	Buttons
text-nav-link	14px	1.2	0	700	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Unbounded 800 sets every display step, 700 sets title-lg and 600 the smaller titles, in sentence case except the hero, section and closing titles. Archivo carries running text, nav links, labels and FAQ questions. DotGothic16 stays at weight 400 and 13px or more, in capitals for buttons, eyebrows, badges and table heads, with case kept for Kbd, ids and keys.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 40px, section 80px (the gap between landing sections).
• Content sits in max-w-content (1280px) with px-md on phones and px-lg from sm up. Reading text stops at max-w-measure (672px).
• Sections use the 80px section step and are split by full-bleed driftwood rules.
• Cards pad 24px top and bottom and 27px at the sides. Grid gaps are 16px.
• Every heading sits left. In the hero and the closing band, copy sits left and pills sit right.

Shape and depth

Token	Value	Where
rounded-xs	4px	Breadcrumb, Checkbox, Kbd
rounded-sm	7px	Accordion, DropdownMenu, Select, Skeleton, Tabs, Tooltip, the landing page
rounded-md	14px	Input, the landing page
rounded-lg	14px	AlertDialog, Alert, Card, Dialog, DropdownMenu, Popover, Select, Toaster, the landing page
rounded-xl	14px	The landing page
rounded-pill	9999px	Accordion, Badge, Button, Dialog, Progress, Sheet, Switch, Tabs, Toaster, the landing page
rounded-full	9999px	Avatar, RadioGroup, Switch

Buttons, badges, tabs, switches and avatars are pills. Cards, dialogs, menus, inputs and the product window take 14px corners; checkboxes and Kbd take 4px, menu items, tooltips and skeletons 7px. Depth is a 1px ink outline and colour. Light mode has no shadows at all, dark adds one drop under menus and dialogs, and both keep a 3px focus halo.

Components

Every component lives in src/components/ui/ and is written against the tokens above. Import from there; never restyle a kit component inline to make a one-off.

Component	In Sticker
Button	A pill with a 1px border on every variant and a pixel caps label at 14px, weight 400. Primary is carbon with a cream label (cream with carbon at night), outline is an ink ghost pill that inverts on hover, secondary is manila, ghost has no line and danger is scarlet. Link is the one Archivo exception: merlot and underlined. Sizes are 32, 40 and 52px tall, plus a 40px icon circle.
Badge	A pill in Archivo at 13px, sentence case: neutral, accent (butter with merlot), success, warning and danger on soft tints. The uppercase option turns it into a pixel caps sticker label with a 1px ink edge.
Card	14px corners, a 1px ink outline, cream like the page, no shadow. Tones: soft, strong, a dashed die-cut outline for empty states and drop zones, and dark. Titles are Unbounded 600 in sentence case.
Input, Textarea, Select	40px tall, 14px corners, a stone edge on the lighter cream that turns ink on hover. Focus adds an ink edge and the merlot halo (amber at night). The mono option switches to the pixel face and keeps the typed case. Select menus are ink-outlined panels with butter highlights.
Checkbox, RadioGroup, Switch	An 18px checkbox with 4px corners and an 18px radio, with stone edges that turn ink on hover and carbon when checked. The switch is an ink-outlined pill, deep cream when off and carbon when on.
Tabs	Pill triggers in Archivo 600, sentence case. The active one is a carbon pill. The line variant uses a driftwood rule and a 2px ink bar.
Accordion	Rows split by driftwood hairlines under one ink rule, questions in Archivo 600. The chevron sits in an outlined circle that turns and inverts to ink when open.
Dialog, AlertDialog, Sheet	A carbon scrim at 60% with no blur. Panels sit on the lighter cream with an ink outline and 14px corners; sheets are square with one inner ink edge. Titles are Unbounded in sentence case, and footers are right-aligned pills.
DropdownMenu, Popover, Select content, Tooltip	Ink-outlined panels on the lighter cream, with 7px items that highlight in butter. Labels and shortcuts use the pixel face. Tooltips are small carbon tags in Archivo, with a faint cream edge at night.
Table	A soft header band with pixel caps heads and an ink rule under it, driftwood rows, a deeper cream hover and butter for selected rows. Numbers are tabular: right-align them, and set ids and keys in the pixel face.
Alert	14px corners, the matching soft tint and a 1px line in the status colour at 35%. Info uses butter with a merlot icon.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with a faint ink edge, and fallbacks are butter stickers with bold ink initials. Progress is an ink-outlined pill track with a carbon fill (cream at night). Skeletons pulse on deep cream, spinners follow the text colour and separators are driftwood. Kbd is a pixel keycap with a 2px bottom edge, breadcrumbs end on the current page in semibold ink, and pagination uses pixel numerals on 40px ghost circles. Labels are Archivo 600, legends are pixel caps, errors are scarlet, and toasts are ink-outlined panels with a carbon pixel caps action pill.

The landing page

The landing page is the same in every design; the design decides how it looks. Its sections carry data-slot hooks (listed at the top of src/components/marketing/section-heading.tsx) that globals.css may style. Sticker styles these:

• site-header: a carbon strip. It re-points the palette inside, so the brand, nav and buttons read cream on carbon, and its primary button becomes an amber pill that turns ember on hover.
• site-nav: links in Archivo 700. The current page turns amber.
• brand: the product name in Unbounded 800 capitals.
• brand-mark: a disc of the five sunset stripes. The letter stays in the DOM and is hidden. When you put your own logo in brand-mark, delete the brand-mark and brand hook rules.
• hero-backdrop: hidden. The hero is flat buttercream with no wash.
• hero: everything sits left. From 64rem the subtitle sits left and the actions and note sit right.
• hero-eyebrow: an amber pixel caps sticker with an ink edge, tilted 2 degrees. As a link it straightens and turns ember on hover.
• hero-title: a full-width wall of Unbounded 800 capitals.
• hero-visual: five sunset stripes start 30% down behind the product and run to both screen edges.
• product-preview: a flat window with a 1px ink edge, 14px corners and no shadow.
• product-preview-bar: carbon, with amber, ember and red dots.
• section: a full-bleed driftwood rule between sections. The logo strip starts close under the hero.
• section-heading: left-aligned, never centred.
• section-eyebrow: 14px pixel caps in stone after a small sunset disc.
• section-title: Unbounded 800 capitals.
• logo-cloud and logo: a specimen grid of equal cells joined by driftwood hairlines, with wordmarks in Archivo 700 ink.
• feature-card: every second card is the flip side, carbon by day and cream by night, so three columns read as a checkerboard. From 40rem each card shows its pixel number, 01 to 06, in the top corner.
• feature-icon: a 48px sticker disc in the next sunset colour.
• showcase-visual: each picture sits on a flat stage in the next band colour, outlined in ink.
• step-marker: a 48px sticker disc in the next band colour with a 20px pixel numeral. A dashed ink line joins the steps.
• stat-grid, stat and stat-value: an arcade scoreboard. One ink frame split by ink lines, big Unbounded numbers over pixel caps labels.
• faq: an ink rule on top, Archivo 600 questions, and each chevron in an outlined circle that inverts when open.
• cta-band and cta-panel: four 16px stripes fall into a full-bleed plum band. Title and text sit left, cream pills sit right, and the band meets the footer with no gap.
• site-footer: carbon under the plum band, re-pointed like the header, with pixel caps column titles.

Everything else is type, space and the kit.

Signed-in screens

Dashboard and settings sit on buttercream with a deeper-cream sidebar, the active item on butter, Unbounded 700 page titles in sentence case, and tables with pixel caps heads over driftwood rows. Sign-in is one ink-outlined cream card with stone fields that turn ink on focus and a full-width 52px carbon pill.

Do and don't

Do

• Put every page on buttercream (bg-canvas) and every floating panel on bg-popover.
• Show the sunset in its fixed order whenever more than one band appears: amber, ember, red, merlot, plum.
• Set ink text on amber, ember and red, and cream text on merlot and plum (--on-band-N).
• Make every action a pill with a pixel caps label, and every container a 14px rectangle.
• Outline cards, outline buttons and pictures in 1px ink. Divide inside them with driftwood hairlines.
• Open every landing section with a pixel eyebrow and its sunset disc, then a left-aligned Unbounded 800 capital title.
• Keep display type tight: line-height 0.88 to 1, tracking -0.01em to -0.02em.
• Use carbon (surface-dark) for strips and small dark things: the header, footer, tooltips and the product window bar.

Don't

• Don't add a shadow, blur or glow to anything that sits on the page. Depth is lines and colour.
• Don't add a sixth band colour, reorder the stripes, or blend them into a smooth gradient.
• Don't put cream text on amber, ember or red. It fails contrast (1.5 to 3.8:1).
• Don't set the pixel face above weight 400 or below 13px, and don't use it for sentences.
• Don't uppercase running text, card titles, tabs or app page titles.
• Don't round anything past 14px except a pill, and don't square off a button.
• Don't centre band content or section headings. Name left, pills right.
• Don't put merlot, amber or a band colour behind body text. The accent is for links, focus and small stickers.

Working in this design

Pasting from shadcn/ui. The token layer carries shadcn's variable names, so most snippets render unmodified. Two utility names mean something else here: bg-muted becomes bg-surface-card, and bg-accent / text-accent-foreground (a hover surface upstream) become bg-surface-card / text-ink. Here muted is a text colour and accent is the saturated accent.

Adding a token. Add it to all three palette blocks in globals.css (light, the dark media query, .dark), map it in @theme inline, and document it in the palette table above. Check contrast in both modes.

Adding a component. Check the kit first: most needs are a variant of Button, Card or Badge, or a composition on the page. A new component gets its own file in src/components/ui/, token classes only, a data-slot, and a row in the Components table here. The designer subagent owns this.