Algolia
Feature Stack
Loading
Unkey | The Developer Platform for Modern APIs
Deep charcoal expanse, crisp monospace geometry, glowing lime-green accents pulse forward.
Click any value to copy. Roles are suggestions, not gospel.
- #c9e735oklch(87.7% 0.192 119)Dominant
- #dff088oklch(92.0% 0.130 117)Surface
- #68781doklch(54.2% 0.114 119)Ink
- #838c7coklch(62.8% 0.026 131)Accent
- #c9c9caoklch(83.6% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | articulat-cf | 64px | 400 | 1.13 | 0 | Aa Bb Cc |
| h2 | articulat-cf | 44px | 400 | 1.13 | 0 | Aa Bb Cc |
| h3 | JetBrains Mono | 15px | 400 | 1.25 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 500 | 1 | -0.35px | Aa Bb Cc |
| button | Inter | 14px | 500 | 1 | -0.35px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c9e735;
--color-surface: #dff088;
--color-ink: #68781d;
--color-accent: #838c7c;
--color-detail: #c9c9ca;
}
/* CSS variables exposed by source */
:root {
--text-base--line-height: calc(1.5 / 1);
--text-9xl--line-height: 1;
--color-white: #fff;
--color-popover: #09090b;
--color-gray-30: #464853;
--font-weight-bold: 700;
--text-xs--line-height: calc(1 / .75);
--radius-2xl: 1rem;
--text-xl: 1.25rem;
--text-9xl: 8rem;
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--text-8xl: 6rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--color-blue-600: oklch(54.6% .245 262.881);
--color-gray-90: #e3e4e9;
--color-border: #27272a;
--color-blue-50: oklch(97% .014 254.604);
--color-black: #000;
--color-foreground: #fff;
--text-4xl--line-height: calc(2.5 / 2.25);
--color-muted-foreground: #a1a1aa;
--text-2xl: 1.5rem;
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--text-5xl--line-height: 1;
--spacing-content: 96rem;
--text-lg--line-height: calc(1.75 / 1.125);
--radius: .375rem;
--color-background: #040406;
--text-6xl: 3.75rem;
--font-weight-semibold: 600;
--text-4xl: 2.25rem;
--text-sm--line-height: calc(1.25 / .875);
--color-gray-200: oklch(92.8% .006 264.531);
--text-5xl: 3rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-3xl: 1.875rem;
--text-xs: .75rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--radius-xl: .75rem;
--text-6xl--line-height: 1;
--text-base: 1rem;
--container-md: 28rem;
--tabs-list-border: #27272a;
--consent-widget-radius: 0;
--tw-inset-shadow-alpha: 100%;
--button-neutral-soft: #09090b;
--accordion-radius: 0;
--c15t-font-weight-medium: 500;
--aspect-video: 16 / 9;
--frame-placeholder-text-color-dark: #e6e6e6;
--consent-widget-link-text-color: #fff;
--c15t-font-size-base: 1rem;
--accordion-content-color: #a1a1aa;
--collapsible-content-color: #a1a1aa;
--c15t-surface-hover: #09090b;
--accordion-icon-color: #a1a1aa;
}Drop-in prompt
Build a landing page in the visual style of Unkey | The Developer Platform for Modern APIs.
Reference design system (extracted from the live site):
- Palette: #c9e735, #dff088, #68781d, #838c7c, #c9c9ca
- Typefaces: articulat-cf, Inter
- Macrostructure: Map / Diagram
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/unkey-com
