Design System Inspiration of Loom

1. Visual Theme & Atmosphere

Loom's website projects the friendly confidence of a consumer-grade tool that quietly does serious work. The canvas is pure white (#ffffff) with near-black ink (#101214) for headlines and a softer charcoal (#292a2e) for body copy, while a single saturated blue (#1868db) carries every primary action. This is not the cold corporate blue of legacy enterprise software; it is a bright, approachable cobalt that reads as energetic and trustworthy. The overall impression is of a product that wants you to press record immediately — clean, bold, and unintimidating.

The defining typographic gesture is the Charlie type family — Charlie Display for headlines and Charlie Text for body — a humanist sans with warm, rounded terminals. Headlines run heavy at weight 700 and large sizes (the hero lands around 63px), giving the page a punchy editorial loudness that is the opposite of the whisper-weight restraint seen in fintech systems. Where Stripe murmurs, Loom announces. The hero copy ("One video is worth a thousand words") is set in this bold display face with tight line-height (~1.03), creating dense, declarative blocks that feel like a magazine cover.

Loom's other signature is its commitment to the full-pill geometry. Every button — primary, secondary, dark, and the circular carousel controls — uses a 9999px border-radius. Nothing on the page is sharp-cornered; the rounding signals softness and consumer-friendliness. Surfaces lift off the page with gentle, low-opacity multi-layer shadows (rgba(0,0,0,0.03) and rgba(0,0,0,0.05) at small blur), so depth feels airy rather than dramatic. Marketing illustrations introduce playful gradient accents — coral (#ff613d), bright purple (#bf63f3), and a deep aubergine (#48245d) — that keep the otherwise blue-and-white palette from feeling sterile.

Key Characteristics:

