---
title: "Kagi design system"
variant: extended
source: https://kagi.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/kagi-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Kagi · Design System

> A quiet, human-first interface for reclaiming the web.

**Theme:** light · **Industry:** saas · **Source:** https://kagi.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Kagi’s homepage pairs a spacious white canvas and confident typography with a clear focus on private search and web tools. Product previews and soft pastel accents add warmth, while a deep charcoal FAQ and footer provide a strong closing contrast.

## North star

Keep the interface calm and spacious: let dark, rounded typography explain the product while color appears only as a restrained accent or product surface.

## Overview

The visual strategy is built around a bright, mostly white canvas with generous open space and a calm, low-noise feel. Near-black headings and navigation provide crisp contrast, while muted gray copy keeps supporting information readable without competing with the message. Lufga gives the display headings and navigation a distinctive rounded character; system-ui handles the practical body text and controls. The page moves from a centered search-led hero into product previews, tool cards, human-first editorial content, organization features, and a dark FAQ/footer band. Pastel lavender, pale blue, and warm yellow appear sparingly on cards and product imagery, not as broad page backgrounds. Rounded search and CTA controls soften the interface; thin gray borders organize cards and FAQ rows. Product screenshots and simple illustrations supply proof and personality while the surrounding layout stays restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, open section backgrounds, and white text on the primary dark CTA. |
| Muted Graphite | `#454549` | `--color-muted-graphite` | neutral | Secondary body copy and subdued button text; softens contrast against the white canvas. |
| Kagi Ink | `#18181a` | `--color-kagi-ink` | brand | Primary headings, navigation, text, dark CTA buttons, and the full-width FAQ/footer band. |
| Quiet Violet | `#6c5edc` | `--color-quiet-violet` | accent | Inline links and small section eyebrow labels, including the ecosystem and web-tools introductions. |
| Border Charcoal | `#333336` | `--color-border-charcoal` | neutral | Fine card outlines and dividers, particularly around text-led cards and FAQ content. |
| Soft Rule | `#e6e6e8` | `--color-soft-rule` | neutral | Pale link-card outlines and subtle interface details; use for low-emphasis separation. |
| Pewter Gray | `#cfcfd1` | `--color-pewter-gray` | neutral | Muted text and small UI details, including secondary text in dark controls. |
| Mist Blue | `#d6e3e8` | `--color-mist-blue` | surface | Pale blue feature-card surface and background behind selected illustrations. |
| Lavender Haze | `#c9c1ff` | `--color-lavender-haze` | accent | Lavender product-card surface and restrained framing around product previews. |
| Marigold | `#ffb319` | `--color-marigold` | accent | Warm yellow card accent and illustrative product framing, not a dominant page color. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | neutral | Very light text or interface details where a softer white is needed. |
| Slate Gray | `#707077` | `--color-slate-gray` | semantic | Secondary border or miscellaneous interface detail; use sparingly. |
| Butter Glow | `#ffe1a4` | `--color-butter-glow` | surface | Pale warm surface seen as a small supporting card accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#18181a` (Kagi Ink) · `--color-surface-2` → `#d6e3e8` (Mist Blue) · `--color-surface-3` → `#c9c1ff` (Lavender Haze) · `--color-text` → `#18181a` (Kagi Ink) · `--color-text-muted` → `#454549` (Muted Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#333336` (Border Charcoal) · `--color-accent` → `#6c5edc` (Quiet Violet) · `--color-accent-2` → `#c9c1ff` (Lavender Haze) · `--color-accent-3` → `#ffb319` (Marigold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181a` | `#ffffff` | 17.73:1 | AAA |
| `#18181a` | `#d6e3e8` | 13.52:1 | AAA |
| `#18181a` | `#c9c1ff` | 10.6:1 | AAA |
| `#454549` | `#ffffff` | 9.54:1 | AAA |
| `#454549` | `#18181a` | 1.86:1 | fail |
| `#454549` | `#d6e3e8` | 7.28:1 | AAA |
| `#454549` | `#c9c1ff` | 5.71:1 | AA |
| `#ffffff` | `#18181a` | 17.73:1 | AAA |
| `#ffffff` | `#d6e3e8` | 1.31:1 | fail |
| `#ffffff` | `#c9c1ff` | 1.67:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400 | Body copy, captions, buttons, links, and general interface text. | Inter |
| Lufga | `--font-display` | webfont | 400, 600, 500 | Display and page headings, plus navigation labels. | Nunito Sans |
| Arial | `--font-arial` | system | 400 | Fallback used in small auxiliary controls. | Arial |

