---
version: "alpha"
name: "Throughline"
description: "A cream page with ink type: a Pangaia serif for every headline, the payoff phrase in italic, and Figtree for everything that explains. Big rounded bands in ink and deep green stack the page, lilac is the one action colour, and speech itself is the ornament."
colors:
  background: "{colors.palette-background-color-background-primary}"
  foreground: "{colors.palette-text-color-text-primary}"
  canvas: "#f9f9f9"
  surface: "#ffffff"
  surface-raised: "#ffffff"
  surface-overlay: "#ffffff"
  surface-sunken: "#f2f2f2"
  card: "#ede7dd"
  card-foreground: "{colors.palette-text-color-text-primary}"
  popover: "{colors.palette-background-color-background-alternate}"
  popover-foreground: "#1f1f1f"
  primary: "{colors.palette-background-color-background-secondary}"
  primary-foreground: "{colors.palette-text-color-text-primary}"
  secondary: "{colors.palette-background-color-background-primary}"
  secondary-foreground: "{colors.palette-text-color-text-primary}"
  muted: "{colors.palette-base-color-lumen-dark}"
  muted-foreground: "#5f5f59"
  accent: "{colors.palette-background-color-background-secondary}"
  accent-foreground: "{colors.palette-text-color-text-primary}"
  brand-muted: "#f8edff"
  brand-base: "{colors.palette-base-color-fathom}"
  brand-strong: "{colors.palette-base-color-fathom}"
  brand-emphasis: "#6b3487"
  brand-contrast: "{colors.palette-base-color-lumen}"
  interactive: "{colors.palette-text-color-text-primary}"
  interactive-foreground: "{colors.palette-base-color-lumen}"
  interactive-muted: "#f8edff"
  ring: "{colors.palette-text-color-text-primary}"
  destructive: "{colors.palette-base-color-pulse}"
  destructive-foreground: "{colors.palette-background-color-background-alternate}"
  destructive-muted: "{colors.palette-base-color-system-error-red}"
  destructive-solid: "#b93553"
  destructive-solid-foreground: "#ffffff"
  success: "{colors.palette-text-color-text-success}"
  success-foreground: "{colors.palette-background-color-background-alternate}"
  success-muted: "{colors.palette-base-color-system-success-green}"
  success-solid: "#238319"
  success-solid-foreground: "#ffffff"
  warning: "{colors.palette-text-color-text-warning}"
  warning-foreground: "{colors.palette-background-color-background-alternate}"
  warning-muted: "{colors.palette-base-color-system-warning-yellow}"
  warning-solid: "#796e1e"
  warning-solid-foreground: "#ffffff"
  info: "#6b3487"
  info-foreground: "#ffffff"
  info-muted: "#f8edff"
  info-solid: "#8e48b1"
  info-solid-foreground: "#ffffff"
  border: "#d1d1c1"
  input: "#d1d1c1"
  divider: "#d1d1c1"
  text-secondary: "#5f5f59"
  text-tertiary: "#6d6d6d"
  prompt-bar: "#1f1f1f"
  prompt-bar-foreground: "#ffffff"
  prompt-bar-line: "#515151"
  chart-1: "#b061d8"
  chart-2: "#e24d6c"
  chart-3: "#36a42c"
  chart-4: "#998b28"
  chart-5: "#8a8a8a"
  sidebar: "#ffffff"
  sidebar-foreground: "#1f1f1f"
  sidebar-primary: "#8e48b1"
  sidebar-primary-foreground: "#ffffff"
  sidebar-accent: "#f2f2f2"
  sidebar-accent-foreground: "#1f1f1f"
  sidebar-border: "#e3e3e3"
  sidebar-ring: "#6b3487"
  ink-heading: "{colors.palette-text-color-text-primary}"
  ink-display: "{colors.palette-text-color-text-primary}"
  ink-eyebrow: "#5f5f59"
  inverse-surface: "{colors.palette-text-color-text-primary}"
  inverse-foreground: "{colors.palette-base-color-lumen}"
  palette-base-color-lumen: "#ffffeb"
  palette-text-color-text-secondary: "#ffffeb"
  palette-text-color-text-primary: "#1a1a1a"
  palette-border-color-border-secondary: "#1a1a1a"
  palette-base-color-lumen-dark: "#e4e4d0"
  palette-background-color-background-primary: "#f7f5ee"
  palette-background-color-background-secondary: "#f0d7ff"
  palette-background-color-background-tertiary: "#1a1a1a"
  palette-base-color-fathom: "#075148"
  palette-base-color-glow: "#ffa946"
  palette-base-color-vast: "#1a1a1a"
  palette-base-color-dawn: "#f0d7ff"
  palette-background-color-background-alternate: "#ffffff"
  palette-base-color-white: "#ffffff"
  palette-base-color-flare: "#ff6c4c"
  palette-text-color-text-tertiary: "#f0d7ff"
  palette-base-color-pulse: "#7f1c34"
  palette-base-color-system-success-green: "#cef5ca"
  palette-base-color-signal: "#ffbcf2"
  palette-base-color-system-error-red: "#f8e4e4"
  palette-text-color-text-alternate: "#ffffff"
  palette-background-color-background-success: "#cef5ca"
  palette-base-color-system-error-red-dark: "#7f1c34"
  palette-base-color-neutral-neutral: "#666666"
  palette-text-color-text-success: "#114e0b"
  palette-base-color-neutral-white: "#ffffff"
  palette-base-color-system-warning-yellow: "#fcf8d8"
  palette-link-color-link-primary: "#f0d7ff"
  palette-base-color-neutral-neutral-darkest: "#111111"
  palette-background-color-background-error: "#f8e4e4"
  palette-text-color-text-error: "#7f1c34"
  palette-background-color-background-warning: "#fcf8d8"
  palette-text-color-text-warning: "#5e5515"
  palette-base-color-neutral-neutral-lighter: "#cccccc"
  palette-base-color-neutral-neutral-darker: "#222222"
  palette-base-color-system-success-green-dark: "#114e0b"
  palette-base-color-system-warning-yellow-dark: "#5e5515"
  palette-base-color-sun: "#ffd84a"
  palette-base-color-peach: "#ffd7bc"
  palette-base-color-marker: "#ffd727"
