Buttondown Email
Marquee Hero
Ink-blot playfulness, bold organic curves floating on a stark white void




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 | yetsonSans | 84px | 500 | 1.05 | -4.2px | Aa Bb Cc |
| h2 | yetsonSans | 52px | 500 | 1.1 | -2.34px | Aa Bb Cc |
| h3 | yetsonSans | 40px | 500 | 1.3 | -1.6px | Aa Bb Cc |
| body | yetsonSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | yetsonSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2966b4;
--color-surface: #92b7e6;
--color-ink: #14a460;
--color-accent: #898770;
--color-detail: #afccd4;
}
/* CSS variables exposed by source */
:root {
--bg-plaster: #f6f5ee;
--text-secondary: #545245;
--text-accent: #857c47;
--type-size-h3: calc(2.5rem * 1);
--text-tertiary: #706d5c;
--space-9: 72px;
--bg-soot: #1c1b17;
--space-4: 32px;
--space-3_5: 28px;
--type-size-p4-accent: calc(.875rem * (1 - .05));
--space-7: 56px;
--space-8: 64px;
--type-size-p1: calc(1.3125rem * 1);
--space-2_5: 20px;
--bg-cream: #fffce5;
--font-yetson-sans: "yetsonSans", "yetsonSans Fallback";
--border-subtle: #e8e7e3;
--border-overlay: #1c1b170d;
--spacing: .25rem;
--type-size-p3-accent: calc(1rem * 1);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--type-size-p1-accent: calc(1.375rem * 1);
--bg-putty: #e4e1cd;
--space-6: 48px;
--type-size-p4: calc(.8125rem * 1);
--space-11: 88px;
--space-5: 40px;
--type-size-p2: calc(1.125rem * 1);
--size-icon-md: 24px;
--space-20: 160px;
--bg-butter: #ffffb2;
--radius-sm: 4px;
--font-accent: "goldenGoose", "goldenGoose Fallback", "Iowan Old Style", serif;
--size-logo: 24px;
--font-sans: "yetsonSans", "yetsonSans Fallback", "Avenir Next", "Segoe UI", sans-serif;
--space-2: 16px;
--space-15: 120px;
--space-3: 24px;
--type-size-p2-accent: calc(1.1875rem * 1);
--text-primary: #1c1b17;
--bg-cloud: #fff;
--border-strong: #d1d0c7;
--color-gray-200: lab(91.6229% -.159115 -2.26791);
--size-wordmark-aspect-ratio: 532 / 359;
--radius-pill: 999px;
--space-1_5: 12px;
--text-primary-inverse: #fff;
--space-1: 8px;
--space-10: 80px;
--type-scale: 1;
--text-accent-inverse: #e4e1cd;
--type-size-h4: calc(2rem * 1);
--space-12: 96px;
--radius-xl: 16px;
--type-size-h2: calc(3.25rem * 1);
--radius-md: 8px;
--space-25: 200px;
--radius-lg: 12px;
--space-0_5: 4px;
--font-golden-goose: "goldenGoose", "goldenGoose Fallback";
}Drop-in prompt
Build a landing page in the visual style of North.
Reference design system (extracted from the live site):
- Palette: #2966b4, #92b7e6, #14a460, #898770, #afccd4
- Typefaces: yetsonSans
- Macrostructure: Marquee Hero
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/northmail-app