---
version: alpha
name: VanMoof
description: "A workshop-white canvas, one acid stripe, and numerals sized like bike frames."
colors:
  on-surface-variant: "#808080"
  surface: "#F7F7F7"
  outline: "#E0E0E0"
  on-surface: "#000000"
  primary: "#F1FF3B"
  paper-white: "#FFFFFF"
  off-black: "#222222"
  grey-01: "#313131"
  surface-grey: "#EEEEEE"
  dialog-ink: "#E6E6E6"
  field-grey: "#444444"
  veil-white-20: "rgba(255, 255, 255, 0.2)"
  veil-white-10: "rgba(255, 255, 255, 0.1)"
  capsule-gradient: "rgba(34, 34, 34, 0.5)"
  scrim: "rgba(0, 0, 0, 0.5)"
typography:
  mono-caption:
    fontFamily: Unica77Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0em
  mono-note:
    fontFamily: Unica77Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
  micro-link:
    fontFamily: Unica77LLWeb
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  body-xs-link-label:
    fontFamily: Unica77LLWeb
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  body-s:
    fontFamily: Unica77LLWeb
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-m:
    fontFamily: Unica77LLWeb
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  lead:
    fontFamily: Unica77LLWeb
    fontSize: 20px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  heading-xs:
    fontFamily: Unica77LLWeb
    fontSize: 24px
    fontWeight: 400
    lineHeight: 26.4px
    letterSpacing: 0em
  heading-s:
    fontFamily: Unica77LLWeb
    fontSize: 32px
    fontWeight: 400
    lineHeight: 35.2px
    letterSpacing: 0em
  heading-m:
    fontFamily: Unica77LLWeb
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52.8px
    letterSpacing: 0em
  heading-l:
    fontFamily: Unica77LLWeb
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -2.56px
  heading-xl:
    fontFamily: Unica77LLWeb
    fontSize: 80px
    fontWeight: 400
    lineHeight: 80px
    letterSpacing: 0em
  display:
    fontFamily: Unica77LLWeb
    fontSize: 280px
    fontWeight: 400
    lineHeight: 280px
    letterSpacing: 0em
rounded:
  icon-square-inline-action-track-small-bo: 2px
  capsule-button-nav-capsule-64px-thumbnai: 4px
  hero-plate-product-card-tile-link-accord: 8px
  compatibility-chip: 9999px
  dialog-image-plate: 8px
spacing:
  atom: 8px
  tight: 12px
  base: 16px
  loose: 24px
  block: 32px
  section-s: 48px
  section-m: 64px
  section-l: 80px
  grid: 48px
---
# VanMoof — Style Reference
> A workshop-white canvas, one acid stripe, and numerals sized like bike frames.

**Theme:** light

