Anytype
Feature Stack
Loading
Kagi
Cool, clinical azure space — clean sans-serif geometry on crisp, boundless white.
Click any value to copy. Roles are suggestions, not gospel.
- #f6ad1aoklch(79.7% 0.162 77)Dominant
- #7f5605oklch(48.6% 0.100 76)Surface
- #fccc66oklch(86.8% 0.131 84)Ink
- #7c7c7doklch(58.7% 0.002 286)Accent
- #b5b3c1oklch(77.3% 0.020 292)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lufga | 60px | 600 | 1.13 | 0 | Aa Bb Cc |
| h2 | Lufga | 46px | 600 | 1.13 | 0 | Aa Bb Cc |
| h3 | Lufga | 24px | 600 | 1.33 | 0 | Aa Bb Cc |
| body | system-ui | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Lufga | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1176px
:root {
--color-dominant: #f6ad1a;
--color-surface: #7f5605;
--color-ink: #fccc66;
--color-accent: #7c7c7d;
--color-detail: #b5b3c1;
}
/* CSS variables exposed by source */
:root {
--bg-tooltip: #454549;
--primary-800: #454549;
--font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--spacing-xxl-7: 52px;
--primary-70: #f3f3f3;
--font-family-brand: "Lufga", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-body-s: .875rem;
--spacing-xl: 24px;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-display: 3.75rem;
--spacing-m: 16px;
--primary-700: #5a5a60;
--bg-input: #fff;
--color-white: #fff;
--spacing-xxl: 28px;
--primary-600: #707077;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-weight-bold: 700;
--spacing-xs: 8px;
--spacing-xxl-2: 32px;
--font-weight-regular: 400;
--accent-on-accent: #fafafb;
--text-xs--line-height: calc(1 / .75);
--bg-modal: #fff;
--spacing-xxl-5: 44px;
--spacing-xxl-4: 40px;
--primary-400: #9f9fa5;
--spacing-xxl-3: 36px;
--primary-100: #e6e6e8;
--primary-50: #f5f5f5;
--font-size-body: 1rem;
--bg-app: #fff;
--primary-200: #cfcfd1;
--spacing-xxl-8: 56px;
--accent-yellow: #ffb319;
--spacing-l: 20px;
--font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-h3: 1.625rem;
--font-size-h2: 1.8125rem;
--accent-info: #4a67c7;
--spacing-xxl-6: 48px;
--spacing: .25rem;
--primary-850: #39393c;
--accent-alert: #d32f2f;
--font-size-h1: 2rem;
--font-weight-semibold: 600;
--primary-950: #232325;
--primary-900: #2f2f31;
--color-scheme: light;
--primary-300: #b7b7bb;
--spacing-xxl-9: 60px;
--accent-purple: #6c5edc;
--accent-on-yellow: #18181a;
--primary-25: #fafafb;
--spacing-s: 12px;
--text-xs: .75rem;
--spacing-xxs: 4px;
--font-weight-medium: 500;
--accent-warning: #a64700;
--primary: #18181a;
}Drop-in prompt
Build a landing page in the visual style of Kagi.
Reference design system (extracted from the live site):
- Palette: #f6ad1a, #7f5605, #fccc66, #7c7c7d, #b5b3c1
- Typefaces: Lufga, system-ui
- Macrostructure: Feature Stack
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/kagi-com
