# Loom — Product app Design Spec

> Source: loom.com/looms/videos (logged-in library, live DOM + computed styles), 2026-07-19.
> Coverage: library shell — left rail, search bar, header, tabs, folder + video card grid, filter row. Editor/recorder surfaces: not captured. Responsive: not captured.

## 1. Visual Theme & Atmosphere

The logged-in app is a **different system from the marketing site** and should never be styled from it. Where marketing is Charlie Display 700 on pastel bands with 59px pills, the app is plain **Atlassian Sans at 14px** on an all-white canvas with **8px rounded-rect** controls at 32–36px tall. It is an Atlassian Design System shell: a narrow 90px icon rail on the left, a centred search field across the top, and a content column of cards. Colour is almost entirely absent — one blue `#1868db` for the primary button and the active-tab underline, everything else a four-step grey ladder. Borders are drawn as **inset 1px rings** rather than real borders, so nothing changes size on hover. The only chroma in the grid comes from user avatars and video thumbnails.

Feels: quiet, dense, utilitarian, enterprise-neat.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| body | `#292a2e` | Primary text, card titles, active tab |
| subtle | `#505258` | Icon glyphs, filter-pill labels |
| dimmed | `#6b6e76` | Metadata, idle tab labels, counts |
| disabled/faint | `#e2e3e4` | Empty thumbnail fill, dividers |
| inverse | `#ffffff` | Text on blue |

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page, rail and card background alike |
| border ring | `rgba(11,18,14,.14)` | Card / control ring, applied as `inset 0 0 0 1px` |
| form field ring | `#8c8f97` | Input ring, applied as `inset 0 0 0 1px` |
| record surface | `#040f21` | Deep navy record affordance at rail bottom |

| Token | Hex | Role / usage |
|---|---|---|
| primary | `#1868db` | Primary buttons, active tab underline, links |
| primaryHover | `#1558bc` | Primary hover, visited link |

Rules: the app canvas, the rail and the cards are all `#ffffff` — separation comes from the inset ring, not a fill change. Blue appears at most twice per screen.

## 3. Typography Rules

- Single stack: `"Atlassian Sans", -apple-system, system-ui, sans-serif`. No display face, no mono observed.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Page title (h1) | 32/36 px | 653 (variable) | -0.5px |
| Body / card title | 14/21.98 px | 400 | normal |
| Button label | 14/21.98 px | 500 | normal |
| Tab label | 14 px | 500 | normal |
| Metadata / count | 14 px | 400 | normal |
| Breadcrumb | 14 px | 400 | normal |

Patterns: **14px is the whole app.** The only size escape is the 32px page title, which uses a variable weight of `653` (not 600 or 700) and the only negative tracking on the surface. Emphasis is weight 500, never bold.

## 4. Component Stylings

- **Primary button** — bg `#1868db`, `#ffffff` 14px/500, `border-radius:8px`, height 36px, padding `0 12px`; a compact 32px variant at `border-radius:6px` is used inside panels.
- **Secondary / outline button** — transparent fill, 1px border, dark text, radius 8px, height 36px.
- **Search field** — full-width centred, `border-radius:8px`, height 36px, `box-shadow: inset 0 0 0 1px #8c8f97`, padding `0 12px 0 44px` to clear a leading search icon.
- **Card (folder + video)** — 261px wide in the grid, `border-radius:8px`, white fill, `box-shadow: inset 0 0 0 1px rgba(11,18,14,.14)`; video cards carry a 16:9 thumbnail with a duration badge in the bottom-right, then an avatar + author + share-state row, then a two-line title, then a view/comment/reaction stat row.
- **Tabs** — text-only, 14px/500; idle `#6b6e76`, active `#292a2e` with a 2px `#1868db` bottom rule. No pill or filled state.
- **Filter pills** — label `#505258` 14px/500 with a chevron, in a right-aligned row above the grid.
- **Left rail** — 90px wide, white, a column of icon buttons; product mark at top, avatar below it, a divider, then section icons; the record CTA sits pinned at the bottom.
- **Popover / toast** — radius 8px on `0 6px 24px rgba(0,0,0,.10)`.

