---
version: alpha
name: "Amie"
website: "https://www.amie.so"
description: >-
  A calendar and tasks app whose marketing site renders almost entirely in neutral grays — page chrome runs Inter at 14-16px on a near-white surface with hairline borders in light gray, and the only saturated chromatic moment above the fold is a single sky-blue pill CTA carrying the word "Get started" in the brand hex sky blue. Below the hero the product screenshots do all the color work: pastel pink, mint green, soft blue, sun yellow, and lavender event blocks tile the calendar grid, plus a friendly hand-drawn arrow underline scribbled in salmon pink under the "AI Note Taker" headline. The system uses 8px rounding as its default, 12px on cards, full pills on buttons, and trusts the product canvas to carry every accent the marketing chrome refuses to.

seo:
  title: "Amie Design System for React — sky-blue pill CTA, Inter, 14 components"
  metaDescription: "Amie's marketing system is gray Inter chrome with a single sky-blue pill CTA — the product's pastel calendar blocks carry every chromatic moment. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Product-as-palette — the marketing chrome is monochrome Inter on near-white, while pastel event blocks (mint, pink, lavender, sky, sun) saturate the calendar screenshots"
    - "Single sky-blue voltage — the brand hex appears just twice in the captured page, both as the pill CTA fill, the only saturated marketing element above the fold"
    - "Hand-drawn salmon underline — the loop-scribbled arrow under the headline is the brand's playfulness signal, rendered in the same salmon pink as the wordmark dot"
    - "Inter across every tier — display at 40-56px in weight 700, body at 16px in weight 400, button labels at 14px in weight 500, no second family"
    - "8px default rounding plus full pill — cards at 12px, buttons at full pill, the calendar event blocks at 8px; no sharp 0-2px corners anywhere"
  tags:
    - "Productivity & SaaS"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Amie's marketing site does something most calendar brands wouldn't dare: it renders the entire above-fold chrome in grayscale. The hero headline reads "AI Note Taker without a bot" with the second half wrapped in a soft yellow highlight; below it sit two buttons, only one of which is colored — a sky-blue pill carrying "Get started," paired with a transparent "Request a demo" sibling. Where Notion paints its hero with friendly multi-color object photography and Calendly leans on a saturated marine-blue chrome, Amie keeps the marketing surface almost entirely neutral and lets the product screenshots underneath do every chromatic job. The hand-drawn salmon-pink scribble arrow looping under the wordmark is the brand's only decorative moment in the page header itself.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens — one sky-blue brand voltage, one salmon hand-drawn accent, four pastel event-block hues borrowed from the product, plus the grayscale chrome ladder; 11 typography tokens running Inter from a 56px / 700 display down to a 12px / 400 caption; 6 corner-radius tokens centered on 8px with a full-pill option for CTAs; 8 spacing values on a 4px base; and 14 component definitions covering the sky-blue pill primary button, the transparent secondary, the hairline-bordered cards, the calendar event blocks, and the inbox-style task rows.

    Feed this file to an AI coding tool and it reproduces Amie's specific moves: grayscale Inter chrome on near-white, sky-blue voltage held to a single CTA above the fold, hand-drawn scribble decorations in salmon pink, and the pastel event-block palette reserved for the product canvas. The one move worth borrowing only if your product has a colorful canvas of its own: refuse to put any of those product colors into the marketing chrome. Amie gets away with the restraint because the screenshots beneath the fold are bright enough to carry it — most landing pages need to paint the chrome itself.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.amie.so"
      title: "Amie — official site"
      description: "Amie's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Amie's primary brand color?"
      answer: "Amie's brand voltage is sky blue, captured at hex value 11a8ff and wired into the CSS as the blue-500 token. It appears just twice above the fold of the marketing page — both occurrences as the background fill of the primary pill CTA labeled Get started. Every other chromatic moment on the page belongs to the product screenshots underneath: mint green event blocks, salmon pink event blocks, sky-blue event blocks, sun-yellow highlights, and lavender meeting cards. The brand chrome itself is held to grayscale Inter typography on a near-white surface — the sky-blue pill is the only chromatic marketing element above the fold."
    - id: "typography"
      title: "What typeface does Amie use, and what should I use as a substitute?"
      answer: "Amie runs Inter across every typographic tier of the marketing site — display, heading, body, button, label. Display tops out at 56px in weight 700 with negative letter-spacing for the largest hero moments, 40px in weight 700 for section displays, and 20px in weight 600 for sub-section titles. Body sits at 16px in weight 400 with a 28px line-height for the long-form editorial paragraphs below the fold. Button labels are 14px in weight 500. Since Inter is already open-source and free, no substitution is necessary; the system uses the canonical CDN-hosted Inter family directly with a fallback to the Inter Fallback metric-matched stack."
    - id: "event-block-colors"
      title: "Why does Amie's screenshot use so many pastel colors when the brand is monochrome?"
      answer: "The pastel hues — mint green, salmon pink, sky blue, sun yellow, lavender — are not brand accents. They are user-assignable event-block colors inside the Amie product, drawn from the broader pastel palette wired into the page CSS as gray, blue, green, pink, yellow, and purple custom-property families. Each calendar event a user creates can be tinted with one of these hues, and the marketing screenshots show the product with a representative sample of every option lit up at once. Outside the screenshots, none of these colors appear in the marketing chrome — the system is monochrome grayscale Inter wherever it is the brand speaking rather than the product."
    - id: "scribble-underline"
      title: "What is the hand-drawn underline under the Amie headline?"
      answer: "The salmon-pink scribbled arrow looping under the words without a bot in the hero headline is a hand-drawn SVG illustration, not a CSS underline. It is the brand's single playfulness signal in the page chrome — the visual equivalent of a wink. The color is the same warm salmon pink wired into the page CSS as the amie-pink custom property, also used as the small dot under the wordmark in the upper-left corner. Hand-drawn marks like this are a recurring move across friendly productivity brands, but Amie uses exactly one of them on the page — a deliberate restraint."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own calendar marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Amie's specific moves: grayscale Inter chrome on near-white canvas, single sky-blue pill CTA, hand-drawn salmon-pink scribble decoration, and 8px default rounding with a full-pill option for the CTA. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the product-as-palette move only works if your product has its own colorful canvas — for a marketing site without that visual support, you may want to bring more chrome color into the chrome itself."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#11a8ff"
  primary-soft: "#cfeeff"
  primary-deep: "#2c76a0"
  accent-pink: "#f6a6a6"
  highlight-yellow: "#ffd700"
  event-mint: "#ccf4da"
  event-purple: "#a050ff"
  event-success: "#01ca45"
  event-warning: "#fe6600"
  ink: "#000000"
  ink-soft: "#262626"
  ink-muted: "#5c5c5c"
  ink-faint: "#a0a0a0"
  canvas: "#ffffff"
  surface-1: "#ebebeb"
  hairline: "#cdcdcd"

