Nytimes
Long Document
Loading
Ft
Cool, crisp editorial - geometric sans, deep indigo, and subtle, warm ochre accents.
Click any value to copy. Roles are suggestions, not gospel.
- #e78906oklch(71.5% 0.161 64)Dominant
- #080a79oklch(27.3% 0.172 267)Surface
- #adedfboklch(90.8% 0.067 213)Ink
- #92a64doklch(69.0% 0.118 120)Accent
- #ccbeb4oklch(81.0% 0.021 58)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | FinancierDisplayWeb | 32px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | Times | 24px | 700 | 1.4 | 2px | Aa Bb Cc |
| h3 | metric 2 VF | 16px | 700 | 1.5 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| caption | metric 2 VF | 12px | 400 | 1.71 | 0 | Aa Bb Cc |
| button | metric 2 VF | 18px | 400 | 1.33 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e78906;
--color-surface: #080a79;
--color-ink: #adedfb;
--color-accent: #92a64d;
--color-detail: #ccbeb4;
}
/* CSS variables exposed by source */
:root {
--_o3-grid-column-width: calc((100vw - calc(12 - 1)*24px)/12);
--o3-icon-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1024 1024'%3E%3Ccircle cx='512' cy='512' r='384' fill='%23000'/%3E%3C/svg%3E");
--o3-z-navigation-popover: 20;
--o3-grid-columns: 12;
--o3-z-message-polite-popover: 30;
--o3-grid-area: "bleed-left content-start . . . . . . . . . . content-end bleed-right";
--o3-grid-column-width: calc((1220px - calc(12 - 1)*24px)/12);
--o3-z-message-service-popover: 35;
--_o3-grid-gutters: calc(12 - 1);
--o3-grid-template: 1fr repeat(12,calc((1220px - calc(12 - 1)*24px)/12)) 1fr;
--o3-typography-max-line-width: 60ch;
--o3-z-index: 1;
--o3-grid-gap: 24px;
--o3-z-modal-dialog: 40;
--o3-z-popover: 10;
}Drop-in prompt
Build a landing page in the visual style of Ft.
Reference design system (extracted from the live site):
- Palette: #e78906, #080a79, #adedfb, #92a64d, #ccbeb4
- Typefaces: FinancierDisplayWeb, Times, metric 2 VF
- Macrostructure: Long Document
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/ft-com--content-b0e06d0a-7f2a-11d8-81c6-0003ba5a9905
