Northkingdom
Marquee Hero
Loading
Cyphr — Shaping the future of brand experience
Electric indigo haze over stark, geometric forms; precise sans-serif pulses with energy.
Click any value to copy. Roles are suggestions, not gospel.
- #242cd4oklch(43.5% 0.245 269)Dominant
- #91e4dcoklch(86.4% 0.082 188)Surface
- #96291aoklch(45.1% 0.147 31)Ink
- #586c94oklch(53.2% 0.068 264)Accent
- #a9d8d4oklch(84.8% 0.049 190)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Bandit Condensed | 139px | 400 | 1 | 0 | Aa Bb Cc |
| h3 | Bandit Condensed | 45px | 400 | 1 | 0.45px | Aa Bb Cc |
| body | Messina Sans | 16px | 300 | 1.25 | 0 | Aa Bb Cc |
| button | Bandit Condensed | 27px | 400 | 0.8 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #242cd4;
--color-surface: #91e4dc;
--color-ink: #96291a;
--color-accent: #586c94;
--color-detail: #a9d8d4;
}
/* CSS variables exposed by source */
:root {
--gap-xs: .875em;
--gap-m: 1.5em;
--size-container: clamp(992px, 100vw, 2560px);
--gap-ml: 1.75em;
--gap-xl: 2.5em;
--size-container-min: 992px;
--size-container-ideal: 1440;
--gap-xxl: 3em;
--color--dark: black;
--size-unit: 16;
--color--blue: #212dd2;
--gap-s: 1.125em;
--size-container-max: 2560px;
--size-font: calc(clamp(992px, 100vw, 2560px) / (1440 / 16));
--gap-xxs: .5em;
--color--light: #ecece9;
--gap-l: 2em;
--page-padding: 1.125em;
--cubic-default: cubic-bezier(0.65, 0.01, 0.05, 0.99);
--column-gap: .625em;
--pattern-col-width: 3em;
--pattern-corner: .5em;
--animation-default: 0.725s cubic-bezier(0.65, 0.01, 0.05, 0.99);
--duration-default: 0.725s;
--pattern-col-gap: 5.25em;
--service-item: 14em;
}Drop-in prompt
Build a landing page in the visual style of Cyphr — Shaping the future of brand experience.
Reference design system (extracted from the live site):
- Palette: #242cd4, #91e4dc, #96291a, #586c94, #a9d8d4
- Typefaces: Bandit Condensed, Messina Sans
- 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/cyphr-studio
