---
version: alpha
name: Starling Bank
description: UK digital bank with a deep aubergine identity, electric teal calls-to-action, a custom variable grotesque (Avantt) for display, and semi-monospaced CoFo Sans for UI labels — premium clarity without fintech sterility.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f8f5f0"           # warm off-white section bands detected in hero background
  surface-dark: "#321e37"      # deep aubergine — footer, dark sections, nav dark mode

  # Ink / text
  ink: "#321e37"               # primary text and heading color — the brand's near-black is aubergine, not true black
  ink-secondary: "#706273"     # muted violet-grey for supporting copy and captions
  ink-muted: "#706273"         # same mid-tone used for placeholder text
  on-dark: "#ffffff"           # text on aubergine surfaces

  # Brand accent — electric teal
  primary: "#19d3c5"           # --cm-primary-btn-bg; actual button fill (more saturated than screen palette #50ffeb)
  primary-hover: "#b1eddf"     # --cm-primary-btn-bg-hover; light mint hover tint
  primary-active: "#277463"    # --cm-primary-btn-bg-active; deep teal pressed state
  primary-light: "#50ffeb"     # lighter teal variant used in decorative contexts
  on-primary: "#321e37"        # aubergine text on teal buttons — dark on light

  # Secondary / outline button
  secondary-border: "#50ffeb"  # teal 1px border on secondary CTAs

  # Borders
  border: "#d6d2d7"            # light lavender-grey hairlines
  border-strong: "#321e37"     # aubergine bottom-border underline on text-style buttons

  # Semantic
  success: "#2ecc71"           # status dot green in footer (FSCS / all systems operational)
  error: "#d9534f"             # standard error red /* estimated */

  # Shadow tints (flattened from rgba)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.12) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.03) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Avantt, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 550
    lineHeight: 1.06
    letterSpacing: -2.16px
  display:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 550
    lineHeight: 1.00
    letterSpacing: -1.68px
  heading:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 450
    lineHeight: 1.11
    letterSpacing: -0.72px
  heading-sub:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -0.56px
  title:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.36px
  body-large:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 450
    lineHeight: 1.33
    letterSpacing: -0.36px
  body:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 450
    lineHeight: 1.33
    letterSpacing: -0.36px
  body-strong:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.36px
  ui-label:
    fontFamily: "CoFo Sans Semi-Mono, Roboto Mono, monospace"
    fontSize: 18px
    fontWeight: 550
    lineHeight: 1.33
    letterSpacing: 0px
  button-ui:
    fontFamily: "CoFo Sans Semi-Mono, Roboto Mono, monospace"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 1.00
    letterSpacing: 0px
  label-caps:
    fontFamily: "CoFo Sans Semi-Mono, Roboto Mono, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2.14
    letterSpacing: -0.28px
  caption:
    fontFamily: "Avantt, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 450
    lineHeight: 1.60
    letterSpacing: -0.24px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 60px
  4xl: 80px
  5xl: 160px

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  xl: 30px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"        # was {colors.on-dark} (#ffffff on #ffffff = 1:1) — fixed to aubergine ink
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-ghost-on-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    padding: 16px 24px

  badge:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    padding: 0px
  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body-strong}"
    padding: 0px
---

# Starling Bank Design System

## Overview

Starling Bank's design language is one of the more distinctive in British fintech — not because it follows convention, but because it doesn't. Where most digital banks reach for either cold-blue authority or warm-coral friendliness, Starling chose a deep aubergine-near-black (`{colors.ink}`, `#321e37`) as the typographic and identity anchor. It reads simultaneously prestigious and approachable: richer than a corporate navy, warmer than a startup's neutral-black. The result is a brand that feels grown-up and considered, as if it's been designed for people who want to stop thinking of banking as a chore.

The accent system is built around electric teal — most visibly in the CSS variable `--cm-primary-btn-bg` (`{colors.primary}`, `#19d3c5`), with a lighter decorative variant (`{colors.primary-light}`, `#50ffeb`) appearing in illustrations and UI highlights. This is not a soft pastel teal; it's a high-saturation signal that fires against the deep aubergine backgrounds on hero sections and the footer. The pairing — dark purple-brown with electric teal — is striking and proprietary. No other major bank uses this combination. It communicates modern energy without sacrificing credibility.

