---
version: alpha
name: Loom
website: "https://www.loom.com"
description: >-
  A white-canvas screen-recording marketing surface anchored on Loom Blue (#1868db), a single saturated voltage that carries every primary pill CTA, link, and focus ring across the page. Display type runs Charlie Display at weight 700 with no negative tracking; body type runs Charlie Text at weight 400. Buttons are radius-9999px pills rather than rounded rectangles — the dominant geometry of the system, with 62 pill occurrences against 4 corner-12px cards. The record-red token (#ff613d) is scoped strictly to in-product recording affordances, never to marketing CTAs.

seo:
  title: "Loom Design System for React — Loom Blue (#1868db), Charlie Display, and 18 components"
  metaDescription: "Loom's design system as a DESIGN.md file. Loom Blue #1868db, Charlie Display, pill geometry, 18 components. For React, Next.js, and AI tools."
  highlights:
    - "Pill geometry as signature — 62 of the captured radius values are 9999px against just 4 rectangle-card values"
    - "Single brand voltage — Loom Blue (#1868db) reserved for CTAs, links, focus rings, never decorative fills"
    - "Record red (#ff613d) scoped to in-product recording dots only — kept out of marketing chrome by design"
    - "Charlie Display weight 700 carries the entire heading scale at 63px hero with zero negative tracking"
    - "White canvas with very pale blue tints (#e9f2fe) as the only structural surface variation"
  tags:
    - "Communication & Messaging"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Loom's marketing page is a white canvas with a single saturated voltage — Loom Blue (#1868db) — carrying every primary CTA, link underline, and focus ring across the surface. The body charcoal (#292a2e) does the workhorse text duty at 551 occurrences across paragraphs and nav links. Headlines are Charlie Display at weight 700 with no negative tracking, an unusual choice in a SaaS category where most competitors pull -1px to -2px on display copy. Body type is Charlie Text at weight 400. The page floor is pure white (#ffffff); structural depth comes from very pale blue tints (#e9f2fe) rather than gray ladders. The record-red token (#ff613d) exists in the variables but appears only as the in-product recording affordance — it is deliberately kept out of marketing chrome.

    The DESIGN.md file packages 19 color tokens, 11 typography styles, 5 corner radii, 8 spacing values, and 18 components. The 450 CSS custom properties on the live :root resolve to a much smaller perceptual palette — Loom Blue plus a graded blue ladder (#1558bc hover, #123263 active, #cfe1fd light), record red, plus an extended in-product report swatch set covering green, violet, and yellow that lives inside product mockups rather than marketing surfaces. The format is the Google Labs DESIGN.md spec — a machine-readable file with token references like `{colors.loom-blue}` and `{typography.display-xl}` that designers and AI agents can both parse.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Loom's pill-first geometry: 9999px CTAs, white card surfaces, blue accent reserved strictly for action. Reference the tokens directly in Tailwind config or CSS variables, or paste the components block into a design audit. The discipline worth studying is the refusal of two SaaS shortcuts at once — display-weight negative tracking and a rainbow accent palette — in favor of one geometric move (pills) and one voltage (Loom Blue) repeated across every viewport.
  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.loom.com"
      title: "Loom — official site"
      description: "Loom's marketing site — async video messaging for work, with the design surface this file extracts."
    - 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 Loom's primary brand color?"
      answer: "Loom's brand voltage is Loom Blue (#1868db) — a saturated blue at OKLCH lightness 0.54, surfaced 81 times across the captured page as text (36), border (36), and background fill (9). It maps to `--lns-color-primary`, `--lns-color-highlight`, and `--lns-color-info` in the live CSS variables. Hover steps darker to #1558bc, active to deep navy #123263. Loom Blue is reserved for primary CTAs, links, focus rings, and the highlight chip — never decorative section backgrounds."
    - id: "record-red"
      title: "Why does the record red (#ff613d) almost never appear?"
      answer: "Record red is the in-product recording-state color — the pulsing dot that indicates a Loom capture is live. It maps to `--lns-color-record` and surfaces only 5 times across the captured marketing page, exclusively inside product mockups where a recording is in progress. The marketing CTA never uses it. This scoping keeps the affordance meaningful: red means a camera is rolling, not buy-now."
    - id: "typography"
      title: "What typography does Loom use, and what should I use if Charlie isn't available?"
      answer: "Loom runs two custom families: Charlie Display for headlines (h1, h2 at weight 700) and Charlie Text for body and UI (weight 400 default, 700 for emphasis). The hero h1 sits at 63.27px / 1.029 line-height with zero letter-spacing — no negative tracking, unlike most SaaS display scales. Inter at weight 700 for display and weight 400 for body is the closest free substitute; Geist Sans also works. There is no separate mono family — code blocks defer to the system stack."
    - id: "pill-geometry"
      title: "Why are CTAs pills instead of rounded rectangles?"
      answer: "Pill geometry (radius 9999px) is Loom's dominant shape — 62 of the captured radius values are full pills against just 4 corner-12px values for cards. The primary CTA is a 48px-tall pill with 7.8px / 15.6px padding. The 12px corner only appears on content cards and embedded video frames; section containers stay square. The result: every interactive control reads as a pill, every content surface reads as a rectangle — the two geometries never compete."
    - id: "depth"
      title: "How does Loom signal depth without heavy shadows?"
      answer: "Loom uses very pale blue tints (`{colors.surface-blue-tint}` #e9f2fe, 37 occurrences) as the primary depth cue — a light blue band drops behind feature sections to lift them off the white canvas. The only real shadow is the nav shadow, a 3-layer stack of black at 4 / 6 / 10 percent opacity. Cards inside sections rely on hairline borders (#e4e2e7) rather than drop shadows, keeping the page floor compositionally flat outside of the navigation."
    - id: "use-in-project"
      title: "How do I use this DESIGN.md to build a React project?"
      answer: "Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce Loom's pill-first geometry rather than a generic shadcn theme. You can also reference the 19 color tokens, 11 type styles, and 18 components directly: every value is a quoted hex or size you can paste into Tailwind config, CSS variables, or your own component library. Combine the file with shadcn/ui primitives and a Button variant whose `borderRadius` is 9999px to match Loom's CTA discipline."

colors:
  loom-blue: "#1868db"
  loom-blue-hover: "#1558bc"
  loom-blue-active: "#123263"
  loom-blue-light: "#cfe1fd"
  surface-blue-tint: "#e9f2fe"
  canvas: "#ffffff"
  ink: "#101214"
  ink-body: "#292a2e"
  ink-muted: "#6c6f77"
  ink-subtle: "#8c8f97"
  ink-disabled: "#b7b9be"
  hairline: "#e4e2e7"
  surface-elevated: "#1e1f21"
  record-red: "#ff613d"
  report-green: "#82b536"
  report-violet: "#bf63f3"
  report-violet-deep: "#48245d"
  report-yellow: "#ffc716"
  focus-ring: "#4d8ced"

typography:
  display-xl:
    fontFamily: "Charlie Display, system-ui, sans-serif"
    fontSize: 63px
    fontWeight: 700
    lineHeight: 1.03
    letterSpacing: 0
  display-lg:
    fontFamily: "Charlie Display, system-ui, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: 0
  display-md:
    fontFamily: "Charlie Display, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: 0
  heading-md:
    fontFamily: "Charlie Display, system-ui, sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0
  body-xl:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.52
    letterSpacing: 0
  body-lg:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0
  body-md:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0
  caption:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  eyebrow:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0
  button-md:
    fontFamily: "Charlie Text, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "6px"
  md: "12px"
  lg: "16px"
  pill: "9999px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  xxl: "72px"
  section: "111px"

components:
  button-primary:
    backgroundColor: "{colors.loom-blue}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "48px"
  button-primary-hover:
    backgroundColor: "{colors.loom-blue-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "48px"
  button-primary-active:
    backgroundColor: "{colors.loom-blue-active}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "48px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "48px"
    border: "1px solid {colors.hairline}"
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "48px"
  link:
    textColor: "{colors.loom-blue}"
    typography: "{typography.body-md}"
  highlight-chip:
    backgroundColor: "{colors.surface-blue-tint}"
    textColor: "{colors.loom-blue}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  feature-band:
    backgroundColor: "{colors.loom-blue}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "40px"
  video-frame:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    border: "1px solid {colors.ink-subtle}"
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    border: "2px solid {colors.focus-ring}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    height: "72px"
    padding: "0px 36px"
  nav-link:
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    height: "48px"
  recording-dot:
    backgroundColor: "{colors.record-red}"
    rounded: "{rounded.pill}"
    height: "8px"
  logo-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "40px 0px"
  cta-section:
    backgroundColor: "{colors.surface-blue-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.lg}"
    padding: "72px 40px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "72px 36px"
---

## Overview

Loom's marketing canvas is a white ground (`{colors.canvas}` #ffffff) with a single saturated voltage — **Loom Blue** (`{colors.loom-blue}` #1868db) — carrying every primary CTA, inline link, focus ring, and highlight chip. The body charcoal (`{colors.ink-body}` #292a2e) is the workhorse text color across paragraphs and nav. Headlines step up to a darker near-black (`{colors.ink}` #101214) and run Charlie Display at weight 700.

**Pill geometry as signature**: where most SaaS systems lean on 8–12px rounded rectangles for every interactive element, Loom commits to pills (`{rounded.pill}` 9999px) for every button, chip, and tag — 62 captured pill values against just 4 corner-12px card values. The 12px radius is reserved for content surfaces (video frames, feature cards), so the two geometries never compete: pills are interactive, rectangles are content.

Display type is **Charlie Display** at weight 700 with zero negative letter-spacing — a deliberate counter-move to the SaaS category default. Stripe, Linear, and Vercel all pull tracking aggressively negative on display copy; Loom keeps it at 0 and lets the type breathe. Body type is **Charlie Text** at weight 400, with weight 700 for emphasis. There is no separate mono family.

The **record red** (`{colors.record-red}` #ff613d) is the system's most disciplined token. It surfaces only on the in-product recording dot — never on a CTA, never as a section background, never as decorative emphasis. This is intentional: red on a video product means a camera is rolling, and Loom protects that semantic.

**Key Characteristics:**
- **Pill-first geometry** — `{rounded.pill}` carries every interactive control; `{rounded.md}` is content-card-only.
- **Single voltage** — Loom Blue `{colors.loom-blue}` (#1868db) is the only chromatic accent; record red is scoped to in-product use.
- **Zero negative tracking** on display copy — Charlie Display 63px hero runs at letter-spacing 0, contrary to the category default.
- **White canvas with blue tint depth** — `{colors.surface-blue-tint}` #e9f2fe replaces the gray ladder most SaaS pages use.
- **Hairline borders over shadows** — only the top nav carries a real shadow; cards depend on `{colors.hairline}` #e4e2e7.
- **Two-tier ink stack** — `{colors.ink}` #101214 for headlines, `{colors.ink-body}` #292a2e for body, separated by ~7% lightness.

## Colors

- **Loom Blue (`#1868db`)** — frequency 81. Used as text (36), border (36), background (9). The brand voltage; mapped to `--lns-color-primary`, `--lns-color-highlight`, and `--lns-color-info`. Reserved for primary pill CTAs, inline links, focus chips.
- **Ink (`#101214`)** — frequency 518. Used as text (257), border (257), background (4). Near-black ink for h1 / h2 headlines; mapped to `--thd-color-black` and `--lns-color-disabledBackground`.
- **Ink Body (`#292a2e`)** — frequency 551. Used as text (275), border (275), background (1). The workhorse body color across paragraphs and nav links; mapped to `--lns-color-body`.
- **Canvas (`#ffffff`)** — frequency 109. Used as background (16), text (45), border (45). The page floor and card surface — Loom does not use a tinted canvas.
- **Surface Blue Tint (`#e9f2fe`)** — frequency 37. Used as background (27), text (4), border (4). The depth cue — a pale blue band that lifts feature sections off the white canvas.
- **Loom Blue Hover (`#1558bc`)** — frequency 2. The CTA hover step; mapped to `--lns-color-primaryHover`.
- **Loom Blue Active (`#123263`)** — frequency 2. The CTA pressed step; mapped to `--lns-color-primaryActive` and `--lns-color-blurpleStrong`.
- **Loom Blue Light (`#cfe1fd`)** — frequency 0 on captured page; declared as `--thd-color-blue-20` / `--lns-color-blueLight` for light-tinted blue surfaces.
- **Ink Muted (`#6c6f77`)** — frequency 0 declared; mapped to `--lns-color-bodyDimmed` and `--thd-color-grey-70` for dimmed body copy.
- **Ink Subtle (`#8c8f97`)** — frequency 0 declared; the form-field border token (`--lns-color-formFieldBorder`).
- **Ink Disabled (`#b7b9be`)** — frequency 0 declared; mapped to `--lns-color-disabledContent` for greyed-out controls.
- **Hairline (`#e4e2e7`)** — frequency 0 declared; mapped to `--thd-color-grey-30` and `--lns-themeDark-color-border` for card / divider hairlines.
- **Record Red (`#ff613d`)** — frequency 5. Used as text (2), background (1), border (2). The in-product recording state — mapped to `--lns-color-record` and never used on marketing chrome.
- **Report Green (`#82b536`)** — frequency 3. Background-only. Lives inside in-product analytics swatches; mapped to `--thd-color-green-50`.
- **Report Violet (`#bf63f3`)** — frequency 2. Text and border use; mapped to `--thd-color-violet-50`. Appears in product-mockup data tags.
- **Report Violet Deep (`#48245d`)** — frequency 1. Background use; the upgrade-CTA hover background (`--lns-color-upgradeHover` dark variant).
- **Report Yellow (`#ffc716`)** — frequency 0 declared; the warning state token (`--lns-color-warning`).
- **Focus Ring (`#4d8ced`)** — frequency 0 declared; mapped to `--lns-color-focusRing` for keyboard-focus outlines.
- **Surface Elevated (`#1e1f21`)** — frequency 0 declared; the dark-mode card background (`--lns-themeDark-color-backgroundSecondary`).

## Typography

Loom runs two proprietary families: **Charlie Display** for headlines and **Charlie Text** for body copy and UI. Charlie Display appears only on h1, h2, h3 and large display blockquotes; everything else is Charlie Text. The display tier sits at weight 700 across all sizes — Loom does not vary display weight, only size and line-height.

**Light weight as absence**: where most SaaS systems offer a weight-300 or weight-500 display option, Loom does not. Every headline is weight 700. The variation across the hierarchy is achieved through size (63px → 44px → 32px → 25px) and line-height (1.03 → 1.14 → 1.27 → 1.33), never through weight modulation.

The hero h1 is 63.27px Charlie Display at weight 700, line-height 65.1px (so 1.029), letter-spacing 0. No tracking adjustment is applied at any tier — display through caption all sit at letter-spacing 0. This is the most distinctive typographic decision in the system and runs contrary to the category default of negative tracking on display copy.

Body type splits into four tiers: body-xl (26.65px / 1.52, for marketing paragraph copy), body-lg (18.62px / 1.65), body-md (16px / 1.5, the workhorse UI body), and body-sm (15.62px / 1.71). The eyebrow style is Charlie Text 12.62px at weight 700, uppercase — the only uppercase text-transform in the system, scoped to section labels (h4) and small uppercase eyebrows.

## Layout

Loom's marketing surface uses a centered single-column layout with generous vertical rhythm — the captured page spans 4500px tall against a 1440px viewport, so the page is roughly 3.1 viewports of scroll. Section spacing leans on `{spacing.section}` 111px between major bands and `{spacing.xxl}` 72px between blocks within a section.

Horizontal padding on hero and feature copy sits at `{spacing.xl}` 40px on the outer container with `0px 36px` on the nav. Cards inside a section bound at 24px (`{spacing.lg}`) internal padding for feature cards and 40px (`{spacing.xl}`) for the prominent blue feature band that hosts product screenshots.

The grid is content-led rather than 12-column rigid — long-form sections sit centered at roughly 720px max-width, while product-mockup bands extend to a wider 1100px frame to let the screenshot read.

## Elevation & Depth

The page is compositionally flat outside of the top nav. The only declared shadow is `--thd-shadow-nav`, a 3-layer black stack at 4 / 6 / 10 percent opacity (`0 0.125rem 0.375rem rgba(0,0,0,.04), 0 0.3125rem 1.125rem rgba(0,0,0,.06), 0 1.5rem 5.1875rem rgba(0,0,0,.1)`). Cards inside sections do not carry shadows.

Depth instead comes from two moves: **hairline borders** (`{colors.hairline}` #e4e2e7) that draw a thin perimeter around content cards, and **blue-tint surface lifts** (`{colors.surface-blue-tint}` #e9f2fe) where an entire section band switches from white to pale blue to signal a new content block. The blue feature band is the most prominent example — a full-width 16px-radius card filled with Loom Blue (`{colors.loom-blue}` #1868db) that hosts a feature pitch and product screenshot.

## Shapes

The radius scale is extreme by SaaS standards: **62 occurrences of 9999px against just 4 occurrences of 12px**. Pills dominate, rectangles are scarce. The split is semantic — interactive controls (buttons, chips, tags, the search input) are pills; content surfaces (video frames, feature cards, the blue feature band at 16px) are rounded rectangles; section containers are square.

The five-step scale: `{rounded.none}` 0px for section containers, `{rounded.sm}` 6px for form inputs, `{rounded.md}` 12px for feature cards and video frames, `{rounded.lg}` 16px for the prominent blue feature band, `{rounded.pill}` 9999px for every interactive control.

## Components

- **button-primary** — Loom Blue pill, 48px tall, 8/16px padding, Charlie Text 16px weight 400.
- **button-primary-hover** — steps to `{colors.loom-blue-hover}` #1558bc; everything else holds.
- **button-primary-active** — steps to `{colors.loom-blue-active}` #123263 deep navy.
- **button-secondary** — white pill with `{colors.hairline}` 1px border, ink-body label.
- **button-dark** — near-black pill (`{colors.ink}` #101214) for inverted contexts.
- **link** — Loom Blue text on Charlie Text 16px, used for inline anchors.
- **highlight-chip** — surface-blue-tint pill with Loom Blue label, 4/12px padding, the section-eyebrow pattern.
- **feature-card** — white surface, 12px radius, hairline border, 24px padding.
- **feature-band** — Loom Blue background, 16px radius, 40px padding — the prominent blue product band.
- **video-frame** — white surface with hairline border at 12px radius, the embedded Loom recording frame.
- **text-input** — white field, 6px radius, ink-subtle 1px border, 8/12px padding.
- **text-input-focused** — swaps border to a 2px focus-ring (#4d8ced).
- **top-nav** — 72px tall, white, 0/36px padding, carries the only real shadow in the system.
- **nav-link** — ink-body text, 48px hit-target.
- **recording-dot** — record-red 8px circle; the in-product recording affordance.
- **logo-row** — white band with muted-ink labels, 40px vertical padding — the "trusted by" customer-logo strip.
- **cta-section** — surface-blue-tint band, 16px radius, 72/40px padding, display-md headline.
- **footer** — white surface, muted-ink labels, 72/36px padding.

## Do's and Don'ts

**Do** use `{rounded.pill}` for every interactive control — buttons, chips, tags. Pill geometry is the system's load-bearing identity move; switching a CTA to a 12px rounded rectangle breaks the silhouette.

**Do** keep `{colors.loom-blue}` (#1868db) for CTAs and links. Pair it with white canvas and ink-body text; do not introduce a second chromatic accent on the same viewport.

**Do** set display letter-spacing to 0. Charlie Display at 63px is designed to sit at neutral tracking — pulling it to -1px or -2px collapses the breathing room the system relies on.

**Don't** use `{colors.record-red}` (#ff613d) for marketing CTAs, error states, or decorative emphasis. It is scoped to the in-product recording affordance and `--lns-color-record` only — surfacing it elsewhere breaks the camera-is-rolling semantic.

**Don't** use `{colors.surface-blue-tint}` (#e9f2fe) for body text or borders — it is a background-only token (27 of 37 occurrences are bg). For tinted-blue text on a light surface, use `{colors.loom-blue}` itself.

**Don't** shadow cards inside sections. The only declared shadow is the nav shadow; adding box-shadows to feature cards or the blue feature band flattens the contrast between nav (floating) and content (flat) that the system relies on.

**Don't** use Charlie Display for body copy. The family is scoped to h1, h2, h3, and large blockquotes — at 16px or 18px it sits oddly tight. Use Charlie Text for everything at 18px and below.

**Don't** introduce a 8px or 10px corner radius. The declared scale is `0 / 6 / 12 / 16 / 9999`; intermediate values dilute the rectangle-vs-pill split that gives the system its geometric clarity.

## Known Gaps

- The **report palette** (green, violet, yellow, deep violet) lives inside in-product analytics swatches rendered in marketing mockups; they are documented for completeness but are not brand surface colors.
- The **focus-ring** token (#4d8ced) is declared in `--lns-color-focusRing` but did not surface as a captured count on the marketing page — it is enforced via the focus state stylesheet rather than rendered statically.
- **Dark mode** is documented through `--lns-themeDark-*` variables (a near-black `{colors.surface-elevated}` #1e1f21 floor) but is not toggled on the public marketing surface.
- **Form-field error and validation styling** is not visible on the inspected pages.
- **Motion** — Loom is a video product; the marketing surface includes auto-playing in-frame video and hover transitions on cards that are out of scope for a static token file.
- **Charlie Display** and **Charlie Text** are proprietary; Inter, Geist Sans, or Söhne are acceptable open substitutes.