- **system-ui:** Regular weight dominates; keep text sentence case, comfortable line spacing, and unembellished.
- **Lufga:** Use rounded, friendly forms; headings use semibold weight, while navigation stays regular and sentence case.
- **Arial:** Keep this limited to utility controls; avoid letting it define the page's typographic voice.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.13 | 0 | — | Lufga | Large centered hero headline. |
| h1 | 46px | 600 | 1.13 | 0 | — | Lufga | Primary section headlines and prominent feature headings. |
| h2 | 24px | 400 | 1.33 | 0 | — | Lufga | Supporting section headings and secondary statements. |
| h3 | 20px | 400 | 1.4 | 0 | — | system-ui | Product and feature card titles. |
| body | 16px | 400 | 1.6 | 0 | — | system-ui | Main explanatory copy throughout sections. |
| caption | 14px | 400 | 1.6 | 0 | — | system-ui | Small labels, metadata, and supporting notes. |
| button | 14px | 400 | 1.6 | 0 | — | system-ui | CTA labels and compact action controls. |
| nav | 16px | 400 | 1.5 | 0 | — | Lufga | Header navigation labels. |
| link | 16px | 400 | 1.6 | 0 | — | system-ui | Inline text links and linked card labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 7, 8, 11, 12, 16, 21, 24, 32, 48, 64, 128, 164 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width —.

A simple top navigation gives way to a centered hero and long-form vertical storytelling. Content alternates between centered section introductions, paired product previews, three-card tool groupings, and split text/image features. Broad white intervals separate these blocks, keeping the page comfortable rather than dense. The organization area uses horizontally divided rows; a full-width charcoal FAQ and footer close the page. Align most section headings centrally, with left-aligned copy inside product cards and feature splits. Keep the overall content width restrained and preserve generous side margins.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `24px` · media `12px` · link `24px` · xs `5px` · sm `12px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `lg` (link, other): `rgba(0, 0, 0, 0.09) 1px 8px 30px 0px`
- Shadow `md` (media): `rgba(0, 0, 0, 0.22) 0px 0px 24px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, using whitespace and thin borders instead of stacked panels. Search and linked cards may receive a soft, diffuse shadow, while product previews sit within rounded pastel surfaces. Keep outlines delicate and layering restrained; reserve the strongest surface contrast for the dark FAQ and footer band.

## Imagery

Use product screenshots as framed evidence of the search and assistant interfaces, with soft lavender or yellow treatments around selected previews. Pair these with simple, friendly line illustrations for organizational features and the dark footer. Imagery is sparse and carefully placed; there is no dominant photography or 3D language. Preserve clear, uncluttered crops and let the white surrounding space frame each visual.

## Components

### Header navigation

A light, uncluttered header with the Kagi wordmark at left and Lufga navigation links aligned across the right.

### Search hero

Centered headline and supporting copy above a long, pill-shaped search input with a subtle shadow and search icon.

### Primary CTA

Near-black pill button with white, regular system-ui text; used for prominent product actions.

### Product preview cards

Paired search and assistant screenshots framed by rounded lavender or warm yellow surfaces, with text and compact CTA below.

### Tool cards

A row of three white tool cards with fine outlines, small line icons, short titles, and concise descriptions.

### Organization feature rows