Typography runs on two custom families: **Avantt**, a variable grotesque used for all display and body copy, and **CoFo Sans Semi-Mono**, a semi-monospaced face used for UI labels, button text, and data-adjacent contexts. The semi-mono choice for UI copy is intentional — it gives numbers and data-like text a tabular, precise character that signals financial clarity without reaching for a full monospace that would feel cold or technical. Avantt's variable axis allows Starling to modulate from weight 450 (light, editorial) to 700 (assertive headings) within a single font, compressing the type hierarchy into a coherent family rather than mixing multiple typefaces.

**Key Characteristics:**
- Deep aubergine `{colors.ink}` (`#321e37`) as the brand's near-black — warmer and more distinctive than a neutral dark
- Electric teal `{colors.primary}` (`#19d3c5`) as the sole CTA accent, with a CSS variable system: button bg / hover / active all tokenized
- Two-typeface system: Avantt (editorial grotesque, variable) for copy and CoFo Sans Semi-Mono for UI / data contexts
- Display type at 72px weight 550 with tight -2.16px tracking — confident rather than aggressive
- Buttons use a **small 4px radius** (`{rounded.sm}`) — markedly more architectural than the pill-button neobanks around it
- Dark aubergine footer `{colors.surface-dark}` — the brand closes screens with its full identity
- Semi-monospaced UI labels give numerical and data copy a precise, tabular quality
- Breakpoints at 576, 680, 768, 992, 1020, 1150, 1200px — unusually granular, suggesting careful craft across device sizes
- Section-bottom rounding (`0px 0px 40px 40px`) used to soften section transitions architecturally
- FSCS protection prominently badged — trust signaling embedded in the design system

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant marketing canvas — most sections are light-on-white.
- **Warm Off-White** (`{colors.surface}`): Section bands and card fills; slightly warm-tinted to avoid harshness.
- **Deep Aubergine** (`{colors.surface-dark}`): Dark sections, the footer, and the CTA dark context. The brand's signature dark is this purple-brown `#321e37`, never pure black.

### Ink / Text
- **Aubergine Ink** (`{colors.ink}`): Primary headings, body copy, and wordmark — the brand's working dark.
- **Muted Violet-Grey** (`{colors.ink-secondary}`): Supporting paragraph text and captions — a mid-tone that keeps visual hierarchy without switching typeface families.

### Brand Accent
- **Electric Teal** (`{colors.primary}`): The primary CTA button fill (`--cm-primary-btn-bg`). High-saturation, unmistakably Starling.
- **Mint Hover** (`{colors.primary-hover}`): Button hover tint (`--cm-primary-btn-bg-hover`) — a much lighter, almost pastel teal.
- **Deep Teal Active** (`{colors.primary-active}`): Pressed state (`--cm-primary-btn-bg-active`) — forest-teal for tactile depth.
- **Light Teal** (`{colors.primary-light}`): Decorative teal for illustrations, badge fills, and product accent moments. Brighter than the button teal.

### Borders & Shadows
- **Lavender-Grey Hairline** (`{colors.border}`): Card edges and dividers — a faint purple-grey that echoes the brand's aubergine without competing.
- **Shadow Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the rare card shadows (originals were rgba — flattened for Google spec).

### Semantic
- **Success Green** (`{colors.success}`): The "all systems operational" status indicator in the footer.

## Typography