• Charlie Display / Charlie Text — a warm humanist sans, bold at display sizes
• Weight 700 headlines as the signature — punchy, declarative, consumer-confident
• Single dominant action color: Loom blue (#1868db) on pure white
• Full-pill geometry (9999px) on every button and control — nothing sharp
• Near-black ink headings (#101214) over softer charcoal body (#292a2e)
• Soft, low-opacity multi-layer shadows — airy elevation, never heavy
• Light-blue surface tint (#e9f2fe) for secondary buttons and footer
• Playful coral / purple gradient accents (#ff613d, #bf63f3, #48245d) in illustrations

2. Color Palette & Roles

Primary

• Loom Blue (#1868db): Primary brand color, CTA backgrounds, primary links, interactive highlights. A bright, saturated cobalt that anchors every action on the page.
• Ink (#101214): Primary heading color and dark-button fill. A near-black with a faint blue undertone — warmer and softer than pure #000000.
• Pure White (#ffffff): Page background, card surfaces, primary-button text, circular control fill.

Secondary & Surface

• Surface Blue (#e9f2fe): Light-blue tint used for secondary "light" buttons and the footer background. Reads as a calm, on-brand neutral.
• Body Charcoal (#292a2e): Standard body copy, nav links, secondary labels. Softer than the ink headings for comfortable reading.
• Muted Gray (#7d818a): De-emphasized text, captions, metadata, supporting labels.

Interactive

• Loom Blue (#1868db): Primary buttons, primary links, active states.
• Primary Hover (#0052cc): Deeper blue for hover/pressed states on primary links and buttons.

Accent (illustration & marketing)

• Coral (#ff613d): Warm orange-red used in illustration gradients and decorative highlights.
• Bright Purple (#bf63f3): Vivid violet for gradient decoration and playful accents.
• Deep Aubergine (#48245d): Dark purple anchoring gradient illustrations and immersive accent zones.

Neutral Scale

• Ink (#101214): Headings, strong labels.
• Body (#292a2e): Paragraph text, navigation.
• Muted (#7d818a): Secondary/captions.
• On-Primary (#ffffff): Text and icons on Loom blue or dark fills.

3. Typography Rules

Font Family

• Display: Charlie Display, with fallback sans-serif — used for all headlines.
• Text: Charlie Text, with fallback sans-serif — used for body, leads, nav, and UI.
• Charlie is a warm humanist sans with rounded terminals; Loom pairs the heavier Display cut for headings with the more readable Text cut for running copy.

Hierarchy

Principles

• Bold display weight as signature: Weight 700 on headlines is Loom's loudest typographic choice. The page is meant to feel energetic and immediate, not restrained.
• Two cuts, two jobs: Charlie Display carries headings (heavy, tight); Charlie Text carries everything readable (regular, comfortable 1.5 line-height).
• Tight headlines, generous body: Display line-heights compress toward 1.03–1.27 for dense impact; body and lead relax to 1.5–1.52 for readability.
• Minimal tracking: Letter-spacing stays normal across the system — the warmth comes from the typeface, not from tracking manipulation.

4. Component Stylings

Buttons

Primary (Loom Blue)

• Background: #1868db
• Text: #ffffff
• Radius: 9999px
• Padding: 16px 23px
• Height: 58px
• Font: 16px Charlie Text weight 700
• Hover: deepens toward #0052cc
• Use: Primary CTA ("Get Loom for free", "Download now", "Learn more")

Primary Compact

• Background: #1868db
• Text: #ffffff
• Radius: 9999px
• Padding: 8px 16px
• Height: 48px
• Font: 16px Charlie Text weight 400
• Use: Header CTA ("Get Loom for free" in nav)

Light (Surface Blue)

• Background: #e9f2fe
• Text: #101214
• Radius: 9999px
• Padding: 16px 23px
• Height: 58px
• Font: 16px Charlie Text weight 700
• Use: Secondary actions ("Contact Sales", "Install Chrome Extension", "See all use cases")

Dark (Ink)

• Background: #101214
• Text: #ffffff
• Radius: 9999px
• Padding: 16px 23px
• Height: 58px
• Font: 16px Charlie Text weight 700
• Use: Alternate emphasis CTA ("Learn more", "Explore our blog")

Icon Buttons / Carousel Controls

• Background: #ffffff
• Text: #292a2e
• Radius: 9999px (circular)
• Height: 56px
• Shadow: rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px
• Use: Testimonial carousel previous/next controls

Cards & Containers

• Background: #ffffff
• Radius: 16px (md), 24px (lg) for larger feature cards
• Shadow (soft): rgba(0,0,0,0.03) 0px 4px 6.4px 0px
• Shadow (standard): rgba(0,0,0,0.05) 0px 3px 9.6px 0px
• Use: Feature cards, testimonial cards, media previews

Navigation

• Background: white, clean horizontal nav
• Links: Charlie Text 16px weight 400, #292a2e
• Primary CTA: Loom blue pill ("Get Loom for free") right-aligned
• Secondary CTA: light-blue pill ("Contact Sales")

Footer

• Background: #e9f2fe
• Text: #292a2e
• Links: #292a2e, hover toward #1868db

---

Verified: 2026-06-08 (omd:add-reference — Tier 1 live inspect) Tier 1 sources: https://www.loom.com (live DOM computed-style inspect — hero, nav, CTA buttons, carousel controls, footer; playwright getComputedStyle) Tier 2 sources: getdesign.md/loom — not authoritative; refero — directory only Conflicts unresolved: none .verification.md: web/references/loom/.verification.md

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
• Button padding follows an 8px rhythm (8px/16px compact, 16px/23px large)

Grid & Container

• Centered single-column hero with large bold headline and a pair of pill CTAs
• Feature sections alternate text + media in 2-column splits
• Testimonial carousel with circular white controls
• Generous full-width sections with light-blue tinted zones for rhythm

Whitespace Philosophy

• Open and breathable: Loom leans on white space to keep the bold headlines from feeling heavy. The 1.5 body line-height reinforces an unhurried reading pace.
• Section tinting: Light-blue (#e9f2fe) zones and the footer break the white expanse without introducing hard color, creating a soft light/lighter cadence.
• Pill rhythm: Repeated full-radius buttons create a consistent rounded visual motif down the page.

Border Radius Scale

• Small (8px): subtle rounding on small surfaces
• Medium (16px): standard cards
• Large (24px): feature cards, media frames
• Full (9999px): every button and circular control

6. Depth & Elevation

Shadow Philosophy: Loom's elevation is deliberately gentle. Shadow opacities stay between 0.03 and 0.05 with small blur radii, so cards and controls feel like they hover a few millimeters off the page rather than casting deep dramatic shadows. The neutral (un-tinted) black shadow keeps the focus on the bold typography and bright blue actions — depth is a supporting role, never the star.

7. Do's and Don'ts

Do

• Use Loom blue (#1868db) as the single primary action color
• Set headlines in Charlie Display at weight 700 — bold and declarative
• Make every button and control a full pill (9999px)
• Use near-black ink (#101214) for headings and softer charcoal (#292a2e) for body
• Keep elevation soft and low-opacity (0.03–0.05)
• Use the light-blue surface (#e9f2fe) for secondary buttons and footer
• Let body text breathe at 1.5 line-height
• Reserve coral/purple accents for illustrations and gradients only

Don't

• Use sharp or small-radius corners on buttons — Loom is fully pill-shaped
• Set headlines in a light weight — bold 700 is the brand voice
• Introduce a second competing primary color — blue owns all actions
• Use heavy, high-opacity, or tinted dramatic shadows
• Use coral/purple accents for buttons or links — they are decorative only
• Use pure black (#000000) for headings — ink #101214 is warmer
• Crowd body copy with tight line-height — keep 1.5 for readability

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons run 48–58px tall — comfortably tappable pills
• Circular carousel controls at 56px diameter
• Nav links with generous spacing

Collapsing Strategy

• Hero: ~63px display compresses to ~36–40px on mobile, weight 700 maintained
• Navigation: horizontal links + CTA pills collapse to a menu toggle
• Feature splits: side-by-side text+media stack vertically
• CTA pairs stack full-width on mobile
• Section spacing compresses on smaller viewports

Image Behavior

• Product/video preview frames keep rounded corners (16–24px) at all sizes
• Marketing illustrations with coral/purple gradients simplify on mobile
• Media maintains soft shadow elevation across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Loom Blue (#1868db)
• CTA Hover: Deeper Blue (#0052cc)
• Background: Pure White (#ffffff)
• Heading text: Ink (#101214)
• Body text: Charcoal (#292a2e)
• Muted text: Gray (#7d818a)
• Secondary surface / footer: Surface Blue (#e9f2fe)
• Dark button: Ink (#101214)
• Accent decorative: Coral (#ff613d), Purple (#bf63f3), Deep Aubergine (#48245d)

Example Component Prompts

• "Create a hero on white. Headline at 63px Charlie Display weight 700, line-height 1.03, color #101214. Lead at 27px Charlie Text weight 400, line-height 1.52, color #101214. Primary CTA pill (#1868db, 9999px radius, 16px 23px padding, white text weight 700) plus a light pill (#e9f2fe bg, #101214 text, 9999px)."
• "Design a feature card: white background, 16px radius, shadow rgba(0,0,0,0.05) 0px 3px 9.6px. Heading 33px Charlie Display weight 700, #101214. Body 16px Charlie Text weight 400, line-height 1.5, #292a2e."
• "Build a dark CTA pill: #101214 background, white text, 9999px radius, 16px 23px padding, 16px Charlie Text weight 700."
• "Create circular carousel controls: white #ffffff fill, 56px diameter, 9999px radius, shadow rgba(0,0,0,0.03) 0px 4px 6.4px, rgba(0,0,0,0.05) 0px 3px 9.6px."
• "Design a footer: #e9f2fe background, #292a2e text, links hovering toward #1868db."

Iteration Guide

1. Loom blue (#1868db) is the only primary action color — never split actions across colors
2. All buttons and controls are full pills (9999px) — no exceptions
3. Headlines use Charlie Display weight 700; body uses Charlie Text weight 400 at 1.5 line-height
4. Heading color is ink #101214, body is charcoal #292a2e, muted is #7d818a
5. Keep shadows soft (0.03–0.05 opacity, small blur) — airy not heavy
6. Light-blue #e9f2fe is the secondary-surface and footer tint
7. Reserve coral/purple gradients for illustrations only — never for UI controls

---

10. Voice & Tone

Loom's voice is warm, direct, and human — the tone of a helpful colleague who would rather show you than tell you. The product itself is about replacing long written messages with a quick video, and the copy mirrors that: short, plain, action-first. The hero line "One video is worth a thousand words" sets the register — a familiar idiom repurposed with a knowing wink, confident without being grandiose. CTAs are friendly imperatives ("Get Loom for free", "Download now"), never gated or salesy on the basics.

Forbidden phrases. "Revolutionary", "game-changer", "supercharge", "synergy", "cutting-edge". Jargon-heavy enterprise-speak. Exclamation-stacked hype. Anything that makes recording a video feel like a chore.

11. Brand Narrative

Loom was founded in 2015 (originally as Opentest, then OpenVid, before becoming Loom) by Joe Thomas, Shahed Khan, and Vinay Hiremath. The founders were building a usability-testing product and discovered that the most valuable thing they had made was the simple screen-and-camera recorder they used to share feedback. They pivoted to that recorder — the insight being that asynchronous video could replace a huge volume of meetings and long written messages.

That founding insight — async video as a faster, more human way to communicate at work — shaped everything: a one-click recorder, instant shareable links, and a friendly consumer-grade interface that lowers the barrier to pressing record. Loom grew rapidly through bottom-up adoption inside companies and was acquired by Atlassian in 2023 for roughly $975M, positioning it alongside Atlassian's suite of team-collaboration tools.

What Loom embraces: speed-to-record, warmth, and the idea that showing beats telling. What it rejects: the friction of meetings, the cold formality of legacy enterprise screen-share tools, and any UX that makes capturing a quick video feel heavyweight. The bold blue-and-white visual identity is the design expression of that ethos — bright, immediate, and unintimidating.

12. Principles

1. Show, don't tell. UI implication: Lead with video previews and live demos; let the product demonstrate itself rather than describing it in walls of text.
2. One click to record. UI implication: The primary action (Loom blue pill) is unmistakable and always within reach; never bury the record/start CTA.
3. Warm over corporate. UI implication: Rounded full-pill geometry, friendly Charlie typeface, and conversational copy keep the tool approachable, not enterprise-cold.
4. Async beats meetings. UI implication: Flows favor self-serve, low-friction starts ("Get Loom for free") over gated sales funnels.
5. Clarity through restraint. UI implication: A single dominant action color and soft elevation keep attention on content; decorative color stays in illustrations.

13. Personas

Personas below are fictional archetypes informed by publicly observable Loom user segments (remote-team managers, engineers, customer-facing teams, educators), not individual people.

Priya Nair, 34, Austin. Engineering manager at a remote-first startup. Records a 3-minute Loom instead of writing a long PR review or scheduling another sync. Values the one-click recorder and instant share link; would abandon any tool that made capturing a quick walkthrough feel like setup work.

Marcus Bell, 41, Manchester. Customer success lead. Sends personalized Loom videos to onboard new accounts. Cares that recipients can watch without an account and that the playback page looks polished and on-brand.

Sofia Lindqvist, 28, Stockholm. Product designer. Uses Loom to narrate design walkthroughs for async feedback across time zones. Appreciates the warm, unintimidating interface that makes hitting record feel casual rather than performative.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions.

1. Carousel slide. Testimonial carousel advances with motion-standard / ease-standard, a smooth horizontal glide paired with the soft-shadowed circular controls.
2. Hover lift. Buttons and cards lift subtly on hover via motion-fast, deepening the soft shadow slightly — gentle, never bouncy.
3. CTA feedback. Primary pills respond to press with a quick motion-fast color deepen toward #0052cc.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant; carousels advance instantly and hover lifts are removed. The interface stays fully functional.