Two systems share this capture: a light storefront — the home page, the rides index and the accessories grid — on a near-white canvas with off-black ink, and the Ride Pro service page, which inverts it into off-black bands with white ink and hairline rules. The chrome is almost colourless, a ladder of greys from white down to off-black, with the palette's one saturated value — an acid yellow — spent on a single announcement strip above the navigation. Photography carries the colour instead: nocturnal product macros and street documentary, set as plates inset a few pixels from the viewport edge and softened by an 8px radius, so a page reads as a stack of panels rather than a document. Typography is one grotesk held at a single weight and scaled hard, Unica77LLWeb from footnote sizes up to model numerals read as artwork, with a monospaced cut kept for labels and the system's own voice. Line height tightens as the type grows — roughly 1.5 in body, 1.1 in headings, 1.0 at display — so hierarchy comes mostly from size and leading rather than from weight. Depth is a change of luminance and a 1px rule, not a shadow.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Grey | `#F7F7F7` | `--color-grey05` | The page ground, carried by `.bg-grey05` on every captured page; the storefront's default, never used as a control fill. |
| Paper White | `#FFFFFF` | `--color-white` | The lighter plate above the canvas — the country bar, `.w-full.bg-white.relative.z-90`, 1920×48px on all four pages — and the ink of choice on every dark band. |
| Off-Black | `#222222` | `--color-off-black` | The ink for body and headings on light, and the fill of the dark sections and the filled capsule button — one value doing both jobs. |
| Grey 01 | `#313131` | `--color-grey01` | Secondary ink for descriptive paragraphs and footer links; also the raised dark panel and the Ride Pro accordion border. |
| Surface Grey | `#EEEEEE` | `--color-surface-grey` | The light pages' working mid-grey plane, across three carriers: the product card `.flex.w-full.h-full.rounded-lg` (18 on accessories, at 948×593–595px and 470×595px), the editorial tile `.grid.grid-rows-1.rounded-lg.overflow-hidden` (5 anchors across home, rides and accessories), and the app block `.grid.grid-cols-subgrid.tablet:col-start-2.tablet:col-span-10` (1 on the home page, padding 80px 0px). |
| Hairline Grey | `#E0E0E0` | `--color-grey03` | The structural 1px line — column dividers, the compatibility chip's outline. The census records it as fill and border, with no text row. |
| Grey 02 | `#808080` | `--color-grey02` | Muted ink, and only on struck-through prices — "€68.00" at 18px/28px (`.ml-2.text-grey02.line-through`, 3 on accessories) and "€295.00" at 14px/20px (`.paragraph-xs.text-grey02.line-through`, 1 on Ride Pro). Contrast is deliberately low. |
| Dialog Ink | `#E6E6E6` | `--color-dialog-ink` | Off-white ink on the dialog's lines — "So secure, you can leave it anywhere" and the body copy beneath it — set in the third-party face. |
| True Black | `#000000` | `--color-black` | Ink for the country notice, and the fill of the dialog's image plate. Reserved; the brand's "black" for surfaces is `#222222`. |
| Acid Yellow | `#F1FF3B` | `--color-accent` | The system's one saturated colour. The census gives it a single carrier, `.w-full.relative.min-h-12.flex` — the announcement band. Not a CTA colour. |
| Field Grey | `#444444` | `--color-field` | The newsletter input fill on `.needsclick.go3143411370.kl-private-reset-css-Xuajs1` — the lightest of the dark greys, and it sits behind an editable field. |
| Veil White 20 | `rgba(255, 255, 255, 0.2)` | `--color-white-20` | Ride Pro's brighter hairline and panel wash — `.h-full.bg-white-20.w-full.absolute`. |
| Veil White 10 | `rgba(255, 255, 255, 0.1)` | `--color-white-10` | The quieter divider on the same dark page: `.flex.grow.flex-col.border-t`. |
| Capsule Gradient | `rgba(34, 34, 34, 0.5)` → `rgba(34, 34, 34, 0.3)` | `--gradient-capsule` | The one gradient in the census, carried by `.flex.min-h-14.flex-col.rounded-sm`: it floats the nav capsule over photography without a solid fill. |
| Scrim | `rgba(0, 0, 0, 0.5)` | `--color-scrim` | The modal overlay on the rides and accessories pages. Half-black. |

## Tokens — Typography

### Unica77LLWeb — the reading voice: almost every heading and body row the census measures, from "Learn more" at 14px to "S6" at 280px, at weight 400 with two heavier cuts used at 14px only · `--font-sans`
- **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, Inter
- **Weights:** 400, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 48px, 64px, 80px, 280px
- **Line height:** 16px at 12px (1.33) and 20px at 14px (1.43) through 52.8px at 48px (1.1) to 280px at 280px (1.0) — the ratio falls as the size climbs
- **Letter spacing:** normal on every heading row but one — "Ride Pro" measures −2.56px at 64px
- **Role:** the display numerals, the section headings, the paragraphs and the link labels; weight 600 appears on "Track your rides" and 700 on the bolded "the Netherlands", both at 14px

### Unica77Mono — the system's label voice: bands, notes, footer column heads and the Ride Pro badge · `--font-mono`
- **Substitute:** Söhne Mono, Roboto Mono, JetBrains Mono
- **Weights:** 400
- **Sizes:** 12px, 14px
- **Line height:** 14.4px at 12px, 16.8px at 14px — a flat 1.2
- **Letter spacing:** normal; the air in the band line is the face's own metrics and its uppercase setting, not tracking
- **Role:** `.note-m` ("Newsletter"), the band line "The most advanced Anti-Theft system in the world", and the "RIDE PRO" badge

