N26
Specimen
Cool, deep indigo expanse; crisp, geometric sans-serif; open, structured clarity.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Denton | 48px | 300 | 1.12 | 0 | Aa Bb Cc |
| h2 | Denton | 80px | 300 | 1 | 0 | Aa Bb Cc |
| h3 | Invest Pro | 24px | 400 | 1.17 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| caption | Inter | 12px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Invest Pro | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ee6040;
--color-surface: #15245a;
--color-ink: #819ade;
--color-accent: #44599e;
--color-detail: #cad3b7;
}
/* CSS variables exposed by source */
:root {
--text-small-line-height: 21px;
--text-regular-line-height: 24px;
--text-large-line-height: 27px;
--color-text: #2b3746;
--text-larger-font-size: 20px;
--font-family-heading: 'Denton', 'Times New Roman', serif;
--font-family-text: Inter, Helvetica, Arial, sans-serif;
--text-small-font-size: 14px;
--font-family-invest-pro: 'Invest Pro', Helvetica, Arial, sans-serif;
--text-larger-line-height: 30px;
--font-family-denton: 'Denton', 'Times New Roman', serif;
--text-regular-font-size: 16px;
--color-heading: #000;
--font-family-graphik: 'Graphik', Helvetica, Arial, sans-serif;
--text-tiny-line-height: 18px;
--text-large-font-size: 18px;
--text-tiny-font-size: 12px;
--font-family-alpha-mono: 'Alpha Mono', ui-monospace, 'Courier New', monospace;
--h4-line-height: 36px;
--h3-font-size: 48px;
--xxl-line-height: 100%;
--h5-font-size: 24px;
--h6-font-size: 20px;
--h2-font-size: 52px;
--h3-line-height: 54px;
--h1-line-height: 76px;
--grey-003: #f1f4f7;
--grey-004: #f6f8f9;
--swiper-navigation-size: 44px;
--dark-003: #161a20;
--xl-font-size: 92px;
--white: #fff;
--dark-001: #000;
--blue-light-001: #4d74ff;
--xl-line-height: 100%;
--h6-line-height: 115%;
--h1-font-size: 76px;
--green-success: #4dc16d;
--dark-004: #2b3746;
--grey-002: #d4d9df;
--blue-light-003: #e5ebff;
--angle: 0deg;
--dark-002: #1b2128;
--h2-line-height: 58px;
--blue-light-002: #99afff;
--xxl-font-size: 102px;
--h5-line-height: 140%;
--h4-font-size: 32px;
--swiper-theme-color: #007aff;
--blue-brand: #00379a;
--grey-001: #516880;
--red-error: #ff0066;
}Drop-in prompt
Build a landing page in the visual style of Public.
Reference design system (extracted from the live site):
- Palette: #ee6040, #15245a, #819ade, #44599e, #cad3b7
- Typefaces: Denton, Inter, Invest Pro
- Macrostructure: Specimen
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/public-com