typography:
  display-xl:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 64px
    letterSpacing: "-0.7px"
  display-lg:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 54.4px
    letterSpacing: "-0.5px"
  heading-md:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: "-0.5px"
  heading-sm:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: "-0.003px"
  body-lg:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "-0.003px"
  body-md:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "-0.003px"
  body-sm:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: "-0.003px"
  label-md:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "-0.003px"
  caption:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15.84px
    letterSpacing: "-0.003px"
  button-md:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "-0.003px"
  nav-link:
    fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "-0.003px"

rounded:
  none: "0px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "32px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "6px 16px"
    height: "32px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "6px 16px"
    height: "32px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "12px 28px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "6px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  sub-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-lg}"
  inline-highlight:
    backgroundColor: "{colors.highlight-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.xs}"
    padding: "0px 4px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  event-block-mint:
    backgroundColor: "{colors.event-mint}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "4px 8px"
  event-block-sky:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "4px 8px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    height: "36px"
    borderColor: "{colors.hairline}"
---

## Overview

Amie's marketing site does something most calendar brands wouldn't try. **Product-as-palette.** The chrome above the fold is rendered almost entirely in grayscale Inter on a near-white canvas — even the section displays below the hero ("Within 47 seconds: Share summary. Keep CRM updated. Plan action items. Schedule next meeting.") sit in muted gray ink with a single yellow inline highlight wrapped around the time phrase. Where Notion paints its hero with multi-color object photography and Calendly leans on a saturated marine-blue chrome, Amie holds chromatic restraint in the brand surface and lets the product screenshots underneath carry every saturated moment — the pastel event blocks tile the calendar grid in mint, salmon, sky, sun yellow, and lavender, but none of those colors appear in the marketing chrome itself.