### Unica77 — the third-party form face inside the newsletter dialog, and nowhere else the census measures · `--font-form`
- **Substitute:** Helvetica Now Text, Neue Haas Grotesk Text, Inter
- **Weights:** 400, 700
- **Sizes:** 16px, 48px
- **Line height:** normal on the heading and body rows; 16px on the "Sign up" button label
- **Letter spacing:** normal
- **Role:** "So secure, you can leave it anywhere" at 48px in `#E6E6E6`, the body line beneath it, the `Email` label at 700, and the input

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Mono caption | 12px | 14.4px | normal | `--text-note-s` |
| Mono note | 14px | 16.8px | normal | `--text-note-m` |
| Micro link | 12px | 16px | normal | `--text-micro` |
| Body XS / link label | 14px | 20px | normal | `--text-paragraph-xs` |
| Body S | 16px | 24px | normal | `--text-paragraph-s` |
| Body M | 18px | 28px | normal | `--text-paragraph-m` |
| Lead | 20px | 22px | normal | `--text-heading-xxs` |
| Heading XS | 24px | 26.4px | normal | `--text-heading-xs` |
| Heading S | 32px | 35.2px | normal | `--text-heading-s` |
| Heading M | 48px | 52.8px | normal | `--text-heading-m` |
| Heading L | 64px | 64px | normal, or −2.56px on "Ride Pro" | `--text-heading-l` |
| Heading XL | 80px | 80px | normal | `--text-heading-xl` |
| Display | 280px | 280px | normal | `--text-heading-xxxl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Atom | 8px | `--spacing-2` |
| Tight | 12px | `--spacing-3` |
| Base | 16px | `--spacing-4` |
| Loose | 24px | `--spacing-6` |
| Block | 32px | `--spacing-8` |
| Section S | 48px | `--spacing-12` |
| Section M | 64px | `--spacing-16` |
| Section L | 80px | `--spacing-20` |
| Grid (row × column) | 48px 8px | `--spacing-grid` |

### Border Radius

| Element | Value |
|---------|-------|
| Icon square, inline action track, small bordered control | 2px |
| Capsule button, nav capsule, 64px thumbnail | 4px |
| Hero plate, product card, tile link, accordion row, dialog | 8px |
| Compatibility chip | 9999px |
| Dialog close button | 50% |
| Dialog image plate | 8px 0px 0px 8px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Dialog | `rgba(34, 34, 34, 0.5) 0px 0px 30px 0px` | `--shadow-dialog` |

### Layout
- **Page max-width:** a centred grid, `.custom-grid.max-w-8xl.mx-auto.px-6`, its side padding `not measured`; the bands behind it run the full 1920px of the viewport (`.bg-grey05` measures 1920×6461–9724px)
- **Section gap:** 48px, 64px and 80px of vertical padding — 64px is the most-counted step
- **Card padding:** 32px 24px on the feature column; 64px on the Ride Pro panel; 80px 0px on the app block; 100px 0px on the hero plate
- **Element gap:** 8px dominates by a wide margin, then 16px, 24px, 12px and 32px; grid tracks run 48px 8px (row × column)

## Components

### Country Notice Bar
**Role:** The first thing above the fold — a quiet storefront check before anything else can load.
Built on `.w-full.bg-white.relative.z-90`: a `#FFFFFF` div measuring 1920×48px, radius 0px, no border and no shadow, on every captured page. Its line is 14px/20px Unica77LLWeb in `#000000` (`.paragraph-xs`) with the country set at weight 700 — "the Netherlands". It carries no rule beneath it; the acid band does the separating. The bar is white rather than canvas grey so it reads as a system layer on top of the page.

