---
version: alpha
name: "Fellow"
website: "https://fellow.app"
description: >-
  An AI meeting-notes tool whose marketing site pairs Sharp Grotesk Medium 20 — a geometric display grotesk with distinctive round terminals — with Inter for body copy, on a deep navy-to-indigo gradient hero that bleeds into pure white below the fold. The brand primary is a saturated violet-indigo (#2941e0) used as the CTA button fill, the heading accent color, and the gradient spine. Feature sections show product screenshots framed in rounded-16px white cards on a white canvas. The nav is pure white with black text; the hero inverts to white text on deep night-navy. Meeting management for managers and teams is the positioning, rendered in a typography palette that reads assertive and trustworthy rather than playful.

seo:
  title: "Fellow Design System for React — Sharp Grotesk, violet-indigo, 16 components"
  metaDescription: "Fellow's marketing system pairs Sharp Grotesk Medium 20 display type with Inter body copy on a deep navy hero canvas, with a saturated violet-indigo primary CTA. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Sharp Grotesk split — display headings use Sharp Grotesk Medium 20, a geometric grotesk with round terminals distinct from Inter; body copy stays in Inter, creating a clear editorial-functional split"
    - "Navy-to-indigo gradient hero — the above-fold canvas descends from near-black navy (#000524) through deep indigo, framing white product screenshots as floating cards in space"
    - "Violet-indigo CTA — the button-primary uses saturated indigo (#2941e0) as fill, distinct from the CSS-variable blue link default (#0000ee) that pervades less-considered parts of the system"
    - "White canvas inversion — below the hero fold, the page flips to pure white with feature screenshots in 16px-rounded cards, creating two distinct register zones"
    - "88px pill radius — the primary badge/chip surfaces use an 88px border-radius value, effectively rendering as pills at any practical badge width"
  tags:
    - "Productivity & SaaS"
    - "Communication & Messaging"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Fellow's marketing site commits to a two-register page design that most B2B SaaS tools avoid. The hero is a deep navy-to-indigo gradient with white text and a saturated violet-indigo CTA pill. Then at the fold, with no gradual transition, the canvas snaps to pure white for the feature sections — product screenshots in 16px-rounded cards, black body text, the same violet-indigo appearing as section headline accent color. The registers don't blend; they switch. This creates an immediate visual hierarchy where the hero makes the promise and the white-canvas body section fulfills it with evidence.

    The typography engine is similarly split. Sharp Grotesk Medium 20 — a geometric grotesk with round terminals and generous apertures — handles all headings from 40px to 66px. Inter handles every body and label surface. Where most meeting-notes tools (Otter, Fireflies, Loom) use a single family throughout, Fellow's display-body split reads as a product that takes the manager's reading experience seriously. Sharp Grotesk Medium 20 at 66px / weight 500 on the hero h1 has the same geometric confidence that brands like Stripe and Figma bring to their display moments, but it runs at a heavier relative weight and larger scale.

    The brand's violet-indigo (#2941e0) is worth noting for what it is not: it is not the system-browser default link blue (#0000ee) that appears 576 times in the extraction as text and border on anchors. That blue is a CSS artifact from unstyled anchor elements, not a brand decision. The brand color is the CTA fill (#2941e0 at bg: 7) and the gradient spine (#795afa in gradients at frequency 24). Any implementation using this spec should wire CTA backgrounds to {colors.primary}, anchor text to a styled {colors.ink}, and treat the browser-blue occurrences as a remediation target.

  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://fellow.app"
      title: "Fellow — official site"
      description: "Fellow'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 Fellow's primary brand color?"
      answer: "Fellow's intended primary brand color is a saturated violet-indigo wired to #2941e0, which appears as the CTA button background fill (bg: 7) and as a section heading accent color in the body. A second violet value (#795afa) anchors the hero gradient and appears 10 times in gradient fills with a total frequency of 24. The extraction also shows #742afb (frequency 20) and #9178fa (frequency 6) as supporting gradient stops across the violet family. Note that the extraction records #0000ee (the browser default link color) at frequency 576 — that is not a brand decision but an artifact of unstyled anchor elements that a production implementation would override with {colors.ink} or {colors.primary}."
    - id: "typography"
      title: "What typefaces does Fellow use, and what should I use as substitutes?"
      answer: "Fellow uses two typefaces: Sharp Grotesk Medium 20 Regular for all display and heading surfaces, and Inter for body copy, labels, and UI text. Sharp Grotesk Medium 20 at 66px / weight 500 is the hero h1; at 56px / weight 400 it handles section h2; at 40px / weight 500 it handles feature section headings; at 20px / weight 400 it handles sub-section h4 labels. Inter at 16px / weight 400 covers body paragraphs; at 14px / weight 400 it covers secondary text and labels. Sharp Grotesk Medium 20 is a commercial typeface by Sharp Type. The closest open-source substitute is Instrument Sans or Plus Jakarta Sans, which share the round-terminal geometric grotesk proportions. Inter is already open-source."
    - id: "hero-gradient"
      title: "What colors make up Fellow's hero gradient?"
      answer: "The hero gradient descends from near-black deep navy (#000524, which merges #000524 and #04081f) through violet-indigo (#795afa at frequency 24 in gradients) to a lighter periwinkle tint (#c5b9fa in gradient fills at frequency 8). An icy blue (#e0edff, #eff6ff) appears at the bottom edge of the gradient, providing a soft landing into the white-canvas body section. The dark floor (#07103c at frequency 5) anchors the darkest gradient zone. All these values are brand-layer gradient stops in the extraction. The gradient direction is top-to-bottom with a radial glow of violet-indigo centered roughly behind the product screenshot mockup."
    - id: "radii"
      title: "What corner-radius values does Fellow use?"
      answer: "Fellow's radius scale has five distinct values. The most frequent is 16px (47 occurrences), used for feature screenshot cards, large card containers, and the primary modal frame. 10px (21 occurrences) is used on input fields and medium-sized UI surfaces. 8px (20 occurrences) appears on the button-primary and secondary chips. The distinctive value is 88px (19 occurrences) — a very high radius used on badge/pill chips that renders as a true pill at any practical badge width, similar to how Stripe uses 20px on their pill badges but taken to an extreme. 5px (11 occurrences) and 4px (5 occurrences) cover small utility surfaces and icon buttons."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own meeting-tools 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 Fellow's specific moves: a deep navy-to-violet gradient hero with white text, a hard register break to a white-canvas body section, Sharp Grotesk (or a round-terminal grotesk substitute) for display type, Inter for body, and violet-indigo CTA pills. Token references resolve cleanly: {colors.primary} for the CTA fill, {colors.hero-canvas} for the dark gradient floor, {colors.canvas} for the white body section. The key implementation note: suppress the browser-default link blue (#0000ee) early — it will surface on any unstyled anchor if not explicitly overridden with {colors.ink} or {colors.primary}."

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

colors:
  primary: "#2941e0"
  primary-violet: "#795afa"
  primary-violet-light: "#c5b9fa"
  primary-indigo: "#742afb"
  primary-indigo-mid: "#9178fa"
  ink: "#000000"
  ink-muted: "#273238"
  ink-subtle: "#526066"
  ink-faint: "#616f75"
  ink-disabled: "#3f3f46"
  canvas: "#ffffff"
  surface-1: "#e0edff"
  surface-2: "#eff6ff"
  hairline: "#b4c4cc"
  hairline-light: "#d4d4d8"
  hero-canvas: "#000524"
  gold: "#f7ba02"
  success: "#00574a"

typography:
  display-xl:
    fontFamily: "\"Sharp Grotesk Medium 20 Regular\", \"Sharp Grotesk Medium 20 Regular Placeholder\", sans-serif"
    fontSize: 66px
    fontWeight: 500
    lineHeight: 80px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Sharp Grotesk Medium 20 Regular\", \"Sharp Grotesk Medium 20 Regular Placeholder\", sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"Sharp Grotesk Medium 20 Regular\", \"Sharp Grotesk Medium 20 Regular Placeholder\", sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Sharp Grotesk Medium 20 Regular\", \"Sharp Grotesk Medium 20 Regular Placeholder\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  subheading:
    fontFamily: "\"Sharp Grotesk Medium 20 Regular\", \"Sharp Grotesk Medium 20 Regular Placeholder\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-lg:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  label-md:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 26px
    letterSpacing: 0
  label-caps:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  caption:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  button-md:
    fontFamily: "Inter, \"Inter Placeholder\", sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0.5px

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "10px"
  xl: "16px"
  badge: "88px"
  full: "100%"

spacing:
  xs: "2px"
  sm: "8px"
  md: "10px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "40px"
  3xl: "56px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "16px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "16px 24px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "10px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    padding: "0px"
  hero-body:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-disabled}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: "16px 24px"
    borderColor: "{colors.surface-1}"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: "24px 0px"
  badge:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.badge}"
    padding: "8px 16px"
  screenshot-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: "0px"
    borderColor: "{colors.primary-violet-light}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "10px"
    height: "40px"
    borderColor: "{colors.hairline}"
  testimonial-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: "22px"
  footer:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    padding: "56px 24px"
