Two systems in one product, and the split is the point: the marketing site is Atlassian-era brand warmth — a white canvas cut by full-bleed lilac and ice-blue bands, Charlie Display at 700 with normal tracking and a 1.0 line-height, every control a 9999px pill at 48-59px, and depth from four-stop shadows ending in a 96px blur. The logged-in library drops all of it for a quiet Atlassian Design System shell where the canvas, rail and cards are all white and separated only by an inset 1px ring, everything is 14px Atlassian Sans, and controls are 36px rounded rects. Signature moment: the recording mockup with a circular webcam bubble ringed in a 5px white halo.
Browse Loom in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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).
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.
| 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.
"Charlie Display", -apple-system, system-ui, sans-serif — geometric-humanist, rounded terminals."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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: loom.com/looms/videos (logged-in library, live DOM + computed styles), 2026-07-19. Coverage: library shell — left rail, search bar, header, tabs, folder + video card grid, filter row. Editor/recorder surfaces: not captured. Responsive: not captured.
The logged-in app is a different system from the marketing site and should never be styled from it. Where marketing is Charlie Display 700 on pastel bands with 59px pills, the app is plain Atlassian Sans at 14px on an all-white canvas with 8px rounded-rect controls at 32–36px tall. It is an Atlassian Design System shell: a narrow 90px icon rail on the left, a centred search field across the top, and a content column of cards. Colour is almost entirely absent — one blue #1868db for the primary button and the active-tab underline, everything else a four-step grey ladder. Borders are drawn as inset 1px rings rather than real borders, so nothing changes size on hover. The only chroma in the grid comes from user avatars and video thumbnails.
Feels: quiet, dense, utilitarian, enterprise-neat.
| Token | Hex | Role / usage |
|---|---|---|
| body | #292a2e | Primary text, card titles, active tab |
| subtle | #505258 | Icon glyphs, filter-pill labels |
| dimmed | #6b6e76 | Metadata, idle tab labels, counts |
| disabled/faint | #e2e3e4 | Empty thumbnail fill, dividers |
| inverse | #ffffff | Text on blue |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page, rail and card background alike |
| border ring | rgba(11,18,14,.14) | Card / control ring, applied as inset 0 0 0 1px |
| form field ring | #8c8f97 | Input ring, applied as inset 0 0 0 1px |
| record surface | #040f21 | Deep navy record affordance at rail bottom |
| Token | Hex | Role / usage |
|---|---|---|
| primary | #1868db | Primary buttons, active tab underline, links |
| primaryHover | #1558bc | Primary hover, visited link |
Rules: the app canvas, the rail and the cards are all #ffffff — separation comes from the inset ring, not a fill change. Blue appears at most twice per screen.
"Atlassian Sans", -apple-system, system-ui, sans-serif. No display face, no mono observed.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Page title (h1) | 32/36 px | 653 (variable) | -0.5px |
| Body / card title | 14/21.98 px | 400 | normal |
| Button label | 14/21.98 px | 500 | normal |
| Tab label | 14 px | 500 | normal |
| Metadata / count | 14 px | 400 | normal |
| Breadcrumb | 14 px | 400 | normal |
Patterns: 14px is the whole app. The only size escape is the 32px page title, which uses a variable weight of 653 (not 600 or 700) and the only negative tracking on the surface. Emphasis is weight 500, never bold.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.