### Anti-Theft Announcement Band
**Role:** The brand's one loud note — a single claim, repeated at the top of every page.
`.w-full.relative.min-h-12.flex` is a `#F1FF3B` div, 1920×48px, radius 0px, no border, no shadow. The census gives that class the accent's only carrier, which is the whole restraint rule: the yellow is a band, not a button, a link or type. The line inside is Unica77Mono 12px/14.4px in `#222222` — "The most advanced Anti-Theft system in the world" — set uppercase, which turns the mono into a signal rather than a caption.

### Floating Nav Capsule
**Role:** Persistent navigation that hovers over photography without ever blocking it.
`.flex.min-h-14.flex-col.rounded-sm` measures 600×56px with a 4px radius, no border and no shadow, on all four pages. It paints no solid fill; instead it carries the system's only gradient, `rgba(34, 34, 34, 0.5)` → `rgba(34, 34, 34, 0.3)`, so the hero image reads through it and the capsule darkens rather than covers. Centred rather than edge-anchored, it holds a hamburger, the outlined VANMOOF lozenge and a bag glyph in white. The 56px height against 600px of width is what makes it a pill and not a bar.

### Capsule Button — filled and ghost
**Role:** The system's standard action, in two weights of commitment.
Both variants are `.flex.rounded-sm.group.cursor-pointer` with a 4px radius, zero padding and no shadow; the census measures the class three times, so keep them apart. The filled variant is a `button` with a `#222222` fill and a `#FFFFFF` label at 14px/400, measuring 107×32px, holding "Select country". The ghost variant is a `button` with no fill at 88×32px, holding "Explore". Same radius, same 32px height, no border on either — the fill is the only difference, which is why the filled one reads as the more serious ask. The third is not a button — a plain `div` at 48×48px with no fill and no border, the same 4px radius, six of them across the home, rides and accessories pages, carrying no text of its own.

### Arrow Square
**Role:** The repeating "go" affordance that sits beside almost every link in the system.
Two variants. On dark ground, `.relative.h-full.flex.aspect-1` is a div with no fill, a 1px `#FFFFFF` border and a 2px radius, measuring 32–48px square across all pages. On light ground, `.border.flex.items-center.justify-center` is a `button` with no fill, a 1px `#222222` border and the same 2px radius at 32×32px. Neither has a shadow; both hold an arrow glyph and no text. The 2px radius is the tightest in the vocabulary, and it keeps these reading as engineering marks rather than buttons.

### Inline Action Row
**Role:** The bordered text action — "Learn more" — that closes most editorial blocks.
`.w-full.rounded-xs.px-6.flex` is a div with padding 0px 24px, a 2px radius, no fill, no border of its own and no shadow, measuring 119–663×46px on all four pages. The width range is the point: one track stretches from a compact label to a full-column action without changing radius or height. Its label is the 14px/20px Unica77LLWeb row in `#222222` — "Learn more", `.paragraph-xs.my-auto`. Pair it with the Arrow Square; the two are almost never apart in the tiles.

### Compatibility Chip
**Role:** The model filter on the accessories grid — pick a bike, narrow the shelf.
`.cursor-pointer.border.border-grey03.text-off-black` is a `button` with no fill, `#222222` ink at 14px/400/20px, padding 8px 16px, a 9999px radius and a 1px `#E0E0E0` border, measuring 51–88×38px. The census carries those six chips on the accessories page alone, and the 9999px radius appears on no other row — the pill is a filter signal, not a general button style. They hold model names, "S6" among them, in a row behind a monospaced "COMPATIBLE WITH" label.

### Product Card
**Role:** One accessory, one grey plate, price beneath.
`.flex.w-full.h-full.rounded-lg` paints a `#EEEEEE` fill with an 8px radius, no border and no shadow, in two measured sizes on the accessories page: 948×593–595px and 470×595px. Padding measures 0px — the product photograph is the content, floated on grey with its own air. The card carries no text of its own; it contains the stock state, "Out of stock". Struck prices beside the live price use the 18px/28px row in `#808080` ("€68.00", `.ml-2.text-grey02.line-through`).