---

## Overview

Fellow's marketing site divides into two unmistakable zones. **Hard register break.** The hero is deep night-navy bleeding into violet-indigo, white text, a rounded violet CTA; then at the fold, the canvas switches to pure white and the feature sections unfold in a product-screenshot grid. The tonal break is abrupt — no gradient transition, no intermediate gray surface. The convention across meeting-tools like Otter.ai, Fireflies, and Grain is to maintain a single background tone throughout; Fellow breaks it deliberately.

The typography is equally divided: Sharp Grotesk Medium 20 — a geometric grotesk with distinctively round terminals — for display headings, and Inter for all body and label copy. The split is consistent enough to read as a brand rule rather than a font-mixing accident. Sharp Grotesk at 66px / 500 on the hero h1 carries the same geometric confidence as Stripe's display moments.

**Key Characteristics:**
- Sharp Grotesk Medium 20 for headings (66px / 56px / 40px / 20px), Inter for body and labels — a persistent editorial-functional split.
- Saturated violet-indigo primary for CTA fills and accent headings;  for gradient spine.
- Deep navy hero canvas with a violet-indigo radial gradient, followed by a hard break to white canvas for the feature body.
- 16px card rounding dominates feature sections; 88px pill rounding on badge chips; 8px on buttons.
- Product screenshots are framed in white cards with a periwinkle border, giving the mockups a floating quality against the white body canvas.
- Gold accent appears 10 times as text — likely used for rating stars or review highlights.
- Deep teal success at frequency 8 — semantic color for checkmarks or security indicators.
- The browser-default link blue appears 576 times as a CSS artifact on unstyled anchors — treat as a remediation target, not a brand color.