typography:
  display:
    fontFamily: "PP Pangaia"
    fontSize: "96px"
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: "-0.03em"
  h1:
    fontFamily: "PP Pangaia"
    fontSize: "75px"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "-0.03em"
  h2:
    fontFamily: "PP Pangaia"
    fontSize: "64px"
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: "-0.03em"
  h3:
    fontFamily: "PP Pangaia"
    fontSize: "48px"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: "0em"
  lead:
    fontFamily: "Figtree"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "-0.004em"
  body:
    fontFamily: "Figtree"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0em"
  small:
    fontFamily: "Figtree"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "0em"
  caption:
    fontFamily: "Figtree"
    fontSize: "12.22px"
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: "0.0353em"
  micro:
    fontFamily: "Figtree"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "0.08em"
rounded:
  sm: "6px"
  md: "8px"
  lg: "10px"
  xl: "14px"
  2xl: "18px"
  controls: "8px"
  containers: "32px"
  inline: "12px"
  chip: "9999px"
  track: "9999px"
  card-small: "12px"
  avatar: "0px"
spacing:
  hairline: "2px"
  optical: "4px"
  inset-2xs: "6px"
  inset-xs: "8px"
  inset-sm: "10px"
  inset-md: "12px"
  inset-lg: "32px"
  inset-xl: "37px"
  stack-xs: "20px"
  stack-sm: "24px"
  stack-md: "32px"
  stack-lg: "48px"
  region: "80px"
  section: "100px"
  section-lg: "100px"
  chapter: "128px"
  chapter-lg: "128px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.controls}"
    padding: "12px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    rounded: "{rounded.controls}"
    height: "44px"
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.containers}"
    padding: "32px"
  page:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