### Feature Column
**Role:** A four-up strip of app capabilities under the VanMoof App block.
The row that holds "Track your rides Enable your VanMoof to automati" is a div with padding 32px 24px, a 1px `#E0E0E0` border, radius 0px, no fill and no shadow, measuring 311–316×209px on the home page, with a 24px internal gap. The heading is 14px/600/20px `#222222` — "Track your rides" — and the body beneath it is 14px/400/20px in `#313131` (`.text-grey01.paragraph-xs`). Sharp corners here are deliberate: every other radius-0 row in the census is a full-width 1920px band — the canvas, the country bar, the acid band, the Ride Pro sections — so at 311–316×209px this is the only radius-0 block inside the content grid, and the row reads as ruled columns rather than cards.

### Full-Bleed Hero Plate
**Role:** The model announcement — one bike, one letter-number, one line of copy.
The anchor holding "S6 The wait's over. Introducing our ultimate e-b" takes padding 100px 0px, an 8px radius and no border or shadow, measuring 1904×1152px on the home and rides pages; the image layer inside it, `.row-start-1.col-start-1.col-span-full.rounded-lg`, matches that box at the same radius. 1904px inside a 1920px viewport is the move: inset 8px a side, so the rounded corners stay visible. The model numeral over it is 280px/280px Unica77LLWeb in `#FFFFFF` — "S6" — with the supporting line at 16px/24px white.

### Editorial Tile Link
**Role:** The paired destination cards — a test ride, a partner map — at the foot of the storefront.
Two measured variants of `.grid.grid-rows-1.rounded-lg.overflow-hidden`, both anchors with an 8px radius, zero padding, no border and no shadow. The dark one fills `#313131`, once on the home page; the light one fills `#EEEEEE` four times across the home and rides pages, and once on accessories. The row's type and ink are inherited, so the label size is `not measured` — take it from the heading scale you compose with. Set them in pairs at equal height, one tile an image and the other a flat plane.

### FAQ Accordion Row
**Role:** The Ride Pro question list — a stack of outlined bars that open in place.
The row holding "How can I manage my subscription?" is a div with no fill, a 1px `#313131` border and an 8px radius, measuring 1599×94px on the Ride Pro page, with no shadow and padding 0px. A plus glyph sits at its right edge. The census gives that row no ink of its own — `ink —` — and marks the question it holds as `contains`, not as quoted text, so the label's size and colour are `not measured`; take them from the type scale you compose with. On an off-black band a `#313131` border is barely a step of luminance, and that quietness is the point.

## Do's and Don'ts

### Do
- Ground the storefront on `#F7F7F7` and let `#FFFFFF` be the layer above it, not the page — the white bar is a system plate on top of the canvas.
- Keep headings at weight 400. Every heading row the census measures — from "Worry less. Ride more." at 48px to "S6" at 280px — paints 400.
- Use the 2px / 4px / 8px radius ladder in that order of scale: icon squares at 2px, capsules and thumbnails at 4px, plates and cards at 8px.
- Inset full-bleed plates rather than truly bleeding them: the anchor holding "S6 The wait's over. Introducing our ultimate e-b" is 1904px wide inside a 1920px viewport, at an 8px radius.
- Let 8px be the default gap — the most-counted step in the gap census, carried by `.w-full.flex.gap-2.h-full` — and step up to 16px, 24px or 32px when a block needs to breathe.
- Set labels, band copy and metadata in Unica77Mono at 12–14px, uppercase, as in the "RIDE PRO" badge — mono is the system's voice, the grotesk is the brand's.