## Colors

### Brand

- **Primary** (`{colors.primary}` — ): frequency 23. Used as text (8), bg (7), border (8). The CTA button fill, section accent heading color, and interactive link override. The intentional brand blue.
- **Primary-violet** (`{colors.primary-violet}` — ): frequency 24. Gradient (10), text (7), border (7). The gradient spine of the hero — the violet that bleeds into the navy-to-periwinkle descent.
- **Primary-violet-light** (`{colors.primary-violet-light}` — ): gradient fill only, frequency 8. The lightest stop of the violet family; used as screenshot card border tint.
- **Primary-indigo** (`{colors.primary-indigo}` — ): frequency 20. Used as text (10), border (10). Deep violet for supporting accent text and gradient.
- **Primary-indigo-mid** (`{colors.primary-indigo-mid}` — ): frequency 6. Used as text (3), border (3). Mid-violet for tertiary accent.
- **Hero-canvas** (`{colors.hero-canvas}` — ): frequency 3. Used as bg (2). The near-black midnight navy floor of the hero gradient.

### Structural

- **Ink** (`{colors.ink}` — ): frequency 1569. Used as text (780), border (780), shadow (8), bg (1). The dominant text and border color on the white canvas body sections.
- **Canvas** (`{colors.canvas}` — ): frequency 111. Used as text (39), bg (33), border (39). White page canvas for body sections and text-on-dark surfaces.
- **Ink-muted** (`{colors.ink-muted}` — ): frequency 42. Used as text (21), border (21). Near-black for secondary heading text.
- **Ink-disabled** (`{colors.ink-disabled}` — ): frequency 42. Used as text (21), border (21). Body copy on white canvas sections.
- **Ink-subtle** (`{colors.ink-subtle}` — ): frequency 38. Used as text (19), border (19). Secondary body text and metadata.
- **Ink-faint** (`{colors.ink-faint}` — ): frequency 126. Used as text (63), border (63). Captions, footnotes, and lighter secondary labels.
- **Hairline** (`{colors.hairline}` — ): frequency 22. Used as text (11), border (11). Default divider and input border tone.
- **Hairline-light** (`{colors.hairline-light}` — ): frequency 2. Lightest divider value.
- **Surface-1** (`{colors.surface-1}` — ): frequency 7. Used as bg (1), gradient (6). Soft periwinkle tint for card borders and gradient bottoms.
- **Surface-2** (`{colors.surface-2}` — ): frequency 5. Gradient fill. Icy light blue at the gradient's edge.

