# Loom design system: colors, fonts and tokens

> Loom's website (loom.com) uses a light interface with #1868db as its primary color and Charlie Text as the main typeface, with Charlie Display alongside it. designlang measured 15 font sizes from 13.6px to 56.5385px, 15 spacing values, 9 corner radii.

Source: https://loom.com, captured 25 June 2026. Page: https://designlang.app/design-system/loom

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#1868db` | 125 |
| Secondary | `#ffab00` | 9 |
| Accent | `#e9f2fe` | 43 |

Neutrals: `#292a2e`, `#000000`, `#ffffff`, `#696969`, `#555555`, `#f8f8f8`, `#7d818a`, `#d8d8d8`, `#bbbbbb`

Backgrounds: `#ffffff`, `#101214`, `#1868db`, `#eed7fc`, `#efffd6`, `#f8eefe`, `#e9f2fe`, `#fff5d4`

## Fonts

- Charlie Text (sans), 1057 elements
- Charlie Display (sans), 30 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 56.5385px | 700 | 58.1781px | normal | h1, h2 |
| 40.3077px | 700 | 46.0717px | normal | h2, p |
| 30px | 700 | 38.19px | normal | h2, h3 |
| 25.3077px | 400 | 38.5689px | normal | div, p |
| 24px | 400 | normal | normal | div, span |
| 23.5385px | 700 | 31.3768px | normal | p, h3, blockquote |
| 18.4px | 400 | 27.6px | normal | text, tspan |
| 18.2462px | 400 | 30.0514px | normal | div, p, a, br |
| 18px | 500 | 27px | normal | svg, rect, path, line |
| 16px | 400 | 24px | normal | html, head, meta, script |
| 15.2308px | 400 | 26.1055px | normal | a, span, svg, path |
| 15px | 400 | 22.5px | normal | a, span |
| 14.4px | 600 | 14.4px | 0.144px | button, svg, title, g |
| 14px | 600 | 21px | normal | h4 |
| 13.6px | 400 | 27.2px | normal | div, svg, path, span |

## Spacing

1px, 15px, 23px, 30px, 35px, 40px, 48px, 56px, 64px, 80px, 84px, 103px, 154px, 192px, 269px

## Radii

1px, 6px, 12px, 16px, 24px, 39px, 50px, 66px, pill

## Motion

Feel: smooth. Durations: 100ms, 200ms, 300ms, 500ms, 1000ms.

## Audit

Overall 80/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 80/100
- Spacing System: 85/100
- Shadow Consistency: 78/100
- Border Radius Consistency: 80/100
- Accessibility: 94/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #1868db;
  --color-secondary: #ffab00;
  --color-accent: #e9f2fe;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #292a2e;
  --color-neutral-2: #000000;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #696969;
  --font-primary: "Charlie Text", sans-serif;
  --font-secondary: "Charlie Display", sans-serif;
  --radius-sm: 1px;
  --radius-md: 6px;
  --radius-lg: 12px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/loom-com/loom-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/loom-com/loom-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/loom-com/loom-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/loom-com/loom-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/loom-com/loom-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/loom-com/loom-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/loom-com/loom-com-DESIGN.md)

Regenerate: `npx designlang loom.com`