Text-led rows paired with a softly rounded illustration surface, separated by a light horizontal rule.

### FAQ and footer

A full-width Kagi Ink section with a centered FAQ title, stacked divider-separated questions, and a closing signup area.

### Measured component styles

- **Primary button** (“Get started with Kagi Search (opens in a”): background #18181a · text #ffffff · border 1px solid #18181a · radius 48px · padding 7px 24px · 400 14px system-ui
- **Secondary button**: background #2f2f31 · text #cfcfd1 · border 1px solid #454549 · radius 3.35544e+07px · padding 0px · 400 14px Arial
- **Link** (“Small Web”): transparent background · text #6c5edc · radius 0px · padding 0px · 400 16px system-ui
- **Input**: transparent background · text #18181a · radius 32px · padding 11px 21px · 400 16px system-ui
- **Card** (“Why is Kagi's user-funded model better t”): transparent background · text #18181a · border 1px solid #333336 · radius 0px · padding 0px · 400 16px system-ui
- **Navigation item** (“Kagi for API Pricing Why pay for search?”): transparent background · text #18181a · radius 0px · padding 0px · 400 16px Lufga

## Do

- Keep the main canvas bright and spacious.
- Use Kagi Ink for primary headings and key actions.
- Set display headings in a rounded Lufga-like sans.
- Use Quiet Violet for occasional links and eyebrow labels.
- Reserve pastel surfaces for selected product cards and illustrations.
- Separate long content with generous vertical breathing room.

## Don't

- Do not introduce gradients or loud full-page color bands.
- Do not crowd the centered hero or section introductions.
- Do not use pastel accents as the primary text color.
- Do not add heavy shadows to ordinary content cards.
- Do not make every section a boxed card grid.
- Do not let product imagery overpower explanatory content.

## Agent prompt

Build a new Kagi-style page with a clean white canvas (#ffffff) and an intentionally quiet rhythm. Use Kagi Ink (#18181a) for headings, navigation, and the primary pill CTA; use Muted Graphite (#454549) for supporting copy and Quiet Violet (#6c5edc) for occasional links or eyebrow labels. Keep Lufga-like rounded sans headings, with system-ui body text. Center the hero and section introductions, then alternate product previews, concise card groups, and split text-and-illustration features. Use Mist Blue (#d6e3e8), Lavender Haze (#c9c1ff), and Marigold (#ffb319) sparingly on visual surfaces. Prefer thin borders over elevation, with soft shadows only on search or selected linked cards. Close with a full-width dark FAQ/footer treatment. Preserve open space and avoid decorative clutter.

## Source CSS custom properties (selected)

```css
--font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-family-brand: "Lufga", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-display: 3.75rem;
--font-size-h1: 2rem;
--font-size-h2: 1.8125rem;
--font-size-h3: 1.625rem;
--font-size-body-l: 1.125rem;
--font-size-body: 1rem;
--font-size-body-s: .875rem;
--line-height-brand-body: 1.43;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--spacing-xxs: 4px;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing-m: 16px;
--spacing-l: 20px;
--spacing-xl: 24px;
--spacing-xxl: 28px;
--spacing-xxl-2: 32px;
--spacing-xxl-3: 36px;
--spacing-xxl-4: 40px;
--spacing-xxl-5: 44px;
--spacing-xxl-6: 48px;
--spacing-xxl-7: 52px;
--spacing-xxl-8: 56px;
--spacing-xxl-9: 60px;
--spacing-xxl-10: 64px;
--spacing-xxl-11: 68px;
--alpha-primary-300-40: #b7b7bb66;
--alpha-primary-300-30: #b7b7bb4d;
--alpha-primary-300-20: #b7b7bb33;
--alpha-primary-300-10: #b7b7bb1a;
--alpha-primary-300-5: #b7b7bb0d;
--primary: #18181a;
--primary-25: #fafafb;
--primary-50: #f5f5f5;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/kagi-com