# Loom — Marketing site Design Spec

> Source: loom.com (live DOM, computed styles + published `--lns-*` token set), 2026-07-19.
> Coverage: home, /screen-recorder. Responsive: breakpoints not captured (type is fluid-clamped).

## 1. Visual Theme & Atmosphere

Loom now reads as an **Atlassian brand property**: the wordmark is locked to the Atlassian mark, the typefaces are Atlassian's Charlie family, and the accent is Atlassian blue. Against that corporate spine it stays warm and consumer-friendly — a white canvas broken by wide pastel bands (a lilac `#f8eefe` and an ice-blue `#e9f2fe`) with a couple of deep plum `#48245d` sections for contrast. Everything is a **pill**: nav links, both CTAs, tags. Charlie Display at 700 sets very large, tightly-leaded headlines with *normal* tracking — no negative-tracking hero trick. The signature moment is the product mockup: a laptop screen recording with a **circular webcam bubble** overlapping its corner, floating on a soft multi-layer shadow. It deliberately avoids dark canvases, hairline-grid dev-tool chrome, and any second accent hue.

Feels: friendly, bright, corporate-warm, rounded.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| `--lns-color-body` | `#292a2e` | Body copy, nav links |
| (heading ink) | `#101214` | h1/h2/h3 display ink (darker than body) |
| `--lns-color-bodyDimmed` | `#6b6e76` | Secondary / caption text |
| `--lns-color-bodyInverse` | `#ffffff` | Text on blue and plum |

| Token | Hex | Role / usage |
|---|---|---|
| `--lns-color-background` | `#ffffff` | Page canvas |
| `--lns-color-backgroundSecondary` | `#f8f8f8` | Neutral inset panels |
| `--lns-color-upgrade` | `#f8eefe` | **Lilac section band** (also discoveryLightBackground) |
| (band) | `#e9f2fe` | **Ice-blue section band** + secondary button fill |
| `--lns-color-overlayHover` | `#f0f1f2` | Menu / overlay hover |
| `--lns-color-overlayActive` | `#dddee1` | Menu / overlay pressed |
| `--lns-color-backgroundInverse` | `#292a2e` | Inverse chips |
| (plum) | `#48245d` | Deep plum feature section |
| (plum-deep) | `#35243f` | Darkest plum section |
| `--lns-color-border` | `#0b120e24` | Hairlines (alpha-hex, ~14%) |
| `--lns-color-formFieldBorder` | `#8c8f97` | Input border (rendered as 1px **inset** ring) |

| Token | Hex | Role / usage |
|---|---|---|
| `--lns-color-primary` | `#1868db` | The one accent — CTAs, links |
| `--lns-color-primaryHover` | `#1558bc` | Primary hover |
| `--lns-color-primaryActive` | `#144794` | Primary pressed |
| `--lns-color-focusRing` | `#4688ec` | Focus ring colour |
| `--lns-color-upgradeActive` | `#e3bdfa` | Upgrade / discovery pressed |
| `--lns-color-discoveryBackground` | `#964ac0` | Discovery purple (from `hsla(278.6,48.4%,52.2%)`) |

| Token | Hex | Role / usage |
|---|---|---|
| `--lns-color-success` | `#1f845a` | Success |
| `--lns-color-warning` | `#fbc828` | Warning |
| `--lns-color-danger` | `#c9372c` | Error / destructive |
| `--lns-color-dangerHover` | `#ae2e24` | Destructive hover |
| `--lns-color-record` | `#ff5129` | **Record** state only (from `hsla(11.2,100%,58%)`) |

Rules: `#1868db` is the only accent that appears in chrome — pastel bands are backgrounds, never fills for controls. `#ff5129` is reserved exclusively for the record affordance.

## 3. Typography Rules

- Display: `"Charlie Display", -apple-system, system-ui, sans-serif` — geometric-humanist, rounded terminals.
- Text/UI: `"Charlie Text", -apple-system, system-ui, sans-serif`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 (fluid) | 85.6/85.6 px (1.00 line) | 700 | normal |
| Section h2 | 66.3/68.2 px | 700 | normal |
| Sub-section h3 | 45.9/52.4 px | 700 | normal |
| Hero sub | 27.3/41.5 px | 400 | normal |
| Body | 16/24 px | 400 | normal |
| Nav link | 16/24 px | 400 | normal |
| Button label | 15.8/27.1 px | 700 | normal |

Patterns: headings are Charlie **Display 700 only** — no 500/600 step. Line-height at hero is exactly 1.0. Tracking is `normal` at every size (do not add negative tracking). Sizes are fluid/viewport-clamped, so treat them as ratios.

## 4. Component Stylings

- **Primary button** — bg `#1868db`, text `#ffffff` at 700/15.8px, `border-radius:9999px`, height 59px, padding `15.8px 23.7px`; hover `#1558bc`, active `#144794`; transition `transform .1s ease-in-out, background-color .1s ease-in-out`.
- **Secondary button** — bg `#e9f2fe`, dark text, same 9999px pill, height 48px, padding `7.9px 15.8px`. Used for "Contact Sales" / "Install Chrome Extension" (often with a leading icon).
- **Nav link** — treated as a pill: `border-radius:9999px`, height 40px, padding `8px 16px`, transparent fill, Charlie Text 16/24 w400; hover fills `#0515240f`.
- **Focus ring** — `box-shadow: 0 0 0 4.5px` in `#4688ec` (transparent at rest, so the ring never shifts layout).
- **Card** — `border-radius:12px`, white, no border; depth comes from shadow only (see §6).
- **Avatar / bubble** — `border-radius:50%`; the hero webcam bubble carries `box-shadow: 0 0 0 5px rgba(255,255,255,.4)` — a white halo ring, not a border.
- **Input** — 1px `#8c8f97` rendered as `inset 0 0 0 1px`, radius 8px, height 36px.

