--- version: alpha name: "Starling Bank" website: "https://www.starlingbank.com" description: >- A UK neobank whose marketing site pairs a deep aubergine ink (#321e37, wired as `--cm-font-colour` and the universal text color across the whole page) with an electric mint-cyan accent (#19d3c5, the `--cm-primary-btn-bg`) — the primary CTA fill — and a brighter neon mint (#50ffeb) reserved for the secondary-button border treatment. The hero is a full-bleed dark photographic band (a person checking the Starling app on their phone) with a 48px Avantt h1 in white floating over it, a mint pill CTA inline beside the headline, and a tightly-leaded cookie-consent modal in cream sitting flush in the lower-right. Below the fold the page drops to white, lays out a 5-up card-color picker showing the Starling debit card in mint, lavender, aubergine, and cream, and runs a savings-account grid where each tile carries a full-bleed customer photograph. Avantt at weights 450, 550, and 600 carries display through body; CoFo Sans Semi-Mono at weight 550 carries every button, every category label, and every small-caps annotation — the typographic split is the system's distinguishing move. seo: title: "Starling Bank Design System for React — aubergine #321e37, Avantt + CoFo Sans Semi-Mono, 18 components" metaDescription: "Starling Bank's marketing system as a DESIGN.md file. Aubergine ink with mint-cyan voltage, Avantt display paired with CoFo Sans Semi-Mono for buttons and labels, app-screenshot-led product cards. Tokens for React, Next.js, and AI coding tools." highlights: - "Aubergine-as-ink — #321e37 carries 611 occurrences as the universal text and border color, replacing what most banks would render as off-black" - "Two-tone mint voltage — #19d3c5 fills the primary CTA, #50ffeb borders the secondary; the brighter neon never fills, the deeper mint never outlines" - "Avantt + CoFo Sans Semi-Mono pairing — Avantt at unusual weights (450, 550, 600) for spoken surfaces, CoFo Sans Semi-Mono at 550 for every button and label" - "Card-color picker as feature — a 5-up scrolling row showing the Starling debit card in mint, lavender, aubergine, sand, and cream lets the brand palette double as a product configurator" - "App-screenshot-led savings band — three lifestyle photographs with phone-screen overlays let the product UI carry the marketing band, no decorative illustration" tags: - "Banking & Payments" - "Fintech & Crypto" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Starling Bank's marketing site refuses the neobank-as-startup aesthetic in two specific ways. First, it picks aubergine #321e37 — a near-purple very-dark plum — as the universal text and border color instead of off-black or a slate gray; the tone appears 611 times in the captured page, more than any other color, and quietly tints every surface that would otherwise read as institutional. Second, it splits the accent voltage in two: a deep mint-cyan #19d3c5 fills the primary CTA pill, and a brighter neon mint #50ffeb does the secondary-button border and the inline link highlight. The two mints look almost identical at a glance, but Starling uses them in strictly opposite roles — the saturated one outlines, the deeper one fills. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from the aubergine-ink tier, the two-tone mint accent, the customer-photography lavenders and sands, and the structural cream-modal surface; 12 typography tokens split across two families — Avantt for every spoken surface at weights 450, 550, and 600, and CoFo Sans Semi-Mono for buttons, labels, and small-caps annotations at weight 550; 5 radius tokens centered on a tight 4px corner with a 24px tier for cards; an 8px base spacing scale with the 3.75px gap unit Starling uses inside its category-tab strip; and 18 components covering the mint CTA, the cream cookie modal, the dark photographic hero, the card-color picker, and the app-screenshot savings tile. Feed this file to Claude or Cursor and it reproduces Starling's specific moves: aubergine ink instead of off-black, two-tone mint accent with strict fill-vs-border discipline, the Avantt-plus-mono typographic split, tight 4px corner radius on body chrome with a 24px lift on cards, and the willingness to let an in-app phone screenshot carry an entire feature band. The one move worth borrowing only if you have a real card-color SKU lineup: the 5-up card-picker that doubles as the brand-palette gallery. Most neobanks need that band to be a feature-strip; Starling makes it a product configurator. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.starlingbank.com" title: "Starling Bank — official site" description: "Starling Bank's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Starling Bank's primary brand color?" answer: "Starling runs a two-tone identity. The structural voltage is aubergine #321e37 (wired as --cm-font-colour, --cm-link-font-colour, --cm-primary-btn-font-colour, --cm-focus-colour) — it carries 611 occurrences in the captured page as the universal text and border color. The chromatic voltage is split into two mints: deep mint-cyan #19d3c5 (wired as --cm-primary-btn-bg and --cm-accent-colour) fills the primary CTA pill, and brighter neon mint #50ffeb (wired as --cm-secondary-btn-bg, --cm-secondary-btn-border, --cm-link-bg-colour) does the secondary-button border and the inline link highlight. The two mints are visually similar but functionally opposite: one fills, the other outlines." - id: "typography" title: "What typefaces does Starling use, and what should I use as substitutes?" answer: "The system runs two families. Avantt (with Inter tight as fallback, wired as --cm-font-family) carries every spoken surface — hero h1 at 48px / weight 550 with -1.44px tracking, section h2 at 36px / 550, body at 18px / 450. Weights 450, 550, and 600 are deliberately non-standard. CoFo Sans Semi-Mono (with Roboto Mono as fallback, wired as --cm-font-family-btn and --cm-alt-font-family) carries every button label, every category chip, and every small-caps annotation at 18px / weight 550. The closest open-source substitutes are Inter for Avantt (at weight 400 / 500 / 600 since Inter does not ship the in-between 450/550 weights) and JetBrains Mono or IBM Plex Mono for CoFo Sans Semi-Mono." - id: "two-tone-mint" title: "Why does Starling use two different mints?" answer: "The two-tone mint is functional, not decorative. Deep mint-cyan #19d3c5 (lightness 78) is the fill color — it sits behind the primary CTA pill and behind product cards in the card-color picker. Brighter neon mint #50ffeb (lightness 90) is the border and highlight color — it outlines the secondary CTA pill, marks inline link backgrounds, and renders behind the keyboard-focus ring. The brand's strict discipline is that the saturated one never fills and the deeper one never outlines, so a designer reading either of them in isolation knows immediately which functional role it is signaling. Together with aubergine they make the full palette." - id: "radii-and-shapes" title: "What corner-radius scale does Starling use?" answer: "The scale is tight-corner-with-card-lift. The dominant body radius is 4px (23 occurrences across inputs, dropdowns, and small chips), which keeps Starling closer to a financial-product UI than a generic SaaS pill aesthetic. Cards lift to 16px and 24px (9 occurrences each), the Starling app card-color picker uses a 17.9px radius (5 occurrences) to match the physical card geometry, and the dark photographic hero uses a 30px radius on its top corners. The mint CTA pills carry a 4px corner — distinctively non-pill, which separates Starling from Monzo and Revolut whose primary CTAs are fully rounded." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own UK neobank marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Starling's specific moves: aubergine ink instead of off-black, two-tone mint accent with strict fill-vs-border discipline, the Avantt-plus-mono typographic pairing, 4px corners on body chrome with 16-24px lift on cards, and app-screenshot product bands. The tokens resolve cleanly without invention — every hex and font name in the file matches the live CSS Starling ships. One caveat: the two-tone mint discipline only pays off if you commit to the strict fill-vs-border rule. Without that rule the two mints read as a palette accident." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#19d3c5" primary-hover: "#b1eddf" primary-pressed: "#277463" accent: "#50ffeb" accent-bright: "#29e6d1" accent-tint: "#a7fff5" ink: "#321e37" ink-muted: "#706273" ink-soft: "#9a97ab" canvas: "#ffffff" surface-cream: "#f6efea" surface-warm: "#f2dac5" surface-violet: "#d7a5f0" hairline: "#d6d2d7" feedback-critical: "#de352d" typography: display-xl: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 48px fontWeight: 550 lineHeight: 54px letterSpacing: "-1.44px" display-lg: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 36px fontWeight: 550 lineHeight: 40px letterSpacing: "-1.08px" display-md: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 28px fontWeight: 450 lineHeight: 28px letterSpacing: "-0.56px" heading-md: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 26px letterSpacing: "-0.48px" heading-sm: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 21.06px fontWeight: 600 lineHeight: 24px letterSpacing: "-0.36px" body-md: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 18px fontWeight: 450 lineHeight: 24px letterSpacing: "-0.36px" body-sm: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 15px fontWeight: 450 lineHeight: 25.5px letterSpacing: "-0.36px" body-emphasis: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 24px letterSpacing: "-0.36px" caption: fontFamily: "Avantt, \"Inter tight\", sans-serif" fontSize: 12px fontWeight: 450 lineHeight: 19.2px letterSpacing: "-0.36px" button-md: fontFamily: "\"CoFo Sans Semi-Mono\", \"Roboto mono\", sans-serif" fontSize: 18px fontWeight: 550 lineHeight: 18px letterSpacing: "-0.36px" mono-label: fontFamily: "\"CoFo Sans Semi-Mono\", \"Roboto mono\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 30px letterSpacing: "-0.28px" mono-md: fontFamily: "\"CoFo Sans Semi-Mono\", \"Roboto mono\", sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: "-0.36px" rounded: none: "0px" sm: "4px" md: "16px" card: "17.904px" lg: "24px" hero: "30px" spacing: xs: "3.75px" sm: "6px" md: "12px" base: "16px" lg: "20px" xl: "24px" 2xl: "32px" 3xl: "48px" 4xl: "96px" components: hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.hero}" padding: "96px 24px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.caption}" mono-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.mono-label}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 16px" height: "40px" borderColor: "{colors.primary}" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 16px" height: "40px" button-secondary: backgroundColor: "{colors.accent}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 16px" height: "40px" borderColor: "{colors.accent}" button-secondary-hover: backgroundColor: "{colors.accent-bright}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "10px 16px" height: "40px" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "12px 24px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "6px 12px" cookie-modal: backgroundColor: "{colors.surface-cream}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "24px" card-color: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.card}" padding: "0" card-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "0" link-highlight: backgroundColor: "{colors.accent}" textColor: "{colors.ink}" typography: "{typography.body-md}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "10px 16px" height: "40px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Starling Bank's marketing system makes two unusual choices for a UK neobank. **Aubergine ink.** Where Monzo runs a near-black navy on its display text and Revolut commits to flat black, Starling picks deep aubergine `{colors.ink}` (#321e37) as the universal text and border color — 611 occurrences across the captured page, including the body of every paragraph and the outline of every input. The tone is almost-but-not-quite a near-black; it adds a quiet purple undertone to the page that you read as warmth before you read as color. Wired in CSS as `--cm-font-colour`, `--cm-link-font-colour`, and `--cm-focus-colour`, it does the load-bearing work that off-black would normally do. The chromatic voltage splits in two. Deep mint-cyan `{colors.primary}` (#19d3c5) is the fill color — it sits behind the primary CTA pill and behind product cards in the card-color picker, wired as `--cm-primary-btn-bg` and `--cm-accent-colour`. Brighter neon mint `{colors.accent}` (#50ffeb) is the border and highlight color — it outlines the secondary CTA pill, marks the inline link-text background, and renders behind the keyboard-focus ring, wired as `--cm-secondary-btn-bg`, `--cm-secondary-btn-border`, and `--cm-link-bg-colour`. The two mints look almost identical at a glance, but Starling uses them in strictly opposite roles. The two-tone mint discipline is the move; collapse it into one mint and the system loses its identity. Typography is the second distinguishing move: Avantt at three non-standard weights (450, 550, 600) for every spoken surface, plus CoFo Sans Semi-Mono at weight 550 for every button label and small-caps annotation. The split is unusual in two ways — first, weight 450 and 550 are deliberately in-between the conventional 400/500/600 stops, which gives Avantt a slightly heavier feel without committing to the visual weight of a full medium or semibold; second, the mono never appears in body, only in actions and labels. Where Cloudflare runs FT Kunst Grotesk plus Apercu Mono and lets the mono carry footnotes and caption strips, Starling restricts the mono to buttons and labels alone — the body never touches it. **Key Characteristics:** - Aubergine ink (`{colors.ink}` — #321e37) carries 611 occurrences as the universal text and border color, replacing what most banks would render as off-black or slate. - Two-tone mint accent: `{colors.primary}` (#19d3c5) fills the primary CTA, `{colors.accent}` (#50ffeb) borders the secondary and highlights inline links — strict fill-vs-border discipline. - Avantt at unusual weights (450, 550, 600) for spoken surfaces; CoFo Sans Semi-Mono at weight 550 for every button and small-caps label. - 4px corner radius (`{rounded.sm}`) on inputs, buttons, and chips — distinctively non-pill, which separates Starling from Monzo and Revolut whose CTAs are fully rounded. - Card-color picker as feature band — a 5-up scrolling row showing the Starling debit card in five colorways (mint, lavender, aubergine, sand, cream) that doubles as the brand-palette gallery. - Photographic savings-account grid — three lifestyle photographs each with a phone-screen overlay; the in-app UI carries the marketing copy without any decorative illustration layer. - Cream cookie-consent modal (`{component.cookie-modal}`) sits flush against the dark hero in a `{colors.surface-cream}` (#f6efea) surface — the modal is the first warm element a visitor sees, not a generic light-gray banner. - 3.75px gap unit (`{spacing.xs}`) inside the category-tab strip — Starling's tightest module, used to pack mono-label chips together. ## Colors ### Brand voltage (two-tone mint) - **Mint Cyan Fill** (`{colors.primary}` — #19d3c5): the primary fill color. Wired as `--cm-primary-btn-bg` and `--cm-accent-colour`. Fills the primary CTA pill ("Apply now"), the active card in the card-color picker, and the focus-glow on form fields. Strict fill role — never outlines. - **Mint Hover Soft** (`{colors.primary-hover}` — #b1eddf): the primary CTA's hover state, wired as `--cm-primary-btn-bg-hover`. A paler mint that lifts the pill without changing its hue. - **Mint Pressed** (`{colors.primary-pressed}` — #277463): the pressed state on the primary CTA, wired as `--cm-primary-btn-bg-active`. Drops in lightness to mark the press without losing the mint family. - **Neon Mint Border** (`{colors.accent}` — #50ffeb): frequency 15 — used as background (8) and border (7). The secondary-button background and the inline link-background highlight. Wired as `--cm-secondary-btn-bg`, `--cm-secondary-btn-border`, `--cm-link-bg-colour`. Strict border / highlight role; never fills a primary action. - **Mint Bright Hover** (`{colors.accent-bright}` — #29e6d1): the secondary-button hover state, wired as `--cm-secondary-btn-bg-hover` and `--cm-secondary-btn-bg-active`. - **Mint Tint** (`{colors.accent-tint}` — #a7fff5): the palest mint in the system, used as a subtle background wash inside the card-color picker. ### Text & Hairlines - **Aubergine Ink** (`{colors.ink}` — #321e37): frequency 611 — the universal text and border color. Used as text (306), border (299), background (4), and shadow (2). Wired as `--cm-font-colour`, `--cm-link-font-colour`, `--cm-primary-btn-font-colour`, `--cm-focus-colour`. Carries every body paragraph, every nav link, every input outline. - **Ink Muted** (`{colors.ink-muted}` — #706273): frequency 25 — secondary text under headlines, the back-button icon color, footer category sub-labels. Wired as `--cm-back-btn-svg-color` and `--cm-back-btn-color-hover`. - **Ink Soft** (`{colors.ink-soft}` — #9a97ab): frequency 4 — the legal-copy footer color, used for the bottom-bound regulatory text that has to be visible but quiet. - **Hairline** (`{colors.hairline}` — #d6d2d7): the structural border tone — used on input outlines, neutral-button backgrounds, and card edges. Wired as `--cm-neutral-btn-bg-active` and `--cm2`. ### Surfaces - **Canvas** (`{colors.canvas}` — #ffffff): frequency 407 — the body floor below the dark hero, the surface inside white cards, and the top-nav surface on scroll. Wired as `--cm1` and the cluster of `--_9o5tl81-2` aliases. - **Surface Cream** (`{colors.surface-cream}` — #f6efea): frequency 2 — the cookie-consent modal background and the modal surface. Wired as `--cm-modal-bg` and `--cm5`. The single warm surface on the page; everywhere else is canvas or aubergine. - **Surface Warm** (`{colors.surface-warm}` — #f2dac5): the sand-colored card variant in the card-color picker — one of the five card finishes Starling sells. - **Surface Violet** (`{colors.surface-violet}` — #d7a5f0): the lavender card variant in the card-color picker — another of the five physical card finishes, rendered here at 50% opacity (the `D7A5F080` value in the CSS). ### Feedback - **Feedback Critical** (`{colors.feedback-critical}` — #de352d): the system's error tone for form validation and warning states. Not rendered on the captured marketing page but declared for the product surfaces. ## Typography ### Font Families The system runs two voices in strict role separation. **Avantt** (with Inter tight as fallback, wired as `--cm-font-family` and `--cm-font-family-body`) carries every spoken surface — display, heading, body, and caption. **CoFo Sans Semi-Mono** (with Roboto Mono as fallback, wired as `--cm-font-family-btn` and `--cm-alt-font-family`) carries every button label, every category chip, and every small-caps annotation. The split is the typographic signature. Where Cloudflare runs FT Kunst Grotesk plus Apercu Mono and lets the mono carry footnotes, Starling restricts the mono to actions and labels — body text never touches it. The result reads quietly technical at the action level (the mono is the most distinctive thing about the CTA) while keeping body copy in a contemporary editorial sans. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 48px | 550 | 54px | -1.44px | Hero h1 ("Good with money starts here.") | | `{typography.display-lg}` | 36px | 550 | 40px | -1.08px | Section h2 ("Game-changing banking. Life-changing habits.") | | `{typography.display-md}` | 28px | 450 | 28px | -0.56px | Sub-section spans on photographic bands | | `{typography.heading-md}` | 24px | 600 | 26px | -0.48px | h4 / card-row titles | | `{typography.heading-sm}` | 21.06px | 600 | 24px | -0.36px | h3 sub-titles | | `{typography.body-md}` | 18px | 450 | 24px | -0.36px | Default running text | | `{typography.body-sm}` | 15px | 450 | 25.5px | -0.36px | Top-nav links, secondary copy | | `{typography.body-emphasis}` | 18px | 600 | 24px | -0.36px | Inline emphasis, span highlights | | `{typography.caption}` | 12px | 450 | 19.2px | -0.36px | Footer regulatory text | | `{typography.button-md}` | 18px | 550 | 18px | -0.36px | Primary and secondary CTA labels (mono) | | `{typography.mono-label}` | 14px | 500 | 30px | -0.28px | Uppercase category labels (mono) | | `{typography.mono-md}` | 18px | 500 | 24px | -0.36px | Inline mono spans inside body copy | ### Principles The unusual weights (450, 550, 600 for Avantt; 550 for CoFo Sans Semi-Mono) are the typographic move. Avantt at weight 550 is a half-step between medium 500 and semibold 600, which gives the display a slightly heavier optical density without committing to the muscle of a true semibold. The hero h1 at 48px / 550 with -1.44px tracking is the loudest typographic moment in the system. Body text at weight 450 is similarly a half-step above regular 400, giving the page a slightly more confident rendering at the 18px body size. The button label always sits in the mono, never in Avantt. This is the strictest typographic rule in the system: if you see CoFo Sans Semi-Mono, you can tap it. ### Note on Font Substitutes Avantt is licensed; the closest open-source substitute is **Inter** — though Inter doesn't ship the in-between 450 and 550 weights, so use 400 / 500 / 600 as approximations (the system will read slightly lighter on display and slightly heavier on body). **General Sans** is closer in feel but not free. For CoFo Sans Semi-Mono, **JetBrains Mono** or **IBM Plex Mono** at weight 500 transfers cleanly at the same sizes; both have the slightly-wider-than-mono feel that defines the semi-mono category. ## Layout ### Spacing System - **Base unit:** 8px, with a distinctive **3.75px** sub-unit used inside the category-tab strip. - **Tokens:** `{spacing.xs}` 3.75px · `{spacing.sm}` 6px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px · `{spacing.4xl}` 96px. - **Section padding (vertical):** `{spacing.4xl}` (96px) between major bands. - **Card internal padding:** `{spacing.xl}` (24px) default, with `{spacing.2xl}` (32px) on the larger photographic tiles. - **Hero block padding:** 96×24 — generous vertical on the dark photographic band. ### Grid & Container - **Max content width:** ~1200px on most bands; ~1080px on display headlines for measure-control. - **Hero block:** dark `{colors.ink}` photographic canvas with `{rounded.hero}` (30px) rounded top corners, full-bleed photograph with white display text floating over it and a cream cookie modal flush in the lower-right. - **Card-color picker:** 5-up scrolling row of `{rounded.card}` (17.9px) card tiles in mint, lavender, aubergine, sand, and cream — the radius matches the physical-card geometry. - **Savings-account grid:** 3-column grid of `{rounded.lg}` (24px) photographic tiles each carrying a full-bleed lifestyle photograph at the top and an editorial caption beneath. - **Top-nav band:** dark aubergine `{colors.ink}` bar at the very top of the page (above the rounded hero corners), 64px tall, with white nav links and the mint "Apply now" CTA flush right. ### Rhythm The page alternates between **dark photographic bands and light card bands**. The hero is photographic on aubergine; the card-color picker drops to white; the savings-account grid returns to photographic-tile-on-white; the "Future fit banking" band returns to a photographic tile with the aubergine continuing inside it. There is no atmospheric gradient between bands — every section terminates flush on either canvas, aubergine, or a photograph, and the cream cookie modal is the only warm surface on the page. ## Elevation The system uses **near-flat elevation** with very subtle shadow accents. The captured page has 2 occurrences of aubergine `{colors.ink}` used as shadow ink and 4 occurrences of pure black — all confined to the cookie-consent modal (which lifts off the hero with a 12px aubergine-tinted shadow at ~3% alpha) and to a faint card-hover treatment. - **Flat (no shadow):** hero photograph, body cards, savings-grid tiles, footer — 95% of surfaces. - **Cookie modal elevation:** the cream `{component.cookie-modal}` sits with a `0px 0px 12px rgba(0,0,0,0.12)` shadow — readable as the only meaningfully-elevated element on the page. - **Hover lift:** a subtle `0px 3px 24px rgba(0,0,0,0.03)` shadow appears on card-hover but is so faint it functions as a state change more than a lift. - **Tinted shadows:** Starling uses aubergine-tinted shadows rather than pure black on most elements — the shadow color echoes the brand ink rather than introducing a neutral gray. ## Shapes The radius scale is **tight body with card lift**: - `{rounded.none}` 0px — section dividers and the hero photograph's bottom edge. - `{rounded.sm}` 4px — the dominant body radius. 23 occurrences across inputs, dropdowns, primary CTA pills, and small chips. The primary CTA at 4px is the move that separates Starling from Monzo and Revolut. - `{rounded.md}` 16px — 9 occurrences. Used on the cookie-modal surface and mid-size cards. - `{rounded.card}` 17.904px — 5 occurrences. The card-color picker's card tiles use this exact radius to match the geometry of the physical Starling debit card. - `{rounded.lg}` 24px — 9 occurrences. The larger photographic savings-account tiles. - `{rounded.hero}` 30px — 1 occurrence. The top corners of the dark photographic hero band. There is no fully-rounded pill (`9999px`) anywhere on the captured page. The CTA-as-pill convention from other neobanks is deliberately rejected — every Starling button corner stays at 4px. ## Components **`hero-section`** — Dark aubergine `{colors.ink}` photographic canvas, 96×24 padding, `{rounded.hero}` (30px) on top corners. Holds the hero h1 in white at `{typography.display-xl}`, a sub-paragraph beneath, the mint CTA pill, and the cream cookie-consent modal flush in the lower-right. **`hero-heading`** — White `{colors.canvas}` text on the dark photographic hero, Avantt 48px / 550, -1.44px tracking. The display tier — confidence by tracking and color contrast. **`section-heading`** — Aubergine `{colors.ink}` text at `{typography.display-lg}` (36px / 550) — the section h2s below the fold ("Game-changing banking. Life-changing habits.", "There's an account with your name on it.", "Our savings accounts."). **`body-paragraph`** — Default aubergine `{colors.ink}` text at `{typography.body-md}` (18px / 450) — the workhorse paragraph style. **`body-paragraph-muted`** — Soft `{colors.ink-soft}` (#9a97ab) variant at `{typography.caption}` (12px / 450) — used for the footer regulatory text where contrast has to be readable but quiet. **`mono-label`** — CoFo Sans Semi-Mono at `{typography.mono-label}` (14px / 500, line-height 30px, uppercased) — used for category chips above feature cells. **`button-primary`** — The signature CTA. Mint `{colors.primary}` (#19d3c5) fill, aubergine `{colors.ink}` text, 1px mint border (same color as fill), `{rounded.sm}` 4px radius, 10×16 padding, 40px height. Label in CoFo Sans Semi-Mono 18px / 550. "Apply now" is the canonical instance. **`button-primary-hover`** — Background flips to `{colors.primary-hover}` (#b1eddf) — a pale mint that lifts the pill. Pressed state drops to `{colors.primary-pressed}` (#277463). **`button-secondary`** — Neon mint `{colors.accent}` (#50ffeb) fill, aubergine text, 1px neon-mint border, `{rounded.sm}` 4px radius, same 40px height. The brighter mint is the secondary-button signature. **`button-secondary-hover`** — Background shifts to `{colors.accent-bright}` (#29e6d1) on hover and active states. **`top-nav`** — Dark `{colors.ink}` aubergine bar at the very top, white text in `{typography.body-sm}`, 64px height, 12×24 padding. Sits above the rounded-corner hero band so the dark continues into the photograph. **`nav-link`** — White `{colors.canvas}` text on the aubergine top-nav, Avantt 15px / 450, 6×12 padding. Hover treatment is text-color shift; no background change. **`cookie-modal`** — Cream `{colors.surface-cream}` surface, aubergine text, `{rounded.md}` 16px radius, 24px padding. Sits flush in the lower-right corner of the hero band, casting a 12px aubergine-tinted shadow. The first warm element a visitor sees. **`card-color`** — White `{colors.canvas}` surface, `{rounded.card}` 17.904px radius (matched to physical card geometry), 0 padding. The product cards in the 5-up card-color picker — each carries an image of the Starling debit card in a different finish (mint, lavender, aubergine, sand, cream). **`card-photo`** — White `{colors.canvas}` surface, `{rounded.lg}` 24px radius, 0 padding (the photograph fills the tile edge-to-edge). Used in the 3-up savings-account grid below the fold. **`link-highlight`** — Inline text on a neon-mint `{colors.accent}` background, aubergine text. The brand's inline link treatment — instead of an underline, the link gets a mint highlight band behind the text. **`text-input`** — White `{colors.canvas}` fill, aubergine text, 1px `{colors.hairline}` border, `{rounded.sm}` 4px radius, 10×16 padding, 40px height. Focus state thickens the border and shifts color to aubergine `{colors.ink}`. **`footer`** — White `{colors.canvas}` background, aubergine text, 48×24 padding. The regulatory copy at the very bottom uses `{colors.ink-soft}` (#9a97ab) — the quietest tone in the system. ## Do's and Don'ts **Do** keep the two-tone mint discipline strict. `{colors.primary}` (#19d3c5) fills, `{colors.accent}` (#50ffeb) outlines and highlights — and the rule never inverts. Filling a button with #50ffeb or outlining with #19d3c5 collapses the two-tone system into one mint and erases Starling's distinguishing chromatic move. **Do** use aubergine `{colors.ink}` (#321e37) — never pure black or a slate gunmetal — for body text and input borders. The slight purple undertone is the warmth carrier of the entire system; substituting off-black removes the quiet brand voltage that runs across 611 captured occurrences. **Do** render every button label in CoFo Sans Semi-Mono at weight 550. The mono-only button label is the strictest typographic rule in the system; if you see CoFo Sans Semi-Mono, you can tap it. Putting an Avantt label on a CTA breaks the signal. **Do** match the card-tile radius to physical product geometry. The 17.904px radius (`{rounded.card}`) on the card-color picker tiles isn't a coincidence — it matches the corner radius of the physical Starling debit card. Use it on card-product surfaces only; for generic content cards, drop to `{rounded.md}` 16px or `{rounded.lg}` 24px. **Don't** introduce a fully-rounded pill (`9999px`) anywhere. The captured page has no pill-rounded element — every CTA, every chip, every input stays at 4px corners. Adding a pill button makes Starling read like Monzo and erases the financial-product geometry signature. **Don't** use the warmer surfaces (`{colors.surface-warm}` #f2dac5, `{colors.surface-violet}` #d7a5f0) outside the card-color picker. They are physical-card-finish accent tones, not structural surfaces. Using them as background fills elsewhere will read as if the page is sampling the product palette rather than running its own. **Don't** use Avantt weight 700 or 800 anywhere. The system tops out at weight 600 — the unusual 450/550 in-between weights are the typographic identity; bumping to 700+ erases that identity and pulls the page into a generic semibold/bold convention. **Don't** use the neon mint `{colors.accent}` (#50ffeb) as a body-text color. The captured page has zero text uses of #50ffeb — it is exclusively a fill/highlight tone. Rendering text in neon mint creates accessibility issues on the white canvas and breaks the strict fill-vs-border discipline. ## Known Gaps - **Form input states:** `{component.text-input}` carries the resting state; error / validation styling uses `{colors.feedback-critical}` (#de352d) but the full state matrix is not exposed on the captured marketing surface. - **Dark mode:** the captured marketing surface uses dark photographic bands but has no true dark-mode variant. The product app's dark theme is not represented here. - **Hover and focus rings:** `{component.button-primary-hover}` and `{component.button-secondary-hover}` are documented; the keyboard-focus-ring treatment uses `{colors.ink}` (`--cm-focus-colour`) but the exact ring thickness and offset are not exposed. - **Motion:** the card-color picker scrolls horizontally on tap; the savings-grid photographs have a subtle scale-on-hover. The spec captures end-state values only; easing curves and durations live in the page's runtime JS. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Starling app itself, the business-account onboarding, and the Marketplace partner UI all carry richer token systems that are not represented here. - **Iconography:** the system uses a custom `fontello` icon font, wired as `--_140qdu62` with woff/woff2/eot/svg formats. The icon glyphs are not exposed as named SVGs in the captured marketing surface. - **The other three card-finish colors:** the card-color picker shows five physical cards; only the mint, aubergine, sand, and lavender finishes are captured here. The CSS exposes additional warm beige and taupe tones that may correspond to other physical finishes not yet shown.