Public
Specimen
Cool, spacious digital loft—crisp sans-serif type floats on a deep, calming teal expanse.




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 | N26-Extended | 80px | 400 | 1.1 | 0 | Aa Bb Cc |
| h2 | N26-Extended | 58px | 400 | 1.1 | 0 | Aa Bb Cc |
| h3 | N26 | 18px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | N26 | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | N26 | 16px | 400 | 1.5 | 0.3px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2164a4;
--color-surface: #0f8474;
--color-ink: #90bde8;
--color-accent: #8d8873;
--color-detail: #a6b8ae;
}
/* CSS variables exposed by source */
:root {
--color-nemoSand70: #646054b3;
--color-nemoLagoonStrong: #1d6ea2;
--text-nemo38--line-height: calc(2.875 / 2.375);
--text-nemo17--line-height: calc(1.625 / 1.0625);
--color-nemoRhubarbStrong: #b04364;
--color-nemoTealBright: #d8edeb;
--text-nemo26--line-height: calc(2.125 / 1.625);
--color-gray-300: #d6d6d6;
--text-nemo48: 3rem;
--spacing-nemo112: 112px;
--border-width-nemo0: 0px;
--spacing-nemo72: 72px;
--color-nemoRhubarbLight: #ffdce1;
--color-gray-500: #d9d9d9;
--text-nemo20: 1.25rem;
--color-lagoon-700: #1d6ea2;
--radius-nemo2: 2px;
--color-nemoRhubarbRich: #44021d;
--text-nemo56--line-height: calc(4 / 3.5);
--color-rhubarb-800: #8e1b44;
--color-white: #fff;
--color-nemoWhite: #fff;
--text-nemo34: 2.125rem;
--spacing-nemo96: 96px;
--radius-sm: .25rem;
--spacing-nemo40: 40px;
--text-nemo20--line-height: 1.5;
--color-gray-100: #e9e9e9;
--color-teal-450: #809d9c;
--spacing-nemo8: 8px;
--text-nemo80: 5rem;
--color-nemoGrayMist: #8c8c8c;
--text-nemo19--line-height: calc(1.75 / 1.1875);
--color-teal-900: #003b39;
--color-nemoGrayStrong: #6d6d6d;
--text-nemo24: 1.5rem;
--text-nemo34--line-height: calc(2.75 / 2.125);
--color-nemoTealDeep: #005451;
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--font-weight-nemoMedium: 500;
--text-nemo32--line-height: 1.25;
--color-nemoWhite80: #fffc;
--color-nemoBlack: #1b1b1b;
--color-nemoCream: #faf8f5;
--spacing-nemo12: 12px;
--color-lagoon-800: #00395f;
--text-nemo52--line-height: calc(3.75 / 3.25);
--text-nemo52: 3.25rem;
--spacing-nemo80: 80px;
--text-nemo28: 1.75rem;
--color-nemoGray: #d9d9d9;
--spacing-nemo56: 56px;
--spacing-nemo0: 0px;
--spacing-nemo10: 10px;
--spacing-nemo4: 4px;
--spacing-nemo2: 2px;
--spacing-nemo48: 48px;
--text-nemo19: 1.1875rem;
}Drop-in prompt
Build a landing page in the visual style of N26.
Reference design system (extracted from the live site):
- Palette: #2164a4, #0f8474, #90bde8, #8d8873, #a6b8ae
- Typefaces: N26-Extended, N26
- 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/n26-com--de-de-blog-alle