---
version: alpha
name: "Workflowy"
website: "https://workflowy.com"
description: >-
  An infinitely-nested outliner whose marketing site runs almost entirely on a cold-gray neutral palette — charcoal-near-black ink (#2a3135), borderless white cards on a light gray floor (#f3f4f4), and a single sky-blue voltage (#49baf2) reserved for the primary CTA pill and interactive bullet toggle. Type is Open Sans throughout at modest weights; the 48px hero headline at weight 700 is the one heavy moment in a system that otherwise stays at 400 across body and nav. The design's signature move is grid-paper emptiness: the hero product mockup shows a single sparse bullet list inside a bordered white card, communicating via visual restraint that the product adds no clutter.

seo:
  title: "Workflowy Design System for React — sky blue on near-white, Open Sans, 14 components"
  metaDescription: "Workflowy's marketing system: charcoal-gray neutrals, a single sky-blue CTA pill, and grid-paper emptiness as the brand's core visual argument. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Grid-paper restraint — the hero product mockup is a sparse bullet list on a white card, deliberately showing how little the tool imposes on the user's thinking"
    - "Single sky-blue voltage — the sky blue (#49baf2) appears as CTA pills and the interactive bullet toggle, the only chromatic moment on an otherwise gray-neutral page"
    - "Open Sans at modest weights — 400 for body and nav, 700 only for the 48px hero headline; no intermediate semibold tier drives section titles"
    - "Pill-dominant geometry — buttons are fully pill-shaped at 9999px, the most-used radius in the system (frequency 13); cards and modals sit at 8px"
    - "Gray-toned hairlines — borders run at #2a3135 (charcoal) and #dce0e2 (light gray), never black; the border-as-chrome gives the UI a low-key document feel"
  tags:
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Workflowy's marketing page is an argument made in negative space. The hero shows a near-empty white card — one bullet labeled "Email Sarah about Q3" and nothing else — floating on a light-gray floor with no sidebar, no toolbar ribbon, no color. The headline above reads "Stop organizing your notes. Start organizing your thoughts." The visual and the verbal reinforce each other: this tool does not add complexity. Where Notion's marketing page shows populated databases and cover photos, and where Obsidian leads with the knowledge graph, Workflowy shows a single indented list on a white rectangle, betting that the right user immediately understands what's being offered.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens built on a cool charcoal-gray base — the dominant tone is #2a3135 used 257 times across text and borders, with the single sky-blue voltage (#49baf2) appearing 9 times as CTA backgrounds and interactive toggles; 10 typography tokens running Open Sans across every tier from 48px hero to 12.6px caption; 5 corner-radius tokens centered on a pill default at 9999px; and 14 component definitions covering the pill CTA, hairline-bordered cards, the pricing comparison panel, and the feature category tabs.

    Feed this file to an AI coding tool and it reproduces Workflowy's specific moves: charcoal-gray neutrals instead of black or warm-white, a single sky-blue voltage held for the two most interactive moments on the page (signup and the bullet toggle), pill geometry everywhere buttons appear, and Open Sans weight 700 used once and only once. The one principle worth borrowing with care is the empty-product-screenshot move. Workflowy gets away with a single bullet in the mockup because the product's point is the absence of friction — most SaaS products need to show more to build the case.
  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://workflowy.com"
      title: "Workflowy — official site"
      description: "Workflowy'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 Workflowy's primary brand color?"
      answer: "Workflowy's brand voltage is sky blue (#49baf2), wired in the CSS as --wf-blue-300. It appears 9 times in the captured marketing page — 6 as background fill (the two pill CTAs and the interactive bullet-toggle button), 2 as border, and 1 as text. Every other color in the page is a cool gray or charcoal neutral. This restraint is the brand's visual argument: the product is invisible infrastructure for thought, and a single sky-blue accent keeps the page from making promises the app doesn't keep."
    - id: "typography"
      title: "What typeface does Workflowy use, and what should I use as a substitute?"
      answer: "Workflowy runs Open Sans (wired as --wf-font-family-brand, with a system-ui fallback stack for body copy) across every tier of the marketing system. The hero headline sits at 48px weight 700 — the only 700-weight moment in the extraction. Section headings sit at 32px weight 700; sub-headings at 25px weight 700; feature titles at 22px weight 400/600. Body and nav copy land at 14-16px weight 400. There is no heavier weight and no separate display family. Open Sans is free on Google Fonts, so no substitution is needed; if you want a slightly tighter alternative, Noto Sans or Source Sans 3 have comparable x-height."
    - id: "radius-philosophy"
      title: "What is Workflowy's corner-radius philosophy?"
      answer: "Workflowy uses a binary radius scale: fully pill (9999px) for buttons and interactive toggles, and 8px for cards, modals, and the pricing panel. The pill is the dominant radius by frequency — 13 instances in the captured page versus 11 instances of 8px and only 2 instances of 16px. There is no intermediate 4px or 12px tier. The pill geometry gives buttons a document-app feel — more like a pill badge than an enterprise CTA square — which fits the note-taking positioning."
    - id: "neutral-palette"
      title: "Why does Workflowy's palette have so many grays?"
      answer: "The extracted palette shows 7 distinct gray-to-charcoal tones, all in the structural layer: #2a3135 (frequency 257), #4b5155 (91), #dce0e2 (15), #868c90 (8), #f3f4f4 (5), #b7bcbf (0 in marketing surface), and #ffffff (33). These are drawn from a system-wide Workflowy gray scale (--wf-gray-100 through --wf-gray-800). The marketing page uses only 4 of these actively; the full ramp exists for the product's dark and light modes. The rationale is functional: an outliner that claims to reduce visual noise should itself add no visual noise."
    - id: "pricing-section"
      title: "How does Workflowy design its pricing section?"
      answer: "Workflowy's pricing section shows two columns — Basic (Free forever) and Pro ($6.99/month billed annually) — with the Pro column outlined in sky-blue (#49baf2) as the highlighted tier. Each column carries a 3-item feature list and a pill CTA at the bottom. The highlighted column uses the sky-blue border (2px, #49baf2) rather than a background-fill highlight, keeping the section visually quiet. The typography stays at body size (16px weight 400 for features, 14px weight 400 for price labels) with no oversized display numbers."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#49baf2"
  ink: "#2a3135"
  ink-mid: "#4b5155"
  ink-muted: "#868c90"
  canvas: "#ffffff"
  surface-1: "#f3f4f4"
  hairline: "#dce0e2"
  hairline-dark: "#4b5155"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 66px
    letterSpacing: 0
  display-md:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 38px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 34px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  body-bold:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  label-sm:
    fontFamily: "\"Open Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: 0
  mono:
    fontFamily: "'Andale Mono', Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  full: "9999px"

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "37px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "37px"
    borderColor: "{colors.hairline}"
  button-google:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "37px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px"
    height: "48px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-mid}"
    typography: "{typography.body-md}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  product-mockup:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  pricing-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  pricing-card-featured:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.primary}"
  testimonial-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: "24px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    padding: "48px 16px"
---

## Overview

Workflowy's marketing site is a visual argument, not a showcase. **Grid-paper restraint.** The hero is a near-empty white card with one bullet item — no populated inbox, no calendar overlay, no example project board — floating on a light gray floor (#f3f4f4). The product's value proposition is that it disappears into your thinking, so the marketing surface makes the tool as visually absent as possible.

Unlike Notion, which proves value by showing populated tables and gallery views, and unlike Obsidian, which leads with the graph of interconnected nodes, Workflowy's hero mockup shows a single sparse list with room for dozens more bullets that aren't there. The deliberate emptiness reads as confidence: the right user understands immediately.

Chromatically the system is almost entirely gray. The ink color (#2a3135, used 257 times) is a cool charcoal that reads as near-black without reaching pure black. The only chromatic element is a sky-blue voltage (#49baf2) that appears 9 times — always as the interactive surface people click (the CTA pill or the bullet-toggle button). Everything else is structural gray.

**Key Characteristics:**
- Sky-blue voltage (#49baf2) appears exactly twice as CTA fill, once as an interactive toggle — the only chromatic moment on the page.
- Open Sans weight 700 used once at 48px for the hero headline; all other headings and body sit at 400 or 600.
- Pill radius (9999px) is the dominant button geometry (13 instances), giving the interface a note-card feel rather than an enterprise CTA square.
- Product mockup in the hero shows a single bullet item — deliberate emptiness as the brand's core visual argument.
- Pricing uses a sky-blue 2px border (not fill) on the featured column — highlighting by outline rather than tint, keeping the section visually quiet.
- Logo wall (OpenAI, Spotify, Apple, Stanford, Oxford, SoftBank) renders all marks in muted gray, not color, maintaining single-voltage discipline.
- The `--wf-font-family-mono` token exists in CSS but Andale Mono doesn't appear in the marketing surface — reserved for the product's code-block mode.

## Colors

### Brand

- **Sky Blue** (`{colors.primary}` — #49baf2): frequency 9. Used as bg (6), border (2), text (1). The CTA pills, the featured pricing column outline, and the interactive bullet-toggle button. Every interactive surface the user clicks is sky blue; every passive surface is gray.

### Ink

- **Charcoal** (`{colors.ink}` — #2a3135): frequency 257. Used as text (135), border (122). The dominant text and border color for the entire system — not pure black but a slightly blue-shifted charcoal that keeps the page from reading as harsh.
- **Mid Gray** (`{colors.ink-mid}` — #4b5155): frequency 91. Used as text (48), border (43). Secondary text: nav links, feature labels, sub-headings in the feature section. Wired as --wf-gray-700.
- **Muted Gray** (`{colors.ink-muted}` — #868c90): frequency 8. Used as text (4), border (4). Tertiary labels, placeholder text, and footnotes. Wired as --wf-gray-500.

### Canvas

- **White** (`{colors.canvas}` — #ffffff): frequency 33. Used as bg (19), text (7), border (7). Page canvas, card fills, button text on the sky-blue CTA.
- **Off-White** (`{colors.surface-1}` — #f3f4f4): frequency 5. Used as bg (5). The testimonial band background and the footer band — a subtle step above white that sections the page without a hard border.

### Hairlines

- **Light Hairline** (`{colors.hairline}` — #dce0e2): frequency 15. Used as border (15). The card borders, product mockup frame, and form input outlines. Wired as --wf-gray-300.
- **Dark Hairline** (`{colors.hairline-dark}` — #4b5155): frequency 91 (shared with ink-mid). Used across nav dividers and bordered interactive elements.

### Shadows

- **Shadow** (`{colors.shadow}` — #000000): frequency 14 in shadow role only. The single shadow style (`rgba(0,0,0,0.12) 0px 2px 20px`) appears on the floating product mockup card — the only elevation moment on the page.

## Typography

### Font Family

The system runs **Open Sans** exclusively across every typographic tier. The CSS declares `--wf-font-family-brand: "Open Sans", sans-serif` and a system-ui stack as the body fallback. A mono token (`--wf-font-family-mono: 'Andale Mono', Menlo, monospace`) exists in the system CSS but does not appear in the marketing surface — it is reserved for code-block mode inside the product.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 700 | 66px | Hero h1 — the one 700-weight headline |
| `{typography.display-md}` | 32px | 700 | 48px | Section h2 headings |
| `{typography.heading-lg}` | 25px | 700 | 38px | h3 sub-section titles |
| `{typography.heading-md}` | 22px | 400 | 34px | Feature category headers (light) |
| `{typography.heading-sm}` | 22px | 600 | 34px | Feature category headers (medium) |
| `{typography.body-lg}` | 16px | 400 | 24px | Body paragraphs, card content |
| `{typography.body-md}` | 14px | 400 | 21px | Nav links, button labels, secondary copy |
| `{typography.body-bold}` | 16px | 700 | 24px | Inline emphasis, pricing tier names |
| `{typography.label-sm}` | 14px | 700 | 21px | h5 feature titles, pricing feature items |
| `{typography.mono}` | 14px | 400 | 21px | Reserved for code mode in the product |

### Principles

Open Sans weight 700 appears exactly once at the display tier (48px hero headline) and then again at 32px for section headings. Below that everything sits at 400 or 600 — there is no intermediate semibold pattern for sub-headings. The absence of weight 700 below the main headings keeps the editorial voice flat and document-like, matching the outliner's minimal positioning.

### Note on Font Substitutes

Open Sans is freely available on Google Fonts. No substitution is needed. If you want a slightly more geometric alternative at the same x-height, **Nunito Sans** or **Lato** match the open counters at 16px body sizes.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px and 16px as the dominant module values.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.md}` 8px · `{spacing.base}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px · `{spacing.4xl}` 64px.
- **Section vertical padding:** 64px top + 16px horizontal (`--wf-space-4xl` / `--wf-space-l`).
- **Card internal padding:** 16px default; 24px on testimonial and pricing cards.
- **Nav height:** 48px (`--wf-header-height`).

### Grid & Container

- **Max content width:** ~960px on the hero text + centered CTA stack; product mockup card extends to ~720px.
- **Hero layout:** centered text column (headline + sub-copy + two pill CTAs) above a full-width bordered product mockup card.
- **Feature section:** centered headline + tab-strip (Note / Folder / Todo / Doc) + product screenshot below each tab.
- **Testimonials:** 3-column grid of cards on the off-white (#f3f4f4) surface.
- **Pricing:** 2-column comparison with the Pro column outlined in sky blue.
- **Platform row:** 5-icon grid (Windows / Mac / Linux / iOS / Android) with Lucide-style platform icons.

### Rhythm

The page alternates between **white-canvas editorial** bands (hero, feature section, closing CTA) and a single **off-white tonal lift** (testimonials, platform availability). Section transitions are marked by tonal shift rather than divider lines.

## Elevation

The system has a single elevation tier: **the product mockup card**. The shadow `rgba(0,0,0,0.12) 0px 2px 20px` (wired as `--wf-box-shadow-m`) lifts the hero product screenshot off the white canvas. Every other surface — testimonial cards, pricing panels, feature screenshots — rests flat with only a hairline border.

This flatness is a design choice consistent with the grid-paper restraint principle. The marketing page does not need depth hierarchy because it has almost no layered content — sections are sequential bands, not overlapping panels.

## Shapes

The radius scale is **binary: pill or card**:

- `{rounded.none}` 0px — nav links, text elements.
- `{rounded.sm}` 4px — small chips, toggle indicators.
- `{rounded.md}` 8px — cards, product mockups, pricing panels, form inputs. Frequency 11 in the extraction — the default rounding for all container surfaces.
- `{rounded.lg}` 16px — frequency 2 — larger modals and some feature illustration containers.
- `{rounded.full}` 9999px — buttons and interactive toggles exclusively. Frequency 13 — the most-used radius value in the system.

The pill-or-card binary maps to the interaction model: everything you click is a pill, everything you read from is a card. No intermediate radius.

## Components

**`button-primary`** — Sky-blue (#49baf2) fill, white text, pill radius (9999px), 8x24px padding, 37px height. "Sign Up for Free" is the canonical hero instance.

**`button-secondary`** — White fill with light hairline (#dce0e2) border, charcoal ink text, pill radius, same sizing. "Signup with Google" uses this treatment with the Google logo prefixed.

**`button-google`** — Identical treatment to `button-secondary` — white pill with border, no tint. Google-branded buttons never receive the sky-blue fill.

**`top-nav`** — White canvas, 48px height, hairline bottom border. Houses the Workflowy wordmark + logo, the "Using Workflowy" nav link with a dropdown caret, Pricing, Downloads, and the pill-shaped "Sign up / Log in" CTA on the right.

**`nav-link`** — Transparent background, mid-gray (#4b5155) text at 14px weight 400. Nav links read as secondary to the CTA button on the right.

**`hero-heading`** — Charcoal (#2a3135) text, Open Sans 48px weight 700. The singular bold moment: "Stop organizing your notes. Start organizing your thoughts."

**`section-heading`** — Charcoal text, 32px weight 700. Used for "A single bullet list does it all," "Helping people organize their thinking," "Pay for clarity, not clutter."

**`body-paragraph`** — Charcoal text, 16px weight 400. Hero sub-copy and feature section descriptions.

**`card`** — White fill, charcoal text, 8px radius, 16px padding, hairline border. The default container for feature screenshots and product illustrations.

**`product-mockup`** — White fill, 8px radius, 16px padding, hairline (#dce0e2) border, single medium shadow. The hero product screenshot card — the only elevated surface on the page.

**`pricing-card`** — White fill, 8px radius, 24px padding, light hairline border. The Basic (free) tier.

**`pricing-card-featured`** — White fill, 8px radius, 24px padding, sky-blue (#49baf2) border (2px). The Pro tier highlight — border treatment rather than background tint.

**`testimonial-card`** — Off-white (#f3f4f4) fill, 8px radius, 24px padding, no border. Three-column grid in the social-proof section.

**`footer`** — White canvas, muted-gray text, 48x16 padding. Five-column link grid (Product / Resources / Use Cases / About / Follow us) in 14px weight 400.

## Do's and Don'ts

**Do** reserve the sky-blue (#49baf2) for interactive elements only — the CTA button and the bullet-toggle button. The brand's discipline is that every element that responds to a click is sky blue, and nothing else is.

**Do** use the medium shadow (`rgba(0,0,0,0.12) 0px 2px 20px`) for elevated product mockup cards and nothing else. The single-elevation model keeps the page composition unambiguous.

**Do** use the pill radius (9999px) for every button and interactive toggle, and the 8px radius for every card. Mixing radii — for example, using 4px on a CTA — breaks the binary radius contract that the system runs on.

**Do** render the pricing highlight column as a sky-blue border (2px, #49baf2) rather than a sky-blue background fill. A fill would use the brand voltage on a passive surface, which violates the interactive-only convention.

**Don't** add a second chromatic color alongside sky blue. The system runs on exactly one voltage — introducing a secondary tint (say, a warm amber for warnings) would break the argument that Workflowy is visually invisible. Use grays (#868c90 or #4b5155) for any secondary semantic need.

**Don't** bump the hero headline weight to 800 or 900. The 48px / weight 700 headline is the system's loudest typographic moment — adding a heavier weight would shift the editorial register from document-tool to SaaS marketing. Use 700 at this size, and nothing heavier.

**Don't** add shadows to the testimonial or pricing cards. Those surfaces sit flat on their background tones by design — shadow on a card inside the off-white (#f3f4f4) band would create false z-axis depth where the layout intends a horizontal band.

**Don't** use the light hairline (#dce0e2) for the featured pricing column border. That border must be sky blue (#49baf2, 2px) to signal interactivity. Using the structural hairline on the highlighted column removes the only visual cue that this tier is recommended.

## Known Gaps

- **Dark mode:** Workflowy ships a dark theme in the product (using the `--wf-dark-*` variable family visible in the CSS), but the marketing site renders in light mode only. The dark-mode palette is not captured here.
- **Hover and focus states:** only the resting state is captured. The full state matrix (hover tint on nav links, focus ring on inputs, active state on the bullet toggle) lives in the product CSS and is not exposed on the marketing surface.
- **Text input:** the extraction returned `null` for the input component — no visible text input appears on the marketing page. Token values are inferred from the spacing and radius system.
- **Mobile breakpoints:** the marketing page shows a mobile-friendly layout with a condensed nav and stacked feature sections, but mobile-specific token overrides are not captured.
- **Motion:** the bullet-toggle animation (sliding between Note / Folder / Todo / Doc modes) runs via CSS transitions not captured in static extraction.
- **Product color palette:** the CSS declares a lime green family, a coral red (--wf-red-700), amber yellows, and semantic blues beyond the marketing sky-blue — these are the product's tag-color system and do not appear in the marketing chrome.