Builder — Blog
Specimen
Loading
Convex
Deep space code—crisp sans, cool grays, stark geometry, a future of focused clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #2362f0oklch(54.8% 0.223 263)Dominant
- #0c1c14oklch(20.9% 0.027 161)Surface
- #82a6f6oklch(73.1% 0.123 265)Ink
- #7d7466oklch(56.3% 0.024 79)Accent
- #d8ccbcoklch(85.1% 0.026 75)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | neue-haas-grotesk-display | 60px | 900 | 0.85 | -2.4px | Aa Bb Cc |
| h2 | vcr | 10px | 400 | 1.5 | 0.6px | Aa Bb Cc |
| h3 | gtAmerica | 20px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | gtAmerica | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | gtAmerica | 14px | 500 | 1 | 0 | Aa Bb Cc |
| button | Archivo | 16px | 600 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2362f0;
--color-surface: #0c1c14;
--color-ink: #82a6f6;
--color-accent: #7d7466;
--color-detail: #d8ccbc;
}
/* CSS variables exposed by source */
:root {
--color-plum-p3: #d7b3cf;
--text-2xl: 2rem;
--color-camel: #c48f6f;
--color-milk: #fffdf4;
--text-7xl: 3.125rem;
--color-tikkaMasala: #bc7914;
--text-lg: 1.125rem;
--color-antiqueWhite: #f6eedb;
--color-yellow-y3: #f3b01c;
--text-1.5xl: 1.5rem;
--color-neutral-n7: #8b8b8e;
--font-gt-america: "gtAmerica";
--color-plum-p1: #f4e9f1;
--color-congoPink: #ff867e;
--color-neutral-n12: #141414;
--color-neutral-n9: #4f4f52;
--color-orchid: #e79cd6;
--color-armadillo: #473e36;
--color-grape: #5a25b0;
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
--color-green-g4: #479e12;
--color-yellow-y1: #fdefd2;
--color-alabaster: #f6f3e5;
--color-green-g2: #72c043;
--color-red-r4: #d62f2a;
--color-red-r2: #f15d59;
--color-yellow-y4: #e7a71b;
--color-majorelleBlue: #7651e0;
--color-goldFusion: #767653;
--color-red-r3: #ee342f;
--color-neutral-n2: #f1f1f1;
--color-ultramarineBlue: #3d72f5;
--font-publico: "publico", "publico Fallback";
--radius-sm: .25rem;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--color-jordyBlue: #91aef7;
--font-weight-bold: 700;
--font-plex: "IBM Plex Mono", "IBM Plex Mono Fallback";
--text-2xs: .625rem;
--color-mistyMoss: #a9a972;
--text-6xl: 2.875rem;
--font-weight-light: 300;
--color-plum-p6: #47133b;
--color-mayaBlue: #72d1da;
--color-rifleGreen: #444435;
--color-blue: #074ee8;
--color-oldLace: #faf4e9;
--color-paleLavender: #ecd5ff;
--color-neutral-n8: #6d6d70;
--color-lightSalmonPink: #f7a4a1;
--color-eggshell: #f3ecdb;
--radius-2xl: 1rem;
--radius-md: .375rem;
--font-pixel: "vcr", "vcr Fallback", monospace;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-raisin: #262321;
--color-neutral-n6: #a9a9ac;
--text-9xl: 3.75rem;
--font-weight-black: 900;
}Drop-in prompt
Build a landing page in the visual style of Convex.
Reference design system (extracted from the live site):
- Palette: #2362f0, #0c1c14, #82a6f6, #7d7466, #d8ccbc
- Typefaces: neue-haas-grotesk-display, vcr, gtAmerica
- Macrostructure: Specimen
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/convex-dev
