---
version: alpha
name: Loom
description: "Pale blue air, plates with enormous soft corners, every control a pill."
colors:
  on-surface: "#101214"
  surface: "#E9F2FE"
  outline: "#F1F0F3"
  primary: "#1868DB"
  graphite: "#292A2E"
  deep-blue: "#1558BC"
  navy: "#123263"
  sky-fill: "#CFE1FD"
  powder-blue: "#8FB8F6"
  white: "#FFFFFF"
  grey-wash: "#F8F8F8"
  table-rule: "#E4E2E7"
  label-grey: "#7D818A"
  pure-black: "#000000"
  violet-tint: "#F8EEFE"
  record-orange: "#FF613D"
  record-wash: "rgba(255, 97, 61, 0.13)"
typography:
  display-xl:
    fontFamily: Charlie Display
    fontSize: 90px
    fontWeight: 700
    lineHeight: 90px
    letterSpacing: 0em
  display-lg:
    fontFamily: Charlie Display
    fontSize: 70px
    fontWeight: 700
    lineHeight: 72.03px
    letterSpacing: 0em
  display-md:
    fontFamily: Charlie Display
    fontSize: 48px
    fontWeight: 700
    lineHeight: 54.864px
    letterSpacing: 0em
  display-sm:
    fontFamily: Charlie Display
    fontSize: 35px
    fontWeight: 700
    lineHeight: 44.555px
    letterSpacing: 0em
  display-xs:
    fontFamily: Charlie Display
    fontSize: 27px
    fontWeight: 700
    lineHeight: 35.991px
    letterSpacing: 0em
  body-lg:
    fontFamily: Charlie Text
    fontSize: 28px
    fontWeight: 400
    lineHeight: 42.672px
    letterSpacing: 0em
  body-md:
    fontFamily: Charlie Text
    fontSize: 19px
    fontWeight: 400
    lineHeight: 31.293px
    letterSpacing: 0em
  body-sm:
    fontFamily: Charlie Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  link-button:
    fontFamily: Charlie Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 27.424px
    letterSpacing: 0em
  overline-caption:
    fontFamily: Charlie Text
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18.915px
    letterSpacing: 0em
rounded:
  buttons-nav-pills-icon-chips-avatars: 9999px
  full-width-plates-quote-figures-card-lin: 72px
  nested-cards-faq-disclosures-media-frame: 44px
  enterprise-media-blocks: 24px
  small-product-images: 12px
  chips: 8px
  recorder-control-buttons: 6px
  skip-link: 0px
  table-cells: 0px
spacing:
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 32px
  fluid-xs: 40.96px
  fluid-sm: 53.77px
  xl: 64px
  2xl: 80px
  fluid-md: 110.08px
  fluid-lg: 135.04px
---
# Loom — Style Reference

> Pale blue air, plates with enormous soft corners, every control a pill.

**Theme:** light

