Caliper Studios · Binance
Marquee Hero
Loading
Brikken+Co
Brutalist concrete grey, bold Swiss sans, electric blue accents on stark white
Click any value to copy. Roles are suggestions, not gospel.
- #0b11eaoklch(43.2% 0.288 265)Dominant
- #5655f7oklch(55.4% 0.234 276)Surface
- #6c5c24oklch(47.9% 0.077 93)Ink
- #977358oklch(58.4% 0.060 58)Accent
- #aca1c8oklch(73.1% 0.057 298)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h3 | ppNeueMontreal | 32px | 500 | 1.1 | -0.64px | Aa Bb Cc |
| body | ppNeueMontreal | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | sometypeMono | 14px | 400 | 1.5 | 1.4px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0b11ea;
--color-surface: #5655f7;
--color-ink: #6c5c24;
--color-accent: #977358;
--color-detail: #aca1c8;
}
/* CSS variables exposed by source */
:root {
--font-druk: "druk","druk Fallback";
--font-neue: "ppNeueMontreal","ppNeueMontreal Fallback";
--font-mono: "sometypeMono","sometypeMono Fallback";
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Brikken+Co.
Reference design system (extracted from the live site):
- Palette: #0b11ea, #5655f7, #6c5c24, #977358, #aca1c8
- Typefaces: ppNeueMontreal, sometypeMono
- 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/brikken-co
