Mitchell's Design System — Visual Reference

Reference screenshots from Dnero POS (admin) and BurgerFuel online ordering (consumer), each paired with the pattern it exemplifies in principles.md and a canonical render below. This is a curated set of moves Mitchell likes — defaults, not laws. Brand color swaps live via the picker; type, accents, and patterns are starting points, not gods. When prose disagrees with the screenshot, the screenshot wins — update the prose.

Defaults

Suisse Int’l · Geist (free fallback)

Geist Mono · Inconsolata

Two patterns Mitchell likes: lime under list-page H1 and blue numerics in reporting. Strong defaults, override when the brand asks.

Brand (swappable)

Mono

click any to re-theme this page live

Pattern 01

List-page highlighter + KPI cards

Dnero POS · Dashboard

What to copy

01 Lime/yellow highlighter only under H1 on list/index pages (Dashboard, Products, Orders). Detail pages get a plain heading.
02 Highlighter is a background on inline-block H1 with ~2px y-padding and 8px x-padding. Don't outline, don't add radius — hard edges.
03 KPI cards: muted label top-left, trend pill top-right, big bold number, trend phrase + comparison muted below. Thin border, no shadow.
04 Trend pills are rounded-full, outlined, mono digits with a tiny arrow icon. Use — + flat color for no-change ("No change —").
05 Filter pills (date / time) live above the cards as outlined rounded-full chips with leading icon + trailing chevron.

Canonical render

Dashboard

Sales by hour for the selected day

Gross sales ↗ +100%

$39.80

Growth compared to last month ↗

Number of guests — 0%

No change —

Pattern 02

List page · toolbar + table

Dnero POS · Products

What to copy

01 Toolbar order: Search · Filters (left group) — Import · Export · Add X (right group). Filters is an outlined button with a sliders icon, not a pill.
02 Primary CTA is filled black with leading +. One per page. Import/Export are outlined.
03 Table header row uses a soft-grey fill (the --rule token), not a bottom border. Column titles in muted weight.
04 Numeric columns right-aligned, mono digits, tabular numerals. No zebra striping anywhere.
05 Empty thumbnail = grey square with the product's initial. Don't show a broken image, don't show a stock icon.
06 Empty cell convention is unsettled — principles.md says -, Dnero ships blank. Pick one and enforce it. Recommendation: blank for "not applicable", — for "no data yet".

Canonical render

Products

Manage your products

Display name	Category	Price
BBacon Backfire Feed	Feeds	$24.09
HHeat Happens Feed v2	Feeds	$34.78
SSauce	—	$0.00

Pattern 03 · New observation

Reporting · blue numerics

Dnero POS · Transactions

Promote to principles.md The reporting context uses blue numerics, not black. Compare Pattern 01's $39.80 (operational dashboard, black) with this screen's $2,335.43 (reporting, blue). The shift signals "this number is historical / analytical, not actionable right now." Keep brand peach reserved for CTAs and the editorial lime reserved for list-page H1 only — blue belongs to reporting headline numbers.

What to copy