### Semantic

- **Gold** (`{colors.gold}` — ): frequency 10. Used as text (5), border (5). Rating stars and highlight indicators.
- **Success** (`{colors.success}` — ): frequency 8. Used as text (4), border (4). Security checkmarks and feature confirmation indicators.

## Typography

### Font Families

The system runs two families: **Sharp Grotesk Medium 20 Regular** for all display and heading surfaces, and **Inter** for body copy, labels, and UI text. Sharp Grotesk is wired through its full font-face name including placeholder; Inter is wired through its standard name.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 66px | 500 | 80px | Hero h1 — Sharp Grotesk |
| `{typography.display-lg}` | 56px | 400 | 64px | Section h2 — Sharp Grotesk |
| `{typography.heading-lg}` | 40px | 500 | 48px | Feature section headings — Sharp Grotesk |
| `{typography.heading-sm}` | 20px | 400 | 28px | Sub-section h4 labels — Sharp Grotesk |
| `{typography.subheading}` | 16px | 400 | 26px | Sharp Grotesk body-scale |
| `{typography.body-lg}` | 20px | 500 | 30px | Lead paragraph / hero sub-copy — Inter |
| `{typography.body-md}` | 16px | 400 | 24px | Default body — Inter |
| `{typography.body-sm}` | 14px | 400 | 22px | Secondary text and captions — Inter |
| `{typography.label-md}` | 16px | 500 | 26px | Emphasized labels — Inter |
| `{typography.label-caps}` | 12px | 400 | 22px | Uppercase badge text — Inter |
| `{typography.caption}` | 12px | 400 | 20px | Footnotes and metadata — Inter |
| `{typography.button-md}` | 14px | 500 | 16px | CTA button label — Inter (0.5px tracking) |

### Principles

Sharp Grotesk Medium 20 runs at weight 500 for h1 and h3 level headings, and weight 400 for h2 and h4 — an alternating pattern that creates rhythm without a second family. The Inter body at weight 400 is the foundation; weight 500 Inter is reserved for lead paragraph text and emphasized labels. There is no 700+ weight moment on either family — the heaviest typographic expression is 500.

### Note on Font Substitutes