Loom builds its pages out of huge rounded plates that float on white above the fold and on a pale blue wash below it, and the corner vocabulary is the whole identity: a 72px arc on the full-width plates, 44px on the cards nested inside them, 9999px on anything you can click. The captured pages run two systems. The home and pricing pages stay on the light ground with black display type; the enterprise and contact-sales pages open on a graphite ground and set the same headlines in white, and the split falls at the hero — the header above it is identical white on all four. One blue does nearly all the work: it fills the primary pill, tints the secondary, washes the footer, and darkens into navy for quote plates, with a quartet of pastel tints held back for feature cards and a record orange kept for the recording state. Charlie Display stays at a single weight from its 90px hero down to its 27px card titles, so hierarchy comes from scale rather than weight — and the leading tightens as the type grows, from 1.33 at the small headings to dead solid at the largest. The rhythm underneath is blunt and repetitive: 135.04px of vertical air between bands, the same 135.04px as the side gutter, plates stopping at 1248px inside a 1920px viewport.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#101214` | `--color-black` | Body and heading ink on all four pages; also the black plate and the black button variant. Text first, surface rarely. |
| Graphite | `#292A2E` | `--color-grey-100` | Second ink — nav links, captions, footer copy — and the dark section fill under the enterprise hero. |
| Loom Blue | `#1868DB` | `--color-blue-70` | The primary action and the primary plate. Filled CTAs are this blue or a deliberate exception to it. |
| Deep Blue | `#1558BC` | `--color-blue-80` | A darker panel inside a split module on the home page; also the declared focus-ring colour. Not a button fill. |
| Navy | `#123263` | `--color-blue-90` | The testimonial and AI plates: carries white display type at full-plate scale without going black. |
| Sky Canvas | `#E9F2FE` | `--color-blue-10` | The census's canvas — footer band, interstitial sections, and the tinted pill that sits beside the primary. |
| Sky Fill | `#CFE1FD` | `--color-blue-20` | FAQ rows and the savings chip on pricing: one step darker than canvas, so a panel reads without a border. |
| Powder Blue | `#8FB8F6` | `--color-blue-30` | Display-size ink on the enterprise word list ("Announcements"), and the 1px rule on the `.bg-thd-color-blue-10` plan header. Ink and border in both carriers. |
| White | `#FFFFFF` | `--color-white` | Header, elevated card, light plates, and the reversed ink on every dark ground. |
| Grey Wash | `#F8F8F8` | `--color-grey-10` | The alternating cell fill in the pricing comparison table — the filled variant of `.text-center.text-thd-color-black`. |
| Table Rule | `#E4E2E7` | `--color-grey-light-border` | The 1px rule on `.text-center.text-thd-color-black` cells and `.font-normal.text-left.text-thd-color-black` row headers; all 430 border observations sit on the pricing page's `td`, `th` and `div`. |
| Card Rule | `#F1F0F3` | `--color-border-grey` | A lighter 1px border on a bordered pricing panel — edge without weight. |
| Label Grey | `#7D818A` | `--color-grey-60` | Form labels (`.mktoLabel.mktoHasWidth`), the required asterisk (`.mktoAsterix`) and the skip link (`.NewHeader_skipLink___68Ws`) — its 17 observations are all text. |
| Pure Black | `#000000` | `--color-pure-black` | Ink on the pale blue pill — a hair darker than the page's ink, the tell that it is its own component. |
| Violet Tint | `#F8EEFE` | `--color-violet-10` | One of the four pastel card fills (`.grow.bg-thd-color-violet-10.text-thd-color-black.thd-rounded-int`) and the skip link's fill — all 8 observations are fills. |
| Record Orange | `#FF613D` | `--color-record` | Recording state, carried as text by `.thd-pulse.css-lei75u` and `.css-kxjlgc`. It is status colour, not a CTA colour. |
| Record Wash | `rgba(255, 97, 61, 0.13)` | `--color-record-20` | The 13% bed the record dot sits in, on `.w-full.mx-auto.flex.bg-thd-color-record-20`. |

## Tokens — Typography

### Charlie Display — every heading from the 90px hero to the 27px card title, at one weight, with normal tracking · `--font-display`
- **Substitute:** Figtree, Poppins, Nunito Sans
- **Weights:** 700
- **Sizes:** 90px, 70px, 48px, 35px, 27px
- **Line height:** 90px → 90px (1.0), 70px → 72.03px (1.03), 48px → 54.864px (1.14), 35px → 44.555px (1.27), 27px → 35.991px (1.33)
- **Letter spacing:** `normal` on every measured heading row, from `.text-thd-color-white.thd-max-xl.thd-heading-xl.mb-md` at 90px down to `.text-thd-color-black.thd-heading-xs.lg.lg:text-center` at 27px
- **Role:** Every heading, in one weight; the scale steps ~1.3–1.46× between sizes and the leading compresses toward solid as the size grows.

### Charlie Text — body, links, buttons, labels and the 13px overline · `--font-text`
- **Substitute:** Figtree, Poppins, system-ui
- **Weights:** 400, 500, 653, 700 — the measured text rows carry 400 (`.thd-caption.block`) and 700 (`.thd-overline.mb-fixed-md`)
- **Sizes:** 28px, 19px, 18px, 16px, 15px, 13px
- **Line height:** 28px → 42.672px, 19px → 31.293px, 18px → 27px, 16px → 24px or 27.424px, 15px → 22.5px, 13px → 18.915px
- **Letter spacing:** `normal` on every row but one — `.lm-button-text.text-thd-color-white.mx-auto.lg:text-center` at 18px/700 pulls to −0.18px
- **Role:** All running copy at 16px/24px and 19px/31.293px, lead paragraphs at 28px/42.672px, and 700 reserved for buttons, bylines and the 13px overline.

