Buttondown Email
Marquee Hero
Loading
Linktree · Features
Electric lime energy, bold rounded sans-serifs, high-contrast pops of deep navy
Click any value to copy. Roles are suggestions, not gospel.
- #fb9314oklch(75.7% 0.170 62)Dominant
- #fcbc74oklch(83.9% 0.116 68)Surface
- #a0641coklch(55.7% 0.113 65)Ink
- #8e7b96oklch(61.0% 0.046 316)Accent
- #cca4ccoklch(76.7% 0.071 326)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Linksans | 56px | 700 | 1.06 | -1.12px | Aa Bb Cc |
| h2 | Linksans | 56px | 700 | 1.06 | -1.12px | Aa Bb Cc |
| h3 | Linksans | 24px | 500 | 1.3 | -0.24px | Aa Bb Cc |
| body | Linksans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Linksans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Linksans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fb9314;
--color-surface: #fcbc74;
--color-ink: #a0641c;
--color-accent: #8e7b96;
--color-detail: #cca4cc;
}
/* CSS variables exposed by source */
:root {
--spacing-mpr-creator-pad-y: 32px;
--color-lavender: #e9c0e9;
--spacing-mpr-block-x: clamp(24px, 3.4vw, 52px);
--color-slate-200: lab(91.7353% -.998765 -4.76968);
--text-body: 18px;
--spacing-fluid-16: 4.57vw;
--spacing-mpr-flower-min: 560px;
--color-concrete: #676b5f;
--spacing-measure-stat-detail: 60ch;
--color-ivory: #ddded6;
--spacing-fluid-4: 1.14vw;
--spacing-12: 48px;
--color-mpr-sky: #45b2be;
--text-base--line-height: calc(1.5 / 1);
--spacing-mpr-row-top-mobile: 25svh;
--spacing-mpr-creator-pad-md-x: clamp(16px, 3.4vw, 48px);
--spacing-mpr-col-wide: 95vw;
--spacing-mpr-anim-w: calc(46svh * 1050 / 1500);
--text-display: 96px;
--color-mpr-horizon: #cfe0d8;
--color-lavender-pale: #eee2ff;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-marble: #f3f3f1;
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-forest: #254f1a;
--color-hairline-strong: #0003;
--color-green-500: lab(70.5521% -66.5147 45.8073);
--spacing-container-gutter-lg: max(5vw, calc(50vw - 752px));
--shadow-card: 4px 4px 4px #0006;
--color-lichen: #f6f7f5;
--color-white: #fff;
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-canopy: #43e660;
--radius-sm: 8px;
--font-weight-bold: 700;
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-orchid-bright: #d717e7;
--spacing-bleed: calc(50% - 50vw);
--text-mpr-creator-body-md: clamp(15px, 1.3vw, 20px);
--text-mpr-creator-body: 14px;
--color-currant: #780016;
--text-mpr-wordmark: 32px;
--text-xs--line-height: calc(1 / .75);
--spacing-mpr-block-y: clamp(20px, 2.6vw, 38px);
--spacing-5: 20px;
--color-sky: #02acc4;
--color-poppy: #ff9313;
--color-light-green: #e8efd6;
--radius-2xl: 48px;
--radius-md: 16px;
--radius-lg: 24px;
--text-xl: 1.25rem;
--shadow-brutalist: 4px 4px 0 0 lab(0% 0 0);
--color-peach: #ffcb8d;
--spacing-mpr-heading-top: 11vh;
--color-blue-100: lab(92.0301% -2.24757 -11.6453);
--spacing-4: 16px;
--spacing-hero-top-xl: calc(125.45px + 28px);
--spacing-1: 4px;
--spacing-container-gutter-md: 2.5vw;
}Drop-in prompt
Build a landing page in the visual style of Linktree · Features.
Reference design system (extracted from the live site):
- Palette: #fb9314, #fcbc74, #a0641c, #8e7b96, #cca4cc
- Typefaces: Linksans
- 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/linktr-ee--features