### Don't
- Don't spend the acid yellow on a control. The census gives `#F1FF3B` one carrier, `.w-full.relative.min-h-12.flex`, and it is a band.
- Don't add elevation. The captured pages paint exactly one box-shadow, `rgba(34, 34, 34, 0.5) 0px 0px 30px 0px` on `.needsclick.kl-private-reset-css-Xuajs1` — a third-party dialog, not a brand surface.
- Don't add tracking to headings. Of the heading rows measured, only "Ride Pro" carries any, at −2.56px.
- Don't round the feature columns. The row holding "Track your rides Enable your VanMoof to automati" paints radius 0px with a 1px `#E0E0E0` border, and the contrast with the 8px plates around it is the composition.
- Don't use `#000000` as a surface. Every filled control the layout census lists is `#222222`, `#EEEEEE` or `#313131`; black appears as ink and as the dialog's image plate.
- Don't let body copy drop to `#808080`. That grey is for struck prices — "€68.00" and "€295.00" — and nothing else the census gives text to.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F7F7F7` | The page ground on all four pages (`.bg-grey05`), and the majority of painted background area. |
| 1 | Paper | `#FFFFFF` | The country bar (1920×48px, ×4) — a lighter plate above the canvas. |
| 2 | Surface | `#EEEEEE` | Product cards and editorial tiles; the light pages' only large mid-grey plane. |
| 3 | Dark band | `#222222` | Ride Pro's full-width sections, measured 1920×53–890px, and the inverted half of the system. |
| 4 | Raised dark | `#313131` | The 64px-padded Ride Pro panel and the dark editorial tile — one step up from the band. |
| — | Plate | `#000000` | The dialog's image panel, 400×528px with an `8px 0px 0px 8px` radius. |

## Elevation

There is effectively no elevation model. The census records a single box-shadow across the capture — `rgba(34, 34, 34, 0.5) 0px 0px 30px 0px`, on the third-party newsletter dialog `.needsclick.kl-private-reset-css-Xuajs1` — and the brand's own surfaces paint `shadow none` on every component row. Depth is a luminance step instead: `#F7F7F7` canvas → `#FFFFFF` or `#EEEEEE` plate, with a 1px `#E0E0E0` hairline where two blocks share an edge. On dark it is the same idea compressed: `#222222` band → `#313131` panel, divided by `rgba(255, 255, 255, 0.1)` and `rgba(255, 255, 255, 0.2)` rules that are barely there. The nav capsule floats by translucency, `rgba(34, 34, 34, 0.5)` → `rgba(34, 34, 34, 0.3)`, not by a shadow.

## Imagery

Photography is the colour system. Product macros are shot low-key and close — a saddle rail and a red rear light against near-black, a frame lit by one beam in a field of cattle at night — so the bike emerges from the dark rather than sitting on a background. Lifestyle frames are documentary and motion-blurred: a rider at a tram crossing, a courier mid-street, colour coming from the world rather than the palette. Accessories are clean product cutouts floated on the `#EEEEEE` card. Two graphic registers support them: outline icons in the app four-up, drawn in one hairline weight with no fill, and a technical-drawing mode on Ride Pro — crosshairs, a dotted plotting grid, the VANMOOF lozenge as a plotted mark, mono coordinates at the plate's corners. Every graphic reads as instrumentation, not decoration.

## Layout

Bands run the full 1920px of the viewport and the content grid inside them is centred — `.custom-grid.max-w-8xl.mx-auto.px-6`, side padding `not measured`, tracks at 48px rows × 8px columns. Hero content is the exception: the plate holding "S6 The wait's over. Introducing our ultimate e-b" measures 1904×1152px, an 8px inset a side so the 8px radius survives. Vertical rhythm sits on three steps — 48px, 64px, 80px — with the horizontal inset reaching 80px on the home and rides pages and 64px on Ride Pro. The nav is a centred 600×56px capsule floating over content, not a full-width bar, and above it two 48px strips stack: the white country notice, then the acid band. Accessories runs a mixed-width card grid on one class, `.flex.w-full.h-full.rounded-lg` — ten cards at 948×593–595px and eight at 470×595px, all on the accessories page; Ride Pro switches to hairline-ruled full-height dark sections, copy left and a graphic mark right. The footer is a four-column link array under monospaced column heads, closed by a full-width rule and a 12px legal row.

## Typography Voice