### ui-sans-serif — the system stack behind the two Charlie faces · `--font-fallback`
- **Substitute:** system-ui, -apple-system, Segoe UI
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The third family in the inventory; it catches anything the Charlie faces do not, and no measured text row names it.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 90px | 90px | normal | `--text-display-xl` |
| Display LG | 70px | 72.03px | normal | `--text-display-lg` |
| Display MD | 48px | 54.864px | normal | `--text-display-md` |
| Display SM | 35px | 44.555px | normal | `--text-display-sm` |
| Display XS | 27px | 35.991px | normal | `--text-display-xs` |
| Body LG | 28px | 42.672px | normal | `--text-body-lg` |
| Body MD | 19px | 31.293px | normal | `--text-body-md` |
| Body SM | 16px | 24px | normal | `--text-body-sm` |
| Link / Button | 16px | 27.424px | normal | `--text-label` |
| Overline / Caption | 13px | 18.915px | normal | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 8px on the fixed steps (8 / 16 / 24 / 32 / 80), with a parallel fluid ladder — 40.96, 53.77, 110.08, 135.04 — computed between the site's 48rem and 100rem viewport anchors   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| fluid-xs | 40.96px | `--spacing-fluid-xs` |
| fluid-sm | 53.77px | `--spacing-fluid-sm` |
| xl | 64px | `--spacing-xl` |
| 2xl | 80px | `--spacing-2xl` |
| fluid-md | 110.08px | `--spacing-fluid-md` |
| fluid-lg | 135.04px | `--spacing-fluid-lg` |

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, nav pills, icon chips, avatars | 9999px |
| Full-width plates, quote figures, card links | 72px |
| Nested cards, FAQ disclosures, media frames | 44px |
| Enterprise media blocks | 24px |
| Small product images | 12px |
| Chips | 8px |
| Recorder control buttons | 6px |
| Webcam bubbles | 50% |
| Skip link | 0px 0px 24px 24px |
| Table cells | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Plate | `0 2px 6px rgba(0,0,0,.04), 0 5px 18px rgba(0,0,0,.06), 0 24px 83px rgba(0,0,0,.1)` | `--shadow-thd` |
| Carousel control | `0 4px 6.4px rgba(0,0,0,.03), 0 3px 9.6px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.07), 0 32px 96px rgba(0,0,0,.1)` | `--shadow-control` |
| Field inset | `rgb(221,222,225) 0 0 0 2px inset` | `--shadow-field` |
| Focus ring, armed | `rgb(163,195,241) 0 0 0 4.56px` | `--shadow-focus` |
| Focus ring, at rest | `rgba(0,0,0,0) 0 0 0 4.56px` | `--shadow-focus-rest` |
| Video bubble | `rgba(0,0,0,.2) 0 6px 6px 3px` | `--shadow-bubble` |

