Kirby — Two-Column Newsletter Form

---
version: alpha
name: Kirby — Two-Column Newsletter Form
colors:
  primary: '#000000'
  paper: '#FFFFFF'
  heading: '#000000'
  copy: '#000000'
  surface: '#F0F0F0'
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
---

## Overview
A pale-gray newsletter panel with labeled white inputs, contextual privacy copy, and a full-width black monospace Subscribe button. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `form.kosmos-form`, 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 16px / 24px at weight 500; supporting text uses 14px / 21px. 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 panel is 600px wide with 48px padding and two equal input columns. At 390px viewport the panel is 342px wide with 24px padding and stacked fields. Keep explanatory text associated with its field. Measured desktop component bounds: 600 × 359px. Mobile bounds: 342 × 458px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Panel radius is 4px; white inputs are 2px radius and 40px high. Button radius is 4px, retaining the rectangular technical character.

## Shapes
Panel radius is 4px; white inputs are 2px radius and 40px high. Button radius is 4px, retaining the rectangular technical character.

## Components
Email and first-name inputs, explicit labels, consent explanation, privacy link, and a full-width submit button with a small yellow lightning icon. No form was submitted; success, error, and validation states are uninspected.

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