The system runs two modes and does not blend them. The grotesk carries everything a reader reads — 14px/20px links, 18px/28px paragraphs, 48px/52.8px section headings, 280px model numerals — at weight 400, so the only variables are size and leading. The leading is the signature move: 1.43 at 14px, 1.5 at 16px, 1.56 at 18px, then 1.1 at 24px, 32px and 48px, and exactly 1.0 at 64px, 80px and 280px. Display type sets solid, which is what lets "S6" behave as image rather than text. The second mode is Unica77Mono at 12px/14.4px and 14px/16.8px, uppercase: the announcement band, the "Newsletter" note, the "RIDE PRO" badge. Mono is how the system speaks about itself; the grotesk is how the brand speaks to you.

## Agent Prompt Guide

Build on `#F7F7F7` — the fill `.bg-grey05` paints on every captured page — and set ink in `#222222`; reach for a fill when a block needs to be a plate: `#FFFFFF`, `#EEEEEE`, or `#222222` and `#313131` on the inverted pages. Hold every heading at weight 400 and get hierarchy from the size and line-height pairs in the Type Scale. Use the 2px / 4px / 8px radius ladder, keep 8px as the default gap, and paint no shadows.

## Quick Color Reference
- background: `#F7F7F7`
- text: `#222222`
- surface: `#EEEEEE`
- border: `#E0E0E0`
- accent: `#F1FF3B`
- primary action: `#222222`

## Example Component Prompts

1. **Announcement Band**: A full-width strip, 1920×48px, radius 0, filled `#F1FF3B`, no border and no shadow. Centre one uppercase line in Unica77Mono 12px/14.4px, colour `#222222`, with a middot separating the claim from a "LEARN MORE" link. Add a 32×32px close button at the right edge with a 1px `#222222` border and a 2px radius.
2. **Floating Nav Capsule**: A centred 600×56px capsule with a 4px radius, no border and no shadow, filled with a linear gradient from `rgba(34, 34, 34, 0.5)` to `rgba(34, 34, 34, 0.3)` so the hero image reads through it. Place a hamburger glyph left, a white outlined VANMOOF lozenge centre and a bag glyph right, all in `#FFFFFF`, with 8px internal gaps.
3. **Full-Bleed Hero Plate**: A 1904×1152px anchor with an 8px radius and 100px 0px padding, holding a full-cover photograph. Overlay a model numeral in Unica77LLWeb 280px/280px, weight 400, `#FFFFFF`, at the left; at the right, a 16px/24px `#FFFFFF` line above a 32×32px arrow square (1px `#FFFFFF` border, 2px radius) with a 14px/20px label beside it.
4. **Product Card**: A 470×595px card filled `#EEEEEE` with an 8px radius, no border, no shadow and zero padding; float the product photograph inside it. Beneath the card, set the name in Unica77LLWeb 18px/28px `#222222` and the price on the same line, with any struck original in 18px/28px `#808080` with a line-through, 8px to its left.
5. **FAQ Accordion Row**: A 1599×94px row with an 8px radius, no fill, a 1px `#313131` border and no shadow, on a `#222222` band. Set the question in Unica77LLWeb; the census measures no size or ink for this row, so pick from the type scale — Body M, 18px/28px, is the system's paragraph size, with a plus glyph at the right edge. Stack rows on the system's default 8px gap.