### Font Families
- **Display & Body**: `Avantt` — a custom variable grotesque self-hosted as `AvanttVF.woff2`. Variable font axis spans weight 450 (editorial) to 700 (assertive). Fallback stack: `Inter, -apple-system, system-ui, sans-serif`.
- **UI & Data**: `CoFo Sans Semi-Mono` — self-hosted as `CoFoSansSemi-Mono-Medium.woff`. Semi-monospaced: the designer's choice for button labels, UI strings, and anything adjacent to numbers. Fallback: `Roboto Mono, monospace`.
- **Tracking**: large display sizes use strong negative tracking (-2.16px at 72px, -1.68px at 56px); body text sits at -0.36px.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / 550 / -2.16px — marquee hero headline |
| `display` | 56px / 550 / -1.68px — major section titles |
| `heading` | 36px / 450 — feature section headings, editorial weight |
| `heading-sub` | 28px / 600 — sub-section and card headings |
| `title` | 24px / 700 — card titles and strong labels |
| `body-large` | 18px / 450 — lead copy and introductory paragraphs |
| `body` | 18px / 450 — standard body text |
| `body-strong` | 18px / 600 — emphasized body copy, nav links |
| `ui-label` | CoFo Sans Semi-Mono 18px / 550 — UI strings, non-button labels |
| `button-ui` | CoFo Sans Semi-Mono 16px / 550 — all button text |
| `label-caps` | CoFo Sans Semi-Mono 14px uppercase — small data labels |
| `caption` | Avantt 12px / 450 — metadata, helper text, footer notes |

### Principles
- **Variable weight as hierarchy**: Avantt's variable axis handles the full display-to-body spectrum in one family — 450 for editorial copy, 550-600 for feature headings, 700 for assertive titles.
- **Semi-mono for UI**: CoFo Sans Semi-Mono is the UI voice — precise, data-adjacent, modern without being cold. It gives button and label text a different cadence from the editorial Avantt.
- **Tight display tracking**: -2.16px at 72px is confident and architectural. Headlines feel set with intention.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Section spacing runs large — the `{spacing.4xl}` (80px) and `{spacing.5xl}` (160px) values define the generous vertical breathing room between marketing sections.

### Grid & Container
- Max content width: ~1200px, centered
- 9 breakpoints (576, 680, 768, 992, 1020, 1150, 1200, 1441px) — granular responsive tuning
- Sections use `border-radius: 0 0 40px 40px` at their bottom edge to create soft architectural transitions between content blocks
- Feature sections alternate light and dark backgrounds, with the aubergine footer completing the page

### Whitespace Philosophy
- **Generous but purposeful**: large section spacing (`{spacing.4xl}`–`{spacing.5xl}`) gives each content block room to breathe
- **Architectural section breaks**: bottom rounding on sections creates a scalloped cadence down the page, not just a flat scroll
- **Flat cards, soft sections**: cards themselves are simple; the section-level architecture carries the visual interest

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Most marketing content and cards |
| Subtle (Level 1) | `0 0 28px` at ~12% black (`{colors.shadow-soft}`) | Floating cards, occasional elevated components |
| Near-flat (Level 0.5) | `0 10px 10px` at ~3% black (`{colors.shadow-ambient}`) | Gentle lift on interactive surfaces |
| Pressed Depth | `inset 0 -2px 0 {colors.border-strong}` | Text-style button pressed state — aubergine bottom inset |
| Focus Ring | 2px aubergine (`{colors.ink}`) outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Starling's depth language is almost entirely flat. Separation comes from the high-contrast dark/light section alternation and the distinctive teal-on-aubergine moments. When shadows appear, they are diffuse and shallow — a `28px` spread at 12% opacity under a floating card. The pressed button state uses an inset aubergine bottom-border rather than a shadow, which matches the architectural, rectangular button shape.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | **All buttons** — the signature architectural radius |
| `md` | 16px | List item containers, small UI surfaces |
| `lg` | 24px | Feature cards and section containers |
| `xl` | 30px | Dialogs and modal surfaces |
| `pill` | 9999px | Select toggles and pill-style region selectors |

The shape language at Starling is markedly different from most neobanks: buttons use a small **4px radius**, not full pills. This gives the UI a more architectural, considered quality — confident rectangles rather than friendly bubbles. Cards round more generously (24px), and sections use bottom-only rounding (40px) as a structural device. The system is neither ruthlessly sharp nor pillow-soft; it sits in a deliberate middle register.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants
- **`button-primary`** — Electric teal (`{colors.primary}`) fill, aubergine text (`{colors.on-primary}`), CoFo Sans Semi-Mono label, 4px radius. Hover lightens to mint teal (`{colors.primary-hover}`); active deepens to forest teal (`{colors.primary-active}`). The CSS variables `--cm-primary-btn-bg/bg-hover/bg-active` power this.
- **`button-secondary`** — White fill, aubergine text, 4px radius. Hover fills `{colors.surface}`.
- **`button-outline`** — Transparent fill with 1px teal `{colors.secondary-border}` border. Used for secondary CTAs on teal-context sections.
- **`button-ghost-on-dark`** — White text on aubergine surface, 1px white border — appears in the hero on dark image overlays.

