If you design

Everything a designer uses is one Figma file, Pepper UI — open it. The Pepper Deck UI Kit and the site design file are frozen backups; read them, never write to them. Figma is where a value is authored — the repository records it and generates everything else, so what you set in a variable is what the CSS, the React theme, the chart palette and this site end up with.

What is in the file

The pages are in the bands the file itself is divided into:

• Foundations — Colour · Typography · Spacing & radius · Elevation & motion · Grid & layout · Icons & logos · Imagery · Writing rules · Tone of voice. Every rule on them carries why it exists, and every number names its token.
• Components — 62 pages, 134 sets and components across them, each with real component properties and the full five-state set (no thin components, ever). Every set carries its contract in its description — what it is, when to use it, when not to, what it relates to, its anti-patterns. The same text is on the component’s page here, because it is one text.
• Patterns — Content blocks · Data viz · Shells & navigation; Templates — Slide layouts · Web sections · Product screens; Utilities — Archive · Changelog.

5 variable collections, 370 variables:

Collection	Variables	Modes	What it is
Primitives	147	Value	the raw ramps, named ramp-and-number (blue/400). Hidden from the pickers on purpose — you are not meant to pick one
Semantic	131	Value	the jobs: text/default, surface/card, border/focus, action/primary/bg. This is where a fill comes from
Accent	18	blue · red · yellow · multicolor	the accent as a mode on the frame — set it once and everything that reads an accent role re-resolves
Typography	72	web-desktop · web-tablet · web-mobile · slide	the type roles per canvas — a slide and a web page differ by the mode, not by a hand-picked size — and a web page’s two section steps, layout/page-section-gap and -tight, so one mode on a frame sets both
Ground	2	page · card	the ground as a mode on the frame — a grey surface is one step darker than what it sits on, so set card on a product screen and every grey part on it follows. Hidden from the pickers: a component binds surface/sunken, never these

Your first screen

1. Set the accent mode on the top frame. Select the frame, open the variable-modes control, set Accent. The modes are blue, red, yellow, multicolor. MAFO is red (a product’s shell sets its mode once and every component under it reads it); a deck sets an accent on each slide and steps through the three so no two neighbours match. Yellow’s on-accent text flips to ink on its own: white on the brand yellow does not read, and that rule lives in the tokens, not in your judgement.

   A product screen also sets Ground to card on the same frame — the frame that paints surface/card. A grey surface is one step darker than the ground it sits on: on a white page a neutral KPI tile, an Avatar, a Skeleton are neutral/100; on the product ground that grey cannot be told from the ground, so there they are neutral/200, and the box of a segmented Tabs is white. The library’s own white containers — a white Card, the Topbar, a menu, the tile’s detail slot — put page back for what they hold; a white panel you draw yourself needs page set on it by hand.

2. Take components from Assets, never from another screen. Read the description before you place one — Use when · Do not use when · Relates to · Anti-patterns — and change what the properties offer: size, state, the label, the icon slots. If you find yourself detaching, the component is missing something; say so rather than drawing around it (how to ask, and what comes back, is Contributing).

3. Colour from Semantic, type from Typography. A fill is a role, not a colour: the same surface/card on every card is what lets a token change move every card. A text is a role — title/medium, body/large — and the role scales with the canvas mode (components whose type scales with the canvas bind the roles, controls keep their size primitives).

4. Before handing over, check one number: everything is bound. Select the screen and read the Inspect panel — no raw hex, no detached instance, no text off a role. Adoption of this system is measured as bound share (the adoption figure on the roadmap) — the company started at 41.0 % on Day 0, and a screen that leaves Figma fully bound is the only kind that can be built without a conversation.

Which component to reach for

The component board groups them by job, which is how a component is chosen; the rail sorts them by name, which is how one is found. Every name opens a page that renders the component, states its contract, and lists its modifiers. The workshop is the same components with the knobs, for when you want to try a state.

What is not in the library, on purpose

• Photographs. The Imagery page shows the slots, the placeholder and the media card’s gradient as the stand-in; the pictures themselves live in the deck’s photo library. A page that promises a photo it cannot hold is worse than one that says where the photo is.
• A component you need and cannot find. First the board, then the intake. A new component is built to the same nine-point bar as the rest.