01 Headline KPI numbers in reporting screens render in --report (blue #2563eb), same weight and scale as dashboard numbers.
02 Reporting sidebar is its own context — workspace switcher top-right reads "Reporting", not "Dnero (POS)". Switcher persists across nav.
03 Filter row uses 5 outlined dropdowns (search, date range, time, payment types, status types), then Export aligned right. No filled pills here.
04 Date range is shown as plain text under the H1, not in a pill. "Tue 31 Dec 2024 — Thu 01 Jan 2026". Sentence-case month abbreviations.

Canonical render

Transactions

View and analyze your transactions

Tue 31 Dec 2024 — Thu 01 Jan 2026

Complete transactions

Total collected

$2,335.43

Net sales

$2,086.42

Pattern 04

Storefront · category pills + product grid

BurgerFuel · /sites

What to copy

01 Category pills are rounded-full, brand-color filled when active, white with thin outline when inactive. Sticky horizontal scroll on mobile.
02 Section headers like "BEEF" are big uppercase brand-color text. Chunky weight, used only at category breaks. Never decorative.
03 Product cards: title top-left, 2-line truncated description, price bottom-left, square photo right (~100×100). Thin grey border, no shadow.
04 Top bar: hamburger left, brand mark centered, cart total + count badge right. Cart count is a circular filled-black badge with white number.
05 Storefront variant uses brand-color dominance instead of black for CTAs and active states — peach here, BurgerFuel purple in their build. Same DNA, swapped accent.

Canonical render

Specials Beef Chicken Sides Drinks

Beef

Peanut Piston

100% pure grass-fed beef, smashed juicy, with a dollop of peanut satay.

$15.90

C N Cheese

Beef, cheddar, truffle mascarpone, parmesan, salad, relish.

$16.30

Pattern 05

Checkout · two-column + transparent fees

BurgerFuel · /checkout

What to copy

01 Two-column: decisions left, order summary right. Stack vertically on narrow screens with summary on top.
02 Top of left column is the pickup confirmation card with a Change › link. Locked-in choices stay visible and changeable.
03 Transparent fee breakdown: every cost line explicit ("Credit Card Fee $0.32"). Don't bundle fees into the total silently.
04 Total row in big H1-weight mono, currency labeled ("Total (NZD)"). Above the voucher input, not below.
05 T&Cs are a filled-black checkbox inside its own card, with full link text inline. Pre-check is OK for purchase agreements.
06 Line items: thumbnail + name + Edit text-link + qty stepper + price right-aligned. Trash icon doubles as decrement-to-zero.

Canonical render

Pickup from Ponsonby

🕐 Today, ASAP (~10 min)

Change ›

Personal Details

Mitchell Thompson

mgthompo@gmail.com

Order details

Peanut Piston × 2 $31.80

Credit Card Fee $0.32

Total (NZD) $32.12

Codified

Tokens

tokens.css · proposed

The full set of CSS custom properties powering this page. If you're happy with these, I'll spin them out into design-system/tokens.css + a matching JSON for non-CSS consumers.

:root

/* Color · neutrals */
--bg:        #fafaf8;   /* warm off-white page */
--paper:     #ffffff;   /* card surfaces */
--text:      #1c1917;   /* near-black, warm */
--muted:     #78716c;   /* secondary text */
--faint:     #a8a29e;   /* tertiary, placeholders */
--border:    #e7e5e4;   /* default borders */
--rule:      #f5f5f4;   /* table header / row hover */

/* Color · accents */
--brand:     #f29d64;   /* CTAs, active storefront states */
--editorial: #d4ff3a;   /* list-page H1 highlighter ONLY */
--report:    #2563eb;   /* reporting headline numerics ONLY */

/* Color · status */
--success:    #15803d;  --success-bg: #f0fdf4;
--error:      #be123c;  --error-bg:   #fff1f2;
--warning:    #b45309;  --warning-bg: #fffbeb;

/* Type */
--font-sans: "Geist", "Inter", system-ui, sans-serif;
--font-mono: "Geist Mono", "Inconsolata", ui-monospace, monospace;

/* Radius */
--radius-xs:   4px;
--radius-sm:   8px;
--radius-md:   12px;
--radius-lg:   16px;
--radius-full: 999px;

/* Spacing (4px base) */
--space-1: 4px;   --space-5: 24px;
--space-2: 8px;   --space-6: 32px;
--space-3: 12px;  --space-7: 48px;
--space-4: 16px;  --space-8: 64px;

/* Motion */
--ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
--dur-fast: 120ms;   /* hovers, toggles */
--dur:      180ms;   /* default transitions */

Pattern 06 · New surface mode

Display type · the second-mode slots

YouTube refs · Sam Fender / The 1975

New principle Body type and display type are different jobs. Running chrome stays in Geist (sans) forever. But there are two slots where a second-mode typeface earns its place: chunky condensed for stadium-scale moments and transitional italic serif for quiet ones. Reach for these maybe 1–2 times per surface. Never in chrome.

Sam Fender · "Darlings" · Wembley Stadium

The 1975 · Live from Madison Square Garden

--font-display-sans

01 Chunky condensed. Default Anton (free, single weight). Real-deal upgrade is Druk (paid, Commercial Type) — what Sam Fender actually uses.
02 Use for: stadium hero blocks, marketing splash, section breaks at hero scale. Same DNA as the lime highlighter — just 10× bigger.
03 Always UPPERCASE. Single weight. Tight tracking (-0.01em) and tight leading (0.85–0.92).
04 Pairs with bright color blocks: lemon, magenta, tangerine, cyan, or near-black. Never on a low-contrast surface.

--font-display-serif

01 Transitional italic. Default EB Garamond Italic (free, Caslon-adjacent). Modern alt: Fraunces (variable). Paid: real Caslon.
02 Use for: confirmation screens, empty states, lyrical product copy, thank-you moments. Never chrome. Never a list-page H1.
03 Always italic. Medium weight (500). Slight negative tracking (-0.012em). Line-height 1.05–1.1.
04 Sits on neutrals. Doesn't pair with bright color blocks — that's the chunky sans's job.

Pattern 07

Stadium hero block

Sam Fender · Wembley

Sam Fender 'Darlings' yellow block at Wembley

What to copy

01 Bright color block + near-black text. Same DNA as the list-page lime highlighter — just scaled to hero. Both moves are the same pattern, different dial.
02 Block color: yellow, magenta, tangerine, cyan. Not the editorial lime — that's reserved for list-page H1.
03 Text: --font-display-sans, uppercase, clamp(72px, 14vw, 200px). Line-height 0.85. Single word or short phrase.
04 Optional mono kicker above the headline ("Side A · Track 03", "Now serving", "Chapter 02"). Tiny, all caps, muted.
05 Hard edges — small --radius-md at most, or none. Never rounded-full on a hero block, ever.
06 Use 1–2 times per page. Top of a landing page, a section break in a marketing scroll, an empty-state moment.

Canonical render

Side A · Track 03

Darlings

swap the yellow for any --brand bright — same move

Pattern 08

Quiet moment

The 1975 · MSG

The 1975 Madison Square Garden serif italic

What to copy

01 For moments that aren't chrome — confirmation screens, empty states, thank-you, the breath after a transaction completes.
02 Heading in --font-display-serif italic at clamp(36px, 6vw, 68px). Always italic, always medium weight.
03 Sits on neutrals. No bright color blocks — that's the loud cousin's job.
04 Mono overline above ("Order received", "You're in"). Mono caption below at --faint.
05 Center-aligned, generous padding (clamp(48px, 8vw, 96px)). Let it breathe.
06 Don't use for empty error states — quiet moments are positive: order received, you're done, well played.

Canonical render

Order received

People watching.

Your order will be ready in about ten minutes. Take a seat, the world will wait.

Pattern 09 · New surface

Marketing landing page

composed · see harness.html

New surface The system covered admin chrome and storefront. Marketing is the third leg — where the bright-block + display-sans patterns earn their keep, with its own composition rules.

Composition

01 Mono eyebrow with leading swatch dot above the hero. "Now serving 1,200+ venues". The dot is a hard-cornered --brand square, not a circle.
02 Hero in --font-display-sans, 2 lines max, uppercase, clamp(48px, 7vw, 96px). One word inside gets the brand-color swatch treatment — "Serve customers, not software." Same bright-block move at inline scale.
03 Hero is two columns: text left, single visual right. Visual is a full-bleed --brand gradient if no photography exists yet — better than stock. Aspect 4/5 portrait.
04 Two CTAs: filled --brand primary + outlined arrow-suffix secondary ("Tour the live demo →"). Mono micro-meta beside them: "no card required".
05 3-column feature strip. Each column: --brand mono numbering ("01 / Sell"), tight short headline, single sentence. Hard vertical rules between columns, no card chrome, no shadows.
06 Dark CTA strip as the closer — full-bleed --text background, display-sans headline, inverted button (white fill, dark text). Single sentence, single CTA, mono meta beneath.
07 Nav links stay in body sans. Mono is reserved for kickers, captions, micro-meta. Don't promote it to chrome on a landing page.
08 Max one bright block per fold. Hero gets the swatched word; closer is dark; intermediate sections stay on neutrals.

To pull this into ~/Desktop/design-system/:

Copy the 5 PNGs in design-system-build/screenshots/ into your local screenshots/ folder (filenames already match the README convention).
Copy reference.html alongside calibration.html at the design-system root.
Add two lines to principles.md · Color section: "Editorial lime is for list-page H1 only." and "Reporting blue (#2563eb) is for reporting headline numerics only."

Next pass: tokens.css + tokens.json · empty/loading/error states · voice & copy doc · dark-mode rules. Tell me which to do first.