Raycast
Marquee Hero
Electric deep space - crisp geometric forms, cool neon highlights on stark obsidian.




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 | FKDisplay | 115px | 400 | 0.95 | -5.75044px | Aa Bb Cc |
| h2 | FKGroteskNeue-Regular | 24px | 400 | 1.15 | -0.24354px | Aa Bb Cc |
| h3 | FKGroteskNeue-Regular | 24px | 400 | 1.15 | -0.24354px | Aa Bb Cc |
| body | FKGroteskNeue-Regular | 24px | 400 | 1.15 | -0.24354px | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1daedd;
--color-surface: #0c248e;
--color-ink: #97f3fa;
--color-accent: #6d9798;
--color-detail: #96a1c1;
}
/* CSS variables exposed by source */
:root {
--color-bg: #050311;
--color-black-25: rgba(5,3,17,.25);
--color-white-80: hsla(0,0%,100%,.8);
--color-bg-inverted: #fff;
--color-gray-60: hsla(247,7%,55%,.6);
--color-white-50: hsla(0,0%,100%,.5);
--color-black-80: rgba(5,3,17,.8);
--color-white: #fff;
--color-gray-40: hsla(247,7%,55%,.4);
--color-gray-20: hsla(247,7%,55%,.2);
--color-black-60: rgba(5,3,17,.6);
--color-white-60: hsla(0,0%,100%,.6);
--color-white-30: hsla(0,0%,100%,.3);
--color-dark-gray-70: rgba(44,43,52,.7);
--color-black: #050311;
--color-black-50: rgba(5,3,17,.5);
--color-fg-inverted: #050311;
--color-fg: #fff;
--color-black-40: rgba(5,3,17,.4);
--leva-sizes-checkboxSize: 16px;
--header-height: 80px;
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--leva-radii-sm: 3px;
--leva-fontWeights-folder: normal;
--leva-colors-highlight3: #fefefe;
--leva-borderWidths-active: 1px;
--ease-standard-decelerate: cubic-bezier(0,0,0,1);
--leva-colors-elevation1: #292d39;
--leva-radii-lg: 10px;
--leva-sizes-joystickHeight: 100px;
--leva-colors-folderTextColor: #fefefe;
--leva-fontSizes-root: 11px;
--leva-space-colGap: 7px;
--leva-colors-accent1: #0066dc;
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--leva-colors-elevation2: #181c20;
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease: ease-in-out;
--leva-fonts-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
--leva-space-md: 10px;
--transition-duration-short-2: 200ms;
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-standard-accelerate: cubic-bezier(0.3,0,1,1);
--transition-duration-long-2: 500ms;
--footer-height: 300px;
--leva-radii-xs: 2px;
--transition-duration-extra-long: 800ms;
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--leva-colors-folderWidgetColor: #8c92a4;
--page-margin: 20px;
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--leva-colors-accent2: #007bff;
--grid-gap: 20px;
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--leva-colors-highlight2: #8c92a4;
--leva-sizes-colorPickerWidth: 160px;
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--leva-sizes-rootWidth: 280px;
--leva-sizes-joystickWidth: 100px;
}Drop-in prompt
Build a landing page in the visual style of Northkingdom · About.
Reference design system (extracted from the live site):
- Palette: #1daedd, #0c248e, #97f3fa, #6d9798, #96a1c1
- Typefaces: FKDisplay, FKGroteskNeue-Regular, Arial
- 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/northkingdom-com--about