x-substrate:
  about: "Substrate keeps what DESIGN.md has no place for here. Tools that do not know this key ignore it."
  version: "1.3.6"
  lock: "sha256:fe5c13bec06b811759b35f52371b1677954d59ac10504fd262449b2642aa8fa5"
  faces:
    sans: "Figtree"
    display: "PP Pangaia"
    rule: "display, h1, h2 and h3 take the display face (the engine's :where(h1, h2, h3) rule); every other step takes the sans"
  dark:
    colors:
      background: "#0a0a0a"
      foreground: "#f9f9f9"
      canvas: "#0a0a0a"
      surface: "#1f1f1f"
      surface-raised: "#373737"
      surface-overlay: "#373737"
      surface-sunken: "#0a0a0a"
      card: "#1f1f1f"
      card-foreground: "#f9f9f9"
      popover: "#1f1f1f"
      popover-foreground: "#f9f9f9"
      primary: "#8e48b1"
      primary-foreground: "#ffffff"
      secondary: "#373737"
      secondary-foreground: "#f9f9f9"
      muted: "#373737"
      muted-foreground: "#ababab"
      accent: "#373737"
      accent-foreground: "#f9f9f9"
      brand-muted: "#2c113a"
      brand-base: "#8e48b1"
      brand-strong: "#8e48b1"
      brand-emphasis: "#6b3487"
      brand-contrast: "#ffffff"
      interactive: "#cc8dee"
      interactive-foreground: "#0a0a0a"
      interactive-muted: "#2c113a"
      ring: "#cc8dee"
      destructive: "#f38594"
      destructive-foreground: "#0a0a0a"
      destructive-muted: "#3d0915"
      destructive-solid: "#e24d6c"
      destructive-solid-foreground: "#0a0a0a"
      success: "#70c267"
      success-foreground: "#0a0a0a"
      success-muted: "#052803"
      success-solid: "#70c267"
      success-solid-foreground: "#0a0a0a"
      warning: "#998b28"
      warning-foreground: "#0a0a0a"
      warning-muted: "#242004"
      warning-solid: "#998b28"
      warning-solid-foreground: "#0a0a0a"
      info: "#cc8dee"
      info-foreground: "#0a0a0a"
      info-muted: "#2c113a"
      info-solid: "#cc8dee"
      info-solid-foreground: "#0a0a0a"
      border: "#373737"
      input: "#515151"
      divider: "#373737"
      text-secondary: "#cecece"
      text-tertiary: "#ababab"
      prompt-bar: "#f9f9f9"
      prompt-bar-foreground: "#1f1f1f"
      prompt-bar-line: "#cecece"
      chart-1: "#cc8dee"
      chart-2: "#f38594"
      chart-3: "#70c267"
      chart-4: "#bead34"
      chart-5: "#ababab"
      sidebar: "#1f1f1f"
      sidebar-foreground: "#f9f9f9"
      sidebar-primary: "#8e48b1"
      sidebar-primary-foreground: "#ffffff"
      sidebar-accent: "#373737"
      sidebar-accent-foreground: "#f9f9f9"
      sidebar-border: "#373737"
      sidebar-ring: "#cc8dee"
      ink-heading: "#b8b8b8"
      ink-display: "#b8b8b8"
      ink-eyebrow: "#85857f"
      inverse-surface: "#b8b8b8"
      inverse-foreground: "#0a0a0a"
  controls:
    2xs: "24px"
    xs: "28px"
    sm: "32px"
    md: "44px"
    lg: "52px"
    xl: "62px"
  motion:
    duration-canvas-instant: "240ms"
    duration-canvas-quick: "400ms"
    duration-canvas-standard: "640ms"
    duration-canvas-considered: "1040ms"
    duration-canvas-camera: "1400ms"
  shadows: []
  skipped:
    - "Sizes/measure/xs: a ch measure: it depends on the face, Figma has no unit for it"
    - "Sizes/measure/sm: a ch measure: it depends on the face, Figma has no unit for it"
    - "Sizes/measure/md: a ch measure: it depends on the face, Figma has no unit for it"
    - "Sizes/measure/lg: a ch measure: it depends on the face, Figma has no unit for it"
    - "effect styles/shadow/xs: the system has no shadow at this step"
    - "effect styles/shadow/sm: the system has no shadow at this step"
    - "effect styles/shadow/md: the system has no shadow at this step"
    - "effect styles/shadow/lg: the system has no shadow at this step"
    - "effect styles/shadow/xl: the system has no shadow at this step"
---

## Overview

