Kagi — Centered Privacy Hero

---
version: alpha
name: Kagi — Centered Privacy Hero
colors:
  primary: '#18181A'
  paper: '#FFFFFF'
  heading: '#18181A'
  copy: '#454549'
typography:
  heading:
    fontFamily: Lufga, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 60px
    fontWeight: 600
    lineHeight: 67.98px
  body:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
A restrained, centered typographic hero with a two-line display headline, muted supporting copy, and one dark pill CTA. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `section.hero-section`, not the full landing page.

## Colors
Measured text and opaque surface colors are recorded above. Transparent component roots inherit the page background; white/pale appearance is a visual observation, not a measured transparent-to-white conversion. Small artwork accents are not promoted to unmeasured palette tokens.

## Typography
The sampled heading or label uses 60px / 67.98px at weight 600; supporting text uses 20px / 28px. Font-family values are computed CSS stacks, not a guarantee that a licensed font is available in another project. Use a licensed equivalent when necessary.

## Layout
Center the text within a wide white section. Keep the headline narrower than the section; do not stretch copy edge to edge. Use generous 64px vertical padding. At 390px the heading reduces from 60px to 40px and wraps into more lines; body type reduces from 20px to 18px. Measured desktop component bounds: 1112 × 430.328px. Mobile bounds: 358 × 449.891px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Mostly flat: no card, border or shadow. The 48px-radius action is the only strongly rounded element.

## Shapes
Mostly flat: no card, border or shadow. The 48px-radius action is the only strongly rounded element.

## Components
Headline, two-line supporting paragraph, and a single centered Start your journey link. Preserve the focused hierarchy rather than adding badges or competing actions.

## Do's and Don'ts
Do preserve the component-specific hierarchy, spacing, and responsive structure. Do provide accessible labels, contrast, and keyboard focus in your implementation. Do not reuse source testimonials, trademarks, or performance claims as your own. Do not infer hover, validation, animation, or navigation behavior from these resting-state captures.