Sharp Grotesk Medium 20 is a commercial typeface by Sharp Type. The closest open-source substitutes with comparable round-terminal geometric proportions are **Plus Jakarta Sans** and **Instrument Sans**. For a tighter match to the round-letter apertures, **DM Sans** at weight 500 reads close at 40-66px display scale. Inter is already open-source.

## Layout

### Spacing System

- **Base unit:** 8px (with 10px as the highest-frequency padding value — extracted at 134 occurrences).
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 40px · `{spacing.3xl}` 56px.
- **Section padding (vertical):** 24px top / 0px bottom between feature rows; 56px before major transitions.
- **Card internal padding:** 16x24 (padding shorthand) for feature cards; 22px uniform for testimonial cards.
- **Hero padding:** 0px horizontal — the gradient extends edge-to-edge; headline and CTA are centered in the safe zone.

### Grid & Container

- **Max content width:** ~1200px for hero; ~1000px for feature body sections.
- **Hero:** full-bleed navy gradient with the hero headline centered and a product screenshot (meeting grid with participant faces) below it.
- **Feature sections:** alternating 2-column rows — headline + body left, product screenshot card right (or mirrored) — with white canvas between rows.
- **"Built for every team" section:** a 4-by-2 grid of team-role cards (Customer Success, Marketing, Engineering, Data, Operations, Leadership, Product, AI) on a dark navy background.

### Rhythm

The page alternates: dark hero → white feature grid → dark navy "enterprise" band → light periwinkle testimonials → dark navy footer. The register alternations are tight rather than gradual, making each zone feel like a distinct section rather than a continuous scroll.

## Elevation

The system uses a shadow primarily on the "Built for every team" role cards. Feature screenshot cards achieve distinction through border rather than shadow — a thin periwinkle (`{colors.primary-violet-light}`) border on a white card against a white canvas creates just enough separation without shadow.

- **Shadow:** ink black `{colors.ink}` drop shadows appear 8 times (on the "enterprise" section role cards at frequency 8, shadow layer).
- **Tonal lift:** surface-1 periwinkle tint borders on screenshot cards.
- **Hairline borders:** `{colors.hairline}` on input fields and section dividers.

## Shapes

The radius scale has three clusters:

- `{rounded.sm}` 4px — utility surfaces and small icon badges.
- `{rounded.md}` 8px — the primary button; most interactive elements.
- `{rounded.lg}` 10px — input fields.
- `{rounded.xl}` 16px — feature cards, screenshot frames, large containers. The dominant rounding for content surfaces.
- `{rounded.badge}` 88px — badge chips (effectively pill at any practical badge width).
- `{rounded.full}` 100% — circular icon buttons and avatar chips.

## Components

**`button-primary`** — Saturated indigo `{colors.primary}` fill, white text, `{rounded.md}` 8px radius, 16x24 padding, 44px height. "Start for free" is the canonical instance in the hero.

**`button-secondary`** — Transparent fill, black text, `{colors.hairline}` border, `{rounded.md}` radius, 8x16 padding. Used for "Book a demo" adjacent to the primary CTA.

**`top-nav`** — White canvas, black text, 16x24 padding, 56px height. The Fellow wordmark sits flush left; nav links center-aligned; primary CTA button right-aligned. The nav is anchored to white regardless of the hero canvas behind it.

**`nav-link`** — Transparent, ink black text at `{typography.body-sm}`, 10px padding. "Features," "Product," "Solutions," "Pricing," "Integrations," "Blog" — standard B2B nav architecture.

**`hero-heading`** — White text, `{typography.display-xl}` (66px Sharp Grotesk / 500). Zero padding; headline floats in the dark gradient zone.

**`section-heading`** — Black text, `{typography.heading-lg}` (40px Sharp Grotesk / 500) for white-canvas sections. In dark sections, white text at the same token.

**`hero-body`** — White text at `{typography.body-md}` for the hero sub-copy ("Secure. Transcribes, summarizes…").

