Media & Entertainment / iOS / Android / Web

Financial Times

The FT keeps its printed look online: salmon paper, warm ink, a sharp serif for the headline and one deep claret to point at what matters.

Download
  • #FFF1E5
  • #33302E
  • #990F3D
  • #262A33
  • #F2DFCE
  • #593380

Color

Every color token in the file, grouped by role.

Brand

  • primary#990F3D
  • on primary#FFFFFF

Surfaces

  • paper#FFF1E5
  • paper light#FFF7EF
  • paper edge#F2DFCE
  • paper deep#F2E5DA

Text

  • ink#33302E
  • ink muted#66605C
  • ink faint#A8AAAD

More

  • slate#262A33
  • black#000000
  • skip#593380
  • peach#FCD0B1

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Financier Display VFFinancier Display VF is private and not available in open fonts. Shown in Newsreader, the closest open match.
  • Metric 2 VFMetric 2 VF is private and not available in open fonts. Shown in Inter, the closest open match.
  • headline32px / 400 / 32px

    Financial Times

  • title24px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • button16px / 700 / 24px

    Continue to checkout

  • body18px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm3px
  • md4px
  • round999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button white
    button-white
  • promo band
    promo-band
  • skip link
    skip-link
  • paper panel
    paper-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 90 lines
version: alpha
name: Financial-Times-design-analysis
description: "A business newspaper on screen: salmon paper (#fff1e5), warm near-black ink (#33302e), deep claret (#990f3d) for emphasis, Financier Display for headlines, Metric for the interface and square 2px controls."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#990f3d"
  on-primary: "#ffffff"
  paper: "#fff1e5"
  paper-light: "#fff7ef"
  paper-edge: "#f2dfce"
  paper-deep: "#f2e5da"
  ink: "#33302e"
  ink-muted: "#66605c"
  ink-faint: "#a8aaad"
  slate: "#262a33"
  black: "#000000"
  skip: "#593380"
  peach: "#fcd0b1"

typography:
  # Font note: "Financier Display VF" is a private font and is not available in open fonts. Closest open alternative: "Newsreader".
  # Font note: "Metric 2 VF" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  headline:
    fontFamily: "'Financier Display VF', Newsreader, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
  title:
    fontFamily: "'Metric 2 VF', Inter, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: 2px
  button:
    fontFamily: "'Metric 2 VF', Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  body:
    fontFamily: "'Metric 2 VF', Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
  label:
    fontFamily: "'Metric 2 VF', Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  xs: 2px
  sm: 3px
  md: 4px
  round: 999px

spacing:
  sm: 8px
  md: 16px
  lg: 24px

components:
  button-white:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.slate}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    height: 44px
    padding: 0 16px
  promo-band:
    backgroundColor: "{colors.slate}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline}"
    padding: 24px
  skip-link:
    backgroundColor: "{colors.skip}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    height: 34px
    padding: 0 16px
  paper-panel:
    backgroundColor: "{colors.paper-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

The Financial Times is a business newspaper printed on salmon paper, and its site keeps that. The look is a pale salmon page, warm near-black ink, a deep claret for emphasis and a sharp serif for headlines. [Observed]

What defines the look:

  1. Salmon paper. The page is #fff1e5, with lighter #fff7ef and edge #f2dfce tones. [Measured]
  2. Warm ink. Text is #33302e, secondary #66605c and faint #a8aaad. [Measured]
  3. Claret for emphasis. #990f3d marks key text and links. [Measured]
  4. A serif headline and a clean sans. Financier Display for large headlines at 400 and Metric for interface text at 400 and 700. [Measured]
  5. Square, tiny corners. 2 to 4px on controls and a dark slate promo band. [Measured]

Source for this file: the ft.com home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Articles are behind a paywall and were not measured. The Origami design system site was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Paper#fff1e5, #fff7efPage and panels
Paper edge#f2dfce, #f2e5daRules and panels
Ink#33302eHeadlines and body
Muted and faint#66605c, #a8aaadMeta
Claret#990f3dEmphasis and links
Slate band#262a33Promo bands
Skip purple#593380Keyboard skip links
Peach#fcd0b1Highlights

Typography

Financier Display, a variable serif, sets large headlines at 400: 32 on 32 in the promo band. Metric 2, a variable sans, sets the interface: 16 on 24 at 700 for buttons, 18 at 400 for text and uppercase 24 at 700 with 2px tracking for section labels such as Top stories. [Measured]

Shape and spacing

Corners are 2, 3 and 4. Buttons are 44 high with 16 side padding, skip links 34. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light only on the page measured. [Observed]

Platform: iOS

The Financial Times iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a news app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

No floating action is expected in a news app. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the salmon paper, the serif headlines and the claret with the web. [Inferred]

Platform: Android

The Financial Times Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a news app. [Inferred]

Main action

Expected on Android: Floating action button.

No floating action is expected in a news app. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the salmon paper, the serif headlines and the claret with the web. [Inferred]

Platform: Web

The ft.com home page, measured at 1440 and 390 wide. Articles were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A header with side-navigation and search controls and section links beneath. [Observed]

Main action

Expected on Web: Page-level button.

A white button with slate text on a dark promo band, 44 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Square buttons and skip links. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 44 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the salmon paper, the serif and sans pairing and the claret. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep the salmon paper as the page color.
  • Set headlines in the serif and interface text in the sans.
  • Use claret for emphasis, sparingly.
  • Keep corners tiny.

Don't

  • Don't use a white page.
  • Don't use pure black for text.
  • Don't use pills.

Known Gaps

  • Article pages, the paywall flow and the signed-in app were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The Origami design system site was not read, so role names are not given.