Kagi — Illustrated Closing CTA

---
version: alpha
name: Kagi — Illustrated Closing CTA
colors:
  primary: '#18181A'
  paper: '#FFFFFF'
  heading: '#FAFAFB'
  copy: '#F5F5F5'
  surface: '#18181A'
typography:
  heading:
    fontFamily: Lufga, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
  body:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
A dark closing call-to-action combines left-aligned copy and a white pill button with a playful outlined dog illustration. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `section.fsp-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 24px / 32px at weight 500; 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
Desktop uses a copy column and illustration to its right. At 390px the section grows from 381px to roughly 741px as content stacks, with 16px side padding instead of 164px. Preserve breathing room around the illustration. Measured desktop component bounds: 1440 × 381px. Mobile bounds: 390 × 740.75px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Flat charcoal field; white pill action has a measured 48px radius. The outline illustration provides character without card shadows.

## Shapes
Flat charcoal field; white pill action has a measured 48px radius. The outline illustration provides character without card shadows.

## Components
Short heading, supporting copy, one light action, and brand illustration. Use an original or licensed illustration and truthful product copy instead of reproducing the source brand or claims.

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