### Cards
- **`card`** — White surface, 24px radius, 24px padding. Standard feature card.
- **`card-feature`** — Warm off-white `{colors.surface}`, 24px radius, 32px padding — product spotlight blocks.
- **`card-dark`** — Aubergine fill for dark-mode card variants within dark sections.

### Inputs
- **`input`** — White fill, Avantt body text, 4px radius matching button geometry. **`input-focus`** adds a teal `{colors.primary}` border.

### Navigation
- **`nav-bar`** — White background, aubergine text at `{typography.body-strong}`. The teal CTA button persists at the right; the wordmark sits left.

### Badges & Labels
- **`badge`** — Light teal `{colors.primary-light}` fill, aubergine text, 4px radius, Avantt caption. Used for status pills and category chips.
- **`label-caps`** — CoFo Sans Semi-Mono uppercase 14px — data labels and section eyebrows.

### Links
- **`link`** — Aubergine text, weight 600, underline on hover. Standard in-text links.
- **`link-accent`** — Teal text for contextual accent links.

## Do's and Don'ts

### Do
- Use the deep aubergine `{colors.ink}` (`#321e37`) as the brand's dark — never substitute pure black for headings or the footer surface
- Keep all buttons at **4px radius** (`{rounded.sm}`) — the rectangular confidence is the Starling shape language
- Use `{colors.primary}` teal exclusively for primary CTAs; the CSS variable system (`--cm-primary-btn-bg`) should power all button states
- Set display headlines in Avantt with tight negative tracking (`{typography.display-hero}` at -2.16px) — the compression is intentional
- Use CoFo Sans Semi-Mono (`{typography.button-ui}`) for all button labels and data-adjacent UI strings
- Close dark sections with the full-aubergine `{colors.surface-dark}` surface — especially the footer
- Use bottom-only section rounding (`0 0 40px 40px`) as a structural device, not card-level decoration
- Pair electric teal CTAs against aubergine backgrounds for maximum brand legibility

### Don't
- Don't round buttons to a pill (`{rounded.pill}`) — pills are reserved for region selectors, not CTAs
- Don't swap the semi-mono button font for the Avantt editorial face — the dual-font split is intentional
- Don't use `{colors.primary-light}` (`#50ffeb`) as the button fill — the actual CTA color is the darker `#19d3c5` (`{colors.primary}`)
- Don't introduce mid-weight (600-700) Avantt for display copy — the display registers are 450 and 550; reserve 700 for card titles
- Don't use harsh blue-grey borders — Starling's borders are lavender-grey (`{colors.border}`) to echo the aubergine palette
- Don't fill the footer with a neutral dark — the aubergine `{colors.surface-dark}` footer is the brand signature
- Don't scatter full-opacity teal across the page — it fires only at CTAs and key highlight moments; dilution kills the signal
- Don't use uppercase labels in Avantt — uppercase is the CoFo Semi-Mono register

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <576px | Single column, hero stacks, display scales toward 36px, nav collapses to hamburger |
| Mobile | 576–679px | Standard mobile layout; reduced section padding |
| Mobile LG | 680–767px | Slightly wider single column; subtle grid expansion |
| Tablet | 768–991px | 2-column grids begin; side-by-side feature rows |
| Tablet LG | 992–1019px | Feature sections at full 2-column; product cards row |
| Desktop SM | 1020–1149px | Navigation expands to full horizontal |
| Desktop | 1150–1199px | Full layout, generous section padding |
| Wide | 1200–1440px | Centered max ~1200px container |
| XL | >1441px | Max container holds; generous side margins appear |

### Touch Targets
- Buttons at 10px 16px padding land around 40–44px tall — adequate for touch; slightly compact by current HIG standards
- Nav and region-selector toggles use generous horizontal padding