A cream page with ink type: a Pangaia serif for every headline, the payoff phrase in italic, and Figtree for everything that explains. Big rounded bands in ink and deep green stack the page, lilac is the one action colour, and speech itself is the ornament. It is warm, editorial, playful, assured, human. It is not cold, techy, glossy, corporate, cluttered.

## Colors

- Lilac --primary is the one action colour: the primary button (action recipe: --primary ground, --primary-foreground text, hairline ink border, --r-controls, --ctl-lg tall), the annual toggle, the chosen plan tag, the Dictation product tile. One lilac action per view; it never colours text, icons or a band.
- The lilac stroke svg-afb2b3 sits behind one italic payoff phrase in a page headline as a hand-drawn underline (the headline-underline class): once per page, under two or three words, never under a whole line and never under body text.
- Deep green --brand-base is a surface, never an accent: the announcement line, the number band, the FAQ question panel, the ROI panel, the Notetaker tile. Text on it is --brand-contrast; it never appears as a text colour, a button or an icon tint.
- Ink --inverse-surface bands carry the proof: client logos, testimonials, case-study meta, the business hero. Logos on ink are cream, type is --inverse-foreground, and lilac appears there only as a button or a testimonial card ground.
- Orange --palette-base-color-glow is for the New badge (tile-new: a pill with ink text) and one testimonial card; coral --palette-base-color-flare for one testimonial card and the Free plan tag. Both stay small and few: never a band, never a button, never text.
- Secondary actions: action-ghost on --background with --foreground text and the same hairline ink border, radius and height; action-ink (--interactive ground, --interactive-foreground text) only inside pricing cards. Links with a chevron do the rest; there is no third button style.
- States are quiet: the site changes nothing on hover or press, so a hover is at most a color-mix darkening of the ground by 8% --foreground over --duration-quick --ease-standard; focus is a --ring outline offset by --sp-optical; active matches hover. Nothing lifts, nothing glows: every shadow token is none.
- Two text tones only: --foreground for titles, body and links; --text-secondary for captions, dimmed steps and the eyebrow (--ink-eyebrow). No third grey, no tinted text.
- Semantic colours (--success, --warning, --destructive and their -muted grounds) live inside product UI only: form validation, alerts, admin states. They never appear in a marketing band, a card or a headline.
- Icons are thin stroke glyphs at --ctl-2xs or smaller in the text's own ink: the chevrons (banner-link-arrow-d51f, svg-7e051f, svg-109dbe) and the polish sparkle (svg-202d8f). Never a filled icon, never a coloured icon, never an icon in a tinted tile.
- Compliance stamps (stamp recipe) are hairline circles in ink at half strength on cream, --brand-contrast on green, with the label in a serif line beneath. Never filled, never coloured, never a logo lock-up.
- There is no brand dark mode; the dark block in the tokens is derived by rule. Prefer the site's own answer: a dark passage is an ink or green band inside a cream page, not a theme switch.
- Charts: one data line in --chart-1 on a --background card with --text-small axis text and no fills; the number it supports sits above it in the serif. No multi-colour series in marketing.
- No gradients and no tints in marketing: every ground is one flat palette colour. The gradients the site paints live inside the product demo (word highlighting) and the language card; they are content, not brand surface.

Dark mode: the same roles take the values under `x-substrate.dark.colors`.

## Typography