## 5. Layout Principles

Container max-widths: `1600px` outer, `1280px` content, ~`1078px` for text columns. Hero is centered, single column: h1 → sub (max ~2 lines) → CTA row → full-width product mockup. Sections alternate white / lilac `#f8eefe` / ice-blue `#e9f2fe` / plum `#48245d` as full-bleed bands, with the band edge sometimes set by a hard-stop gradient (`linear-gradient(#fff 0, #fff 55%, #e9f2fe 55%, #e9f2fe 100%)`) so a mockup can straddle two colours. Nav is a 90px full-width bar: logo left, links centered, two pill CTAs right.

## 6. Depth & Elevation

Radius scale: `9999px` (all controls, nav links, tags) · `12px` (cards) · `50%` (avatars / webcam bubble) · large decorative radii (44–70px) on illustration frames.

Shadow recipes (verbatim):

- Hero mockup — `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,.10)`
- Floating card — `0 2px 6px rgba(0,0,0,.04), 0 5px 18px rgba(0,0,0,.06), 0 24px 83px rgba(0,0,0,.10)`
- Halo ring — `0 0 0 5px rgba(255,255,255,.4)`
- Focus — `0 0 0 4.5px #4688ec`

Philosophy: **shadow over border**. Four-stop shadows with a very long final blur (83–96px) do the lifting; hairlines are rare and always the alpha `#0b120e24`.

## 7. Motion

Buttons transition `transform` and `background-color` at **0.1s ease-in-out** — a press-scale plus fill change, nothing else. Colour/border/shadow transitions elsewhere are the same 0.1s band. No scroll-linked animation, parallax, or entrance keyframes observed; the motion in the page comes from autoplaying product video, not from CSS.

## 8. Backgrounds, Effects & WebGL

No WebGL, canvas, or backdrop-filter observed. Two gradient uses only: a hard-stop two-colour band gradient to split a section background, and a faint `linear-gradient(rgba(0,0,0,.07), rgba(0,0,0,0))` scrim over media. Otherwise flat solid fills. Depth is photographic — real product screenshots and cut-out portrait photography on the pastel bands.

## 9. Do's and Don'ts

### Do
- Use exactly one accent, `#1868db`, and let the pastel bands (`#f8eefe`, `#e9f2fe`) carry the colour.
- Make every control a full pill (`9999px`), 48–59px tall.
- Set headings in Charlie Display **700** with `normal` tracking and ~1.0 line-height at display sizes.
- Lift surfaces with multi-stop, very-soft, very-large-blur shadows instead of borders.
- Include the circular webcam bubble with its white halo ring when depicting a recording.
- Keep body copy `#292a2e` and headings the darker `#101214`.

### Don't
- Don't put the page on a dark canvas — plum sections are accents, not the base.
- Don't add negative letter-spacing to headings.
- Don't use rounded-rect (8–12px) buttons; the marketing site is pills only.
- Don't use `#ff5129` for anything but a record affordance.
- Don't introduce a second accent hue or a gradient CTA.

## 10. Responsive Behavior

Not captured directly; type is fluid (heading sizes resolve to non-integer px, e.g. 85.5577px), so the scale shrinks continuously rather than at breakpoints. Container caps at 1600px.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#292a2e` · Heading `#101214` · Muted `#6b6e76` · Border `#0b120e24` · Accent `#1868db`
- Font: Charlie Display 700 / Charlie Text 400 · Body: 16px · Radius: 9999px control / 12px card · Control height: 48–59px
- Focus: `0 0 0 4.5px #4688ec` · Hover fill: `#1558bc` (primary), `#0515240f` (ghost)

<loom_design_language>
Bright, friendly, Atlassian-corporate-warm. White `#ffffff` canvas broken by full-bleed pastel bands — lilac `#f8eefe` and ice-blue `#e9f2fe` — with occasional deep plum `#48245d` sections. Headings in Charlie Display 700, `normal` tracking, ~1.0 line-height, ink `#101214`; body Charlie Text 400 16/24 in `#292a2e`, muted `#6b6e76`. One accent only: Atlassian blue `#1868db` (hover `#1558bc`, active `#144794`); secondary buttons are `#e9f2fe` fills. Every control is a full pill `border-radius:9999px` at 48–59px tall; cards are 12px. Depth is shadow-only — four-stop soft shadows ending in an 83–96px blur — with rare `#0b120e24` hairlines. Focus is `0 0 0 4.5px #4688ec`. Motion is minimal: `transform` + `background-color` at 0.1s ease-in-out. Signature: a product screen recording with a circular webcam bubble ringed in `0 0 0 5px rgba(255,255,255,.4)`. Feels: friendly, bright, corporate-warm, rounded. Avoid: dark canvases, negative heading tracking, rounded-rect buttons, a second accent hue, gradient CTAs.
</loom_design_language>