### Layout
- **Page max-width:** plates stop at 1248px (the quote figure's box) inside a 1920px header; the comparison table runs wider, at 1600px
- **Section gap:** 135.04px vertical, on more section and block carriers than any other step; 110.08px and 80px are the alternates
- **Card padding:** 135.04px on container plates, 80px on the elevated white card, 40.96px on the pastel cards
- **Element gap:** 16px is the default flex/grid gap; 24px, 32px and 80px separate columns and rows in the two- and three-up grids

## Components

### Global Header
**Role:** The persistent top bar — logo, five section links, and the two-CTA pair, identical on every captured page.
Built from `.NewHeader_header__F2I_f`: a `header` filled `#FFFFFF`, box 1920×90px, radius 0px, border none, shadow none, 16px/400/24px as its inherited type. It is the one element that runs true edge to edge — compare its 1920px box to the 1248px plates below — and it carries no border and no shadow, so the separation comes entirely from the ground changing beneath it. On the graphite pages the bar stays white, which is what makes the dark hero read as a deliberate switch rather than a theme.

### Nav Pill Link
**Role:** A section link in the header that behaves like a button without looking like one.
`.thd-button-xs.xl:thd-button-sm.thd-focus-thick.thd-focus-bg` measures two ways: as a `button` it is fill none, ink `#292A2E`, 16px/400/24px, padding 8px 16px, radius 9999px, border none, shadow none, box 84–123×40px; as an `a` the same values sit in a box of 83–109×37–40px. The pill radius is there at rest with no fill behind it, so hover and focus have somewhere to land without the geometry moving. Ink is graphite, not ink black — the header sits one step lighter than body copy.

### Primary Button
**Role:** The blue pill that asks for the signup, everywhere in the marketing flow.
`.thd-button-primary.w-content.md:mx-auto.thd-button-lg` — an `a` filled `#1868DB` with `#FFFFFF` ink, 16px/700, padding 16px 24px, radius 9999px, border none, shadow none, and the most-carried filled control in the capture. Bold at 16px is the only weight change between this and a nav link; the fill does the rest. It paints no shadow, which keeps it flat against plates that are already floating.

### Large Button, Three Fills
**Role:** The full-size pill used for secondary asks, editorial exits and download prompts.
One class, `.thd-button-primary.w-content.thd-button-lg.thd-body-sm`, measures three ways and the fill is the whole variant story. Blue: fill `#1868DB`, ink `#FFFFFF`, 16px/700/27.424px, padding 16px 24px, radius 9999px, shadow none, box 135–221×59px. Black: fill `#101214`, ink `#FFFFFF`, same type, padding and radius, box 175×59px — for pills sitting on a blue plate, where blue-on-blue would vanish. Tinted: fill `#E9F2FE`, ink `#000000`, 16px/700, padding 16px 24px, radius 9999px, shadow `rgba(0,0,0,0) 0px 0px 0px 4.56px`, box not measured. Only the tinted variant carries the 4.56px ring, transparent at rest so focus can colour it in without reflowing.

### Feature Plate, Blue
**Role:** The full-bleed brand band that carries a product claim and its screenshot side by side.
`.bg-thd-color-blue-70.grid.md:grid-cols-2.gap-4xl` — a `div` filled `#1868DB`, padding 135.04px on all four sides, radius 72px, border none, shadow none. The padding equals the page's own gutter, so the plate's interior column lines up with the text above and below rather than starting a new measure. White display type at 70px/72.03px sits on it; 72px is large enough to read as a shape, not a rounded rectangle.

### Security Plate, Black
**Role:** The single near-black band on the home page, used for the enterprise-security pitch.
`.bg-thd-color-black.p-fluid-sm.thd-container-plate.md:thd-rounded` — a `div` filled `#101214`, padding 80px top and 40.96px left, radius 72px, border none, shadow none. Same 72px corner as the blue plate but a tighter interior, so it reads as a quieter inset rather than a second hero. The surface hex is the exact ink the page sets body type in: the system inverts its own ink rather than introducing a new dark.

### Quote Figure, Navy
**Role:** The customer testimonial, set as display type with an avatar above it.
`.text-thd-color-white.bg-thd-color-blue-90.mx-auto.thd-rounded-st` — a `figure` filled `#123263`, padding 135.04px square, radius 72px, border none, shadow none, box 1248×543px, carrying the quote "Loom enables us to maximize our impact as a dist…". Its light twin, `.text-thd-color-black.bg-thd-color-blue-10.mx-auto.thd-rounded-st`, is the same geometry at box 1248×560px with an `#E9F2FE` fill. One figure, two grounds — navy for the dark pages, sky for the light ones.

### Pastel Feature Card
**Role:** The four-up row of soft tinted cards that break the blue monotony on the home page.
`.grow.bg-thd-color-blue-10.text-thd-color-black.thd-rounded-int` — a `div` filled `#E9F2FE`, padding 40.96px square, radius 44px, border none, shadow none, 32px internal gap. Its three siblings differ only in fill: `#EFFFD6`, `#F8EEFE`, `#FFF5D4`. All four keep ink black type, so the tint is atmosphere rather than semantics, and 44px marks them as nested — cards inside plates, never full-width.

### Elevated White Card
**Role:** The closing call-to-action panel that lifts off the pale blue footer ground.
`.thd-rounded-static.shadow-thd.max-w-screen-xl.px-fluid-sm` — a `div` filled `#FFFFFF`, padding 80px square, radius 72px, border none, shadow `rgba(0,0,0,.04) 0 2px 6px, rgba(0,0,0,.06) 0 5px 18px, rgba(0,0,0,.1) 0 24px 83px`. Among the box rows the census measures, this is the only fill that paints a shadow — every other panel separates by fill alone. Three layers ending in an 83px blur at 10%: ambient lift, not a drop.

### FAQ Disclosure
**Role:** The expandable question rows at the bottom of pricing.
`.bg-thd-color-blue-20.text-thd-color-black.thd-details.py-fluid-s` — a `details` filled `#CFE1FD`, padding 80px top and 0px left, radius 44px, border none, shadow none, box 1198×196px. Its `summary`, `.px-fluid-base.thd-summary.thd-focus-thick.thd-heading-xs`, sets the question at 27px/700/35.991px with padding 108px top and 40.96px left, the same 44px radius, no fill of its own, box 1198×252px. A closed row is a soft blue slab with no chrome — one step of tint above the canvas is the entire affordance.

### Comparison Table Cell
**Role:** One cell in the plan-by-plan feature matrix.
`.text-center.text-thd-color-black` — a `td` with no fill, 16px/400/24px, padding 8px 16px, radius 0px, `1px solid #E4E2E7` border, shadow none, box 320×41–65px, holding values like "Up to 50". The same class measures a second way with a `#F8F8F8` fill for the alternating column. This is where the system drops its radius vocabulary entirely — square corners, a visible grid of rules, fixed 320px columns — because a 1600px matrix has to be read, not admired.

### Enterprise Form
**Role:** The contact-sales capture form on the dark page.
The fields are `.mktoField.mktoTextField.mktoHasWidth.mktoRequired` — an `input` whose entire border is a shadow, `rgb(221,222,225) 0 0 0 2px inset`, with ink `#6C6F77`; radius, padding and box are not measured. Labels are `.mktoLabel.mktoHasWidth` at 13px/700/18.915px in `#7D818A`, the same overline step the marketing pages use for section labels. Submit is `.mktoButton` — a `button` filled `#1868DB`, `#FFFFFF` ink, 16px/700, padding 16px 32px, radius 9999px, shadow `rgb(163,195,241) 0 0 0 4.56px`: the widest horizontal padding on any control here, and the one ring painted in colour at rest.

## Do's and Don'ts

### Do
- Round every control to 9999px. The radius census counts 153 carriers at that value, led by `.thd-button-xs.xl:thd-button-sm.thd-focus-thick.thd-focus-bg`.
- Use 72px for plates that span the measure and 44px for anything nested inside them — `.bg-thd-color-black.p-fluid-sm.thd-container-plate.md:thd-rounded` against `.grow.bg-thd-color-blue-10.text-thd-color-black.thd-rounded-int`.
- Let 135.04px be both the vertical band rhythm and the horizontal gutter; it leads both lists.
- Put `#FFFFFF` type on the blue, navy, graphite and ink plates, `#101214` on white, sky and the pastels. There is no mid-tone ground.
- Reach for `#E9F2FE` when a second button stands beside the primary: `.ml-16.block.flex-shrink-0.thd-button-nav` pairs it with `#000000` ink.
- Set headings by size alone. `.text-thd-color-black.thd-max-2xl.thd-heading-lg.mb-md` at 70px and `.text-thd-color-black.thd-heading-xs.lg.lg:text-center` at 27px are the same weight.

### Don't
- Don't shadow a plate. Of the box rows the census measures, only `.thd-rounded-static.shadow-thd.max-w-screen-xl.px-fluid-sm` paints one; the rest separate by fill.
- Don't letter-space the display face. Every heading row reads `normal`, top to bottom.
- Don't add a second display weight. Charlie Display paints 700 at 90px, 70px, 48px, 35px and 27px alike.
- Don't make `#FF613D` a CTA. It is carried by `.thd-pulse.css-lei75u` and `.css-kxjlgc` as recording state, in text and in a 13% wash.
- Don't spread the `#E4E2E7` rule beyond the comparison matrix. Its 430 border observations are all `td`, `th` and `div` on the pricing page.
- Don't square a control or pill a table cell. The two vocabularies stay on their own sides of the system.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#E9F2FE` | The census's ground: footer band, interstitial sections, and the tinted pill fill |
| 1 | Plate | `#FFFFFF` | Header, light sections, the elevated card — the surface that reads as "page" |
| 2 | Tint | `#CFE1FD` | FAQ rows and the savings chip: one step up from canvas, borderless |
| 3 | Brand | `#1868DB` | The blue feature plate and every filled primary control |
| 4 | Deep | `#123263` | Quote figures and the AI plate, carrying white display type |
| 5 | Graphite | `#292A2E` | The dark section fill under the enterprise hero, and the 44×44 icon chip on the contact page |
| 6 | Ink | `#101214` | The black security plate and the black button variant |

## Elevation

Depth is a luminance step, not a shadow. Plates sit on the canvas by changing fill — white on sky, blue on white, navy on graphite — and the box census gives almost all of them `shadow none`; `.thd-rounded-static.shadow-thd.max-w-screen-xl.px-fluid-sm` is the exception, with the three-layer `--thd-shadow` stack ending in a 24px/83px blur at 10%. Where shadow does appear it is on media and controls: the 12px product thumbnails take the same stack, the carousel arrows a four-layer one reaching 0 32px 96px, the webcam bubbles a hard `rgba(0,0,0,.2) 0 6px 6px 3px`. Focus is its own layer — a 4.56px ring held at `rgba(0,0,0,0)` until armed, then `rgb(163,195,241)` on the form's submit. Borders are scarce enough to be structural news: 1px `#E4E2E7` on the pricing matrix, 1px `#F1F0F3` on a bordered pricing panel, `#8FB8F6` around the highlighted plan header.

## Imagery

Photography is warm and specific — people at desks, on calls, mid-record — always inside a rounded frame: 72px on plate-scale figures, 44px on nested media, 12px on product thumbnails, 50% on the webcam bubbles that overlap the UI. The second mode is flat product illustration — work items, meeting recaps, calendars — drawn in the system's own blues and greys and scaled up so the UI reads as a prop, not a screenshot. Customer logos sit as flat grey lockups in a scrolling row, low-contrast against both the white and the graphite ground. The recurring gesture is the webcam circle laid over a rectangle: the corner vocabulary restated at object scale.

## Layout

The header runs full-bleed at 1920×90px; everything below it is contained. Plates stop at 1248px, FAQ rows at 1198px, and the pricing matrix breaks wider at 1600px with fixed 320px cells. The side gutter and the vertical band rhythm are the same number, 135.04px, with 110.08px and 80px as quieter alternates and 48px on the contact page. Sections stack as full-width bands, each holding one plate; inside a plate the grid is two-up (`.grid.lg:grid-cols-2.items-center.justify-stretch`, 80px gap) or three-up (`.max-w-screen-sm.lg:max-w-screen-2xl.grid.lg:grid-cols-3`, 24px row and 80px column), never denser. Two page systems share this skeleton: home and pricing on the light ground, enterprise and contact-sales opening on graphite with white display type. The enterprise page returns to the pale blue footer; the contact page holds its dark ground down to the white bottom bar. Nav is one row of ghost pills with the blue and tinted CTAs anchored right, 16px apart.

## Typography Voice

Two modes, and they never overlap. Charlie Display exists only in 700 and only for headings, and the leading compresses as the size grows — 1.33 at 27px, 1.27 at 35px, 1.14 at 48px, 1.03 at 70px, exactly 1.0 at 90px. That is the signature move: at hero scale the lines set solid, so a two-line headline reads as one block of shape, while a 27px card title keeps enough air to scan. Charlie Text opens back up — 1.5 at 16px, 1.65 at 19px, 1.71 on the 16px/27.424px link and button step. Bold in the text face is rationed to three jobs: buttons, the 13px overline (`.thd-overline.mb-fixed-md`), and a byline like "Andrew Reynolds". Tracking is left alone almost everywhere; the row that pulls tight is an 18px white text-button on the enterprise page. Every heading is the same voice at a different volume, and the body never raises its own.

## Agent Prompt Guide

## Quick Color Reference
- background: `#E9F2FE`
- text: `#101214`
- surface: `#FFFFFF`
- border: `#E4E2E7`
- accent: `#FF613D`
- primary action: `#1868DB`

## Example Component Prompts

1. **Primary pill button**: Build an anchor-styled button with background `#1868DB`, text `#FFFFFF`, Charlie Text 16px/700 with 27.424px line height, padding 16px 24px, border-radius 9999px, no border, no shadow. Width fits content. Label: "Get Loom for free".
2. **Feature plate**: Build a full-measure two-column section, background `#1868DB`, border-radius 72px, padding 135.04px on all sides, 80px column gap. Left column holds a product screenshot at 12px radius with shadow `0 2px 6px rgba(0,0,0,.04), 0 5px 18px rgba(0,0,0,.06), 0 24px 83px rgba(0,0,0,.1)`; right column holds a 13px/700/18.915px overline in `#FFFFFF`, a Charlie Display heading at 70px/72.03px/700 in `#FFFFFF`, body copy at 19px/31.293px/400, and a black pill button (`#101214` fill, `#FFFFFF` text, 16px/700, padding 16px 24px, radius 9999px).
3. **Pastel card row**: Build a four-up flex row with 32px gaps. Each card: border-radius 44px, padding 40.96px, no border, no shadow, ink `#101214`. Fills in order `#E9F2FE`, `#EFFFD6`, `#F8EEFE`, `#FFF5D4`. Each card holds a 44×44px circular icon chip at radius 9999px filled with the card's own tint, a 27px/700/35.991px title and 16px/400/24px body.
4. **FAQ disclosure**: Build a `details` element filled `#CFE1FD`, border-radius 44px, padding-top 80px, no border, no shadow, 1198px wide. The `summary` sets the question in Charlie Display 27px/700/35.991px, padding 108px top and 40.96px left, same 44px radius, no fill, no chevron border. Answer copy sets at 16px/400/24px in `#101214`.
5. **Sticky header**: Build a 1920×90px `header` filled `#FFFFFF`, radius 0, no border, no shadow. Left: wordmark. Right: five ghost pill links — no fill, ink `#292A2E`, 16px/400/24px, padding 8px 16px, radius 9999px — then a `#1868DB` pill with `#FFFFFF` text at 16px/400/27.424px, padding 8px 16px, 163×48px, and a `#E9F2FE` pill with `#000000` text at the same type and padding, 136×48px, carrying a transparent 4.56px focus ring. Gap between items: 16px.

## Similar Brands

- **Atlassian** — the same pill-first control language and blue-on-white marketing surface, product illustration standing in for photography.
- **Intercom** — soft-cornered plates in saturated brand colour, pastel tint cards, headline scale doing the work a second weight would do elsewhere.
- **Linear** — the inverse discipline: one accent, near-zero shadow, depth read off surface luminance steps.
- **Slack** — a pastel palette used as atmosphere rather than semantics, with warm photography inside rounded frames.
- **Notion** — restrained borders, generous section padding, one type family where hierarchy is size, not decoration.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #101214;
  --color-grey-100: #292A2E;
  --color-grey-70: #6C6F77;
  --color-grey-60: #7D818A;
  --color-grey-10: #F8F8F8;
  --color-grey-light-border: #E4E2E7;
  --color-border-grey: #F1F0F3;
  --color-grey-mid: #999999;
  --color-white: #FFFFFF;
  --color-pure-black: #000000;
  --color-blue-10: #E9F2FE;
  --color-blue-20: #CFE1FD;
  --color-blue-30: #8FB8F6;
  --color-blue-70: #1868DB;
  --color-blue-80: #1558BC;
  --color-blue-90: #123263;
  --color-violet-10: #F8EEFE;
  --color-violet-20: #EED7FC;
  --color-violet-80: #803FA5;
  --color-green-10: #EFFFD6;
  --color-green-50: #82B536;
  --color-yellow-10: #FFF5D4;
  --color-record: #FF613D;
  --color-record-20: rgba(255, 97, 61, 0.13);
  --gradient-plate: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #E9F2FE 50%, #E9F2FE 100%);

  /* Typography — Families */
  --font-display: 'Charlie Display', 'Figtree', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Charlie Text', 'Figtree', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Typography — Scale */
  --text-display-xl: 90px;   --leading-display-xl: 90px;
  --text-display-lg: 70px;   --leading-display-lg: 72.03px;
  --text-display-md: 48px;   --leading-display-md: 54.864px;
  --text-display-sm: 35px;   --leading-display-sm: 44.555px;
  --text-display-xs: 27px;   --leading-display-xs: 35.991px;
  --text-body-lg: 28px;      --leading-body-lg: 42.672px;
  --text-body-md: 19px;      --leading-body-md: 31.293px;
  --text-body-sm: 16px;      --leading-body-sm: 24px;
  --text-label: 16px;        --leading-label: 27.424px;
  --text-caption: 13px;      --leading-caption: 18.915px;
  --tracking-normal: normal;
  --tracking-tight: -0.18px;

  /* Spacing */
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-fluid-xs: 40.96px;
  --spacing-fluid-sm: 53.77px;
  --spacing-xl: 64px;
  --spacing-2xl: 80px;
  --spacing-fluid-md: 110.08px;
  --spacing-fluid-lg: 135.04px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-plate: 72px;
  --radius-card: 44px;
  --radius-media: 24px;
  --radius-thumb: 12px;
  --radius-chip: 8px;
  --radius-control: 6px;
  --radius-bubble: 50%;
  --radius-skip: 0px 0px 24px 24px;
  --radius-cell: 0px;

  /* Shadows */
  --shadow-thd: 0 2px 6px rgba(0,0,0,.04), 0 5px 18px rgba(0,0,0,.06), 0 24px 83px rgba(0,0,0,.1);
  --shadow-control: 0 4px 6.4px rgba(0,0,0,.03), 0 3px 9.6px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.07), 0 32px 96px rgba(0,0,0,.1);
  --shadow-field: rgb(221,222,225) 0 0 0 2px inset;
  --shadow-focus: rgb(163,195,241) 0 0 0 4.56px;
  --shadow-focus-rest: rgba(0,0,0,0) 0 0 0 4.56px;
  --shadow-bubble: rgba(0,0,0,.2) 0 6px 6px 3px;
}
```

### Tailwind v4
```css
@theme {
  --color-black: #101214;
  --color-grey-100: #292A2E;
  --color-grey-70: #6C6F77;
  --color-grey-60: #7D818A;
  --color-grey-10: #F8F8F8;
  --color-grey-light-border: #E4E2E7;
  --color-border-grey: #F1F0F3;
  --color-grey-mid: #999999;
  --color-white: #FFFFFF;
  --color-pure-black: #000000;
  --color-blue-10: #E9F2FE;
  --color-blue-20: #CFE1FD;
  --color-blue-30: #8FB8F6;
  --color-blue-70: #1868DB;
  --color-blue-80: #1558BC;
  --color-blue-90: #123263;
  --color-violet-10: #F8EEFE;
  --color-violet-20: #EED7FC;
  --color-violet-80: #803FA5;
  --color-green-10: #EFFFD6;
  --color-green-50: #82B536;
  --color-yellow-10: #FFF5D4;
  --color-record: #FF613D;
  --color-record-20: rgba(255, 97, 61, 0.13);

  --font-display: 'Charlie Display', 'Figtree', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Charlie Text', 'Figtree', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display-xl: 90px;   --text-display-xl--line-height: 90px;
  --text-display-lg: 70px;   --text-display-lg--line-height: 72.03px;
  --text-display-md: 48px;   --text-display-md--line-height: 54.864px;
  --text-display-sm: 35px;   --text-display-sm--line-height: 44.555px;
  --text-display-xs: 27px;   --text-display-xs--line-height: 35.991px;
  --text-body-lg: 28px;      --text-body-lg--line-height: 42.672px;
  --text-body-md: 19px;      --text-body-md--line-height: 31.293px;
  --text-body-sm: 16px;      --text-body-sm--line-height: 24px;
  --text-label: 16px;        --text-label--line-height: 27.424px;
  --text-caption: 13px;      --text-caption--line-height: 18.915px;
  --tracking-tight: -0.18px;

  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-fluid-xs: 40.96px;
  --spacing-fluid-sm: 53.77px;
  --spacing-xl: 64px;
  --spacing-2xl: 80px;
  --spacing-fluid-md: 110.08px;
  --spacing-fluid-lg: 135.04px;

  --radius-pill: 9999px;
  --radius-plate: 72px;
  --radius-card: 44px;
  --radius-media: 24px;
  --radius-thumb: 12px;
  --radius-chip: 8px;
  --radius-control: 6px;
  --radius-bubble: 50%;
  --radius-cell: 0px;

  --shadow-thd: 0 2px 6px rgba(0,0,0,.04), 0 5px 18px rgba(0,0,0,.06), 0 24px 83px rgba(0,0,0,.1);
  --shadow-control: 0 4px 6.4px rgba(0,0,0,.03), 0 3px 9.6px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.07), 0 32px 96px rgba(0,0,0,.1);
  --shadow-field: rgb(221,222,225) 0 0 0 2px inset;
  --shadow-focus: rgb(163,195,241) 0 0 0 4.56px;
  --shadow-focus-rest: rgba(0,0,0,0) 0 0 0 4.56px;
  --shadow-bubble: rgba(0,0,0,.2) 0 6px 6px 3px;
}
```