---
version: alpha
name: Kadence
description: >
  Light, editorial visual identity for Kadence, the growth system for life
  insurance agents. A warm snow canvas with near-black editorial type, generous
  whitespace, and a single saddle-brown (rust) accent. One cohesive typeface
  family (Geist for all text, Geist Mono for technical eyebrows and labels).
  The "Frame + Node" motif (a stroked square and a filled square) is the
  signature mark. Precise, structural, confident. This file mirrors the runtime
  tokens in src/styles/global.css. global.css remains the source of truth;
  DESIGN.md gives agents a structured, human-readable view.

colors:
  # Core palette (matches src/styles/global.css)
  background: "#FDFAF7"       # Snow, the page canvas
  surface: "#E2E8E9"          # Lavender, cards, alternating sections
  surface-raised: "#D6DEE0"   # Slightly deeper, hover, nested panels
  foreground: "#1D1C1B"       # Black, all text
  primary: "#80382E"          # Saddle Brown (rust), primary action color (CTA fills)
  muted: "#666666"            # Gray, secondary text, descriptions
  subtle: "#999999"           # Light gray, captions, metadata, disabled
  border: "#E4DED9"           # Hairline borders, dividers
  accent: "#80382E"           # Saddle Brown (rust), links, eyebrows, icons, focus rings
  accent-bright: "#9B4438"    # Brighter rust, hover, glow, icon touches
  accent-deep: "#5E2820"      # Deepest rust, pressed, emphasis
  danger: "#dc2626"           # Form validation error only
  positive: "#047857"         # "Kadence" column in comparison table

typography:
  # fontSize values are the upper bound of clamp(), see Typography prose.
  display:
    fontFamily: Geist Variable
    fontSize: 8rem             # clamp(3rem, 12vw, 8rem), hero only
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-xl:
    fontFamily: Geist Variable
    fontSize: 3.5rem           # clamp(2.25rem, 1.6rem + 3vw, 3.5rem)
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Geist Variable
    fontSize: 2.5rem           # clamp(1.875rem, 1.4rem + 2vw, 2.5rem)
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Geist Variable
    fontSize: 1.5rem           # clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  title:
    fontFamily: Geist Variable
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Geist Variable
    fontSize: 1.25rem          # clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Geist Variable
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Geist Variable
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
  eyebrow:
    fontFamily: Geist Mono Variable
    fontSize: 0.8125rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.04em
  mono-stat:
    fontFamily: Geist Mono Variable
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em

rounded:
  none: 0px
  sm: 6px
  DEFAULT: 10px               # Cards, inputs
  lg: 16px                    # Large panels, floating nav
  xl: 24px                    # Hero media, feature blocks
  full: 9999px                # Buttons, badges, pills

spacing:
  xs: 4px
  sm: 8px
  md: 16px                    # Default gutter
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  section: 7.5rem             # --section-padding (clamp upper bound)
  header: 80px                # --header-height
  gutter: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    rounded: "{rounded.full}"
    padding: "{spacing.md}"
  button-primary-hover:
    backgroundColor: "{colors.accent-deep}"
    textColor: "{colors.background}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.full}"
    padding: "{spacing.md}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.foreground}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.DEFAULT}"
    padding: "{spacing.lg}"
  card-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.foreground}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  nav-floating:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.DEFAULT}"
    padding: "{spacing.md}"
  input-field-error:
    backgroundColor: "{colors.background}"
    textColor: "{colors.danger}"
    rounded: "{rounded.DEFAULT}"
    padding: "{spacing.md}"
  caption:
    textColor: "{colors.subtle}"
    typography: "{typography.body-sm}"
  comparison-kadence:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.positive}"
    rounded: "{rounded.DEFAULT}"
    padding: "{spacing.md}"
  link-inline-active:
    textColor: "{colors.accent-deep}"
    typography: "{typography.body-md}"
  eyebrow:
    textColor: "{colors.accent}"
    typography: "{typography.eyebrow}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.accent}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm}"
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
  link-inline:
    textColor: "{colors.accent}"
    typography: "{typography.body-md}"
  link-inline-hover:
    textColor: "{colors.accent-bright}"
  footer:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.muted}"
    padding: "{spacing.section}"
---

## Brand & Style