**`body-paragraph`** — `{colors.ink-disabled}` text at `{typography.body-md}` for feature section descriptions on the white canvas.

**`card`** — White canvas fill, ink text, `{rounded.xl}` 16px radius, 16x24 padding, periwinkle surface-1 border. General content card.

**`feature-card`** — White canvas fill, ink text, `{rounded.xl}` 16px radius, 24x0 vertical padding. Feature-row left-column content (headline + body + CTA).

**`screenshot-card`** — White canvas fill, `{rounded.xl}` 16px radius, zero padding, `{colors.primary-violet-light}` border. Frames product screenshots in the feature alternating rows.

**`badge`** — Surface-2 fill, primary-indigo text, `{rounded.badge}` 88px radius. "AI Meeting Notes," "Secure," etc.

**`text-input`** — White canvas fill, ink text, `{rounded.lg}` 10px radius, 10px padding, 40px height, hairline border. Email capture fields.

**`testimonial-card`** — White canvas fill, ink text, `{rounded.xl}` 16px radius, 22px uniform padding. Social proof cards in the periwinkle-tinted testimonials section.

**`footer`** — Hero-canvas dark navy fill, white text at `{typography.caption}`, 56x24 padding.

## Do's and Don'ts

**Do** use Sharp Grotesk (or a round-terminal grotesk substitute) exclusively for headings and switch cleanly to Inter for any text below 24px. The visual contract between the two families is the system's editorial identity; mixing them at the same scale breaks the signal.

**Do** apply the hard register break between dark hero and white body as a direct cut, not a gradient fade. The abruptness is the move — it frames the hero as a brand statement and the body as a product demonstration.

**Do** limit `{colors.primary}` to CTA fills, accent headings, and interactive link text. The violet gradient (`{colors.primary-violet}`) is a separate surface-layer value; using it for CTA buttons would produce a lighter, less grounded action button.

**Do** treat the badge radius `{rounded.badge}` (88px) as specific to chip/tag surfaces no wider than ~200px. At wider applications it would produce invisible rounding or asymmetric pill termination.

**Don't** use the browser-default anchor color as an intentional brand value — it is a CSS artifact appearing 576 times in the extraction from unstyled anchor elements. Wire all anchor text to `{colors.ink}` or `{colors.primary}` in a production implementation.

**Don't** reduce the `{typography.display-xl}` line-height below 80px for the 66px hero heading. The 80px / 66px ratio (1.21 line-height) gives Sharp Grotesk at that scale room to breathe; tighter leading at weight 500 causes cap-to-cap crowding on two-line headlines.

**Don't** use `{rounded.xl}` (16px) on button surfaces — the system consistently uses `{rounded.md}` (8px) for buttons and reserves 16px for cards. Applying card rounding to buttons would borrow visual language from a different component register.

**Don't** introduce `{colors.success}` (deep teal ) as a CTA or accent color — it is a semantic indicator for security checkmarks and confirmation states. Promoting it to an attention surface would confuse semantic meaning with brand intent.

## Known Gaps

- **Hover states:** only the button-primary resting state is captured; hover, active, and focus ring states are not represented.
- **Mobile nav:** the extracted surface appears to show a minimal hamburger nav on mobile; the mobile layout for the feature alternating rows is not captured.
- **Dark-section text:** the "Built for every team" grid and the enterprise section on a dark navy background — exact background hex values for this intermediate dark surface are inferred from the gradient; not directly extracted.
- **Form error and validation states:** text-input carries resting state only; error and success field states are not represented.
- **Animation:** the hero appears to include a subtle radial gradient animation or particle effect behind the product screenshot; this is not captured in static values.
- **Pricing page:** the pricing table structure is not captured from the marketing surface.
- **App UI tokens:** the Fellow in-app interface (meeting notes editor, agenda builder, action-item tracker) carries a different, more compact token system that is not represented here.