Kirby — Branching Audience CTA

---
version: alpha
name: Kirby — Branching Audience CTA
colors:
  primary: '#000000'
  paper: '#FFFFFF'
  heading: '#000000'
  copy: '#000000'
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 31.5px
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
An editorial audience-navigation section uses a thin branching diagram to connect a short promise to four role-specific links. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `#audience`, 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 28px / 31.5px at weight 400; supporting text uses 16px / 24px. 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 places four destinations across a 1248px canvas with a heading aligned left. At 390px the section becomes 342px wide and the destinations form a vertical branch. Preserve the diagram-to-label relationship rather than just shrinking the desktop row. Measured desktop component bounds: 1248 × 313px. Mobile bounds: 342 × 515px. These two samples do not establish exact breakpoints.

## Elevation & Depth
No card backgrounds or shadows. Hairline connectors and generous whitespace make the structure; avoid heavy borders or pill containers.

## Shapes
No card backgrounds or shadows. Hairline connectors and generous whitespace make the structure; avoid heavy borders or pill containers.

## Components
Short heading, fine connector lines, repeated For labels, and destination links with right arrows. Keep link text meaningful and focus states visible in an implementation.

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