## Similar Brands
- **Teenage Engineering** — the same instrument-panel discipline: monochrome shells, one acid accent used as a marking, monospaced labels doing the talking.
- **Polestar** — a near-white canvas, enormous grotesk headings at a single weight, dark full-bleed product photography carrying all of the colour.
- **Rapha** — editorial photography as full-width plates over an off-white ground, restrained grotesk type, almost no chrome between reader and image.
- **Bang & Olufsen** — product-as-object photography on quiet neutral surfaces, hairline rules instead of shadows, type that never raises its voice.
- **Aesop** — the same refusal of elevation: flat planes, a tight neutral ladder, structure carried by 1px lines and generous vertical rhythm.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-grey05: #F7F7F7;
  --color-white: #FFFFFF;
  --color-off-black: #222222;
  --color-grey01: #313131;
  --color-surface-grey: #EEEEEE;
  --color-grey03: #E0E0E0;
  --color-grey02: #808080;
  --color-dialog-ink: #E6E6E6;
  --color-black: #000000;
  --color-accent: #F1FF3B;
  --color-field: #444444;
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-scrim: rgba(0, 0, 0, 0.5);
  --gradient-capsule: linear-gradient(rgba(34, 34, 34, 0.5), rgba(34, 34, 34, 0.3));

  /* Typography — Families */
  --font-sans: 'Unica77LLWeb', 'Neue Haas Grotesk Display', Helvetica, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Unica77Mono', 'Söhne Mono', ui-monospace, SFMono-Regular, monospace;
  --font-form: 'Unica77', 'Helvetica Now Text', Helvetica, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-note-s: 12px;      --leading-note-s: 14.4px;
  --text-note-m: 14px;      --leading-note-m: 16.8px;
  --text-micro: 12px;       --leading-micro: 16px;
  --text-paragraph-xs: 14px; --leading-paragraph-xs: 20px;
  --text-paragraph-s: 16px;  --leading-paragraph-s: 24px;
  --text-paragraph-m: 18px;  --leading-paragraph-m: 28px;
  --text-heading-xxs: 20px;  --leading-heading-xxs: 22px;
  --text-heading-xs: 24px;   --leading-heading-xs: 26.4px;
  --text-heading-s: 32px;    --leading-heading-s: 35.2px;
  --text-heading-m: 48px;    --leading-heading-m: 52.8px;
  --text-heading-l: 64px;    --leading-heading-l: 64px;
  --text-heading-xl: 80px;   --leading-heading-xl: 80px;
  --text-heading-xxxl: 280px; --leading-heading-xxxl: 280px;
  --tracking-heading-l: -2.56px;

  /* Spacing */
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-grid: 48px 8px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --radius-round: 50%;
  --radius-plate: 8px 0px 0px 8px;

  /* Shadow */
  --shadow-dialog: rgba(34, 34, 34, 0.5) 0px 0px 30px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-grey05: #F7F7F7;
  --color-white: #FFFFFF;
  --color-off-black: #222222;
  --color-grey01: #313131;
  --color-surface-grey: #EEEEEE;
  --color-grey03: #E0E0E0;
  --color-grey02: #808080;
  --color-dialog-ink: #E6E6E6;
  --color-black: #000000;
  --color-accent: #F1FF3B;
  --color-field: #444444;
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-scrim: rgba(0, 0, 0, 0.5);

  --font-sans: 'Unica77LLWeb', 'Neue Haas Grotesk Display', Helvetica, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Unica77Mono', 'Söhne Mono', ui-monospace, SFMono-Regular, monospace;
  --font-form: 'Unica77', 'Helvetica Now Text', Helvetica, ui-sans-serif, system-ui, sans-serif;

  --text-note-s: 12px;
  --text-note-s--line-height: 14.4px;
  --text-note-m: 14px;
  --text-note-m--line-height: 16.8px;
  --text-micro: 12px;
  --text-micro--line-height: 16px;
  --text-paragraph-xs: 14px;
  --text-paragraph-xs--line-height: 20px;
  --text-paragraph-s: 16px;
  --text-paragraph-s--line-height: 24px;
  --text-paragraph-m: 18px;
  --text-paragraph-m--line-height: 28px;
  --text-heading-xxs: 20px;
  --text-heading-xxs--line-height: 22px;
  --text-heading-xs: 24px;
  --text-heading-xs--line-height: 26.4px;
  --text-heading-s: 32px;
  --text-heading-s--line-height: 35.2px;
  --text-heading-m: 48px;
  --text-heading-m--line-height: 52.8px;
  --text-heading-l: 64px;
  --text-heading-l--line-height: 64px;
  --text-heading-l--letter-spacing: -2.56px;
  --text-heading-xl: 80px;
  --text-heading-xl--line-height: 80px;
  --text-heading-xxxl: 280px;
  --text-heading-xxxl--line-height: 280px;

  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --radius-round: 50%;

  --shadow-dialog: 0px 0px 30px 0px rgba(34, 34, 34, 0.5);
}
```