--- version: alpha name: Loom-design-analysis description: A bright, video-first marketing interface on white canvas anchored by a saturated electric-blue CTA (#1868db) rendered as fully-rounded pill buttons and Atlassian's custom Charlie typeface set. The system reads as friendly, modern productivity SaaS — bold black Charlie Display headlines, oversized rounded video/product cards, a colorful pastel use-case grid, and a near-black "keep your content safe" card that anchors the lower page. Brand voltage comes from the heavy display headlines, the pill-shaped blue CTA, and product UI shown inside generously-rounded cards. colors: primary: "#1868db" primary-deep: "#1558bc" primary-navy: "#123263" ink: "#101214" ink-soft: "#292a2e" muted: "#7d818a" canvas: "#ffffff" surface-dark: "#101214" surface-blue-soft: "#e9f2fe" surface-blue-faint: "#eff0ff" accent-purple: "#bf63f3" accent-purple-soft: "#c97cf4" accent-purple-deep: "#48245d" surface-purple-soft: "#f8eefe" surface-purple-faint: "#eed7fc" accent-orange: "#ff613d" accent-orange-soft: "#dc684d" accent-gold: "#ffa900" accent-green: "#82b536" accent-green-soft: "#94c748" surface-green-faint: "#efffd6" on-primary: "#ffffff" typography: display-xl: fontFamily: "Charlie Display, Inter, sans-serif" fontSize: 63px fontWeight: 700 lineHeight: 1.03 letterSpacing: normal display-lg: fontFamily: "Charlie Display, Inter, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.14 letterSpacing: normal display-md: fontFamily: "Charlie Display, Inter, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.27 letterSpacing: normal body-lg: fontFamily: "Charlie Text, Inter, sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 1.52 letterSpacing: normal button: fontFamily: "Charlie Text, Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: normal eyebrow: fontFamily: "Charlie Text, Inter, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.46 letterSpacing: normal rounded: sm: 6px md: 8px lg: 12px xl: 16px blob: 42px blob-lg: 69px full: 9999px spacing: xxs: 6px xs: 8px sm: 16px md: 24px lg: 36px xl: 48px xxl: 64px section: 71px section-lg: 91px components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" padding: 16px 24px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 8px 16px button-primary-active: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" button-secondary: backgroundColor: "{colors.surface-blue-faint}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 8px 16px button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 8px 16px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" nav-link: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.button}" video-player-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" rounded: "{rounded.xl}" feature-banner-blue: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.blob-lg}" padding: 48px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.blob}" padding: 48px product-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px use-case-card-green: backgroundColor: "{colors.surface-green-faint}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.xl}" padding: 24px use-case-card-purple: backgroundColor: "{colors.surface-purple-soft}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.xl}" padding: 24px use-case-card-blue: backgroundColor: "{colors.surface-blue-soft}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.xl}" padding: 24px eyebrow-label: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.eyebrow}" --- ## Overview Loom's marketing surface (now part of Atlassian) is a bright, video-first modern-SaaS interface built on white canvas (`{colors.canvas}` — #ffffff) with a single saturated electric-blue CTA (`{colors.primary}` — #1868db). The headline voice is heavy: **Charlie Display** at weight 700 sets bold black hero type ("One video is worth a thousand words"), while **Charlie Text** carries the running copy. The system reads as friendly, confident, and product-forward — the hero shows the actual Loom player inside a rounded card rather than a marketing illustration. The most distinctive shape signal is the **pill** — buttons render as fully-rounded `{rounded.full}` pills, and content cards use unusually large corner radii (`{rounded.blob}` 42px and `{rounded.blob-lg}` 69px). This generous rounding is the brand's geometric signature; nothing in the system uses tight corners. Color voltage is monochrome at the action layer (one blue CTA) but expands into a **pastel palette** lower on the page, where use-case cards take soft green (`{colors.surface-green-faint}`), purple (`{colors.surface-purple-soft}`), and blue (`{colors.surface-blue-soft}`) fills. A near-black card (`{colors.surface-dark}` — #101214) for "Keep your content safe" anchors the lower page — the only dark surface in the body. **Key Characteristics:** - White canvas with a single saturated electric-blue CTA (`{colors.primary}` — #1868db) rendered as a fully-rounded pill (`{rounded.full}`). Press state derived as `{colors.primary-deep}` (#1558bc). - Custom **Charlie Display** headlines at weight 700 (substituted with Inter weight 700 here). Heavy, bold, black headline voice. - **Charlie Text** for body, buttons, and eyebrow labels — Charlie Text at weight 400 for copy, 700 for small eyebrow labels. - Generously-rounded cards — `{rounded.blob}` (42px) and `{rounded.blob-lg}` (69px) on hero/feature/dark cards; the large radius is the brand's shape signature. - Product UI shown directly inside cards — the hero video player, the AI bug-report panel, and the timeline mockups are real product chrome shown at small scale, not illustrations. - A pastel use-case grid lower on the page — soft green / purple / blue card fills (`{colors.surface-green-faint}`, `{colors.surface-purple-soft}`, `{colors.surface-blue-soft}`) provide chromatic flourish without touching the CTA layer. - One dark card (`{colors.surface-dark}` — #101214) anchors the "Keep your content safe" band — the only dark surface in the body. - Spacing rhythm leans on `{spacing.lg}` (36px) and `{spacing.section}` (71px) between bands. ## Colors ### Brand & Action - **Primary** (`{colors.primary}` — #1868db): The single saturated CTA color. Every primary action — "Get Loom for free", "Download now", "Join us" — uses this blue. Press state derived as `{colors.primary-deep}` (#1558bc). - **Primary Navy** (`{colors.primary-navy}` — #123263): A deep navy used in dark product-chrome accents and gradients inside mockups. - **On Primary** (`{colors.on-primary}` — #ffffff): Text/icons on the blue CTA. ### Text - **Ink** (`{colors.ink}` — #101214): All headlines and primary text — a near-black. - **Ink Soft** (`{colors.ink-soft}` — #292a2e): A slightly softer near-black measured as the default button label color; used on light pill buttons and dense UI text. - **Muted** (`{colors.muted}` — #7d818a): Secondary text and inactive nav links. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): The default page floor. - **Surface Dark** (`{colors.surface-dark}` — #101214): The "Keep your content safe" card and the hero video-player frame — the only dark surfaces in the body. - **Surface Blue Soft** (`{colors.surface-blue-soft}` — #e9f2fe) and **Surface Blue Faint** (`{colors.surface-blue-faint}` — #eff0ff): Light-blue card fills and the secondary button background. ### Pastel Accent Set Used on the use-case card grid and small product-UI flourishes — never on CTAs: - **Purple family:** `{colors.accent-purple}` (#bf63f3), `{colors.accent-purple-soft}` (#c97cf4), `{colors.accent-purple-deep}` (#48245d), `{colors.surface-purple-soft}` (#f8eefe), `{colors.surface-purple-faint}` (#eed7fc). - **Orange family:** `{colors.accent-orange}` (#ff613d), `{colors.accent-orange-soft}` (#dc684d). - **Green family:** `{colors.accent-green}` (#82b536), `{colors.accent-green-soft}` (#94c748), `{colors.surface-green-faint}` (#efffd6). - **Gold:** `{colors.accent-gold}` (#ffa900). These pastels appear as soft card fills and inside the embedded product mockups. The brand voice stays monochrome-blue at the action layer; the pastels are decorative emphasis lower in the page. ## Typography ### Font Family The system runs **Charlie Display** for headlines and **Charlie Text** for body and UI. Both are Atlassian's proprietary typeface family — Charlie is custom and not freely licensable, so the fallback stack walks `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. Charlie Display is used at weight 700 for h1/h2/h3; Charlie Text handles body copy (400) and small eyebrow labels (700). ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 63px | 700 | 1.03 | normal | Hero h1 ("One video is worth a thousand words") — Charlie Display | | `{typography.display-lg}` | 44px | 700 | 1.14 | normal | Section heads ("The easiest screen recorder you'll ever use") — Charlie Display | | `{typography.display-md}` | 32px | 700 | 1.27 | normal | Sub-section heads, card titles ("Ship faster with AI bug reports") — Charlie Display | | `{typography.body-lg}` | 26px | 400 | 1.52 | normal | Hero sub-headline and large running copy — Charlie Text | | `{typography.button}` | 16px | 400 | 1.5 | normal | Button labels, nav links — Charlie Text | | `{typography.eyebrow}` | 13px | 700 | 1.46 | normal | Small eyebrow labels, use-case card titles, fine labels — Charlie Text 700 | ### Principles Charlie Display at weight 700 is the brand voice — every display headline is heavy and black. Charlie Text carries everything else, mostly at weight 400 with the exception of the small bold eyebrow labels. The boundary is strict: headlines are Display, copy is Text. The hero sub-headline runs unusually large (26px) — Loom uses big readable supporting copy rather than fine print under its headlines. ### Note on Font Substitutes **Charlie Display** and **Charlie Text** are Atlassian's proprietary brand typefaces and are not available as open web fonts. **Inter** is the recommended substitute — Inter weight 700 for the display roles and Inter weight 400/700 for Charlie Text. **Manrope** weight 700 is an alternate display substitute that better matches Charlie Display's slightly rounded, friendly geometry. Never claim to ship Charlie. ## Layout ### Spacing System - **Tokens:** `{spacing.xxs}` 6px · `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.md}` 24px · `{spacing.lg}` 36px · `{spacing.xl}` 48px · `{spacing.xxl}` 64px · `{spacing.section}` 71px · `{spacing.section-lg}` 91px. - **Most frequent units:** 16px (`{spacing.sm}`) and 36px (`{spacing.lg}`) dominate the measured spacing — these are the default gap and component-padding rhythm. - **Section padding:** `{spacing.section}` (71px) is the primary vertical rhythm between bands, stepping up to `{spacing.section-lg}` (91px) on major transitions. - **Card internal padding:** `{spacing.xl}` (48px) on the blue feature banner and dark card; `{spacing.md}` (24px) on product-mockup and use-case cards. > Note: measured spacing also includes off-grid values (9, 23, 27, 30, 32, 47, 56px) — see Known Gaps. The token set above captures the dominant rhythm. ### Grid & Container - **Hero:** Centered single-column — h1, sub-head, and CTA stack center-aligned, with the video-player card below spanning the content width. - **Feature bands:** Two-up split (text + product mockup) on desktop; the blue AI banner pairs the bug-report panel left with the headline+copy right. - **Logo wall:** Multi-row centered grid of customer logos. - **Use-case grid:** 4-up pastel cards at desktop (Sales / Engineering / Customer support / Design). ### Whitespace Philosophy Loom uses generous centered whitespace in the hero, then alternates left/right product-mockup bands. The big body type (26px sub-headline) plus 71px section gaps give the page a confident, unhurried scanning rhythm. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow | Body sections, nav, pastel use-case cards | | Soft layered | `0 2px 6px rgba(0,0,0,0.04)`, `0 5px 18px rgba(0,0,0,0.06)`, `0 24px 83px rgba(0,0,0,0.1)` (measured) | Floating product-mockup cards, hero player | | Deep layered | `0 4px 6.4px rgba(0,0,0,0.03)` … `0 32px 96px rgba(0,0,0,0.1)` (measured) | Larger elevated product cards | | Card drop | `0 15px 50px rgba(0,0,0,0.25)` (measured) | Dark card (`{component.card-dark}`) | | Focus ring | `0 0 0 4.45px rgba(0,0,0,0)` / `0 0 0 5px rgba(255,255,255,0.4)` (measured) | Focused/elevated interactive elements | The elevation philosophy is **soft, multi-layered drop shadows** — Loom stacks 3–5 low-alpha shadows to float product mockups gently off the white canvas. The dark card uses a single heavier `0 15px 50px rgba(0,0,0,0.25)` drop. No neumorphism, no glass. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.sm}` | 6px | Small inline UI elements inside product mockups | | `{rounded.md}` | 8px | Small chips, inner product-UI rows | | `{rounded.lg}` | 12px | Inner cards, image frames | | `{rounded.xl}` | 16px | Product-mockup cards, pastel use-case cards, video frame | | `{rounded.blob}` | 42px | Large content cards (`{component.card-dark}`) | | `{rounded.blob-lg}` | 69px | Largest feature banners (`{component.feature-banner-blue}`) | | `{rounded.full}` | 9999px | All buttons (pill CTAs), avatars, icon buttons | The signature is the **large radius**: cards round to 42–69px and buttons are full pills. There is no tight-corner geometry in the system — even the biggest blocks are softly rounded. ### Photography & Media Geometry The hero video and embedded product mockups sit inside `{rounded.xl}` (16px) frames with soft layered shadows. Avatars inside product UI are circular (`{rounded.full}`). ## Components ### Top Navigation **`top-nav`** — White nav bar at the top of every page carrying the "ATLASSIAN Loom" lockup at left, primary menu (Apps, Solutions, Resources, Enterprise, Pricing, Sign In) center, and a right cluster: a blue **`button-primary`** ("Get Loom for free") plus a light **`button-secondary`** ("Contact Sales"). Menu links use `{typography.button}` (Charlie Text 16px) in `{colors.ink}`; inactive links lean toward `{colors.muted}`. ### Buttons **`button-primary`** — The signature CTA. Background `{colors.primary}` (#1868db), text `{colors.on-primary}`, type `{typography.button}`, fully-rounded `{rounded.full}` pill, padding 8px × 16px (measured). The hero "Get Loom for free" renders this same pill at larger scale. Active state `button-primary-active` shifts to `{colors.primary-deep}` (#1558bc) — derived. **`button-secondary`** — Light pill button ("Contact Sales"). Background `{colors.surface-blue-faint}` (#eff0ff), text `{colors.ink}`, fully-rounded `{rounded.full}`, same padding as primary. **`button-dark`** — Near-black pill ("Learn more" inside the blue AI banner and dark card). Background `{colors.ink}` (#101214), text `{colors.on-primary}`, fully-rounded `{rounded.full}`. **`text-link`** — Inline blue link ("Record now →", "Start sharing →", "Connect over video →") in `{colors.primary}`, type `{typography.button}`. **`nav-link`** — Top-nav menu item, transparent background, `{colors.muted}` text, `{typography.button}`. ### Cards & Containers **`video-player-card`** — The hero video player and inline players. Background `{colors.surface-dark}` (the video frame), rounded `{rounded.xl}` (16px), soft layered drop shadow. Shows the real Loom player UI (play button, speed, timer). **`feature-banner-blue`** — The "Ship faster with AI bug reports" band. Background `{colors.primary}` (#1868db), text `{colors.on-primary}`, headline in `{typography.display-md}`, rounded `{rounded.blob-lg}` (69px), internal padding `{spacing.xl}` (48px). Carries a "New!" eyebrow, the headline, body copy, a `{component.button-dark}` "Learn more", and an embedded product-UI panel. **`card-dark`** — The "Keep your content safe" band. Background `{colors.surface-dark}` (#101214), text `{colors.on-primary}`, headline in `{typography.display-md}`, rounded `{rounded.blob}` (42px, measured), padding `{spacing.xl}` (48px), drop shadow `0 15px 50px rgba(0,0,0,0.25)`. The only dark card in the body — a deliberate, scarce anchor. **`product-mockup-card`** — Cards showing real Loom product UI (timeline, editor, transcript). Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}` (24px), soft layered shadow. The product is shown, not illustrated. **`use-case-card-green` / `use-case-card-purple` / `use-case-card-blue`** — The 4-up "Video messaging for all use cases" grid. Pastel fills — `{colors.surface-green-faint}` (#efffd6), `{colors.surface-purple-soft}` (#f8eefe), `{colors.surface-blue-soft}` (#e9f2fe) — text `{colors.ink}`, title in `{typography.eyebrow}`, rounded `{rounded.xl}` (16px), padding `{spacing.md}` (24px). The pastels appear only here. ### Labels **`eyebrow-label`** — Small bold kicker labels ("New!", section eyebrows). Transparent background, `{colors.ink}` text, `{typography.eyebrow}` (Charlie Text 13px / 700). ## Do's and Don'ts ### Do - Reserve `{colors.primary}` (#1868db) for primary CTAs only. Loom's action layer is a single saturated blue. - Render all buttons as full pills (`{rounded.full}`). The pill is the brand's button signature. - Use the large card radii — `{rounded.blob}` (42px) and `{rounded.blob-lg}` (69px) — on feature banners and dark cards. The generous rounding is the shape voice. - Set headlines in Charlie Display weight 700 (heavy and black). Pair with Charlie Text body. Keep the boundary strict. - Embed real Loom product UI inside cards — the player, the AI bug-report panel, the editor — instead of marketing illustrations. - Keep the pastel set (`{colors.surface-green-faint}`, `{colors.surface-purple-soft}`, `{colors.surface-blue-soft}`) confined to the use-case grid and product mockups. - Use the single dark card (`{component.card-dark}`) as a scarce anchor near the bottom of the page. ### Don't - Don't tint the primary CTA with the pastel accents — they never touch the action layer. - Don't use tight corners. Even the largest blocks round to 42–69px; buttons are full pills. - Don't drop display weight below 700 — Charlie Display's bold weight is the headline voice. - Don't add additional dark surfaces beyond the one `{component.card-dark}` band and the video frames. - Don't claim to ship Charlie Display / Charlie Text — substitute with Inter or Manrope. - Don't document hover state styling beyond default + pressed; primary darkens to `{colors.primary-deep}` on press. ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Hamburger nav (the captured mobile screenshot shows the menu collapsed); hero h1 scales down from 63px; video player stacks full-width; feature bands stack single-column; use-case grid 4 → 1 | | Tablet | 768–1024px | Nav tightens; feature bands stay two-up where space allows; use-case grid 4 → 2 | | Desktop | 1024–1440px | Full top-nav with all menu items; two-up feature bands; 4-up use-case grid | | Wide | > 1440px | Same as desktop with more outer breathing room; content stays centered | ### Touch Targets - `{component.button-primary}` and `{component.button-secondary}` use 8px × 16px padding on the pill; hero CTAs render larger and comfortably exceed 44px. - Nav links rely on surrounding spacing for tap area. ### Collapsing Strategy - Top nav collapses to a hamburger on mobile; the right-side CTA cluster moves into the menu sheet. - The hero remains center-aligned at all widths; the video-player card spans full content width. - Two-up feature bands (text + mockup) stack to single column on mobile, text first. - The pastel use-case grid reduces columns (4 → 2 → 1) rather than shrinking cards. ### Image Behavior - Embedded product mockups retain native aspect ratios inside `{rounded.xl}` frames; the cards resize around them. - The hero video frame scales proportionally and keeps the play control centered. ## Iteration Guide 1. Focus on ONE component at a time. Reference its YAML key directly (`{component.feature-banner-blue}`, `{component.card-dark}`). 2. Variants of an existing component (`-active`) live as separate entries in `components:`. 3. Use `{token.refs}` everywhere — never inline hex. 4. Never document hover. Default and Active/Pressed states only. 5. Headlines stay Charlie Display 700; body stays Charlie Text 400. The boundary does not blur. 6. Keep the action layer monochrome blue; the pastel set is decorative only. 7. When increasing emphasis: bigger Charlie Display before any new color. ## Known Gaps - The measured `button-primary` color came back as `#292a2e` (the `button.color` text value) while screenshot ground-truth shows the dominant hero CTA as electric-blue (`#1868db`) with white text. The blue pill is documented from screenshot evidence + the measured `#1868db` accent token; `#292a2e` is preserved as `{colors.ink-soft}` (light-pill / dense-UI text). Exact mapping of every button variant to background vs. text would need per-button extraction. - Charlie Display / Charlie Text are Atlassian proprietary typefaces (not flagged in `fonts_licensed`, but custom and unlicensable as web fonts); open-source substitutes are documented in Typography. - The `letterSpacing` on every type role measured as `normal`; precise tracking values were not captured. - Spacing includes off-grid measured values (9, 23, 27, 30, 32, 47, 56px) not mapped to tokens — the token set captures the dominant 16/24/36/71px rhythm. - The two `blob` radii (42px, 69px) were measured on specific cards; intermediate card radii (50px appeared once) are not generalized. - Pricing-page-specific components (tier cards, comparison tables) were captured as a page but not measured into discrete component tokens — out of scope here. - Animation/transition timings (video playback controls, card hover-reveals) are not in scope. - The exact pastel-to-use-case mapping (which color belongs to Sales vs. Design, etc.) is inferred from the screenshot grid and may rotate.