Loom

Reference it for

• Charlie Text + Charlie Display (Atlassian's bespoke variable family). The most-distributed enterprise typeface in 2026 — visible across Jira, Confluence, Bitbucket. Worth tracking as a reference benchmark for "what enterprise SaaS typography looks like now."
• A single saturated blue CTA (#1868db) doing every conversion moment, on a white page.
• Hero screenshot/video thumbnail at full width with a play button overlay — show ONE video at presentation scale.
• Tiny StandardHeroAccent_* component-scoped keyframes (button, cursor, desktop, opacity, window) — micro-animations on the simulated screen-recorder UI in the hero.
• Atlassian's 3-layer text scale (#1a1a20 / #101214 / #000000) — three near-blacks for typographic depth. Most sites use one ink colour; Loom uses three.
• 0.1s cubic-bezier(0.4, 0, 1, 1) snap transition on the comprehensive Tailwind-style shorthand (color, bg, border, opacity, box-shadow, transform, filter, backdrop-filter) — instantaneous-feeling hover state.
• 11 distinct box-shadow values — Loom uses elevation more than any other site in the library so far. Justified by the screen-recorder visual metaphor (windows, screens, dialogs).
• A 1600px content cap with 619/394/490px secondary widths.

Do not copy

• Charlie Text / Charlie Display — Atlassian-licensed, not licensable to third parties.
• The exact Atlassian-blue #1868db — strongly Atlassian-coded after the rebrand.
• 142 scripts on the page — way too heavy. Enterprise compliance stack (Atlassian APIs + OneTrust + Marketo + multiple analytics).
• 24 @font-face declarations for what's essentially Charlie + system fallbacks — Next.js auto-bundle artefact.
• The "ATLASSIAN Loom" lockup unless the client is also acquired by Atlassian.
• 11 distinct box-shadows on a Jiffi build — too much elevation vocabulary. Pick 2-3.
• The hashed CSS Modules class names — fine for build artefacts but not human-readable.