---
title: "Loom design system"
variant: extended
source: https://www.loom.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/loom-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Loom · Design System

> Clear, confident product storytelling in blue and white

**Theme:** light · **Industry:** saas · **Source:** https://www.loom.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Loom’s homepage pairs a bright, spacious canvas with bold black typography and vivid blue calls to action. Product demonstrations, customer proof, and use-case sections build a long-form story around recording and sharing video.

## North star

Keep a generous white canvas and let strong black headlines, vivid blue actions, and tangible product demonstrations carry the story.

## Overview

The page is built on a white canvas, with saturated blue reserved for the announcement strip, primary buttons, selected promotional panels, and links. Black headings and charcoal body text provide strong contrast; pale blue appears in secondary button fills, testimonial surfaces, and the footer. The lime accent and lavender are measured in the palette but are not core brand surfaces; treat them as minor gradient or product-art colors. Charlie Display gives headlines a heavy, compact presence, while Charlie Text handles navigation, paragraphs, and controls. The layout alternates centered statements with spacious feature demonstrations and broad promotional panels. Product imagery is presented as video, interface mockups, and photographic moments, often inside softly rounded frames. Large gaps separate sections, while rounded buttons and cards soften the otherwise simple geometry. Keep the main canvas calm so each blue action and product visual reads clearly.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header, and most section backgrounds; preserves the bright, open feel. |
| Loom Blue | `#1868db` | `--color-loom-blue` | brand | Primary CTA fill, announcement band, links, and selected promotional panels. |
| Near Black | `#101214` | `--color-near-black` | neutral | Primary headings and body text; also used for the dark security panel and dark controls. |
| Pale Sky | `#e9f2fe` | `--color-pale-sky` | surface | Secondary CTA fill, testimonial and card surfaces, and the visible footer band. |
| Soft Divider | `#cccccc` | `--color-soft-divider` | semantic | Measured media border color; use as a restrained hairline, not a prominent frame. |
| Charcoal | `#292a2e` | `--color-charcoal` | neutral | Secondary text and navigation labels, with occasional inverse dark surfaces. |
| Citrus Tint | `#b3df72` | `--color-citrus-tint` | accent | Minor gradient or illustration detail only; not a defining page background. |
| Deep Navy | `#123263` | `--color-deep-navy` | surface | Occasional dark-blue content card, including blog-card treatment. |
| Action Shade | `#1558bc` | `--color-action-shade` | accent | Small measured card-area blue variant; keep subordinate to the main Loom Blue. |
| Lilac Mist | `#eed7fc` | `--color-lilac-mist` | surface | Isolated product or use-case artwork surface, not a recurring brand canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e9f2fe` (Pale Sky) · `--color-surface-2` → `#101214` (Near Black) · `--color-surface-3` → `#292a2e` (Charcoal) · `--color-surface-4` → `#123263` (Deep Navy) · `--color-text` → `#101214` (Near Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#292a2e` (Charcoal) · `--color-border` → `#cccccc` (Soft Divider) · `--color-accent` → `#1868db` (Loom Blue) · `--color-accent-2` → `#b3df72` (Citrus Tint) · `--color-accent-3` → `#123263` (Deep Navy) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101214` | `#ffffff` | 18.77:1 | AAA |
| `#101214` | `#e9f2fe` | 16.62:1 | AAA |
| `#101214` | `#292a2e` | 1.31:1 | fail |
| `#ffffff` | `#e9f2fe` | 1.13:1 | fail |
| `#ffffff` | `#101214` | 18.77:1 | AAA |
| `#ffffff` | `#292a2e` | 14.34:1 | AAA |
| `#292a2e` | `#ffffff` | 14.34:1 | AAA |
| `#292a2e` | `#e9f2fe` | 12.69:1 | AAA |
| `#292a2e` | `#101214` | 1.31:1 | fail |
| `#1868db` | `#ffffff` | 5.2:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 55%, rgb(233, 242, 254) 55%, rgb(233, 242, 254) 100%)`
- `linear-gradient(to top, rgb(179, 223, 114), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Charlie Text | `--font-body` | webfont | 400, 700 | Navigation, body copy, captions, buttons, and links. | Inter |
| Charlie Display | `--font-display` | webfont | 700 | Display headlines and major section headings. | Manrope |

- **Charlie Text:** Use regular weight for copy and navigation, bold for buttons and links; sentence case with neutral tracking.
- **Charlie Display:** Bold, compact headline styling; sentence case, tight line-height, and no decorative tracking.

### Type scale — Major Third (ratio ≈ 1.28, base 18.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 63.5px | 700 | 1.03 | 0 | — | Charlie Display | Largest campaign headline or high-impact promotional title. |
| h1 | 44px | 700 | 1.14 | 0 | — | Charlie Display | Primary hero headline and prominent page-level title. |
| h2 | 32.5px | 700 | 1.27 | 0 | — | Charlie Display | Major feature, proof, and use-case section headings. |
| h3 | 26.5px | 400 | 1.52 | 0 | — | Charlie Text | Supporting feature titles and explanatory subheads. |
| h4 | 25.5px | 700 | 1.33 | 0 | — | Charlie Display | Secondary promotional or card heading. |
| body | 18.5px | 400 | 1.65 | 0 | — | Charlie Text | Main explanatory copy and section descriptions. |
| caption | 15.5px | 400 | 1.71 | 0 | — | Charlie Text | Small supporting labels, attribution, and metadata. |
| button | 15.5px | 700 | 1.71 | 0 | — | Charlie Text | Primary and secondary CTA labels. |
| nav | 18.5px | 400 | 1.65 | 0 | — | Charlie Text | Header navigation and announcement copy. |
| link | 18px | 700 | 1.5 | 0 | — | Charlie Text | Inline actions such as feature links and article links. |

OpenType features in use: `"ss08"`, `"ss01", "ss02", "ss08"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 6, 8, 16, 23, 24, 32, 36, 40, 71, 91, 111 px.
- Section rhythm 36px · element gap 16px · card padding 111px · max content width 1368px.

Use a centered content frame capped at the measured 1368px page width, with generous whitespace and a comfortable density. The page alternates centered headline sections with left-aligned feature explanations and split product demonstrations. Keep the announcement and header as compact horizontal bands, then let the hero breathe above a wide media frame. Use measured spacing tokens rather than inventing new values; the observed base unit is 4px, with larger section gaps and broad card padding. Full-width promotional panels and the footer create occasional visual anchors within the otherwise white page.

## Shape & elevation

- Radius: button `9999px` · card `69px` · media `50%` · nav `9999px` · link `69px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `42px` · 2xl `69px` · pill `9999px`
- Shadow `xl` (media, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 4.45038px`
- Shadow `xl-2` (card): `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`
- Shadow `xl-3` (button): `rgba(0, 0, 0, 0.03) 0px 4px 6.4px 0px, rgba(0, 0, 0, 0.05) 0px 3px 9.6px 0px, rgba(0, 0, 0, 0.07) 0px 8px 32px 0px, rgba(0, 0, 0, 0.1) 0px 32px 96px 0px`
- Shadow `xl-4` (media): `rgba(0, 0, 0, 0.25) 0px 15px 50px 0px`
- Shadow `sm` (media): `rgba(0, 0, 0, 0.25) 0px 3.24px 3.24px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Most sections remain flat against white, with hierarchy created through spacing and color rather than borders. Media and selected cards use soft layered shadows; measured hairlines are subtle. Rounded cards and pill controls distinguish interactive elements, while dark and blue panels provide depth through contrast rather than heavy outlines.

## Imagery

Lead with a wide photographic video preview, then mix customer logos, screen recordings, interface mockups, and use-case illustrations. Product visuals show real UI controls and faces inside the experience, while promotional cards use brighter blue or dark surfaces. Frame media with soft, generous rounding and restrained depth; avoid treating decorative colors inside mockups as page-wide brand colors.

## Components

### Announcement strip

Full-width blue band above the white header, with centered compact announcement copy and a close affordance.

### Pill CTA

Primary buttons use #1868db, white bold Charlie Text, and a 9999px radius; secondary actions use pale blue.

### Hero media

Wide video preview beneath a centered headline and supporting copy, framed with rounded corners and soft shadow.

### Feature split

Alternate concise copy and product imagery across spacious sections; links use blue text and arrow cues.

### Promotional panel

Large rounded blue or near-black feature surface with white text, product visual, and a contrasting CTA.

### Use-case cards

Four-column set of illustrated use cases; artwork supplies varied pastel color while card copy stays compact.

### Customer proof

Logo cloud, customer testimonial carousel, and campaign CTA reinforce trust with pale blue surfaces and restrained controls.

### Measured component styles

- **Primary button** (“Get Loom for free”): background #1868db · text #ffffff · radius 9999px · padding 15.6px 23.4px · 700 15.6154px Charlie Text
- **Secondary button** (“Download now”): background #101214 · text #ffffff · radius 9999px · padding 15.6px 23.4px · 700 15.6154px Charlie Text
- **Link** (“Sales Personalize your pitch with video ”): transparent background · text #292a2e · radius 68.9231px · padding 0px · 400 16px Charlie Text
- **Card** (“Loom enables us to maximize our impact a”): background #e9f2fe · text #101214 · radius 68.9231px · padding 111px · 400 16px Charlie Text
- **Navigation item** (“NEW: Show it with Loom. Ship it in Curso”): transparent background · text #292a2e · radius 0px · padding 0px · 400 16px Charlie Text

## Do

- Keep white as the dominant canvas.
- Use Loom Blue for primary actions and key emphasis.
- Set major headings in a bold display face.
- Give product demonstrations generous space.
- Use rounded pill controls and soft media corners.
- Keep secondary copy dark and highly legible.

## Don't

- Do not turn every section into a colored panel.
- Do not use lime or lilac as dominant brand colors.
- Do not crowd the hero with extra UI.
- Do not add heavy outlines around cards.
- Do not make body copy compete with the headline.
- Do not flatten product imagery into generic decoration.

## Agent prompt

Build a new Loom-style SaaS page with a bright Gallery White (#ffffff) canvas, Near Black (#101214) headlines, and Loom Blue (#1868db) for the main CTA, links, and occasional emphasis. Use Charlie Display for bold, compact headings and Charlie Text for navigation, body copy, and controls; use Inter and Manrope only as practical substitutes. Keep a centered, spacious layout with short announcement and navigation bands, a clear hero, and product-led sections featuring video or interface imagery. Use Pale Sky (#e9f2fe) for secondary surfaces, and reserve charcoal or Deep Navy (#123263) panels for intentional contrast. Round buttons into pills and soften media frames with generous corners and restrained shadows. Maintain clear hierarchy, roomy section transitions, and concise copy. Treat Citrus Tint (#b3df72) and Lilac Mist (#eed7fc) as artwork accents, not page-wide colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Slim full-width announcement above a horizontal logo and navigation row. | Promotional announcement, Dismiss control | Blue band, Compact white text, Header CTA pills |
| 2 | hero | Centered headline and copy above paired actions and a wide video preview. | Primary and secondary action, Video play affordance | Bold black headline, Pill buttons, Rounded media frame |
| 3 | video | Single wide media area below the hero, centered in the main content frame. | Play video, Preview product experience | Large rounded frame, Soft shadow |
| 4 | logo-cloud | Centered trust statement, CTA, and multi-row customer logos. | Social proof, Conversion link | Monochrome logo grid, Centered heading |
| 5 | product-showcase | Large blue rounded panel with product imagery beside explanatory copy. | Product announcement, Download action | Blue surface, Split layout, Dark CTA |
| 6 | other | Centered heading and brief subheading with substantial surrounding whitespace. | Section transition | Centered typography, White canvas |
| 7 | feature-split | Feature text and download action paired with a product video or interface visual. | Download action, Feature explanation | Split composition, Embedded video, Blue link accents |
| 8 | other | Centered section title separated from surrounding content by whitespace. | Section transition | Bold centered heading |
| 9 | feature-split | Stacked feature rows alternate text and product illustrations. | Feature discovery, Contextual links | Alternating media alignment, Interface mockups, Pastel artwork |
| 10 | cta | Centered copy and action inside a dark rounded full-width panel. | Security reassurance, Learn-more action | Near-black surface, White text, Blue button |
| 11 | feature-grid | Centered heading above four illustrated cards in a row. | Explore by use case, See all use cases | Pastel card art, Compact labels, Four-column grid |
| 12 | feature-grid | Centered title above a two-column checklist of recording capabilities. | Feature scan, See all features | Check icons, Two-column text list, Light visual treatment |
| 13 | content-feed | Blue rounded blog panel with centered heading, paired article cards, and an action. | Article discovery, Explore blog | Blue background, Dark blue cards, White typography |
| 14 | product-showcase | Centered heading and copy above a large full-bleed product visual. | Enterprise discovery, Learn-more action | Dark rounded panel, Layered interface imagery |
| 15 | testimonials | Wide testimonial carousel with adjacent cards and centered customer quote. | Carousel navigation, Customer validation | Pale blue card, Quote and attribution, Circular controls |
| 16 | cta | Rounded white conversion card with headline and aligned download CTA. | Final conversion prompt, Platform reassurance | Pill CTA, Soft shadow, Compact supporting label |
| 17 | footer | Pale-blue footer band with several columns of categorized text links. | Browse site sections, Access product resources | Multi-column link lists, Small headings, Pale blue background |

## Source CSS custom properties (selected)

```css
--lns-color-body: hsla(228,6%,17%,1);
--lns-color-bodyDimmed: hsla(224,5%,44%,1);
--lns-color-background: hsla(0,0%,100%,1);
--lns-color-backgroundHover: hsla(209,75.6%,8%,0.08);
--lns-color-backgroundActive: hsla(225.5,56.9%,10%,0.14);
--lns-color-overlay: hsla(0,0%,100%,1);
--lns-color-primary: hsla(215.4,80%,47.65%,1);
--lns-color-primaryHover: hsla(215.9,79.9%,41%,1);
--lns-color-primaryActive: hsla(216.3,69.2%,22.9%,1);
--lns-color-focusRing: hsla(216.1,81.4%,60%,1);
--lns-color-record: hsla(11,100%,62.2%,1);
--lns-color-recordHover: hsla(11,100%,52.2%,1);
--lns-color-recordActive: hsla(11,100%,42.2%,1);
--lns-color-border: hsla(225.5,57%,10%,0.14);
--lns-color-disabledContent: hsla(223,5%,73%,1);
--lns-color-disabledBackground: hsla(0,0%,9%,0.03);
--lns-color-backdrop: hsla(224,72%,7%,0.46);
--lns-color-formFieldBorder: hsla(223.6,5%,57%,1);
--lns-color-formFieldBackground: hsla(0,0%,100%,1);
--thd-color-grey-10: #f8f8f8;
--thd-color-grey-20: #f0f1f2;
--thd-color-grey-30: #dddee1;
--thd-color-grey-40: #b7b9be;
--thd-color-grey-50: #8c8f97;
--thd-color-grey-50-50: #8c8f9780;
--thd-color-grey-60: #7d818a;
--thd-color-grey-70: #6c6f77;
--thd-color-grey-80: #505258;
--thd-color-grey-90: #3b3d42;
--thd-color-grey-100: #292a2e;
--thd-color-grey-light-border: #e4e2e7;
--thd-color-blue-0: #1868db00;
--thd-color-blue-10: #e9f2fe;
--thd-color-blue-20: #cfe1fd;
--thd-color-blue-30: #8fb8f6;
--thd-color-blue-40: #669df1;
--thd-color-blue-50: #4d8ced;
--thd-color-blue-60: #357de8;
--thd-color-blue-70: #1868db;
--thd-color-blue-70-50: #1868db80;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/loom-com