Faces: PP Pangaia for display and headings, Figtree for everything else (display, h1, h2 and h3 take the display face (the engine's :where(h1, h2, h3) rule); every other step takes the sans).
- Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
- Type stack: --font-display at --weight-regular for every headline: --text-display for the hero, --text-h1 for a closing band, --text-h2 for section titles, --text-h3 for feature titles. --font-sans for everything that explains: --text-lead under a title, --text-body for running text, --text-small for captions and legal. The serif is never bold; the sans is never a headline.
- Italic emphasis: a page headline carries one italic phrase, the payoff: the last two or three words or the second line. Wrap it in headline-payoff. One italic per page headline, never a whole one; sub-heads stay upright (The challenge:); body text is never italic. Only the upright Pangaia is loaded, so the browser synthesises the italic.
- An eyebrow stands above a section title: the eyebrow recipe at --text-micro, uppercase by --case-eyebrow, --ink-eyebrow on cream, the band's text colour on dark; --sp-stack-xs above the title. Two sections open with the headline alone: the green number band and the beige trust panel. Eyebrows label sections and footer columns, never a card, a panel or a photo.
- Section openers are centred: eyebrow, headline, one lead at --text-lead in --ms-sm, then a single action, stacked at --sp-stack-sm. What follows splits left and right: a panel or photo card on one side, a serif --text-h3 title with --text-body on the other, two equal columns at --sp-stack-md gap, centred vertically.
- The nav floats: a cream bar (navbar recipe) with a hairline ink border and --r-inline corners, hugging its content and centred, repeating at the top of every viewport; the Grasp logo left, a segmented product switch on --card with the active segment in cream (--r-chip), text links at --text-body --weight-semibold, the lilac action right. Above it, the green announcement line.
- Photography: the four kept photos are warm, motion-blurred figures. They are cropped into cards at --r-containers or into the closing band, never shown square-cornered or small. Type on a photo is cream only; the speech-wave or the flow-pill is the only overlay ornament, and a 15% ink scrim goes under type on photo-flow-card alone.
- Interaction: menus, dialogs, selects, tabs, tooltips and toggles come from shadcn/ui in components/ui, dressed by the tokens: --popover surface, hairline, no shadow, a --ring outline at --sp-optical offset on focus, --primary for the chosen state (popovers and menus follow the popover recipe and mark it in ink), --duration-quick with --ease-standard.
- Spacing follows the type scale: --sp-inset-lg inside a card, --sp-stack-xs between a title and its lead, --sp-stack-sm between lead and action, --sp-stack-lg between feature rows, --sp-section between bands. Buttons are --ctl-lg tall with --sp-stack-sm side padding. Nothing is spaced by eye.
- Links: a marketing link is the action-link class: ink at --weight-semibold, the words followed by the chevron glyph svg-7e051f inlined in action-link-glyph (Learn more, Download free, Read case study), never underlined and never ending in an arrow character. In article running text a link is underlined ink. The lilac stroke is for headlines only, never a link underline.

## Layout

- Ground and measure: cream --background, ink --foreground. Content sits in --lay-page with --lay-gutter margins; the hero takes --sp-chapter above, every band --sp-section of padding, tight ones --sp-region. Running text never runs wider than --ms-md; a lead holds --ms-sm.
- Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
- Type stack: --font-display at --weight-regular for every headline: --text-display for the hero, --text-h1 for a closing band, --text-h2 for section titles, --text-h3 for feature titles. --font-sans for everything that explains: --text-lead under a title, --text-body for running text, --text-small for captions and legal. The serif is never bold; the sans is never a headline.
- An eyebrow stands above a section title: the eyebrow recipe at --text-micro, uppercase by --case-eyebrow, --ink-eyebrow on cream, the band's text colour on dark; --sp-stack-xs above the title. Two sections open with the headline alone: the green number band and the beige trust panel. Eyebrows label sections and footer columns, never a card, a panel or a photo.
- Section openers are centred: eyebrow, headline, one lead at --text-lead in --ms-sm, then a single action, stacked at --sp-stack-sm. What follows splits left and right: a panel or photo card on one side, a serif --text-h3 title with --text-body on the other, two equal columns at --sp-stack-md gap, centred vertically.
- Feature rows use the feature recipe: a beige panel (--card, --r-containers) or a photo card holds the demo, the title sits beside it. The first feature band is three columns (feature-three): the step list left, the photo card in the middle, the title right. A step list keeps one feature-step-on in --foreground and dims the rest to --text-secondary: ink marks the active step, never a bar.
- Testimonials are a scattered field, not a grid: on an ink band, testimonial cards on alternating grounds (--background, --card, --primary, --brand-base, --palette-base-color-glow, --palette-base-color-flare), each rotated a few degrees either way and some straddling the band's edges; quotes in the serif at --text-lead, attribution in --text-small beside a round mark.
- Every page closes the same way: a photo-band on one of the four kept photos with a cream serif title at --text-h1 and an italic payoff, a lead and one lilac action; then the footer: two product tiles, four link columns under eyebrows, the grasp-logo lock-up (mark then word) at --lay-page width, the legal line and the social glyphs.
- Photography: the four kept photos are warm, motion-blurred figures. They are cropped into cards at --r-containers or into the closing band, never shown square-cornered or small. Type on a photo is cream only; the speech-wave or the flow-pill is the only overlay ornament, and a 15% ink scrim goes under type on photo-flow-card alone.
- Spacing follows the type scale: --sp-inset-lg inside a card, --sp-stack-xs between a title and its lead, --sp-stack-sm between lead and action, --sp-stack-lg between feature rows, --sp-section between bands. Buttons are --ctl-lg tall with --sp-stack-sm side padding. Nothing is spaced by eye.

## Elevation & Depth

- Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
- Interaction: menus, dialogs, selects, tabs, tooltips and toggles come from shadcn/ui in components/ui, dressed by the tokens: --popover surface, hairline, no shadow, a --ring outline at --sp-optical offset on focus, --primary for the chosen state (popovers and menus follow the popover recipe and mark it in ink), --duration-quick with --ease-standard.

## Shapes

- Ground and measure: cream --background, ink --foreground. Content sits in --lay-page with --lay-gutter margins; the hero takes --sp-chapter above, every band --sp-section of padding, tight ones --sp-region. Running text never runs wider than --ms-md; a lead holds --ms-sm.
- Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
- Feature rows use the feature recipe: a beige panel (--card, --r-containers) or a photo card holds the demo, the title sits beside it. The first feature band is three columns (feature-three): the step list left, the photo card in the middle, the title right. A step list keeps one feature-step-on in --foreground and dims the rest to --text-secondary: ink marks the active step, never a bar.
- Testimonials are a scattered field, not a grid: on an ink band, testimonial cards on alternating grounds (--background, --card, --primary, --brand-base, --palette-base-color-glow, --palette-base-color-flare), each rotated a few degrees either way and some straddling the band's edges; quotes in the serif at --text-lead, attribution in --text-small beside a round mark.
- The FAQ is one rounded container (--r-containers) split in two: questions on --brand-base in --brand-contrast, the open question lifted on a lighter pill (a color-mix of --brand-base with --brand-contrast), answers on --card as a chat reply with the grasp-mark beside it. Above it, a two-word serif title with an italic payoff (Good questions.).
- The nav floats: a cream bar (navbar recipe) with a hairline ink border and --r-inline corners, hugging its content and centred, repeating at the top of every viewport; the Grasp logo left, a segmented product switch on --card with the active segment in cream (--r-chip), text links at --text-body --weight-semibold, the lilac action right. Above it, the green announcement line.
- Photography: the four kept photos are warm, motion-blurred figures. They are cropped into cards at --r-containers or into the closing band, never shown square-cornered or small. Type on a photo is cream only; the speech-wave or the flow-pill is the only overlay ornament, and a 15% ink scrim goes under type on photo-flow-card alone.

## Components

The components above are built from the tokens. Anything interactive comes from a component library dressed by these tokens, never hand-rolled.

## Do's and Don'ts

- Do: Ground and measure: cream --background, ink --foreground. Content sits in --lay-page with --lay-gutter margins; the hero takes --sp-chapter above, every band --sp-section of padding, tight ones --sp-region. Running text never runs wider than --ms-md; a lead holds --ms-sm.
- Do: Full-width bands, every second one dark: --inverse-surface with --inverse-foreground or --brand-base with --brand-contrast; corners at --r-containers, the nearest token to the site's larger ones. One stacked pair is the site's own: the ink proof band runs straight into the green number band, the green overlapping the ink. Never two ink or two green bands together.
- Do: Type stack: --font-display at --weight-regular for every headline: --text-display for the hero, --text-h1 for a closing band, --text-h2 for section titles, --text-h3 for feature titles. --font-sans for everything that explains: --text-lead under a title, --text-body for running text, --text-small for captions and legal. The serif is never bold; the sans is never a headline.
- Do: Italic emphasis: a page headline carries one italic phrase, the payoff: the last two or three words or the second line. Wrap it in headline-payoff. One italic per page headline, never a whole one; sub-heads stay upright (The challenge:); body text is never italic. Only the upright Pangaia is loaded, so the browser synthesises the italic.
- Do: An eyebrow stands above a section title: the eyebrow recipe at --text-micro, uppercase by --case-eyebrow, --ink-eyebrow on cream, the band's text colour on dark; --sp-stack-xs above the title. Two sections open with the headline alone: the green number band and the beige trust panel. Eyebrows label sections and footer columns, never a card, a panel or a photo.
- Do: Section openers are centred: eyebrow, headline, one lead at --text-lead in --ms-sm, then a single action, stacked at --sp-stack-sm. What follows splits left and right: a panel or photo card on one side, a serif --text-h3 title with --text-body on the other, two equal columns at --sp-stack-md gap, centred vertically.
- Do: Feature rows use the feature recipe: a beige panel (--card, --r-containers) or a photo card holds the demo, the title sits beside it. The first feature band is three columns (feature-three): the step list left, the photo card in the middle, the title right. A step list keeps one feature-step-on in --foreground and dims the rest to --text-secondary: ink marks the active step, never a bar.
- Do: Numbers are typography: a statistic is the stat recipe, --font-display at --text-h2 (or --text-h1 in a key-results rail) with a --text-small sans caption beneath in the same ink. Never bold, never the sans, never a chart where one number makes the point.
- Don't: No box-shadow anywhere: cards, buttons, the nav and popovers sit flat on their ground; depth comes from a darker band, a hairline or a tilt. Every shadow token is none and the site has no box-shadow on any card or button. A shadow turns the flat cream-and-ink page into a generic SaaS template.
- Don't: No gradient paints on bands, buttons, cards or text; every surface is one flat palette colour. The only gradients on the site sit inside the product demo (word highlighting). Brand surfaces are flat cream, beige, ink, green and lilac.
- Don't: The serif is never bold or semibold: headlines, numbers and quotes are regular-weight Pangaia; emphasis is one italic phrase, not weight. Every display and heading step on the site is weight 400; a bold Pangaia reads as a different, heavier brand.
- Don't: Section and page titles are never set in --font-sans and never all caps or title case; the sans is for body, eyebrows, buttons and product UI, uppercase for the eyebrow alone. The serif sentence-case title over a sans body with one small uppercase eyebrow is the whole voice of the brand; a sans or capped headline makes it any other AI tool.
- Don't: Lilac --primary never colours text or icons; it is a ground for buttons, tiles, tags and the underline stroke only. Lilac on cream fails contrast and the site never does it; lilac is where you click, not what you read.
- Don't: Buttons are --r-controls rounded rectangles, never full pills; the pill radius --r-chip is for tags, the product switch and the Flow pill only. The 8 px button beside pill-shaped tags is the site's control contrast; pill buttons flatten it into a template.
- Don't: No white or grey page ground: the page is cream --background, the only light alternative is beige --card; white is for product UI mock-ups only. The cream is the first thing anyone recognises; a white page with the same type is not Grasp.
- Don't: Link text never ends in an arrow or chevron character; the chevron glyph svg-7e051f follows the words instead (action-link), and marketing links are never underlined. The brand's links end in a drawn stroke chevron in the text's ink; a typed arrow reads as a different, cheaper mark. The gate cannot match an arrow character, so this stays prose.
- Don't: No blue anywhere: links are ink, focus is the --ring ink outline, charts use --chart-1. The browser's blue focus ring is replaced, never kept. The palette has no blue and the site's focus colour was answered as ink. Blue links or rings read as unstyled.
- Don't: No coloured bar down the left edge of a card, quote or list item; a pull quote takes a hairline in --border, an active step is marked by ink against --text-secondary. The house rule bans edge accent bars; the site's one coral step marker is translated into weight of ink so the gate and the brand agree.
- Don't: Photos are never filtered, tinted or recoloured; the blur is in the file. Over type, at most a 15% ink scrim. Only a viz's stickers cast a drop-shadow, by depth. The warm motion-blurred photography is shot that way; a CSS filter or colour overlay turns it into stock. A sticker's shadow follows its cut-out, which only a drop-shadow can draw.
- Don't: Rotation is for testimonial cards and plan tags only; headlines, panels, bands, buttons and photos are never tilted. The scattered tilted cards work because everything around them is square to the page.