The single chromatic move above the fold is the sky-blue pill carrying "Get started" — `{colors.primary}` (#11a8ff) used twice on the captured page, both as the background of the primary button. Its sibling "Request a demo" is transparent with the same dimensions. The hand-drawn salmon-pink scribble looping under the "without a bot" half of the hero headline is the brand's one playfulness signal — `{colors.accent-pink}` (#f6a6a6), the same warm tone used for the small dot under the wordmark in the upper-left corner.

Typography is Inter across every tier — display at 56px / 700 with -0.7px tracking on the hero, 40px / 700 for the section displays, 20px / 600 for sub-section titles, 16px / 400 for the body paragraphs that fill the long-form editorial rows. There is no second family. The hero h1 at 56px / 700 is the loudest typographic moment in the system — heavier than Spline or Stripe would use at the same size, but the surrounding chrome is so muted that the weight reads as confident rather than shouted.

**Key Characteristics:**
- Grayscale Inter chrome on near-white canvas (`{colors.canvas}` — #ffffff) — the marketing surface refuses to carry product color.
- Single sky-blue voltage (`{colors.primary}` — #11a8ff) reserved for the primary pill CTA above the fold. Two captured occurrences, both as background fill.
- Hand-drawn salmon-pink scribble (`{colors.accent-pink}` — #f6a6a6) underlines the second half of the hero headline — the brand's only decorative chrome move.
- Sun-yellow inline highlight (`{colors.highlight-yellow}` — #ffd700) wraps the time-phrase in the section display, reading as a marker-pen emphasis rather than a UI background.
- Pastel event-block palette (mint, salmon, sky, sun, lavender) appears only inside product screenshots — never as marketing chrome.
- 8px default radius with a full-pill option for CTAs and a 12px tier for cards; no sharp 0-2px corners anywhere.
- Hairline cards on `{colors.hairline}` (#cdcdcd) borders — the dominant structural color, present 565 times in the captured page, almost entirely as borders.
- Inter Fallback is wired as the secondary stack, metric-matched so the swap is invisible during font load.

## Colors

### Brand

- **Sky Primary** (`{colors.primary}` — #11a8ff): frequency 12. Used as text (3), bg (8), gradient (1). The single brand voltage — fills the pill CTA above the fold, the event-block sky-blue tint in calendar screenshots, and inline link accents. Maps to the blue-500 token in the page CSS.
- **Sky Soft** (`{colors.primary-soft}` — #cfeeff): frequency 3. Used as background. The pale-sky tint applied to product event blocks; not used in marketing chrome.
- **Sky Deep** (`{colors.primary-deep}` — #2c76a0): frequency 2. Used as text. The deep-sky tone used for high-contrast text inside sky-tinted event blocks.
- **Hand-drawn Salmon** (`{colors.accent-pink}` — #f6a6a6): captured as the amie-pink CSS custom property. The hand-drawn scribble arrow under the hero headline and the small dot under the wordmark. The brand's single playfulness signal.
- **Highlight Yellow** (`{colors.highlight-yellow}` — #ffd700): frequency 1. Used as background. The marker-pen inline highlight wrapping the time phrase in the section display; not a standalone color anywhere else.

### Event Blocks (product surface)

- **Event Mint** (`{colors.event-mint}` — #ccf4da): frequency 4. Used as background. The mint-green event-block tint in calendar screenshots — one of the user-assignable event colors.
- **Event Purple** (`{colors.event-purple}` — #a050ff): frequency 2. Used as text and border in product event chips. Maps to the purple-500 token.
- **Event Success** (`{colors.event-success}` — #01ca45): frequency 2. Used as text and border. The green chip color for completed tasks and confirmed meetings.
- **Event Warning** (`{colors.event-warning}` — #fe6600): frequency 1. Used as text. The orange tone for delayed or warning states in the product surface.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 52. The page floor and card surfaces — pure white. There is no off-white tier in the marketing chrome.
- **Surface-1** (`{colors.surface-1}` — #ebebeb): frequency 5. The very-light gray used as a subtle alternative surface on inbox-style rows and section dividers below the fold.

### Text

- **Ink** (`{colors.ink}` — #000000): frequency 485 — 406 as text, the dominant text color. Pure black, used for the hero h1, nav labels, section displays, and primary body emphasis. Amie does not soften ink the way many friendly-productivity systems do.
- **Ink Soft** (`{colors.ink-soft}` — #262626): wired as the foreground custom property. A near-black tone for content inside product event blocks where pure black would read too heavy against the pastel fill.
- **Ink Muted** (`{colors.ink-muted}` — #5c5c5c): frequency 71 — entirely as text. The secondary running-text tone used in body paragraphs below the fold. Wired as the secondary CSS variable.
- **Ink Faint** (`{colors.ink-faint}` — #a0a0a0): frequency 23 — entirely as text. The tertiary tone used for metadata, timestamps, and footnote rows. Wired as the tertiary CSS variable.

### Hairlines

- **Hairline** (`{colors.hairline}` — #cdcdcd): frequency 565 — 557 as border, 7 as bg, 1 as text. The dominant structural color, used for card outlines, section dividers, input field borders, and the calendar grid lines. The system is essentially mono-hairline.

## Typography

### Font Family

The system runs **Inter** for every typographic tier, with `Inter Fallback` as the metric-matched secondary stack and `system-ui, sans-serif` as the safety net. There is no separate display family, serif, or monospace voice anywhere on the captured page; one variable-weight sans does the entire job. The font is loaded via Google Fonts in the page head and applied to every text-bearing element through the body inheritance chain.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 56px | 700 | 64px | Hero h1 ("AI Note Taker without a bot") |
| `{typography.display-lg}` | 40px | 700 | 54.4px | Section displays ("Within 47 seconds…") |
| `{typography.heading-md}` | 20px | 600 | 28px | Sub-section titles ("Summarize any meeting, without a bot") |
| `{typography.heading-sm}` | 16px | 600 | 28px | Card titles and small headings |
| `{typography.body-lg}` | 16px | 400 | 28px | Default running text in editorial body paragraphs |
| `{typography.body-md}` | 14px | 400 | 20px | Compact body text inside cards and inboxes |
| `{typography.body-sm}` | 13px | 400 | 19.5px | Caption rows beneath event blocks and metadata |
| `{typography.label-md}` | 14px | 500 | 20px | Button labels, nav-link emphasis, small chip text |
| `{typography.caption}` | 12px | 400 | 15.84px | Timestamps, footnotes, very small labels |
| `{typography.button-md}` | 14px | 500 | 20px | Primary and secondary button labels |
| `{typography.nav-link}` | 16px | 400 | 28px | Top-nav link labels |

### Principles

Display weight is 700 — heavier than Spline (500), Stripe (300), or Cloudflare (500) would use at the same size, but the surrounding marketing chrome is so muted that the weight reads as friendly confidence rather than a SaaS shout. Body and headings share Inter at modest weights (400 / 500 / 600), with weight 700 reserved for the two largest display moments above and below the fold. Negative letter-spacing (-0.5px to -0.7px) tightens the display tier; the body tier sits at -0.003px, an effectively zero tracking value that hints at the system's preference for tight typographic rhythm without making the body letters touch.

### Note on Font Substitutes

Inter is free and open-source via Google Fonts. No substitution is required. If you cannot self-host Inter, the system stack `system-ui, -apple-system, sans-serif` will fall back to the host operating system's native UI sans — San Francisco on macOS / iOS, Segoe UI on Windows, Roboto on Android. The metric-matched `Inter Fallback` stack the page declares is automatically generated by the Next.js font loader and is invisible to end users.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px as the dominant module — the 8px gap appears 57 times in the captured page.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px.
- **Section padding (vertical):** ~192px between major hero-and-feature bands — the largest single padding value in the captured CSS.
- **Card internal padding:** `{spacing.base}` (16px) for the editorial cards and event-block popovers.
- **Button padding:** 6×16 for the primary and secondary pill CTAs; 12×28 for the larger header buttons.

### Grid & Container

- **Max content width:** ~720px on the hero headline + sub-paragraph stack, expanding to ~960px on the full-width product screenshots.
- **Hero:** centered headline with the hand-drawn scribble arrow looping under the second half, two pill CTAs centered below.
- **Feature rows:** alternating left-image / right-text rows with the product screenshot doing the visual labor and the text held in a narrow column to the side.
- **Inbox-style sections:** vertical stack of rows with hairline-bordered cards inset on a near-white surface.

### Rhythm

The page alternates between **near-empty marketing bands** (hero, section displays, transition rows) and **dense product screenshots** (calendar grids, inbox lists, meeting note panes). The empty bands carry typography only; the dense bands carry the brand's chromatic personality. The result is a strong vertical accordion — wide breathing between bands, packed content inside each product screenshot.

## Elevation

The system has essentially **no shadow tier** outside the product surface. The CSS declares two shadow variables (`--shadow-wysiwyg-inner` at 4% black opacity, `--shadow-wysiwyg-outer` at 12% black opacity) but they are scoped to the WYSIWYG editor inside the product, not to the marketing chrome. The marketing cards and event blocks lift off the page floor by hairline borders alone — `{colors.hairline}` (#cdcdcd) at 1px is the only elevation device on the brand surface.

- **Flat (no shadow):** hero, section displays, editorial body — the entire marketing chrome.
- **Hairline lift:** cards, inbox rows, calendar grid cells all use a single 1px `{colors.hairline}` border to mark their boundaries.
- **Product elevation:** the WYSIWYG editor inside the screenshots carries a soft black-alpha shadow, but only inside the product canvas — never in brand chrome.

## Shapes

The radius scale is **soft-default plus full pill**:

- `{rounded.none}` 0px — only on flush-edged calendar grid cells inside the product.
- `{rounded.xs}` 4px — small UI surfaces (inline highlight wrap, tag chips).
- `{rounded.sm}` 6px — secondary buttons in tight spaces.
- `{rounded.md}` 8px — the dominant radius, used for the primary button, event blocks, and most card corners. Appears 25 times in the captured page.
- `{rounded.lg}` 12px — cards and larger surfaces. Appears 29 times — the most-used radius value.
- `{rounded.xl}` 32px — large hero illustration containers and the rounded-rectangle full-width screenshot frames.
- `{rounded.full}` 9999px — pill CTAs (17 captured occurrences), avatar circles, and the round category chips beneath the hero.

There is no sharp 0-2px tier in the marketing chrome. Even the smallest UI surfaces start at 4-6px. The combination of 8px default and full pill is what gives the system its softness without tipping into the cushy 24-32px rounding that more playful productivity brands use.

## Components

**`button-primary`** — The signature CTA. Sky-blue `{colors.primary}` fill, white text, `{rounded.md}` 8px radius, 6×16 padding, 32px height. "Get started" is the canonical instance, sitting next to the transparent "Request a demo" sibling beneath the hero headline.

**`button-secondary`** — Transparent fill with black text and a 1px hairline border. `{rounded.md}` radius, same 6×16 padding and 32px height as the primary, giving the two CTAs identical silhouette.

**`top-nav`** — White `{colors.canvas}` surface with the wordmark + salmon dot on the left, "Features / Pricing" links in the center, "Login" link and a sky-blue "Get started" pill on the right. No background fill or shadow, no bottom border — the nav blends into the page floor.

**`nav-link`** — Transparent background, black text in `{typography.nav-link}`, 6×12 padding. The smallest nav surfaces in the system.

**`hero-heading`** — Black text on the transparent canvas, `{typography.display-xl}` (56px / 700). The hand-drawn salmon scribble loops under the trailing portion of the heading; the underline is an inline SVG, not a CSS pseudo-element.

**`section-heading`** — Muted gray text at `{typography.display-lg}` (40px / 700) for the section displays beneath the hero — color desaturated to keep the section displays subordinate to the hero h1.

**`sub-heading`** — Black text at `{typography.heading-md}` (20px / 600) for sub-section titles like "Summarize any meeting, without a bot" and "No more bot in your calls."

**`body-paragraph`** — Muted ink (`{colors.ink-muted}`) running text at `{typography.body-lg}` (16px / 400). The editorial body style used for long-form sections under the fold.

**`inline-highlight`** — The sun-yellow `{colors.highlight-yellow}` background wrapping the time phrase in the section display ("Within 47 seconds"). Reads as a marker-pen emphasis rather than a UI element; uses `{rounded.xs}` 4px and 0×4 horizontal padding.

**`card`** — White `{colors.canvas}` surface, 1px hairline border, `{rounded.lg}` 12px radius, 16px internal padding. The default content card on the marketing surface; holds editorial body text, testimonials, and feature explanations.

**`event-block-mint`** / **`event-block-sky`** — Pastel-filled event blocks borrowed from the product surface. Both use `{rounded.md}` 8px radius and 4×8 padding; the mint variant uses `{colors.event-mint}` fill with soft-ink text, the sky variant uses `{colors.primary-soft}` fill with deep-sky text. Shown in marketing only via product screenshots.

**`text-input`** — White surface, black text, 1px hairline border, `{rounded.md}` 8px radius, 8×12 padding, 36px height. Form fields in the inbox-style task rows.

## Do's and Don'ts

**Do** keep the sky-blue voltage to exactly one moment above the fold. The system has a single chromatic brand element on the marketing surface (the "Get started" pill); multiplying it into multiple sky-blue elements would dilute the only chromatic marketing signal on the page.

**Do** let the product screenshots carry every saturated color — mint, salmon, sky, sun yellow, lavender — and refuse to lift those colors into the marketing chrome. The product-as-palette move is what makes the chrome read as the brand and the screenshots read as the product; mixing the two collapses the distinction.

**Do** use Inter at weight 700 for the display tier even though it is heavier than the dev-tools convention. The surrounding chrome is muted enough that 700 reads as friendly confidence; dropping to 500 would lose the editorial weight that the headline carries.

**Do** render the hand-drawn salmon-pink scribble (`{colors.accent-pink}` — #f6a6a6) as an inline SVG, not a CSS underline. The scribble is a loop-arrow, not a straight line, and the warmth of the salmon hue is critical to reading the mark as friendly rather than corrective.

**Don't** use `{colors.event-mint}`, `{colors.event-purple}`, `{colors.event-success}`, or `{colors.event-warning}` anywhere in marketing chrome. They are product event-block tints (the user-assignable color palette inside the calendar), not brand accents. Using them on a CTA or section header would read as random secondary colors and break the product-as-palette discipline.

**Don't** use `{colors.hairline}` (#cdcdcd) as a background fill or text color — it is a border-only token (557 of 565 captured occurrences are borders). For a light surface, use `{colors.canvas}` or `{colors.surface-1}` instead.

**Don't** swap `{colors.canvas}` from pure `#ffffff` to a warmer off-white. The system explicitly uses pure white as the page floor; warming it toward cream would compete with the salmon-pink hand-drawn accent and muddy the only warm color in the brand chrome.

**Don't** add a sharp 0-2px corner radius tier. The system's default is 8px with a full pill option; introducing 2px or 0px would feel borrowed from a dev-tools system (Vercel, Linear) rather than from Amie's softer productivity identity.

## Known Gaps

- **Hover, focus, and disabled states:** the captured surfaces carry resting states only. The full state matrix for the primary pill, secondary button, and text input is not exposed in the marketing chrome.
- **Dark mode:** the captured page is light-only. A dark variant exists inside the product editor (the CSS declares gray tokens up to gray-950 and night-mode shadow variables) but is not represented here.
- **Form validation states:** the inbox-style task input carries its resting style; error / success / loading states live inside the product and are not exposed in marketing.
- **Motion:** the hero scribble may animate on load (loop-trace SVG draw) but the spec captures end-state values only. Animation timing, easing, and stagger live in the live product surface.
- **Mobile / responsive tokens:** the captured page is the desktop render. Tablet and mobile breakpoints likely shift the display sizes downward but are not represented in the extracted token list.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Amie product (the calendar, inbox, and meeting-notes app) carries a much richer token system — the CSS exposes per-event-color custom-property families across blue, green, pink, purple, lime, rose, amber, indigo, fuchsia, teal, cyan — that is not represented here.
- **Wordmark + scribble vector source:** the marks are rendered as inline SVG inside the page but the source vectors are not part of the design-token surface.