# Kwik — Software Build Rules Companion to brand.kwik.com (Story · Logo · Color · Type · Font · Icons · Voice). The brand kit governs marketing and print; **this file governs product UI** — the Kwik rep/admin dashboards, the brand app, the ambassador app and the widget. Every value is taken from shipped Kwik product code — the Kwik Rewards app at kwik-app.vercel.app (`src/styles.css` + `Home.tsx`, verified against the live Kwik-branded build) — and the Kwik rep dashboard. Version 2.1 (2026-10-19) replaces the pastel-tile system. Visual spec: https://brand.kwik.com/software · Tokens: https://brand.kwik.com/tokens.css · https://brand.kwik.com/tokens.json --- ## 0. The eight rules that matter most 1. **One typeface: Kwik (our build of Poppins).** Weights 400 / 500 / 600 / 700. Base 14px, line-height 1.4. 800 is the wordmark only. 2. **Ink is the action colour, yellow is the accent.** Primary buttons, active segments and the active view pill are Ink `#0B0B0F`. Yellow `#FFD836` is for the accent bar, the one commit/accent button on a page, the #1 rank badge, the chart series, the switch-on state and small highlights. Never a page background. 3. **Flat white cards on a soft grey canvas.** Canvas `#F2F2F3`; cards `#FFFFFF`, radius **20**, padding 18 (20 feature, 24 wide dashboards), **no border and no shadow at rest** — the canvas contrast does the lifting. `--k-shadow` appears only on hover of a tappable card and on floating layers (sheets, menus, scrolled topbar). Inner panels and inputs are radius 14. 4. **Cards are text-led.** Two header forms, nothing else: (a) **app section title** — 18/700 with a right-aligned 13/600 link ("All giveaways ›"), no decoration; (b) **dashboard card header** — an 8×24 rounded-3 **accent bar** then a 16/600 title, for data cards on admin/rep dashboards. The bar is yellow by default; a second group on the same screen may use peach `#FDBA9A` — the only two bar colours. **No coloured icon tiles, no coloured squares, no pastel fills on cards.** The one icon box allowed is the stat tile's 36px white box with a hairline. 5. **No blue anywhere.** No navy, indigo, violet-tinted or teal-tinted greys. Greys are warm-neutral (`#6A6A70`, `#84848A`, `#EDEDEF`, `#F4F4F5`). Notices use yellow-soft `#FFF6CC`, never blue. 6. **Two dark surfaces, used sparingly.** The **summary card** is true Ink `#0B0B0F` with white text and a yellow sparkline — one per screen, for the headline number. The **feature card** is soft grey `#E6E6E9` with dark text (cash balance, lifetime earnings, countdowns). Everything else is white. 7. **Radii are role-locked**: 20 cards, sheets · 16 media images, the user panel · 14 inner panels, inputs, segmented tracks · 12 inline-form buttons, nav items, icon buttons, notices, value tiles · 10 segments, the stat-tile icon box · 999 buttons, chips, pills, search, avatars, rank badges, switches, brand marks. 8. **Numbers are the hero.** Tabular numerals everywhere. Dashboard headline metric 36–40/700 −.02em with a 13px muted subline; the cash amount on the feature card is 52/800 −.04em; stat tiles 24/700 −.02em. Buttons are **pills** (radius 999, height 48, 15/600) — except an action sitting inline next to an input, which is radius 12 / height 44 to align with it. --- ## 1. Brand in product - Sidebar brand row: the **Kwik.** wordmark, black, 32px tall. Never the yellow lockup inside the app. - Reversed (white) wordmark only on true-Ink surfaces (summary card, mobile black footer) and marketing. - Wordmark min 88px wide; below that use the **K.** mark (favicon, avatar fallback — yellow circle, black K.). - Clear space = the height of the dot on every side. Never recolour, outline, stretch, shadow or rotate. - Greeting: in the app, time-aware — "Good afternoon, Brady" 26/700 −.02em over a 14px muted line ("Here's everything across your 4 brands."). On dashboards: overline date with a leading 8px yellow dot → "Hey {firstname}" 28/600 → optional yellow-soft notice → helper line. Page titles 28/700 −.02em. ## 2. Voice in the product Talk like a human. Casual, not jokey — early-Mailchimp. Short sentences, one idea each, contractions welcome. - Page subtitles explain the job: "Month-to-date sales, independent of the chart range." - Helper text states the rule plainly: "Weekly pace means five working days; weekends are excluded." - Empty states: what's missing + one verb. "No target set for this month." / "No sales in this period." - Nudges are friendly and specific: "Add your profile photo so customers can see you on Kwik." - Success and system messages: no exclamation marks, no hype. Say what happened, then what to do. - Words we love: simple · fast · earn · share · rewards · easy · you · real · clear · make waves. - Words we skip: leverage · synergy · revolutionary · best-in-class · utilize · seamless · disrupt · solutioning · world-class. - Currency with symbol, thousands separators, two decimals in tables (`$6,794.00`); whole dollars in headline metrics (`$6,957`); big rounded numbers allowed in summary tiles (`$2.2M`, `58.2k`). Dates: overline `MONDAY, OCTOBER 19`; prose `Sep 12, 2026`. ## 3. Color ### Primitives (light) - **Ink** `#0B0B0F` · ink-2 `#3A3A40` · muted `#6A6A70` · faint `#84848A` - **Yellow** `#FFD836` brand · soft `#FFF6CC` · ring `#FFEFC2` · deep `#D99A00` (dots/text on white only) - **Peach** `#FDBA9A` — the only secondary accent-bar colour - **Surfaces** canvas `#F2F2F3` · card `#FFFFFF` · chip `#F4F4F5` · feature `#E6E6E9` · summary `#0B0B0F` - **Lines** hairline `#EDEDEF` · input `#E7E7E9` · row divider `#F0F0F2` · progress track `#ECECEF` - **Status** green `#138A5B` / `#1FB57A` on `#E3F6EC` · red `#C2410C` on `#FEE2E2` · orange `#B4471A` · pending dot `#D99A00` ### Semantic — light | Role | Token | Value | |---|---|---| | App canvas | `--k-bg` | `#F2F2F3` | | Card / sidebar / topbar | `--k-card` | `#FFFFFF` | | Recessed (chips, segmented track, ghost button, rank badge) | `--k-chip` | `#F4F4F5` | | Primary action | `--k-action` | `#0B0B0F` | | Accent | `--k-accent` | `#FFD836` | | Accent soft (notice, active nav, tinted panel) | `--k-accent-soft` | `#FFF6CC` | | Focus ring | `--k-accent-ring` | `#FFEFC2` | | Secondary accent bar | `--k-peach` | `#FDBA9A` | | Value tile (rewards) | `--k-accent-soft` | `#FFF6CC` | | Hairline | `--k-line` | `#EDEDEF` | | Input border | `--k-line-2` | `#E7E7E9` | | Row divider | `--k-row` | `#F0F0F2` | | Text primary / secondary / muted / faint | `--k-text` `--k-text-2` `--k-muted` `--k-faint` | `#0B0B0F` `#3A3A40` `#6A6A70` `#84848A` | | Summary card | `--k-summary` / `--k-on-summary` | `#0B0B0F` / `#FFFFFF` | | Feature card | `--k-feature` / `--k-on-feature` | `#E6E6E9` / `#3F3F46` | ### Dark mode (supported, optional) Near-black page, slightly lighter cards, light ink; the accent stays the one bright colour. canvas `#0D0D0F` · card `#18181B` · chip `#232328` · line `#26262B` · line-2 `#303036` · text `#F4F4F5` · text-2 `#D4D4D8` · muted `#A1A1AA` · faint `#8B8B93` · accent-soft `#3A3214` · ring `#5C4E12` · feature `#222227` · green `#4ADE80` · red `#F87171` · shadow `0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)`. Primary buttons invert (light on dark). Toggle via `html[data-mode="dark"]`. ### Money & delta rule Up/positive `#138A5B` with `▲` · down/negative `#C2410C` with `▼` · neutral `#6A6A70`. Money is never yellow — yellow is the series colour in charts, not the number. Positive amounts on a feature card use `#0E744B`. ## 4. Typography Family: `'Kwik', 'Poppins', system-ui, sans-serif` (Kwik = our licensed build of Poppins; Poppins from Google Fonts is a drop-in). | Style | px / weight / lh | Use | |---|---|---| | feature-amount | 52 (clamp 40–52) / 800 / 1, tabular, −.04em | Cash balance on the feature card | | hero-metric | 36–40 / 700 / 1.05, tabular, −.02em | The one headline number on a dashboard | | stat-value | 24 / 700 / 1.2, tabular, −.02em | Stat tile value | | page-title | 28 / 700 / 1.15, −.02em | Page H1; app greeting is 26/700 | | app-section-title | 18 / 700 / 1.3, −.01em | "Ending soon", "Closest rewards" + 13/600 link | | summary-metric | 28 / 700 / 1.1, tabular | Number on the Ink summary card | | card-metric | 20 / 700 / 1.2, tabular | Numbers inside stat tiles and list rows | | dashboard-card-title | 16 / 600 / 1.3 | Card header after the accent bar | | body-strong | 14 / 600 | Row title (`li-title`), segment label; nav items and pill-button labels are 15 | | body | 14 / 400 / 1.4 | Prose, table cell | | value | 14 / 700, tabular | Right-aligned money in lists | | label | 12 / 600 | Field label ("Dollar target"), list meta | | caption | 12 / 400 / 1.4 | Helper, timestamp, axis labels (11) | | overline | 11 / 500 / 1.2, tracking .08em, uppercase | Date line, summary-card label ("TODAY"), table header | - Tabular numerals on every metric and table numeric. Numbers right-aligned in lists and tables. - No letter-spacing except the overline and the negative tracking on hero numbers. ## 5. Spacing, sizing, radius Space: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 Heights: button 48 (sm 36, xs 30; inline-form 44) · input 48 (inline 44) · search 40 · chip 32 · segment 38 · pill 22 · nav item 46 · icon button 44 · stat-tile icon box 36 · value tile 52 · list row 56–64 · topbar 76 (64 mobile) · sidebar 256 · media image 280 Radius: **20** cards, sheets · **16** media images, user panel · **14** inner panels, inputs, segmented track · **12** inline-form buttons, nav items, icon buttons, notices, value tiles · **10** segments, stat-tile icon box · **999** buttons, chips, pills, search, avatars, rank badges, switches, brand marks. Card padding 18 (16 stat tiles, 20 feature card, 24 wide dashboards) · card gap 16 (stat grid 12) · section gap 20 · page max-width 1480, padding 24 28 40 (8 16 32 mobile). ## 6. Strokes & elevation ```css --k-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); /* hover on tappable cards; sheets, menus — NOT resting cards */ --k-shadow-seg: 0 1px 3px rgba(0,0,0,.10); /* active segment on a light track */ --k-hairline: 1px solid #EDEDEF; /* sidebar edge, table header, topbar when scrolled */ --k-input-line: 1px solid #E7E7E9; /* inputs, outline buttons */ --k-row-line: 1px solid #F0F0F2; /* list rows, table rows */ --k-focus: 0 0 0 3px #FFEFC2; /* focus ring on amount fields; plain inputs just turn the border Ink */ ``` Cards carry neither border nor resting shadow (the stat tile's icon box and the search field are the two hairline exceptions). Buttons, chips, pills, inputs and rows never carry a shadow. Press feedback: `transform: scale(.97–.99)` for 120ms on anything tappable. ## 7. Component specs ### Section title (app) Row `space-between`, margin-bottom 12. Title 18/700 −.01em Ink. Right: a text link 13/600 Ink with a 14px chevron ("All giveaways ›", "Loyalty ›"). No bar, no icon. Used for every list/feed card in the app (Ending soon, Closest rewards, Your Waves). ### Accent bar + card header (dashboards) `8×24`, radius 3, yellow `#FFD836` (secondary group: peach `#FDBA9A`), then 10px gap, then the title 16/600 Ink. Optional trailing control on the same row: an icon button (refresh), a text link or a dark segmented filter right-aligned. **Nothing else precedes a title** — no icon, no tile, no coloured square. ### Button | | Default | Small | XS | Inline (next to an input) | |---|---|---|---|---| | Height | 48 | 36 | 30 | 44 | | Padding | 0 20 | 0 14 | 0 12 | 0 18 | | Label | 15/600 | 13/600 | 12/600 | 14/600 | | Radius | 999 | 999 | 999 | 12 | - **Accent** `#FFD836` fill, Ink label — the primary CTA in the app (Cash out, Get more entries, Copy my link). One per view. - **Black** Ink fill, white label — the primary on admin/rep dashboards (Save target, Create, Export) and any second-rank action in the app. - **Dim / White** white fill, Ink label, no border — the secondary beside an accent button (Activity, the AFCU •••• 0868 payout chip) and on the feature card. - **Ghost** `#F4F4F5` fill, Ink label. **Outline** white, 1px `#E7E7E9`, Ink label. - `block` stretches full width; `grow` shares a row equally. - **Link** no box, 13/600 Ink with trailing chevron; underlined 12px for inline edits ("Edit"). - Disabled: fill `#CFCFD4`, white label, `cursor:not-allowed`. Loading: 16px spinner in currentColor, width held. - **Icon button** 44×44, radius 12, no fill; hover `#F4F4F5`. ### Segmented filter Track `#F4F4F5`, padding 4, radius 14, gap 4. Segment height 38, radius 10, 13/500 muted. Active: white fill, Ink, 600, `--k-shadow-seg`. **Dark variant (dashboards)**: transparent track, padding 0; active segment = Ink fill, white label (the "1D · Yest · 1W …" range picker). ### View switch Pill track `#F4F4F5`, padding 4, radius 999. Segment height 36, radius 999, padding 0 16, 13/600 muted. Active: Ink fill, white label ("Admin view" / "Rep view"). Use for two-to-three mutually exclusive views; use the segmented filter for ranges. ### Chip Height 32, padding 0 12, radius 999, `#F4F4F5`, 13/600 Ink, optional leading 14px icon. `on` state: Ink fill, white. ### Status pill Height 22, padding 0 8, radius 999, 11/600. Green `#E3F6EC`/`#138A5B` (live, verified, up) · accent `#FFD836`/Ink · gray `#F4F4F5`/`#6A6A70` (draft, pending) · dark Ink/white. Delta pill: arrow glyph leading. ### Input / select / textarea Label 12/600 muted → 6px → field. Field height 48 (44 inline next to a button), radius 14 (12 inline), white, 1px `#E7E7E9`, padding 0 14, 15/400 Ink, placeholder `#D4D4D8`. Focus: border Ink. Error: border `#EF4444` + helper 12 `#C2410C`. Disabled: `#FAFAFA`, text `#A1A1AA`. **Amount field**: height 76, radius 12, 1.5px `#E7E7E9`, leading `$` 700 muted, value 700 −.02em; focus `--k-focus`. Select chevron 16 `#84848A`, 14px from the right. Textarea min-height 96. Search: a pill — height 40, radius 999, `#F2F2F3`, 1px `#EDEDEF`, padding 0 14, width 260 in the topbar, leading 16px magnifier, 13px input, placeholder `#84848A`. ### Checkbox / radio / switch Checkbox 18, radius 4, 1px `#D4D4D8`; checked Ink fill, white check. Radio 18, radius 999; checked 2px yellow ring, Ink dot. **Switch** 40×22, radius 999, off `#E7E7E9`, on `#FFD836`; knob 18 white with `0 1px 3px rgba(0,0,0,.2)`, 200ms spring. ### Card Radius 20, white, padding 18 (16 stat tiles, 20 feature card, 24 wide dashboards), **no border, no shadow at rest**. Internal gap 16–20. Header: app section title or dashboard accent-bar header. Internal split: 1px `#F0F0F2` divider. Tappable cards (`tap`): hover gains `--k-shadow`, active `scale(.99)`. A `soft` card nested inside a white surface turns `#F2F2F3`. - **Hero metric card**: header row (bar + title + refresh icon button + right-aligned dark segmented filter) → value 36–40/700 → 13 muted subline → chart (see §Charts) with legend top-right. Below a 1px divider, a second group (bar + title + 13 muted subtitle) can share the card. - **Summary card (Ink)**: `#0B0B0F`, radius 20, padding 24. Overline 11/500 `rgba(255,255,255,.6)` → 28/700 white tabular → 12 `rgba(255,255,255,.6)` meta → yellow sparkline (1.8px stroke, no area) anchored bottom-right. One per screen. - **Feature card (soft)** — the Cash card: `#E6E6E9`, radius 20, padding 20, gap 16. Header row: "Cash" 14 `#3F3F46` left, delta 12/600 `#0E744B` right ("▲ $86.20 this month"). Amount 52/800 −.04em (clamp 40–52) Ink. Legend: 12px `#52525B` with a 6px ● (green `#1FB57A` Available, yellow `#FFD836` Pending) over 18/700 values. Mini bar chart beside it: 6 months, bars 30 wide radius 8, height 20–80, `#D4D4D8` with the current month `#1FB57A`, 10px `#63636B` month labels. Optional 96×34 green 2.2px sparkline. Inner split panel: white radius 14, cells padding 12 14 with a 1px `#D6D6DA` divider. Actions: accent pill (Cash out) + white pill (Activity) + white outline pill (payout method), equal width. - **Stat tile** (2×2 grid, gap 12, tappable): white, radius 20, padding 16. Top row `space-between`: a **36×36 radius-10 white icon box with a 1px `#EDEDEF` hairline** holding a 17px line icon, and a status word top-right in 11/600 — `#138A5B` good ("1 ready", "+3 this wk"), `#B4471A` warn ("Ends 1d"), muted otherwise ("Since Mar 2022"). Then the value 24/700 −.02em tabular (margin-top 14) and a 12px muted label that truncates ("Points · 4 brands"). The icon box is the only icon container in the system: always white + hairline, never filled or coloured. - **Value tile** (reward rows): 52×52, radius 12, `#FFF6CC`, 15/800 Ink ("$5", "$10"); a 22px round brand mark may overlap its bottom-right corner. Yellow-soft only — it carries data, it is not decoration. - **Tinted panel / notice**: `#FFF6CC`, radius 12, padding 8 12, 13/500 Ink, inline-block, sits under the heading it refers to. - **Goal / progress block**: label 12/600 muted → inline row [input h44 r12] + [black button h44] gap 8 → 13/600 "$77,571.27 sold" → `.bar` 6px track `#ECECEF` radius 99, Ink fill (green `#1FB57A` when complete) → 13 muted helper. ### Ranked list Row height 56–64, divider `#F0F0F2`. Leading **rank badge** 28 round: #1 yellow fill, Ink 12/700; others `#F4F4F5`, Ink. Then name 14/600 (truncate with ellipsis), right block: value 14/700 tabular over 12 muted meta ("$4,848 comm." / "12 orders"), right-aligned. Three to five rows; "View all" link below if more. ### List / ledger Row: 12px padding, gap 12, 1px `#F0F0F2` between rows. Leading 36 avatar or 28 rank badge, title 14/600 + 12 muted meta, trailing value 14/700 tabular + optional pill. ### Table Font 13. Header 12/500 muted, padding 8 8 10, bottom hairline `#EDEDEF`. Row padding 12 8, divider `#F3F3F5`, hover `#FAFAFA`. Numbers right-aligned tabular. Row actions: link buttons. Table lives inside a card; card padding drops to 0 on the table edges. Pagination: 32px chips. ### Sidebar Width 256, white, right hairline, padding 24 16, sticky full-height. Brand row: the Kwik wordmark 26/800 −.04em (`.logo`; on white-label builds the brand name). Below it the **user panel** (`me-card`): `#F2F2F3`, radius 16, padding 12, gap 12 — 36 avatar + name 14/600 + email 12 muted. Item height 46, radius 12, padding 0 12, gap 12, icon 20 Ink 1.75 stroke, label 15/500; trailing meta 12/500 muted (a count or amount). Hover `#F2F2F3`. **Active: `#FFF6CC` fill, 700 weight.** Separator 1px `#EDEDEF`, margin 8 12. Footer: switch row ("New user view"), appearance toggle. Below 1024: sidebar becomes a drawer; topbar 64. ### Topbar Height 76 (64 mobile), white 90% with `backdrop-filter: saturate(1.4) blur(12px)`, padding 0 32, transparent bottom border that turns `#EDEDEF` once scrolled. Left: the search pill (260 wide). Right: icon buttons 44 (theme toggle, notifications with a dot), avatar 36 (yellow, Ink initials) with an 8px green online dot ringed 2px white. ### Page header (dashboards) Avatar 56 round `#F4F4F5` placeholder (or photo) → overline date with 8px yellow dot → 28/600 greeting → optional `#FFF6CC` notice chip → 12 muted helper with underlined "Edit". A view switch sits below, left-aligned. ### Dropdown / select menu Radius 14, white, `0 16px 40px -8px rgba(0,0,0,.18)`, padding 6. Option height 40, radius 10, padding 0 12, 13/500 Ink; hover `#F4F4F5`; selected `#FFF6CC`. ### Sheet / modal Bottom sheet on phones (radius 20 top), centred modal ≥768 (radius 20, width 560). Scrim `rgba(0,0,0,.4)`. Header 16/600 with a 44 icon button close. Body padding 24. Selectable option rows inside: 1px `#E7E7E9`, radius 14, height 64, 14/600; selected border Ink. ### Alert / note Notice `#FFF6CC`, radius 12, padding 8 12, 13/500 Ink. Warning `#FFF4CC` / `#B7791F` 12/500 with a 16px triangle. Error `#FEE2E2` / `#C2410C`. No blue info boxes. ### Toast Bottom-centre (desktop bottom-right 24), width ≤360, radius 14, Ink fill, white 13/600, padding 12 16, 200ms rise, auto-dismiss 3s. ### Tooltip Ink fill, white 12/500, radius 8, padding 8 12, max-width 240. Chart tooltip: Ink, 11 `rgba(255,255,255,.6)` label + 15/600 white value. ### Avatar & brand mark Avatar round: 28 (rank badge) / 36 (topbar, sidebar user panel, lists) / 56 (page header). Initials 700 Ink on `#FFD836`; placeholder `#F4F4F5` with a 24px person icon `#84848A`. **Brand mark**: round, 800 initials −.02em on the brand's tile colour with a 1px `#EDEDEF` hairline; 22 (badge on a value tile) / 40 (lists) / 60 inside a 2px Ink ring when selected (brand rail). Stacks overlap −8 with 2px white ring. ### Media card A white card whose image fills a radius-16 block, height 280 (`hero-img`), with a bottom gradient scrim `rgba(0,0,0,0) 35% → rgba(0,0,0,.7)` so white text and pills can sit on it. Product and giveaway photography is **content** and belongs here; it never appears as decoration elsewhere. ### Empty state Inside the card, left-aligned, 13 muted: "No sales in this period." For whole-screen empties: centred, padding 48 24, 48px `#F4F4F5` round tile with a 24px icon, title 16/600, body 14 muted max 320, one black button. ### Loading Skeleton blocks `#F4F4F5` radius 10 with a 1.2s shimmer. Dot loader: three 9px yellow dots bouncing (1.6s). ### Charts Primary series yellow `#FFD836` 2px smooth line, area `rgba(255,216,54,.18) → transparent`. Secondary series green `#1FB57A` dashed 2px (commissionable, pending). Gridlines 1px `#ECECEF` dashed, axis 11 `#84848A`, baseline yellow when the series is flat. Legend: 10px dot + 12 label, right-aligned above the plot (dashed dot for dashed series). Bars radius 4, yellow; empty bars `#D4D4D8`; highlighted bar with Ink tooltip. Sparkline (summary card): 1.8px yellow, no area, `preserveAspectRatio: none`. Donut: 14px stroke, track `#F4F4F5`. ## 8. Iconography Line icons, 1.75px stroke, rounded joins and caps, no fills, 24-grid (Lucide / Phosphor Regular). Sizes 14 chrome · 16 inline · 17 in the stat-tile icon box · 20 nav · 24 featured. Icons sit **inline** — in buttons, nav items, icon buttons, the empty-state tile — or in the stat tile's white hairline box. **Never in a coloured or pastel tile.** Brand/social icons keep their real mark, monochrome Ink. ## 9. Layout ``` Desktop ≥1024 ─┬─ sidebar 256 (white, hairline) ─┬─ topbar 76 (white, blur, search left) │ └─ canvas #F2F2F3: page padding 24 28 40, max-width 1480 App home ─ two columns (`dash-col`), gap 20: left = greeting, Cash feature card, Ending soon, Recent orders; right = 2×2 stat tiles, Closest rewards, Your Waves. Rep dashboard ─ main 1fr + right rail 360, gap 20. Rail: Ink summary card, then ranked list card. Settings pages ─ 1fr 340, gap 16. Metric grids ─ 2-up (mobile) / 3-up / 4-up, gap 12–16. Mobile <768 ─ single column, padding 16, cards full width, sidebar → drawer, topbar 64, bottom safe area. ``` ## 10. Prohibited - Any blue, navy, indigo, teal or blue-tinted grey. - **Coloured icon tiles, coloured squares or pastel fills on cards or list rows.** Headers get a plain 18/700 title or the accent bar — nothing else. (Allowed: the stat tile's white hairline icon box; the yellow-soft value tile, because it carries a number.) - Any accent-bar colour other than yellow (default) or peach (secondary). No lilac, mint, sky, rose or moss anywhere in product. - Borders or resting shadows on cards. Shadows on buttons, chips, pills, inputs or rows. - Yellow as a page/section background, or yellow text on white (use `#D99A00` if yellow must be text). - More than one accent (yellow) button per page; more than one Ink summary card per screen. - Radius values off the 20 / 16 / 14 / 12 / 10 / 999 ladder. Square-cornered buttons (buttons are pills; only the inline form action is radius 12). - Stock or decorative photography. (Product and giveaway images are content — media cards only.) Emoji in data. Exclamation marks in system copy.