Signal Blue
#1868dbBlue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Loom
loom.comWebsite preview
The design language
Loom uses a sunlit, airy communication-workspace language — a clean white canvas with generous breathing room, fully pill-shaped controls, and a single saturated blue (#1868db) that threads through navigation, links, and buttons to create one consistent interactive color. The design relies on soft pastel surface tints — pale blue #e9f2fe, buttery cream, mint, and lavender — to differentiate content zones without breaking the bright, welcoming atmosphere. Typography is restrained and editorial: Charlie Display at weight 700 anchors headlines in compact, tight-leading forms while Charlie Text handles body and UI at 15–19px, giving the product a confident voice that never feels heavy. Cards use large rounded corners (~42–69px) and layered ambient shadows to feel like physical surfaces, and the 9999px pill shape carries the entire interactive vocabulary — every clickable element is a capsule.
Color palette
brand
accent
Deep Plum
#48245dDark accent for content card backgrounds and illustration strokes
Orchid
#bf63f3Decorative purple accent for icon strokes and illustration fills
Ember
#ff613dWarm orange accent for notification icons, illustration highlights, and callout strokes
Leaf
#82b536Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Butter
#fff5d4Pale cream surface for content card backgrounds and soft highlight washes
Mint
#efffd6Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Navy Field
#123263Dark blue surface for inverted content cards and feature panels
neutral
Pale Wash
#e9f2feLight blue surface for testimonial cards, banner backgrounds, and soft feature zones
Paper White
#ffffffPrimary page and card background; the default canvas
Ink Black
#101214Primary text color for headings and body copy
Graphite
#292a2eSecondary text and icon strokes; slightly softer than Ink Black for muted labels
Charcoal
#000000Hard text, high-contrast borders, and icon fills
Ash Border
#ccccccHairline dividers and subtle card borders
Steel
#7d818aSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 14px basedisplay-lg
63px · 700 · 1.03The quick brown fox jumps
display
44px · 700 · 1.14The quick brown fox jumps
heading-lg
33px · 700 · 1.14The quick brown fox jumps
heading
27px · 400 · 1.45The quick brown fox jumps
heading-sm
25px · 700 · 1.27The quick brown fox jumps
subheading
19px · 400 · 1.5The quick brown fox jumps
text-18
18px · 700 · 1.5The quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Charlie Display
- Weights
- 700
- Sizes
- 25px, 33px, 44px, 63px
- Line height
- 1.03–1.33
- Fallback
- Inter Tight Bold or Söhne Breit Bold
- Features
- "ss01" on, "ss02" on, "ss08" on
Headlines from small section titles through hero display size; exclusively weight 700, compact leading (1.03–1.33) makes even the largest size feel dense and editorial
Additional typeface
Charlie Text
- Weights
- 400, 500, 700
- Sizes
- 13px, 15px, 16px, 18px, 19px, 27px
- Line height
- 1.45–1.71
- Fallback
- Inter or Söhne
- Features
- "ss01" on, "ss02" on, "ss08" on, "ss08" on
Body copy, UI labels, buttons, navigation, and subheadings; weight 400 is default, 500 for emphasized UI, 700 for inline emphasis; generous leading (1.45–1.71) keeps dense text airy
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
nav
9999pxtags
9999pxcards
68pximages
42pxmedium
12pxbuttons
9999pxsmallElements
6pxSpacing scale
1px2px5px6px8px9px12px16px18px19px23px24px32px36px40px41px47px48px56px64px70px71px78px80px91px111px209px216px314pxGuidelines
Do
- Use 9999px radius for every clickable element — buttons, nav links, tags, and icon controls are all pills, no exceptions
- Set all primary text to #101214 on #ffffff for AAA contrast; never let body copy drop below #292a2 on white
- Apply the three-layer ambient shadow stack (0px 2px 6px / 0px 5px 18px / 0px 24px 83px) to cards and video containers — this is the only elevation pattern in the system
- Use Charlie Display weight 700 for all headlines at 25px and above; reserve Charlie Text for everything at 19px and below
- Differentiate content zones with pastel surface tints (#e9f2fe, #fff5d4, #efffd6, lavender) rather than adding more borders or dividers
- Use #1868db as the single interactive accent color across nav, links, and buttons — no secondary chromatic action color
- Center-align hero text and CTAs; the product voice is direct and frontal, not asymmetric
Don’t
- Never use square or small-radius corners (under 12px) on cards or images — the entire system relies on generous rounding
- Never add a second action color; the blue is the only chromatic decision and adding green or red buttons will fragment the visual thread
- Never apply bold weight below 19px in body copy; weight 500 is the floor for UI labels to maintain the airy, restrained feel
- Never use flat single-layer shadows or hard borders to separate cards; the layered ambient shadow is what makes surfaces feel physical
- Never use line-height below 1.2 on display sizes or above 1.7 on body sizes — the system lives in a narrow vertical-rhythm window
- Never put chromatic colors on large background fills for structural sections; pastels are for content cards, not page bands
- Never set body text below 15px or above 19px; the product reads as comfortable, not dense or oversized
Components
Primary Filled Button
Main action trigger on hero, CTAs, and section endings9999px pill radius; background #1868db; text #ffffff in Charlie Text weight 500 at 15–16px; horizontal padding 23px, vertical padding 8–16px; no border; 2px spacing between icon and label when icon present.
Secondary Outlined Button
Companion action beside the primary, typically install/download flows9999px pill radius; background #ffffff; border 1px solid #000000; text #000000 in Charlie Text weight 500 at 15–16px; same padding as primary filled.
Nav Pill Link
Inline action in the top navigation bar9999px pill radius; background #1868db; text #ffffff weight 500 at ~16px; padding ~8px 16px; sits beside ghost text links.
Ghost Contact Button
Tertiary nav action for sales/contact flows9999px pill radius; background #ffffff; border 1px solid #cccccc; text #101214 weight 500; subtle, quiet presence next to the primary nav pill.
Testimonial Card
Customer quote card on pale blue washLarge radius (~68px); background #e9f2fe; padding ~40–48px; centered text layout; Charlie Text quote at 18–19px weight 400; attribution row with circular avatar and name/title in 13–15px; flanked by circular arrow controls at 9999px radius.
Content Feature Card
Section cards using pastel tints for differentiationRadius ~42–69px; pastel backgrounds (#efffd6, #fff5d4, #e9f2fe, or dark #123263/#48245d); padding 24–40px; Charlie Text heading at 25–33px; layered ambient shadow stack.
Hero Video Container
Full-width video preview directly under the hero headlineExtra-large radius (~42–69px); full container width; no visible border; receives the same three-layer ambient shadow as cards; contains inline playback controls (1x speed pill, duration label).
Top Banner Bar
Site-wide announcement stripFull-bleed #1868db background; white text in Charlie Text weight 500 at ~15px; centered content; dismiss X in top-right corner.
Logo Mark
Brand identification in headerSquare rounded icon (sun/burst glyph) at ~40px beside "ATLASSIAN Loom" wordmark; wordmark uses Charlie Text weight 700 in two-tone (ATLASSIAN small uppercase + Loom larger).
Carousel Arrow Button
Navigation between testimonial or card slides9999px pill radius circular button; background #ffffff; border 1px solid #cccccc or subtle shadow; contains a simple chevron icon in #101214.
Inline Link
Text links within paragraphs and listsCharlie Text weight 500; color #1868db; no underline by default; can shift to #7d818a for de-emphasized links.
Ambient Card Shadow
Elevation treatment for cards and video containersThree-layer drop shadow: rgba(0,0,0,0.04) at 0px 2px 6px, rgba(0,0,0,0.06) at 0px 5px 18px, rgba(0,0,0,0.10) at 0px 24px 83px; creates a soft, diffused lift rather than a hard edge.
Surfaces & elevation
Level 1
Paper White
#ffffffDefault page and card background
Level 2
Pale Wash
#e9f2feLight blue content surface for testimonials and feature zones
Level 3
Butter
#fff5d4Cream content surface for warm feature cards
Level 4
Mint
#efffd6Mint content surface for success-adjacent cards
Level 5
Signal Blue
#1868dbInverted surface for announcement banner and nav pill
Cards, video containers, and image previews
rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.06) 0px 5px 18px 0px, rgba(0, 0, 0, 0.1) 0px 24px 83px 0px
Layout & imagery
Layout
Max-width ~1200px centered container; full-bleed colored banners span edge to edge. Hero is a centered text stack (headline → subhead → button pair → video preview) on pure white with generous vertical padding. Sections alternate between white backgrounds and pale pastel surface cards, creating a rhythm of quiet and tinted. Content blocks are consistently centered with 2-column or 3-column card grids. Navigation is a top bar with logo left, center nav links, and action pills right; a full-bleed blue announcement banner sits above the nav. The overall flow is vertical-scroll, single-column at the section level, with card grids appearing as content within sections rather than as full-width bands.
Imagery
Photography is product-contextual: lifestyle scenes of people using video communication in bright, natural-light environments (offices, homes, casual workspaces). Images are treated as full-bleed containers with very large border-radius (~42–69px) to match the card system. Illustrations are minimal — the interface relies on a small sun/burst logo mark and occasional flat iconography rather than full illustrations. Icon style is filled, moderate stroke weight, monochrome in #101214 or #292a2e. Video previews (the product itself) are the dominant visual content, presented as rounded containers with inline playback UI. Visual density is text-dominant with one large video or image per section acting as the visual anchor.
Design notes
Agent Guide
**Quick Color Reference** - text: #101214 - background: #ffffff - border: #cccccc - accent: #1868db - primary action: no distinct CTA color - muted text: #292a2e - tinted surface: #e9f2fe **Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. *Create a testimonial card*: Background #e9f2fe, border-radius 68px, padding 48px. Quote text at 19px Charlie Text weight 400, #101214, centered. Attribution row below: circular 48px avatar, name in 15px weight 700, title in 13px weight 400 #292a2e. Apply the three-layer ambient shadow: 0px 2px 6px rgba(0,0,0,0.04), 0px 5px 18px rgba(0,0,0,0.06), 0px 24px 83px rgba(0,0,0,0.10). 3. *Create a top navigation bar*: White #ffffff background, logo left (40px sun-burst icon + 'Loom' wordmark in Charlie Text weight 700). Center links in 16px Charlie Text weight 500 #101214. Right side: nav pill button at 9999px radius, #1868db background, white text 16px; ghost button beside it at 9999px radius, white background, 1px #cccccc border, #101214 text. 4. *Create a pastel feature card grid*: Three cards in a row, each with 42px border-radius. Card 1 background #efffd6, Card 2 background #fff5d4, Card 3 background #e9f2fe. Each card: padding 24px, heading in Charlie Display weight 700 at 25px, body in Charlie Text weight 400 at 16px, 1.52 line-height. Three-layer ambient shadow on each card. 5. *Create a full-bleed announcement banner*: Background #1868db, full viewport width, padding 8px vertical. Text in Charlie Text weight 500 at 15px #ffffff, centered. Dismiss X icon in top-right corner at 16px, white.
Elevation Philosophy
The system uses exactly one shadow pattern — a three-layer ambient stack that creates diffused, atmospheric lift rather than directional depth. Shadows appear only on cards, video containers, and image previews; never on buttons, text, or flat surfaces. The large 83px blur radius in the third layer is what makes the system feel physical: cards seem to hover above the white canvas with a gentle, room-lit glow, not a hard edge.
Similar brands
Notion
Same white-canvas + single blue accent approach with pill-shaped controls and pastel surface differentiation
Descript
Video-focused product with a bright, clean interface and oversized rounded media containers
Figma
Large-radius cards, soft layered shadows, and a restrained palette anchored by one brand color
Slack
Pill-button interactive vocabulary and bright airy layout with a single chromatic accent
Calendly
White background, generous vertical rhythm, centered hero stacks, and pastel card differentiation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