Kadence is the growth system for life insurance agents, **agent-first, AI-native, founder-led**. The visual identity must read *precise, structural, and confident*: architecture for growth. The voice is **editorial authority**, disciplined and clear, never hype-driven. The signature device is the **"Frame + Node" motif**: a stroked square (Frame) and a small filled square (Node) used as restrained structural accents.

The style is **Warm Editorial**: a snow canvas, near-black text, a single saddle-brown (rust) accent doing all the signalling, generous whitespace, and quiet hairline structure. One typeface, Geist, carries every headline and paragraph; Geist Mono handles eyebrows and metrics so the page feels close to the terminal the founders actually work in. The reference point is a modern, minimal product site, not a busy agency page.

Avoid: dark backgrounds for body content, multi-color gradients, glossy "consumer SaaS" drop shadows, stock-photo hero imagery, emoji, and any second accent hue. One rust. Light always.

## Colors

The palette is **near-black on snow with a single saddle-brown (rust) accent**. Every interactive surface, link, focus ring, and accent draws from one chromatic family, that single voice is the identity. A second hue would dilute it.

- **Background (#FDFAF7), "Snow":** A warm off-white. The default page canvas.
- **Surface (#E2E8E9), "Lavender":** A soft cool gray. Alternating sections and resting cards, so the page has rhythm without leaving the light world.
- **Surface-raised (#D6DEE0):** A slightly deeper gray for hover states and nested panels.
- **Foreground (#1D1C1B), "Black":** Near-black, all headings and body text.
- **Primary (#80382E), "Saddle Brown":** The rust brand color. Primary CTA fills, with snow text (passes WCAG AA).
- **Muted (#666666):** Gray. Secondary/body copy, descriptions, nav links at rest.
- **Subtle (#999999):** Light gray. Captions, metadata, disabled states.
- **Border (#E4DED9):** Hairline borders and dividers, the primary structural device on a light page.
- **Accent (#80382E):** Same rust as primary. Links, section eyebrows, line icons, focus rings, the wordmark mark.
- **Accent-bright (#9B4438):** A brighter rust for hover, ambient glow, and small icon touches.
- **Accent-deep (#5E2820):** The deepest rust, pressed states and CTA hover.
- **Danger (#dc2626):** Form validation only. Never a brand color.
- **Positive (#059669):** Reserved for the "Kadence" column of the comparison table, where a single contrasting green reads as "the better choice." Not used elsewhere.

## Typography

One typeface family, split by role:

- **Geist Variable** is the entire interface. Every headline, paragraph, button, card title, and form field. The hero display headline is simply Geist at a heavy weight and tight tracking. One family means the page never feels pasted together.
- **Geist Mono Variable** is the technical voice. Section eyebrows, stat labels, the wordmark tag, and any metric that should feel measured. Always paired with letter-spacing.

The size scale is **fluid via CSS `clamp()`**, every step interpolates between a mobile floor and a desktop ceiling driven by viewport width. The `fontSize` token values here are the **desktop ceiling**. Agents generating components should consume the `--text-*` custom properties from global.css rather than hard-coding the ceiling.

- **Display:** The hero headline only. One per page.
- **Headline-xl:** Major section openers ("What We Do", "The Kadence Edge").
- **Headline-lg / md:** Sub-section titles and large card headings.
- **Title:** Card titles, comparison rows, team names.
- **Body-lg:** Section intro paragraphs and the hero sub-headline.
- **Body-md / sm:** Paragraph copy, card descriptions, captions.
- **Eyebrow:** Uppercase mono label above section headings, rust, letter-spaced. The signature "you are in a section" marker.
- **Mono-stat:** Small mono labels under big numbers in the stat band.

## Layout & Spacing

The layout is a **centered editorial column** on quiet hairline structure, generous outer margins, a `max-w-7xl` (~80rem) content cap, and faint grid lines in the hero echoing the deck's geometric corners.

- **Section rhythm:** Vertical breathing room signals "premium engineering." Sections use `--section-padding` (`clamp(4.5rem, 9vw, 7.5rem)`) top and bottom. Never collapse this for density.
- **Header:** A floating nav, `--header-height` 80px. It shrinks and gains a white background, hairline border, and `rounded-lg` corners once the page scrolls past 20px.
- **Spacing scale:** 4 / 8 / 16 / 24 / 40 / 64 / 96px, strict 8px rhythm with one 4px sub-step. Off-scale spacing is a bug.
- **Containers:** Default content max-width `max-w-7xl`; the hero may go full-bleed for its background.
- **Safe areas:** Mobile layouts respect `env(safe-area-inset-*)` for notch / Dynamic Island.

## Elevation & Depth

Depth comes from **hairline borders and gentle tonal layering**, not heavy shadows. A card is defined by a 1px `border` and, when raised, a soft low-contrast shadow, never a consumer-app drop shadow.

- **Resting:** `background` white card on a `surface` section (or vice versa), edged by a 1px `border` hairline.
- **Hover:** Background shifts toward `surface`/`surface-raised` and the element lifts `-4px` translateY (`--ease-spring`) with a soft, low-opacity shadow.
- **Accent glow:** Reserved for the primary hero CTA, a soft rust radial bloom (`--glow-accent`), never a gray drop shadow.
- **Grid lines:** The hero uses faint `border`-colored 1px lines as an ambient structural layer, depth through line, not shadow.

## Shapes

The shape language is **soft-technical**, pill CTAs and comfortably rounded cards, set against the white canvas and hairline structure for contrast.

- **Buttons:** `rounded-full`. The pill shape is the signature CTA.
- **Cards / inputs:** `rounded` (10px), modern, crisp enough to stay technical.
- **Panels / floating nav:** `rounded-lg` (16px).
- **Hero media / feature blocks:** `rounded-xl` (24px).
- **Badges:** `rounded-full`.

## Components

### Buttons

Two variants:

- **`button-primary`**, solid rust `primary` fill, white text, `rounded-full`. Hover: fill darkens to `accent-deep`, lifts `-2px`, gains a soft `--glow-accent`. The arrow icon nudges `+4px` on hover.
- **`button-ghost`**, white `background` fill, `foreground` text, `rounded-full`, 1px `border`. Hover: fill shifts to `surface`.

All buttons: min-height 48px touch target, 300ms `--ease-spring` transition, `body-md` weight 500.

### Cards

White `background` (on `surface` sections) or `surface` fill (on white sections), 1px `border` hairline, `rounded` corners, `lg` padding. Hover shifts background tone and lifts `-4px`. Service cards carry a rust accent rule on the left edge and a small rust line-icon tile at the top.

### Eyebrow + Section Heading

The canonical section opener: a short `8px` rust rule + a mono **eyebrow** (uppercase, rust, letter-spaced) + an `h2` at `headline-xl`/`headline-lg` + an optional `body-lg` intro in `muted`.

### Comparison Table

The "Kadence Edge" pattern: two columns. The left ("Traditional Agencies") uses `muted` text on `surface` with a faintly red-tinted header. The right ("Kadence") uses `foreground` text with a rust-tinted header and `positive`/`accent` checkmarks. This is the one place a second hue (green) is permitted.

### Stat Band

Big numbers in `headline-xl` (rust), with a `mono-stat` label beneath. Used for the "under 10s / 24/7 / 100% / 3x" proof band.

### Forms

`input-field` tokens, white fill, `border` hairline, 10px radius, `foreground` text. Focus: `2px solid accent` outline, 2px offset. Errors use `danger` for the message and field border only, never background or icon.

### Footer

`surface` gray (a soft step down from the white page), separated by a 1px `border`. Headings in `foreground`, links in `muted` shifting to `accent` on hover.

## Do's and Don'ts

**Do**
- Treat global.css as the runtime source of truth; when CSS tokens change, update this file too.
- Use the single rust family for every accent, icons, rules, focus rings, data viz.
- Keep section vertical padding generous. Whitespace is the design.
- Apply `--ease-spring` for transitions over 200ms, the curve is part of the brand feel.
- Respect `prefers-reduced-motion`: disable char-in, marquee, and lift effects.

**Don't**
- Don't introduce a second hue. The only exception is `positive` green, comparison table only.
- Don't introduce a second typeface. Geist and Geist Mono are the whole system.
- Don't use pure `#000000` or consumer-SaaS gray drop shadows, depth is hairline + tonal.
- Don't add stock photography or emoji. Iconography is line-based and rust.
- Don't square off the buttons; the pill shape is core to the identity.