Kagi — Quiet Web, Warm Illustrations

---
version: alpha
name: Kagi — Quiet Web, Warm Illustrations
colors:
  primary: '#18181A'
  background: '#FFFFFF'
  body: '#454549'
  search-yellow: '#FFB319'
  assistant-lavender: '#C9C1FF'
  panel-blue: '#D6E3E8'
  divider: '#2F2F31'
typography:
  display:
    fontFamily: Lufga, system-ui, sans-serif
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.133
  heading:
    fontFamily: Lufga, system-ui, sans-serif
    fontSize: 46px
    fontWeight: 600
    lineHeight: 1.13
  card-heading:
    fontFamily: Lufga, system-ui, sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
  lead:
    fontFamily: system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  body:
    fontFamily: system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  button:
    fontFamily: system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  card: 24px
  button: 48px
spacing:
  mobile-gutter: 16px
  grid-gap: 24px
  card-inset: 24px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.background}'
    typography: '{typography.button}'
    rounded: '{rounded.button}'
  utility-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.body}'
    rounded: '{rounded.card}'
    padding: '{spacing.card-inset}'
---

## Overview
Kagi's homepage makes a privacy-first product ecosystem approachable through generous white space, rounded geometric headings, restrained black actions, and yellow-accented hand-drawn illustrations. The hero sells a principle before showing product screens; the page then becomes an orderly catalogue of search, assistant, browser, and small utilities. Use this reference for a calm consumer-software landing page with personality, not a dense dashboard.

Observed at 1440 × 1000 desktop and 390 × 844 mobile on 2026-09-29. The desktop full page is 6840px tall. Measurements below are computed styles unless labelled estimates. The mobile visual review covers the opening viewport; deeper mobile layouts are supported by DOM geometry only. Menus, hover states, form flows, and FAQ interaction were not exercised.

## Colors
White is the dominant canvas; near-black #18181A supplies headlines, pill actions, and the final FAQ/footer region. Body copy uses #454549 for a softer hierarchy. Product artwork sits on measured yellow #FFB319 and lavender #C9C1FF panels; cool #D6E3E8 panels support the business/library section. These are content accents, not a mandate to color every control. Thin #2F2F31 dividers separate FAQ rows on the dark ground. Purple small section labels provide an additional visual accent; their exact painted color is not encoded here because it was not individually sampled.

## Typography
Use Lufga's friendly geometric forms for navigation and headings, with system sans-serif for explanatory text. The desktop H1 is 60px/67.98px at weight 600, centered inside a measured 574px column. Section headings use 46px/51.98px and product headings 24px/31.92px. Body text is 16px/25.6px; the lead grows to 20px/28px. Avoid forcing display weight onto paragraphs.

At 390px, the H1 becomes 40px/45.32px and wraps into three lines within a 358px width. The next H2 is 32px/36.16px. Preserve natural wrapping and generous leading rather than shrinking all text proportionally. The source's ecosystem paragraph has awkward hard-break spacing, including a joined word in the mobile capture; use the visual hierarchy without reproducing that copy-layout defect.

## Layout
Keep the full-width header light and unboxed, with logo left and inline links right. The opening content is centered and deliberately spare: headline, short lead, single compact action, then substantial breathing room before the ecosystem introduction. Desktop product columns start at x=164 and x=732, each 544px wide, implying a 24px gap and a 1112px content span. Alternate paired product screenshots with a horizontal browser illustration, three utility cards, illustrated philosophy stories, testimonials, and split business rows.

On mobile, the header reduces to logo and a text Menu trigger. The measured content gutter is 16px; product heading widths become 358px and move to x=16, consistent with a single-column arrangement. Do not claim a specific breakpoint from two sampled widths. Approximate major section gaps visually as 100–150px; these are estimates, not extracted spacing tokens.

## Elevation & Depth
Most content rests directly on white. Product-screen artwork carries its own soft shadow and layered device framing, while utility cards have subtle separation. Keep the global page flat; reserve depth for screenshots and cards rather than adding floating shadows to every section. The dark final region creates a strong sectional transition without gradients or glass effects.

## Shapes
Use 48px-radius pill actions with measured 7px vertical and 24px horizontal padding. Utility cards have a measured 24px radius and 24px inset. Round larger image panels broadly, but retain rectangular internal app windows. Friendly yellow mascots and line-drawn scenes supply organic shapes; they should illustrate the story rather than compete with the lead heading.

## Components
- Hero: centered two-line desktop headline, two-line supporting statement, one near-black action. No dashboard is forced into the opening hero.
- Product pair: large rounded screenshot panel, left-aligned heading and paragraph, then compact pill action. Yellow identifies search; lavender identifies assistant.
- Utility trio: icon, 24px title, short copy, white card. Maintain generous hit area even though the visible controls are understated.
- Philosophy cards: wide illustrations above explanatory text; maintain the shared column alignment with product cards.
- Testimonials: four modest columns on desktop, quote accents above names and copy. They are secondary evidence, not oversized decorative quotations.
- FAQ/footer: invert to near-black, use thin row dividers and pale text. The capture shows one expanded answer; keyboard and animation behavior are untested.

## Do's and Don'ts
- Do let whitespace and a clear single action establish the tone before introducing product breadth.
- Do distinguish product families through colored artwork panels while keeping controls consistent.
- Do retain mobile readability and 16px gutters; allow heading lines to reflow.
- Don't substitute a generic neon gradient for the warm illustration system.
- Don't reproduce hard-break copy glitches, testimonials, or claims as if they belonged to another product.
- Don't infer hover, menu, or accordion behavior from static screenshots; implement and test those states separately.