N26
Specimen
Loading
Autonomous — Fire your financial advisor. Become autonomous.
Cool, deep charcoal gradients on expansive, airy space, crisp sans-serif clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #6f8a8foklch(61.4% 0.032 210)Dominant
- #b4c2c5oklch(80.4% 0.016 212)Surface
- #39474aoklch(38.7% 0.019 212)Ink
- #71797doklch(57.1% 0.011 229)Accent
- #b4c2c5oklch(80.4% 0.016 212)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | diatype | 118px | 400 | 1 | -6.50494px | Aa Bb Cc |
| h2 | diatype | 118px | 400 | 1 | -6.50494px | Aa Bb Cc |
| body | diatype | 16px | 400 | 1.5 | -0.4px | Aa Bb Cc |
| button | ABCDiatype-Regular | 16px | 500 | 1.5 | -0.4px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #6f8a8f;
--color-surface: #b4c2c5;
--color-ink: #39474a;
--color-accent: #71797d;
--color-detail: #b4c2c5;
}
/* CSS variables exposed by source */
:root {
--font-fallback: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--font-size-display-sm: clamp(24px,2.8vw,40px);
--font-size-footnote: clamp(10px,0.69vw,10px);
--font-diatype: "diatype","diatype Fallback";
--accent-blue: #0000c8;
--font-size-h2: clamp(42px,4.0vw,62px);
--font-size-h3: clamp(32px,3.0vw,40px);
--font-fallback-mono: "Courier New",Consolas,Monaco,monospace;
--font-size-display-md: clamp(24px,3.3vw,48px);
--font-size-h1: clamp(96px,4.0vw,64px);
--accent-gradient: linear-gradient(135deg,#0000ff,#0000c8);
--font-size-h4: clamp(18px,1.5vw,22px);
--font-size-display-xxl: clamp(60px,15vw,170px);
--font-size-legal: 14px;
--font-size-display-hero: clamp(40px,14cqw,128px);
--font-size-h5: clamp(16px,1.4vw,20px);
--font-weight-bold: 700;
--font-diatype-mono: "diatypeMono","diatypeMono Fallback";
--font-size-eyebrow: clamp(11px,0.83vw,12px);
--font-diatype-italic: "diatypeItalic","diatypeItalic Fallback";
--font-weight-regular: 400;
--font-weight-light: 300;
--font-weight-medium: 500;
--accent-gradient-glass: linear-gradient(135deg,rgba(0,0,255,0.8),rgba(0,0,200,0.6));
--font-size-h6: clamp(16px,1.25vw,18px);
--atg-aa-spacing-spacing-xsmall: 12px;
--atg-aa-color-grey-15: rgba(112,119,133,0.15);
--atg-aa-color-black-5: rgba(2,2,3,0.05);
--atg-aa-color-grey-70: rgba(112,119,133,0.7);
--atg-aa-color-white-30: rgba(252,252,253,0.3);
--letter-spacing-wide: 0.05em;
--atg-aa-radius-radius-iphone: 52px;
--atg-aa-color-black-15: rgba(2,2,3,0.15);
--atg-aa-spacing-spacing-xxsmall: 8px;
--atg-aa-color-alerts-attention: #c49a1d;
--atg-aa-color-white-5: rgba(252,252,253,0.05);
--atg-aa-radius-radius-xlarge: 64px;
--atg-aa-color-black-50: rgba(2,2,3,0.5);
--page-bg: #eeeff1;
--atg-aa-spacing-spacing-xxxsmall: 4px;
--atg-aa-white-rgb: 252 252 253;
--atg-aa-color-black-10: rgba(2,2,3,0.1);
--line-height-normal: 1.5;
--atg-aa-color-grey-5: rgba(112,119,133,0.05);
--atg-aa-color-black-100: #020203;
--atg-aa-surface-card-rgb: 251 251 252;
--line-height-tighter: 1.0;
--atg-aa-spacing-spacing-medium-pad: 20px;
--line-height-tight: 1.2;
--atg-aa-spacing-spacing-none: 0px;
--atg-aa-color-accent-100: #a1745d;
--atg-aa-radius-radius-xsmall-2: 8px;
--letter-spacing-snug: -0.03em;
--header-logo-height: 27.31px;
--atg-aa-color-grey-50: rgba(112,119,133,0.5);
--line-height-defaut: 1.5;
--atg-aa-color-alerts-positive: #369f73;
--atg-aa-color-grey-30: rgba(112,119,133,0.3);
--atg-aa-color-alerts-error: #e7362a;
--atg-aa-color-white-100: #fcfcfd;
}Drop-in prompt
Build a landing page in the visual style of Autonomous — Fire your financial advisor. Become autonomous..
Reference design system (extracted from the live site):
- Palette: #6f8a8f, #b4c2c5, #39474a, #71797d, #b4c2c5
- Typefaces: diatype, ABCDiatype-Regular
- 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/becomeautonomous-com
