--- 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 | Role | Value | Where | |------|-------|-------| | Paper | `#fff1e5`, `#fff7ef` | Page and panels | | Paper edge | `#f2dfce`, `#f2e5da` | Rules and panels | | Ink | `#33302e` | Headlines and body | | Muted and faint | `#66605c`, `#a8aaad` | Meta | | Claret | `#990f3d` | Emphasis and links | | Slate band | `#262a33` | Promo bands | | Skip purple | `#593380` | Keyboard skip links | | Peach | `#fcd0b1` | Highlights | ### 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.