### Collapsing Strategy
- **Navigation**: horizontal menu with teal CTA → hamburger icon on mobile; CTA may persist as a floating element
- **Hero**: large text + image composition → stacked headline above image on mobile; display font scales from 72px toward ~32–36px
- **Section rounding**: bottom 40px radius preserved on mobile; creates a consistent scalloped page rhythm regardless of viewport
- **Spacing**: section vertical padding compresses from 80–160px toward 32–48px on small screens

### Image Behavior
- Hero and product imagery in generous rounded containers; radius reduces proportionally on small screens
- FSCS protection badge and regulatory imagery maintained across all viewports for trust signaling

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Aubergine Ink (`{colors.ink}`, `#321e37`)
- Brand accent: Electric Teal (`{colors.primary}`, `#19d3c5`)
- Secondary text: Muted Violet-Grey (`{colors.ink-secondary}`)
- Border: Lavender-Grey (`{colors.border}`)
- Dark surface / footer: Aubergine (`{colors.surface-dark}`, `#321e37`)
- Primary CTA: Electric Teal (`{colors.primary}`) with aubergine text (`{colors.on-primary}`)

### Example Component Prompts

- "Create a Starling hero section: white canvas (`{colors.background}`), 72px Avantt weight 550 headline in aubergine (`{colors.ink}`), letter-spacing -2.16px, line-height 1.06. Single teal CTA button (`{colors.primary}` fill, `{colors.on-primary}` aubergine text, CoFo Sans Semi-Mono 16px/550, 4px radius, 10px 16px padding). Hover: `{colors.primary-hover}` mint tint."
- "Build a Starling primary button: electric teal fill (`{colors.primary}`, `#19d3c5`), aubergine text (`{colors.on-primary}`, `#321e37`), CoFo Sans Semi-Mono label 16px weight 550, 4px border-radius, 10px 16px padding. Hover → `{colors.primary-hover}` (`#b1eddf`). Active → `{colors.primary-active}` (`#277463`) with white text."
- "Create a feature card: warm off-white (`{colors.surface}`) background, 24px radius (`{rounded.lg}`), 32px padding. Heading in Avantt 28px/600 (`{typography.heading-sub}`), body in Avantt 18px/450 (`{typography.body}`), both in aubergine (`{colors.ink}`). No shadow — flat surface with warm background contrast."
- "Design the Starling footer section: deep aubergine background (`{colors.surface-dark}`, `#321e37`), white text (`{colors.on-dark}`). Wordmark at left in white. Navigation links in Avantt 18px/600 white. Status badge: CoFo Semi-Mono 14px uppercase in light teal (`{colors.primary-light}`) with a green `{colors.success}` dot."
- "Create a Starling UI label: CoFo Sans Semi-Mono 14px weight 500 uppercase, `{colors.ink-secondary}` color, 0.28px negative letter-spacing. Pairs with a 72px Avantt display headline above it as a section eyebrow."
- "Build a secondary outline button on a teal-accent section: transparent background, 1px solid teal border (`{colors.secondary-border}`), aubergine text (`{colors.ink}`), CoFo Sans Semi-Mono 16px/550, 4px radius, 10px 16px padding."

### Iteration Guide

1. Start with a clean white canvas (`{colors.background}`). The deep aubergine (`{colors.surface-dark}`) should appear in the footer and any dark hero or highlight section — not as the primary page surface.
2. Headlines must be Avantt with the correct weight per role: 550 for display, 450 for editorial section headings, 600-700 for card titles. Never set display copy in CoFo Semi-Mono.
3. Use CoFo Sans Semi-Mono only for UI labels, button text, data-adjacent strings, and uppercase eyebrows. It signals precision; overuse dilutes that signal.
4. Keep button radius at 4px (`{rounded.sm}`) — the rectangular confidence is Starling's shape voice. Pill buttons belong to Monzo and Revolut.
5. Electric teal (`{colors.primary}`) fires only at the primary CTA and key accent moments. It reads against aubergine with exceptional force — use it to direct attention, not decorate.
6. Section separators use bottom-only rounding (`0 0 40px 40px`) — a subtle architectural gesture that keeps the page feeling crafted, not generic.
7. Shadows are nearly absent. Let the dark/light section alternation and the aubergine/teal pairing create all the visual hierarchy you need.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Starling Bank. Brand names and trademarks belong to their respective owners.