--- version: alpha name: Custo description: "A white page, a green-grey band, and type that never raises its voice." colors: on-surface-variant: "#8E9194" on-surface: "#000000" surface: "#FFFFFF" outline: "#D8D8D8" primary: "#000000" faint-grey: "#A7AAAD" panel-green: "#4B514D" band-green: "#9EA29F" table-surface: "#F1F3F4" rule-on-dark: "rgba(255, 255, 255, 0.2)" typography: display: fontFamily: PP Neue Montreal Medium fontSize: 76.8px fontWeight: 400 lineHeight: 80.4px letterSpacing: 0em headline: fontFamily: PP Neue Montreal Medium fontSize: 51.2px fontWeight: 400 lineHeight: 64px letterSpacing: 0em slider-glyph: fontFamily: PP Neue Montreal Medium fontSize: 30px fontWeight: 400 lineHeight: 30px letterSpacing: 0em body-subheading: fontFamily: PP Neue Montreal Medium fontSize: 26.88px fontWeight: 400 lineHeight: 38.4px letterSpacing: 0em secondary-link: fontFamily: PP Neue Montreal Medium fontSize: 26.88px fontWeight: 400 lineHeight: 43.52px letterSpacing: 0em control: fontFamily: PP Neue Montreal Medium fontSize: 26.88px fontWeight: 400 lineHeight: 30.912px letterSpacing: 0em legal-link: fontFamily: PP Neue Montreal Medium fontSize: 24.32px fontWeight: 400 lineHeight: 34.56px letterSpacing: 0em caption: fontFamily: PP Neue Montreal Medium fontSize: 20.48px fontWeight: 400 lineHeight: 28.16px letterSpacing: 0em container-default: fontFamily: PP Neue Montreal Medium fontSize: 16px fontWeight: 400 lineHeight: 18.4px letterSpacing: 0em rounded: media-tile-dark-panel-input-submit: 8px language-select: 7px header-order-pill: 42.24px plan-table-head-row: 8px plan-table-foot-row: 0px sections-footer-table-cells: 0px spacing: select-pad-y: 16px pill-pad-y: 17px input-pad-y: 20px gap: 24px link-pad-y: 26px cell-pad-y: 30px input-pad-x: 32px row-pad-y-footer-column-gap: 40px pill-pad-x: 41px cell-pad-x: 52px foot-band: 54px panel-inset-x: 62px page-gutter: 102.4px footer-band: 110px section-short: 162px section: 182px section-tall: 190px --- # Custo — Style Reference > A white page, a green-grey band, and type that never raises its voice. **Theme:** light Custo builds its whole system out of white paper, a muted green-grey band, and a single weight of PP Neue Montreal Medium. The canvas is white and the ink is pure black; the only paints with any hue at all are the two greens — one that floods the hero band, one that fills the inset panel holding the app. Hierarchy is carried by ink and line height rather than by weight or size: the same body step sets section headings, paragraphs, nav links, table cells and form fields, and it is the grey that tells you which of them to read first. The display step is set almost solid with letter-spacing left at normal, where most brands would tighten, so a headline reads as a slab of text rather than as a logo. Nothing in the system casts a shadow — depth is a change of plane, a rounded panel dropped into the page, a hairline rule, an image with softened corners — and that restraint is the whole idea. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas White | `#FFFFFF` | `--color-canvas` | The body fill (`.is-home.is-theme-light`) and the ink for every word set on the green band or the dark panel. | | Ink Black | `#000000` | `--color-ink` | The reading ink: display headlines, subheads, table cells, input text. Text on 593 elements, fill on none — never paint a surface with it. | | Muted Grey | `#8E9194` | `--color-ink-muted` | Body copy and secondary links (`.t-link--secondary`, "From €1.599"). About 3.2:1 on white — legal only because the body step is 26.88px, where 3:1 is the large-text bar. | | Faint Grey | `#A7AAAD` | `--color-ink-faint` | The recessive ink: closed step titles, index numerals, newsletter small print. About 2.3:1 on white — below reading contrast by design, so it carries state, not content. | | Hairline | `#D8D8D8` | `--color-rule` | Borders only — 79 observations, all border. Footer edges, step-list dividers, input and select outlines, the plan-table grid on the app page. | | Panel Green | `#4B514D` | `--color-panel` | The one dark plane: the inset panels behind the app screens, the returns/install, smartwatch and investor blocks. White on it reads about 8.1:1. Never a button. | | Band Green | `#9EA29F` | `--color-band` | The hero fill on the home, how-it-works and about pages. White display type on it measures about 2.6:1 — the band trusts scale, not contrast. | | Table Surface | `#F1F3F4` | `--color-surface` | One painted row: the head of the plan-comparison table on the app page. The system's only near-canvas tint. | | Rule on Dark | `rgba(255, 255, 255, 0.2)` | `--color-rule-on-dark` | The hairline under the step index (`.c-AppReturns-index.t-h3`, "01.") on the app page — white at 20%, so the rule dims with its plane instead of adding a second grey. | Nothing in the inventory is chromatic: the two greens sit a few points off neutral, so saturated colour enters only inside photographs and third-party badges. ## Tokens — Typography ### PP Neue Montreal Medium — the entire system: display, headings, body, nav, table cells, inputs · `--font-sans` - **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, Inter - **Weights:** 400 - **Sizes:** 76.8px, 51.2px, 30px, 26.88px, 24.32px, 20.48px, 16px (the inherited container default) - **Line height:** 80.4px on display (≈1.05) down through 38.4px on the body step (≈1.43), 43.52px on secondary links (≈1.62) and 30.912px on controls (≈1.15) - **Letter spacing:** `normal` on every row of the census, display through caption — no optical tightening anywhere - **Role:** One family, one weight, doing everything. The face carries its medium cut in the file, so the CSS never asks for anything but 400; weight is simply not a hierarchy tool here. ### Times — no measured role · `--font-serif` - **Substitute:** Times New Roman, Liberation Serif, serif - **Weights:** 400 - **Sizes:** `not measured` - **Line height:** `not measured` - **Letter spacing:** `not measured` - **Role:** The inventory names the family second but the type census assigns it no size, colour or carrier, so its role is `not measured` — most likely the UA default surfacing on an unstyled node *(inferred)*. Do not design with it. ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | Display | 76.8px | 80.4px | normal | `--text-display` | | Headline | 51.2px | 64px | normal | `--text-headline` | | Slider glyph | 30px | 30px | normal | `--text-glyph` | | Body / subheading | 26.88px | 38.4px | normal | `--text-body` | | Secondary link | 26.88px | 43.52px | normal | `--text-body` / `--leading-link` | | Control | 26.88px | 30.912px | normal | `--text-body` / `--leading-control` | | Legal link | 24.32px | 34.56px | normal | `--text-link-sm` | | Caption | 20.48px | 28.16px | normal | `--text-caption` | | Container default | 16px | 18.4px | normal | `--text-base` | Every step but the 30px slider glyph is an exact multiple of 0.64px — 76.8 is 120 of them, 26.88 is 42, 20.48 is 32 — which is the fingerprint of a viewport-scaled root rather than a hand-set px ramp. ## Tokens — Spacing & Shapes **Base unit:** 8px — the gap (24px), the footer column gap (40px) and the dominant radius (8px) are all multiples of it; control paddings (17px, 41px) and the viewport-derived 102.4px gutter are hand-set off that grid. **Density:** comfortable, verging on editorial — panels are inset 182–190px vertically. ### Spacing Scale | Name | Value | Token | |------|-------|-------| | Select pad Y | 16px | `--space-select-y` | | Pill pad Y | 17px | `--space-pill-y` | | Input pad Y | 20px | `--space-input-y` | | Gap | 24px | `--space-gap` | | Link pad Y | 26px | `--space-link-y` | | Cell pad Y | 30px | `--space-cell-y` | | Input pad X | 32px | `--space-input-x` | | Row pad Y / footer column gap | 40px | `--space-row-y` | | Pill pad X | 41px | `--space-pill-x` | | Cell pad X | 52px | `--space-cell-x` | | Foot band | 54px | `--space-foot-y` | | Panel inset X | 62px | `--space-panel-x` | | Page gutter | 102.4px | `--space-gutter` | | Footer band | 110px | `--space-footer-y` | | Section, short | 162px | `--space-section-sm` | | Section | 182px | `--space-section` | | Section, tall | 190px | `--space-section-lg` | ### Border Radius | Element | Value | |---------|-------| | Media tile, dark panel, input, submit | 8px | | Language select | 7px | | Header order pill | 42.24px | | Slider round button | 50% | | Plan table, head row | 8px 8px 0px 0px | | Plan table, foot row | 0px 0px 8px 8px | | Sections, footer, table cells | 0px | 8px carries 63 of the painted radii; the exceptions are the header pill at 42.24px, the language select at 7px and the two round slider buttons at 50%. The 7px select is the system's one unexplained corner — treat it as a bug, not a token. ### Shadows None. The walk records `box-shadow` across all four pages and finds none; every shadow in this document would be a reconstruction. ### Layout - **Page max-width:** `not measured` — the census carries no max-width row; the page is held by its gutter instead. - **Section gap:** 182px on the returns/install and app-security panels, 190px on the smartwatch and eco panels, 162px on the investor panel, 110px on the footer band. - **Card padding:** 182px 62px on the dark panel; 20px 32px on the input. - **Element gap:** 24px on 55 elements — the single grid gap of the system; 40px only between footer link columns. ## Components ### Header Bar **Role:** The persistent top bar — wordmark, four section links, one order pill — laid straight onto whatever the page's first surface happens to be. Built from `.t-link--primary-label`: the nav labels are PP Neue Montreal Medium 26.88px / 400 / 38.4px, letter-spacing normal, in `#FFFFFF`, across 63 elements on all pages. The bar has no fill, border or shadow of its own — `.js-section.c-Header.container` and `.c-Header-inner` carry only white ink — so the header floats on the `#9EA29F` hero band and the white type belongs to the band, not to a chrome strip. Tiles show a short hairline under the active link; the census does not measure it, so its colour and offset are `not measured`. Build it as a transparent overlay, never a solid bar. ### Order Pill **Role:** The one commerce control in the chrome, present on every page. `.c-Header-order.t-btn--primary` — `a` ×4, all pages: padding 17px 41px, radius 42.24px, border none, shadow none, type 26.88px / 400 / 38.4px normal. The measured fill is none; in the tiles the capsule reads a shade lighter than the band behind it *(inferred)*, which is how a translucent white resolves. The radius is the tell: 17 + 38.4 + 17 gives a 72.4px box, so 42.24px overshoots the half-height and the shape becomes a full capsule — the system's only one. No colour change, no border, no shadow. ### Hero Band **Role:** The first screen of a section: a flooded green-grey field, an oversize white statement, and the product photographed into the right half. `.shopify-section.js-section.c-HomeHero.container` — `section` ×1 on the home page: fill `#9EA29F`, padding 0px 102.4px, radius 0px, border none, shadow none. The sibling `.shopify-section.c-HowItWorksHero.js-section` paints the same `#9EA29F` on the how-it-works and about pages, ×2. The title `.c-HomeHero-title.t-h1` sets 76.8px / 400 / 80.4px normal in `#FFFFFF` across 27 elements; the inner grid (`.c-HomeHero-inner.grid-12`) runs the standard 24px gap. Zero vertical padding is deliberate — the band's height is the photograph's, and the type is placed by the grid rather than padded away from it. ### Statement Headline **Role:** The full-width argument that opens a white section — the sentence the page is actually about. `.c-HomeDiscover-title.t-h1` — `h2` ×18 across all pages: 76.8px / 400 / 80.4px, letter-spacing normal, `#000000` on the white canvas at 21:1. The 1.047 line-height sets the block almost solid, so a four-line headline reads as one dense mass. It is offset into the right columns with a small `#000000` label parked in the left margin — the page's whole hierarchy is that one jump, 26.88px to 76.8px, a ratio of 2.86. ### Rule-Underlined Link **Role:** A standalone link that announces itself with a full-width hairline instead of an underline. `.t-link.t-h3` — `a` ×4 on the about page, sample text "Vlaio": ink `#FFFFFF`, 26.88px / 400 / 38.4px normal, padding 26px 0px, radius 0px, border 1px `#8E9194`, shadow none. The 26px top padding lifts the label clear of the rule; there is no horizontal padding, so the rule runs the full column and the link's width is the grid's, not the text's. The home and how-it-works pages carry the same shape with a trailing arrow ("Discover our smart mailbox →"), but the census does not measure that variant — its rule colour and padding are `not measured`. ### Numbered Step List **Role:** A stack of numbered promises where only the open one is legible and the rest wait in grey. `.js-item-title.c-HomeLifeIntegration-list-title.col-7.start-6` measures two ways on the home page: `div` ×3 at padding 40px 0px, `div` ×1 at padding 0px 0px; both carry border 1px `#D8D8D8`, radius 0px and no shadow. Titles set 51.2px / 400 / 64px normal in `#A7AAAD` on the three closed rows; the open row reads black in the tiles, but the census does not measure that ink, so it is `not measured`. The index (`.c-HomeLifeIntegration-list-title-index.col-1.col-sm-1`, "02." at 26.88px / 38.4px in `#A7AAAD`) sits in a single grid column while the title starts at column six. The hairline is the only divider — no fill, no chevron, no card. ### Dark Inset Panel **Role:** The system's one dark plane, used to hold a product or app moment apart from the page. Three measured variants, all fill `#4B514D`, radius 8px, border none, shadow none: `.c-HowItWorksReturnsInstall-inner` at padding 182px 62px (`div` ×3, how-it-works and app pages), `.c-AppSmartWatch-inner.grid-12` at 190px 62px (`div` ×2, app and about), `.c-AboutInvestors-inner.grid-12` at 162px 62px (`div` ×1, about). The home page paints the same fill on `.c-HomeApp-inner`, whose padding is `not measured`. The inset is asymmetric — roughly three times more air above and below than at the sides — which makes the panel read as a held frame rather than a section. White type on it runs about 8.1:1. ### Panel Step Title **Role:** The numbered line inside a dark panel that names what the app is doing. `.c-HomeApp-step-info-title.t-h3` — `h3` ×14 plus `h2` ×3 across all pages, sample "01. Track your packages.": 26.88px / 400 / 38.4px, letter-spacing normal, `#FFFFFF`. The number is set inline in the same size and weight as the sentence, with a full stop rather than a badge — no circle, no rule, no tint. Tiles show the inactive steps dimmed against the panel; that dimmed ink is `not measured`. Keep the numeral typographic: the moment it becomes a chip, the panel stops being editorial. ### Rounded Media Tile **Role:** Every photograph and render on the site, in the only container the system gives an image. `.c-HomeDiscover-slider-item-img.lazy-img.rounded-img` — `div` ×6 on the home and about pages: radius 8px, border none, shadow none, padding 0px 0px. The same treatment repeats on `.c-HowItWorksSlider-item-img.lazy-img.rounded-img` (×9), `.c-AboutStaff-item-img.lazy-img.rounded-img` (×3) and `.c-AppTracking-img.lazy-img.rounded-img` (×2) — the identical 8px, borderless, shadowless box. Images run edge-to-edge in the grid with the 24px gap between them; nothing is cropped to a circle, framed, or lifted off the page. ### Newsletter Field **Role:** The single form in the system — an email line with its submit arrow living inside it. `.t-input` — `input` ×4, all pages: ink `#000000`, 26.88px / 400 / 30.912px normal, padding 20px 32px, radius 8px, border 1px `#D8D8D8`, no fill, no shadow. `.c-Footer-form-submit.t-btn` — `button` ×4, all pages: 26.88px / 400 / 30.912px, padding 20px 32px, radius 8px, border none, no fill, no shadow. Matching vertical padding lets the button sit flush inside the field's right edge as a bare arrow rather than a second box. The 1.15 line-height on both is the tightest in the system — controls compress where prose breathes. ### Language Select **Role:** The locale switcher in the footer's bottom band, flag first. `.js-select` — `select` ×4, all pages, options "English Français Nederlands": ink `#000000`, 26.88px / 400 / 30.912px normal, padding 16px 52px, radius 7px, border 1px `#D8D8D8`, no fill, no shadow. The 52px left padding is the flag's slot; the chevron sits in the matching right one. Note the 7px radius — one pixel off the system's 8px, on the only element that uses it. ### Footer **Role:** The closing plate: wordmark, promise line, two link columns, newsletter, awards, then a legal band. `.shopify-section.js-section.c-Footer.container` — `footer` ×4 on all pages: padding 110px 102.4px, radius 0px, border 1px `#D8D8D8`, no shadow, container type 16px / 400 / 18.4px. Inside it, `.c-Footer-foot` (`div` ×4) adds padding 54px 0px above its own 1px `#D8D8D8` rule, splitting the legal band off the columns. Columns are spaced by the 40px gap on `.c-Footer-links.col-5.start-4.col-sm-12`; the links are `.t-link--secondary` at 26.88px / 400 / 43.52px in `#8E9194`, the legal row the same class at 24.32px / 400 / 34.56px, the disclaimer `.t-h5` at 20.48px / 400 / 28.16px in `#A7AAAD`. Column headings stay black while every link stays grey — the footer's hierarchy is ink alone. ## Do's and Don'ts ### Do - Set everything in PP Neue Montreal Medium at 400. The weight census records one weight for each family; the face's medium cut is in the file, so asking for 500 or 700 breaks the system. - Leave letter-spacing at `normal`, including at 76.8px. Every row of the type census reads `normal`, and the display line-height of 80.4px is what makes the block feel drawn. - Separate hierarchy by ink: `#000000` for what must be read, `#8E9194` for supporting prose, `#A7AAAD` for state and small print — the body size stays 26.88px through all three. - Use `#D8D8D8` as a 1px border and nothing else. Its inventory row reads 79 observations, border 79, text 0, fill 0, on carriers `.shopify-section.js-section.c-Footer.container`, `.t-input` and `.js-item-title.c-HomeLifeIntegration-list-title.col-7.start-6` — every one of them a `border 1px #D8D8D8`. - Round with 8px. It is the radius on 63 elements — media, panels, inputs and the submit button alike. - Give a dark panel real air: 62px at the sides and 162–190px top and bottom, matching `.c-AboutInvestors-inner.grid-12` through `.c-AppSmartWatch-inner.grid-12`. ### Don't - Don't add a shadow. The shadows block records none across all four pages, and every component row confirms it — `.c-Header-order.t-btn--primary`, `.c-HowItWorksReturnsInstall-inner`, `.t-input` and `.c-HomeDiscover-slider-item-img.lazy-img.rounded-img` all read `shadow none`. Elevation here is plane and hairline only. - Don't fill anything with `#000000`. Its inventory row reads 593 observations, text 593, fill 0, carried by `div` ×205, `span` ×50, `img` ×47 and `td` ×39 on classes like `.c-HomeDiscover-title.t-h1` and `.t-input` — black is ink, never a surface. - Don't tint a button. The order pill (`.c-Header-order.t-btn--primary`) measures no fill and no border; the site has no CTA colour, and inventing one would be the loudest thing on the page. - Don't shrink the display step to make room. The scale jumps straight from 26.88px to 76.8px — there is no intermediate heading on the white pages, and the gap is the voice. - Don't set reading copy in `#A7AAAD`. At roughly 2.3:1 on white it is below reading contrast by design; it belongs on closed step titles and the newsletter disclaimer. - Don't introduce a chromatic accent. The painted inventory is eight hexes long — `#000000`, `#FFFFFF`, `#8E9194`, `#D8D8D8`, `#A7AAAD`, `#4B514D`, `#9EA29F`, `#F1F3F4` — and the most chromatic of them is the `#4B514D` on `.c-HowItWorksReturnsInstall-inner`, a green a few points off neutral. Colour belongs inside a photograph or an award badge. ## Surfaces | Level | Name | Value | Purpose | |-------|------|-------|---------| | 0 | Canvas | `#FFFFFF` | The body fill and the ground between every section. | | 1 | Table surface | `#F1F3F4` | The plan-table head row on the app page — a step so small it reads as a shading, not a card. | | 2 | Hero band | `#9EA29F` | The full-bleed first screen on the home, how-it-works and about pages. | | 3 | Dark panel | `#4B514D` | The inset block that holds the app and product moments. | ## Elevation There is no elevation in the shadow sense — the shadow census is empty across all four pages. Depth is carried three ways. First, luminance: white canvas, then the near-white `#F1F3F4`, then `#9EA29F`, then `#4B514D` — a four-step ladder from ~100 down to ~31 in relative lightness, each step a whole block rather than a card. Second, the 8px corner: a `#4B514D` panel or an image tile with softened corners inside a square page reads as an object dropped onto the sheet. Third, the 1px `#D8D8D8` hairline, which does all the dividing a border-plus-shadow card would do elsewhere — footer edges, step-list rows, the plan-table grid, input and select outlines. Elevation is never ambient; it is always a named plane. ## Imagery Photography carries the entire brand, doing two distinct jobs. Product renders sit on a flat light-grey seamless with no cast shadow and no environment, shot close enough that the mailbox's lit oval and the "143 / Smith, Anderson / GEEN RECLAME" display panel become graphic elements. Lifestyle photography — a woman in a rust shirt lifting the lid, a woman at a laptop, the mailbox planted in gravel against a brick wall — is warm, daylit and unstyled, and it is the only place a saturated colour appears. Both live in the same 8px `rounded-img` container. App UI appears inside device mockups floating on the grey seamless, carrying a second, lighter product interface the web system never uses. Iconography is close to absent: an arrow, a chevron, a check. Award badges (CES, reddot, Innovation Playground) sit small and unretouched in the footer, in their own colours. ## Layout Full-bleed bands alternate with contained white sections. The hero runs edge-to-edge with a 102.4px horizontal gutter and zero vertical padding, so its height is the photograph's; the footer repeats that gutter at 110px vertical. Between them, everything sits on a twelve-column grid with explicit starts — `.col-6.start-2` for a headline, `.col-7.start-6` for a step title, `.col-3` for a plan column, `.grid-sm-6` for the small-screen fallback — and a single 24px gap on 55 elements. The signature move is the left margin: a small black label ("Never let a parcel delivery rule your entire schedule again.") parked in the first columns while the display sentence starts around column six, leaving a deep block of white most systems would fill. Section rhythm inside the dark panels is 162px, 182px or 190px vertical; on white, sections are separated by empty grid rows rather than padding, which is why the census records so few large paddings outside the panels and footer. ## Typography Voice Two modes, and nothing between them. Mode one is the 76.8px display at 80.4px leading — a 1.047 ratio, effectively solid-set — with letter-spacing at `normal`. That combination is the whole personality: dense enough to read as a shape, but untracked, so it stays a sentence rather than becoming a logotype. Mode two is 26.88px at 38.4px, a 1.43 ratio, and this step does an unusual amount of work — subhead ("Smart technology at your front door."), paragraph, nav label, table cell and input text at once. When one size has to be five things, hierarchy comes from ink and leading instead: `#000000` at 38.4px is a heading, `#8E9194` at 38.4px is body, `#8E9194` at 43.52px is a navigation list, `#000000` at 30.912px is a control. The 51.2px headline is scarce — the census finds it only on the home page — so in practice a page steps from body straight to display. ## Agent Prompt Guide ## Quick Color Reference - background: `#FFFFFF` - text: `#000000` - surface: `#F1F3F4` - border: `#D8D8D8` - accent: `#4B514D` - primary action: no distinct CTA color — the order pill measures no fill and no border ## Example Component Prompts 1. **Hero band**: Full-bleed section, fill `#9EA29F`, padding `0 102.4px`, radius 0, no border, no shadow. Twelve-column grid, 24px gap. Headline in PP Neue Montreal Medium 400 at 76.8px / 80.4px, letter-spacing normal, `#FFFFFF`, starting around column two and wrapping to three lines. Product photograph bleeding off the right edge and the bottom. Transparent header overlaid on top. 2. **Order pill**: Inline link, no fill, no border, no shadow, radius 42.24px, padding `17px 41px`, text PP Neue Montreal Medium 400 at 26.88px / 38.4px, letter-spacing normal, `#FFFFFF`. Right-aligned in the header. Full capsule shape; no colour change on state. 3. **Dark inset panel**: Block, fill `#4B514D`, radius 8px, padding `182px 62px`, no border, no shadow, sitting on `#FFFFFF`. Left column: a 26.88px / 38.4px `#FFFFFF` step title formatted "01. Track your packages." with a `#FFFFFF` paragraph under it. Right column: a device mockup on a light grey seamless in an 8px radius container. 4. **Numbered step list**: Rows separated by 1px `#D8D8D8` borders, radius 0, no fill. Open row padding `40px 0`, closed rows `0`. Index numeral at 26.88px / 38.4px in `#A7AAAD` in the first grid column; title at 51.2px / 64px, `#A7AAAD` when closed, starting at column six. No chevrons, no card, no hover fill. 5. **Newsletter field**: Input, no fill, border 1px `#D8D8D8`, radius 8px, padding `20px 32px`, text 26.88px / 30.912px in `#000000`, placeholder in `#8E9194`. Submit button inside the right edge: no fill, no border, radius 8px, padding `20px 32px`, arrow glyph only. Disclaimer beneath at 20.48px / 28.16px in `#A7AAAD`. ## Similar Brands - **Vitsœ** — the same belief that a white page, one grotesk and a lot of empty grid is enough, with the product photograph doing the persuading. - **Bang & Olufsen** — desaturated grey-green grounds and product renders shot as objects, with type that stays quiet next to the hardware. - **Teenage Engineering** — one weight, one radius vocabulary, no decorative colour; hierarchy by size jump and plane. - **Muji** — a neutral-only palette where saturation exists solely inside photography, on a grid left deliberately underfilled. - **Aesop** — hairline rules instead of cards, shadowless surfaces, and a tonal range narrow enough that one dark plane becomes an event. ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-canvas: #FFFFFF; --color-ink: #000000; --color-ink-muted: #8E9194; --color-ink-faint: #A7AAAD; --color-rule: #D8D8D8; --color-panel: #4B514D; --color-band: #9EA29F; --color-surface: #F1F3F4; --color-rule-on-dark: rgba(255, 255, 255, 0.2); /* Typography — Families */ --font-sans: 'PP Neue Montreal Medium', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif; --font-serif: 'Times', 'Times New Roman', Georgia, serif; /* Typography — Scale */ --text-display: 76.8px; --leading-display: 80.4px; --text-headline: 51.2px; --leading-headline: 64px; --text-glyph: 30px; --leading-glyph: 30px; --text-body: 26.88px; --leading-body: 38.4px; --leading-link: 43.52px; --leading-control: 30.912px; --text-link-sm: 24.32px; --leading-link-sm: 34.56px; --text-caption: 20.48px; --leading-caption: 28.16px; --text-base: 16px; --leading-base: 18.4px; --tracking: normal; /* Spacing */ --space-select-y: 16px; --space-pill-y: 17px; --space-input-y: 20px; --space-gap: 24px; --space-link-y: 26px; --space-cell-y: 30px; --space-input-x: 32px; --space-row-y: 40px; --space-pill-x: 41px; --space-cell-x: 52px; --space-foot-y: 54px; --space-panel-x: 62px; --space-gutter: 102.4px; --space-footer-y: 110px; --space-section-sm: 162px; --space-section: 182px; --space-section-lg: 190px; /* Border Radius */ --radius-none: 0px; --radius-select: 7px; --radius-md: 8px; --radius-pill: 42.24px; --radius-round: 50%; --radius-table-top: 8px 8px 0px 0px; --radius-table-bottom: 0px 0px 8px 8px; } ``` ### Tailwind v4 ```css @theme { --color-canvas: #FFFFFF; --color-ink: #000000; --color-ink-muted: #8E9194; --color-ink-faint: #A7AAAD; --color-rule: #D8D8D8; --color-panel: #4B514D; --color-band: #9EA29F; --color-surface: #F1F3F4; --color-rule-on-dark: rgba(255, 255, 255, 0.2); --font-sans: 'PP Neue Montreal Medium', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif; --font-serif: 'Times', 'Times New Roman', Georgia, serif; --text-display: 76.8px; --text-display--line-height: 80.4px; --text-headline: 51.2px; --text-headline--line-height: 64px; --text-glyph: 30px; --text-glyph--line-height: 30px; --text-body: 26.88px; --text-body--line-height: 38.4px; --text-link-sm: 24.32px; --text-link-sm--line-height: 34.56px; --text-caption: 20.48px; --text-caption--line-height: 28.16px; --text-base: 16px; --text-base--line-height: 18.4px; --leading-link: 43.52px; --leading-control: 30.912px; --tracking-normal: normal; --spacing-select-y: 16px; --spacing-pill-y: 17px; --spacing-input-y: 20px; --spacing-gap: 24px; --spacing-link-y: 26px; --spacing-cell-y: 30px; --spacing-input-x: 32px; --spacing-row-y: 40px; --spacing-pill-x: 41px; --spacing-cell-x: 52px; --spacing-foot-y: 54px; --spacing-panel-x: 62px; --spacing-gutter: 102.4px; --spacing-footer-y: 110px; --spacing-section-sm: 162px; --spacing-section: 182px; --spacing-section-lg: 190px; --radius-none: 0px; --radius-select: 7px; --radius-md: 8px; --radius-pill: 42.24px; --radius-round: 50%; } ```