FT Brand Design System Deep Dive

1. Brand Overview

The Financial Times (FT) has one of those visual languages that is instantly recognizable. The muted salmon background, the serif headlines, the understated but confident typography — nothing here screams, everything speaks quietly but with authority. This is a brand for people who already know the weight of what they’re reading.

The vibe is restrained. The palette is dominated by desaturated neutrals and a signature warm beige (#e6d9ce), with occasional deep teals (#0d7680) and burgundy accents (#990f3d). No bright primaries, no flashy gradients. This works because FT’s audience is serious: finance professionals, policy makers, academics. Loud design would undermine that trust.

Typography leans heavily on custom serif — “Financier Display VF” and “Times” — for headlines, paired with “Metric 2 VF” for UI and body copy. The serif gives gravitas, the sans-serif makes the UI readable at small sizes. The hierarchy is crisp: large headlines with tight line height, smaller UI labels in uppercase for clarity.

Layout is pragmatic. Breakpoints are numerous (from 490px up to 1316px), meaning they’ve tuned responsive behavior for many device widths. Spacing is on an 8px scale, with micro adjustments (3px, 5px) sprinkled in — probably for fine-tuning typography and icon alignment.

Components are minimal but well-considered. Buttons have simple shapes (2px radius), solid fills, and clear hover/focus states. Links vary from understated (text-decoration: none) to subtly underlined with a 2px stroke. Shadows are rare — when used, they’re soft and layered, never harsh. Borders are thin, often #33302e for structure or lighter neutrals for separation.

This is a design system that values clarity over decoration. It’s confident in its minimalism because the content carries the experience.

2. Color System

2.1 Primary Colors

The semantic primary color is #33302e (rgb(51, 48, 46)) — a deep, warm black-brown. This is used for text, borders, and structural elements. It’s softer than pure black, which makes it less stark against the warm backgrounds.

Primary link color is #0d7680 (rgb(13, 118, 128)). This teal is a smart choice: it’s distinct from the salmon tones, stands out against neutrals, but still feels sophisticated. Compared to competitors like Bloomberg (bright blue) or WSJ (black links), FT’s teal is more distinctive.

2.2 Complete Palette

2.3 Color Relationships

Contrast between #33302e text and #ffffff background is high (WCAG AAA). Between #0d7680 and #ffffff it’s also high — links are accessible. The salmon (#e6d9ce) background with #33302e text is softer but still passes WCAG AA for regular text.

Dark mode isn’t explicitly supported in the extracted data — colors are fixed, no inverted palette.

2.4 Usage Guide

• Do: Use #0d7680 for interactive states. Keep it reserved for links and active UI to maintain visual hierarchy.
• Do: Use #e6d9ce for brand-led surfaces (headers, hero backgrounds).
• Avoid: Combining #990f3d with #0d7680 — the clash is too strong.
• Do: Use #cfd8d1 for subtle underlines or dividers — it’s light but visible.
• Avoid: Pure black backgrounds — FT’s palette is warm and muted.

3. Typography

3.1 Font Families

• Financier Display VF — Custom serif, used for headlines and large links. No fallbacks specified.
• FinancierDisplayWeb — Likely same as above in non-variable form.
• Times — Classic serif for certain headings and uppercase labels.
• Metric 2 VF — Sans-serif for UI, buttons, body sizes.
• Arial — Utility fallback for certain small captions/buttons.

No Google Fonts or Adobe Fonts — all are custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is tight. Large headlines (48px, 40px) have line-height 1.00 — no wasted space. UI labels drop to 16px or smaller, often uppercase for scannability. Serif for content, sans-serif for UI. This duality keeps content elegant but UI functional.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px, but with micro values.

4.2 Layout

Breakpoints: 490px, 739px, 740px, 760px, 768px, 780px, 900px, 980px, 1023px, 1024px, 1268px, 1316px. Many close-together — they’re clearly optimizing for specific device ranges.

5. Visual Elements

• Border Radius: 2px (buttons, combobox), 3px (span), 4px (div), 50% (images). Small radii keep things sharp but not harsh.
• Shadows: Rare. Main one: rgba(77, 72, 69, 0.25) 0px 1px 2px 0px, rgba(77, 72, 69, 0.1) 0px 4px 6px 0px. Soft, layered.
• Borders: Thin (1px) in #33302e or light neutrals (#ccc1b7, #cfd8d1). Often just one side for separation.

6. Components

6.1 Buttons

Variant 1 (o-banner__button)

• Default: bg #ffffff, color #262a33, padding 0px 16px, radius 2px, border 1px solid transparent, fw 700, fs 16px.
• Hover: bg #9abeaf.
• Active: bg #7b968e.
• Focus: bg #9abeaf, shadow #4d4845 0px 0px 0px 4px, #ffffff 0px 0px 0px 8px.

Variant 2 (o-header__top-button)

• Default: bg #262a33, color #ffffff, padding 0px 8px, radius 2px, border transparent, fw 700, fs 12px.
• Hover: bg #9abeaf, color #262a33.
• Active: bg #7b968e.
• Focus: same as Variant 1.

6.2 Links

Multiple styles:

• White text, underline 2px #cfd8d1.
• Dark text, no underline, bold.
• Teal #0d7680, underline 2px #cfd8d1.
• Grey #a8aaad, underline.

Hover often changes text color to white — unusual, but consistent here.

6.3 Forms

No text inputs extracted — likely custom Origami components.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #33302e;
  --color-link: #0d7680;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-grey-green: #cfd8d1;
  --color-beige: #e6d9ce;
  --color-mid-grey: #a8aaad;
  --color-warm-dark-grey: #66605c;
  --color-burgundy: #990f3d;
  --color-warm-light-grey: #ccc1b7;

  /* Typography */
  --font-financier-display: "Financier Display VF";
  --font-times: "Times";
  --font-metric2: "Metric 2 VF";
  --font-arial: "Arial";

  /* Spacing */
  --space-1px: 1px;
  --space-3px: 3px;
  --space-4px: 4px;
  --space-5px: 5px;
  --space-7px: 7px;
  --space-8px: 8px;
  --space-10px: 10px;
  --space-12px: 12px;
  --space-16px: 16px;
  --space-18px: 18px;
  --space-20px: 20px;
  --space-24px: 24px;
  --space-28px: 28px;
  --space-30px: 30px;
  --space-32px: 32px;
  --space-35px: 35px;
  --space-40px: 40px;
  --space-48px: 48px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(77, 72, 69, 0.25) 0px 1px 2px 0px, rgba(77, 72, 69, 0.1) 0px 4px 6px 0px;
}