## 5. Layout Principles

Fixed 90px left rail + fluid content column. A full-width top bar holds the centred search field with the upgrade button, notification bell and avatar right-aligned. Content starts with a breadcrumb, then the 32px page title with its actions right-aligned on the same line, then the tab row with a right-aligned item count, then sections (`Folders`, then the video grid). The grid is 4-up at desktop with a ~277px pitch (261px card). Vertical rhythm is a small 8px-based scale; density is high — 64px-ish rows, 36px controls.

## 6. Depth & Elevation

Radius scale: `4px` (badges) · `6px` (compact buttons, duration badge) · `8px` (cards, inputs, standard buttons) · `16px` (large panels) · `9999px` (avatars/pills) · `50%` (avatars).

Shadows:

- Card / input ring — `inset 0 0 0 1px rgba(11,18,14,.14)` and `inset 0 0 0 1px #8c8f97`
- Floating popover — `0 6px 24px rgba(0,0,0,.10)`

Philosophy: **no ambient elevation.** Cards sit flat on the canvas with an inset ring; a real drop shadow is reserved for genuinely floating layers (menus, toasts, the meeting-notes prompt card).

## 7. Motion

Not captured beyond the shared 0.1s colour/background transitions inherited from the token layer. No entrance, scroll or layout animation observed in the library shell.

## 8. Backgrounds, Effects & WebGL

None observed — flat solid `#ffffff` surfaces throughout. No gradients, blurs, filters or blend modes in the shell; the only imagery is user video thumbnails.

## 9. Do's and Don'ts

### Do
- Set the entire interface at 14px Atlassian Sans; use weight 500 for emphasis.
- Draw card and input edges with `inset 0 0 0 1px rgba(11,18,14,.14)`.
- Use `border-radius:8px` for cards, inputs and standard buttons; 6px for compact ones.
- Keep controls at 36px (32px compact).
- Let blue `#1868db` appear only on the primary button and the active-tab underline.
- Give the page title 32/36 at variable weight 653 with -0.5px tracking.

### Don't
- Don't carry the marketing system in: no Charlie Display, no 9999px pills, no pastel bands, no four-stop shadows.
- Don't add drop shadows to cards.
- Don't use weight 700 anywhere.
- Don't tint the card background to separate it from the canvas.

## 10. Responsive Behavior

Not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#292a2e` · Subtle `#505258` · Muted `#6b6e76` · Ring `rgba(11,18,14,.14)` · Accent `#1868db`
- Font: Atlassian Sans · Body: 14px/21.98 · Radius: 8px control + card / 6px compact · Control height: 36px (32px compact)
- Focus: inherits `0 0 0 4.5px #4688ec` · Hover fill: `#1558bc` (primary)

<loom_app_design_language>
A quiet Atlassian Design System shell, deliberately unlike Loom's marketing site. Everything is `#ffffff` — canvas, 90px icon rail and cards alike — and separation comes from an `inset 0 0 0 1px rgba(11,18,14,.14)` ring rather than a fill or shadow. One typeface, Atlassian Sans, at one size, 14/21.98, in `#292a2e` with `#505258` icons and `#6b6e76` metadata; emphasis is weight 500, never 700. The single 32/36px page title uses variable weight 653 at -0.5px tracking. Controls are 36px tall rounded rects at `border-radius:8px` (6px compact/32px); the search field is a 36px input with an `inset 0 0 0 1px #8c8f97` ring. Blue `#1868db` appears at most twice a screen — the primary button and the 2px active-tab underline; tabs are otherwise text-only. Cards are 261px, radius 8px, flat, with a duration badge over the thumbnail; real drop shadow (`0 6px 24px rgba(0,0,0,.10)`) is reserved for floating menus and toasts. Feels: quiet, dense, utilitarian, enterprise-neat. Avoid: Charlie Display, 9999px pills, pastel bands, card drop shadows, weight 700, tinted card fills.
</loom_app_design_language>