Blackforestlabs
Marquee Hero
Loading
Scale
Deep charcoal expanse, crisp sans-serif precision, cool, luminous geometric forms.
Click any value to copy. Roles are suggestions, not gospel.
- #3f3fbfoklch(45.4% 0.194 275)Dominant
- #04040coklch(11.3% 0.022 282)Surface
- #a3dcecoklch(86.1% 0.062 217)Ink
- #5c848eoklch(58.7% 0.047 215)Accent
- #bab9c1oklch(78.9% 0.011 292)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | aeonik | 116px | 400 | 1 | -1.16px | Aa Bb Cc |
| h2 | aeonik | 64px | 400 | 1.05 | -0.64px | Aa Bb Cc |
| h3 | aeonik | 24px | 500 | 1.5 | -0.24px | Aa Bb Cc |
| body | aeonik | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | aeonik | 14px | 400 | 1.38 | 0 | Aa Bb Cc |
| button | aeonik | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #3f3fbf;
--color-surface: #04040c;
--color-ink: #a3dcec;
--color-accent: #5c848e;
--color-detail: #bab9c1;
}
/* CSS variables exposed by source */
:root {
--radius-4xl: 2rem;
--font-mono: 'mono', 'mono Fallback';
--radius-sm: .25rem;
--font-weight-bold: 700;
--font-weight-extralight: 200;
--font-weight-light: 300;
--radius-2xl: 1rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-3xl: 1.5rem;
--spacing: .25rem;
--font-weight-semibold: 600;
--font-weight-medium: 500;
--font-weight-normal: 400;
--radius-xs: .125rem;
--font-weight-thin: 100;
--font-aeonik: 'aeonik', 'aeonik Fallback';
--radius-xl: .75rem;
--container-md: 28rem;
--plsmc-wide-chunk: calc(((1280px - 800px) / 2) - 16px);
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--aspect-video: 16 / 9;
--token-3tLrZQMJqqw: 1rem;
--blur-lg: 16px;
--token-0L1EHmdU7Ksw: .75rem;
--tw-drop-shadow-alpha: 100%;
--token-lTpBdyxTmQl6: #e5e7eb;
--plsmc-wide-width: 1280px;
--token-i1DMei7bV_ga: 4rem;
--token-ngEeFtm4Fm2y: Inter;
--token-nzNHfe1dbv-n: 1.25;
--token-tH3e7aDeP-_2: 1.25rem;
--tw-outline-style: solid;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--token-T-iDFdxbaa0d: 20rem;
--leading-normal: 1.5;
--tw-inset-ring-shadow: 0 0 #0000;
--tracking-wider: .05em;
--token-dbRHxeZsmOCW: 15rem;
--announcement-offset: 39.25px;
--plsmc-standard-width: 800px;
--token-iHR8sE16Z9Et: #dc2626;
--blur-xl: 24px;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--token-yyIl_je6g7YN: 18rem;
--tw-gradient-from: rgba(0, 0, 0, 0);
--token-B2QJK96nSF3a: #050505;
--tw-shadow-alpha: 100%;
--tw-gradient-to: rgba(0, 0, 0, 0);
--blur-3xl: 64px;
--token-xFM3JuI5-Ta4: #6b7280;
--tw-scale-z: 1;
--blur-2xl: 40px;
--tw-ring-offset-width: 0px;
--tw-gradient-via-position: 50%;
--token-vuTzkBbFsrmv: 2rem;
--token-_Bu0Hs6T1xNS: .125rem;
--tw-scroll-snap-strictness: proximity;
}Drop-in prompt
Build a landing page in the visual style of Scale.
Reference design system (extracted from the live site):
- Palette: #3f3fbf, #04040c, #a3dcec, #5c848e, #bab9c1
- Typefaces: aeonik
- 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/scale-com