8. AI Coding Assistant Prompt

# FT Design System Specification

You are a Financial Times design expert. Build UIs matching their visual language exactly.

## Brand Context
FT’s design is restrained, warm, and authoritative. It uses muted neutrals, a signature beige, and teal accents for interaction. Typography is a mix of elegant serif for content and functional sans-serif for UI.

## Color Palette
- Primary Text: #33302e — Headers, body text, borders
- Link Teal: #0d7680 — Interactive links, CTAs
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — Icons, contrast text
- Light Grey-Green: #cfd8d1 — Underlines, subtle dividers
- Warm Beige: #e6d9ce — Brand surfaces
- Mid Grey: #a8aaad — Secondary text
- Warm Dark Grey: #66605c — Subheaders
- Burgundy: #990f3d — Rare accents
- Warm Light Grey: #ccc1b7 — Dividers

## Typography
Fonts:
- Headings: "Financier Display VF"
- Body/UI: "Metric 2 VF"
- Labels: "Times"
- Utility: "Arial"

Sizes (selected):
- H1: 48px / weight 397 / lh 1.00
- H2: 40px / weight 300 / lh 1.00
- Body: 16px / weight 400 / lh 1.50
- Caption: 14px / weight 400 / lh 1.43

Use serif for content, sans-serif for UI labels/buttons.

## Spacing & Grid
Base: 8px
Scale: 1px, 3px, 4px, 5px, 7px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 28px, 30px, 32px, 35px, 40px, 48px

## Border Radius
- sm: 2px — buttons, inputs
- md: 3px — spans
- lg: 4px — divs
- full: 50% — avatars, round images

## Shadows & Depth
Soft layered shadow:
rgba(77, 72, 69, 0.25) 0px 1px 2px 0px, rgba(77, 72, 69, 0.1) 0px 4px 6px 0px

## Component Specifications

### Primary Button (.o-banner__button)
Default: bg #ffffff, color #262a33, padding 0 16px, radius 2px, border 1px solid transparent, fw 700, fs 16px
Hover: bg #9abeaf
Active: bg #7b968e
Focus: bg #9abeaf, shadow #4d4845 0 0 0 4px, #ffffff 0 0 0 8px

### Secondary Button (.o-header__top-button)
Default: bg #262a33, color #ffffff, padding 0 8px, radius 2px, fw 700, fs 12px
Hover: bg #9abeaf, color #262a33
Active: bg #7b968e
Focus: same as primary button

### Links
White text: underline 2px #cfd8d1
Teal links: underline 2px #cfd8d1
Hover often changes color to white

## Layout & Responsive Rules
Breakpoints: 490px, 739px, 740px, 760px, 768px, 780px, 900px, 980px, 1023px, 1024px, 1268px, 1316px

## Interaction Rules
Transition: 150ms ease for state changes
Focus: visible outline or shadow per button specs

## DO
- Use palette exactly
- Maintain 8px grid
- Serif for content, sans-serif for UI
- Keep radii small (2-4px)
- Reserve teal for interactive elements

## DON'T
- Invent new colors
- Overuse shadows
- Mix large and small radii in same component
- Use uppercase for body text

## Code Examples

Primary Button:
```css
.o-banner__button {
  background: #ffffff;
  color: #262a33;
  padding: 0 16px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 16px;
  transition: background 150ms ease;
}
.o-banner__button:hover { background: #9abeaf; }
.o-banner__button:focus {
  background: #9abeaf;
  box-shadow: #4d4845 0 0 0 4px, #ffffff 0 0 0 8px;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
```

Form Input:
```css
.input {
  border: 1px solid #ccc1b7;
  border-radius: 2px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #0d7680;
  outline: none;
}
```

9. Summary

TL;DR — FT’s design system is warm, restrained, and deliberate. Muted beige and teal define the brand, serif headlines give gravitas, sans-serif UI keeps things usable. Small radii, soft shadows, and a disciplined color palette make everything feel trustworthy.

Brand Keywords: warm-minimalist, authority-first, finance-serious, serif-led