What is Starling Bank's primary brand color?

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.

What typefaces does Starling use, and what should I use as substitutes?

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.

Why does Starling use two different mints?

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.

What corner-radius scale does Starling use?

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.

Can I use this DESIGN.md to build my own UK neobank marketing site?

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.

Starling Bank Design System

Starling Bank's marketing system as a DESIGN.md file.

About Starling Bank DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source starlingbank.com

Banking & Payments
Fintech & Crypto

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.

What makes it distinct

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 pairingAvantt at unusual weights (450, 550, 600) for spoken surfaces, CoFo Sans Semi-Mono at 550 for every button and label
Card-color picker as featurea 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 bandthree lifestyle photographs with phone-screen overlays let the product UI carry the marketing band, no decorative illustration

Live at starlingbank.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

starlingbank.com

Explore Starling Bank

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Starling Bank design system FAQ

Common questions about Starling Bank's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Starling Bank — official site

Starling Bank's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.