Supaste
Marquee Hero
Soft pastel geometry, airy sans-serifs floating on a muted grid canvas




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 | InterVariable | 40px | 500 | 1.1 | -1px | Aa Bb Cc |
| h3 | InterVariable | 17px | 550 | 1.65 | 0 | Aa Bb Cc |
| body | InterVariable | 16px | 450 | 1.5 | 0 | Aa Bb Cc |
| caption | InterVariable | 15px | 450 | 1.6 | 0 | Aa Bb Cc |
| button | InterVariable | 15px | 450 | 1.6 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #5c74c9;
--color-surface: #849ce5;
--color-ink: #202f63;
--color-accent: #4c6090;
--color-detail: #aeb2cd;
}
/* CSS variables exposed by source */
:root {
--surface-light: oklch(99.88% 0.0010 220 / 1);
--text-3xs: 10px;
--shadow-intensity: 1;
--radius-4xl: 1.5lh;
--spacing-2xl: .8lh 1lh;
--border-intensity: 1;
--primary-light: oklch(76.00% 0.0010 220 / 1);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing-sm: .125lh .5lh;
--color-white: #fff;
--font-weight-bold: 700;
--text-3xs--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--text-2xs: 11px;
--text-xs--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--radius-md: .32lh;
--text-2xs--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--radius-2xl: .56lh;
--text-xl: 22px;
--radius-lg: .4lh;
--surface: oklch(99.88% 0.0010 220 / 1);
--color-event-foreground-medium-contrast: oklch(30.78% 0.0010 220 / 0.8);
--text-md: 15px;
--spacing-lg: .4lh .875lh;
--background-dark: oklch(15.00% 0.0010 220 / 1);
--text-2xl--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--spacing: 4px;
--background: oklch(99.04% 0.0010 220 / 1);
--text-xl--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--text-sm: 13px;
--ink-sky-3: lab(28.8932% 27.0332 -23.2222);
--color-black: #000;
--primary: oklch(76.00% 0.0010 220 / 1);
--text-2xl: 26px;
--primary-dark: oklch(76.00% 0.0010 220 / 1);
--text-lg: 18px;
--surface-dark: oklch(17.72% 0.0010 220 / 1);
--ink-sky-1: lab(35.4848% 1.84767 -35.3079);
--spacing-md: .25lh .625lh;
--spacing-xl: .625lh .875lh;
--text-lg--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--shadow-ring: 0;
--font-sans: "InterVariable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--text-md--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--spacing-xs: .075lh .375lh;
--shadow-intensity-light: 1;
--radius-3xl: .64lh;
--shadow-intensity-dark: 2;
--background-light: oklch(99.04% 0.0010 220 / 1);
--surface-edge-z: 10000000;
--ink-sky-2: lab(31.5543% 14.9887 -30.4091);
--font-weight-semibold: 600;
--text-sm--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--text-3xl--line-height: round(up, 1em + clamp(2px, 1em - 12px, 8px), 2px);
--text-3xl: 32px;
--text-xs: 12px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--radius-xs: .16lh;
--radius-xl: .48lh;
--input-border: oklch(calc(100% - (100% - 100.00%) * 1) 0.0010 220 / 1);
}Drop-in prompt
Build a landing page in the visual style of Daybridge · Pricing.
Reference design system (extracted from the live site):
- Palette: #5c74c9, #849ce5, #202f63, #4c6090, #aeb2cd
- Typefaces: InterVariable
- 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/daybridge-com--pricing