Kagi — Charcoal Accordion FAQ

---
version: alpha
name: Kagi — Charcoal Accordion FAQ
colors:
  primary: '#18181A'
  paper: '#FFFFFF'
  heading: '#FAFAFB'
  copy: '#CFCFD1'
  surface: '#18181A'
typography:
  heading:
    fontFamily: Lufga, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 46px
    fontWeight: 600
    lineHeight: 51.98px
  body:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
---

## Overview
A full-width charcoal FAQ with a centered heading, spacious question rows, thin separators, and a visible first answer. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `section.faq-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 46px / 51.98px at weight 600; supporting text uses 16px / 25.6px. 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
Use a broad single-column accordion. Desktop section padding is 64px 164px 128px; at 390px it becomes 64px 16px. The heading reduces from 46px to 32px. Keep answers aligned with their questions. Measured desktop component bounds: 1440 × 1052.5px. Mobile bounds: 390 × 1308.97px. These two samples do not establish exact breakpoints.

## Elevation & Depth
No floating cards or shadows; contrast and fine horizontal rules carry the hierarchy.

## Shapes
No floating cards or shadows; contrast and fine horizontal rules carry the hierarchy.

## Components
Section heading, question disclosure rows, chevrons, and muted answer text. Capture shows the first answer open; other interaction states and keyboard behavior were not exercised. Implement semantic disclosure controls and visible focus states when adapting.

## 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.