# Loom — DESIGN.md

A friendly blue-and-white video tool: pill buttons and big display type outside, a compact Atlassian-style workspace inside.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-29

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed families: **Charlie Display** and **Charlie Text** on marketing pages, and **Atlassian Sans** (with a ui-sans-serif / system-ui fallback stack) in the product. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light, blue accents and dark bands

### Observed palette
- Canvas: `#ffffff`
- Headline text: `rgb(16, 18, 20)`
- Body text: `rgb(41, 42, 46)`
- Primary button: `rgb(24, 104, 219)`
- Secondary button fill: `rgb(233, 242, 254)`
- Dark button and band: `rgb(16, 18, 20)`
- Pricing band: `rgb(18, 50, 99)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero and section headline (Charlie Display) | 63.27px / 65.1px | 700 | normal |
| Plan name and stat heading | 44.15px / 50.47px | 700 | normal |
| Feature heading | 32.5px / 41.37px | 700 | normal |
| Lead paragraph (Charlie Text) | 26.65px / 40.62px | 400 | normal |
| Feature body | 18.62px / 30.67px | 400 | normal |
| Plan feature list | 15.62px / 26.76px | 400 | normal |
| Button label | 15.62px | 400 nav / 700 hero | normal |

### Layout & hierarchy
- A pill-shaped nav (Apps, Solutions, Resources, Enterprise, Pricing, Sign in) with a blue "Get Loom for free" and a pale "Contact Sales" pill, under a thin announcement bar.
- Centred hero: large tight Charlie Display headline, one lead sentence, a blue pill and a pale pill button, then a product video frame.
- Alternating feature rows and full-width colour bands (dark near-black and blue) carry the page; pricing uses four side-by-side plan cards with one "Most popular" card raised.

### Components & behavior
- Buttons are full pills (9999px radius): blue rgb(24, 104, 219) with white text, or pale rgb(233, 242, 254) with black text; 48px high in the nav, about 58px in page sections.
- Plan cards: plan name at 44px, a one-line description, price, a pill button and a checklist of features; the recommended plan gets a tinted frame and a badge.
- Two in-house families, Charlie Display for headings and Charlie Text for copy, set at fractional sizes that scale with the viewport.

## Product — Light workspace with icon rail

### Observed palette
- Canvas: `rgb(255, 255, 255)`
- Primary text: `rgb(41, 42, 46)`
- Secondary text: `rgb(80, 82, 88)`
- Muted text: `rgb(107, 110, 118)`
- Primary button: `rgb(24, 104, 219)`
- Active nav item fill: `rgba(24, 104, 219, 0.15)`
- Active nav item text: `rgb(21, 88, 188)`
- Limit banner: `rgb(248, 238, 254)`
- Set password button (sampled from screenshot): `#9848c3`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Page heading | 32px / 36px | 653 | -0.5px |
| Section heading | 18px / 25.92px | 653 | -0.2px |
| Tab and nav label | 14px / 21.98px | 500 | normal |
| Button label | 14px / 20px | 500 | normal |
| Card title and body | 14px / 21.98px | 400 | normal |
| Card meta and counts | 12px / 18px | 400 (author 500) | normal |

### Layout & hierarchy
- A 64px icon rail on the left (workspace avatar, invite, For you, Library, Meetings, Watch later, Recent, Settings, tools) with a blue record button pinned to the bottom.
- Every page starts with a full-width lavender limit banner, then a centred search field with Upgrade, help, notifications and avatar at the right.
- Content pages use a large left-aligned heading with underline tabs; libraries switch to a five-column card grid, empty pages centre an illustration, title, sentence and one blue button.

### Components & behavior
- Primary button: rgb(24, 104, 219) fill, white 14px / 500 label, 6px radius, 32px high, 6px / 12px padding. Secondary buttons are white with a grey outline.
- Video cards: 16:9 thumbnail with a camera bubble and a dark duration badge, author row with a "Share to Spaces" dropdown, title, then view/comment/reaction counts.
- Share modal: white 8px-radius dialog over a dark scrim, with a people field, a General access row with a coloured icon tile and a footer of link, checkbox and paid-feature buttons.
- Access levels use coloured tiles: green globe (Public), grey lock (Open), red lock (Restricted).

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse the icon rail on small screens, stack card grids and let modals go full-screen on phones.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- For you: The signed-in landing tab. Under the 25-video limit banner and a wide search field, an empty state with a hand-drawn lightbulb, "Record a Loom", one line of copy and a blue Record a Loom button beside a disabled Upload a video. An "Atlassian inspiration to get you started" row begins below the fold. The icon rail on the left holds For you, Library, Meetings, Watch later, Recent and Settings, with a blue record button pinned to the bottom. Screenshot: `captures/loom-product-for-you.jpg`.
- Library: The personal Library: "Videos" heading with Videos, Screenshots and Archive tabs, a 426 videos count, New folder and a blue New video button, two empty folder cards, filter dropdowns (Video type, Activity, Upload date, Newest to Oldest) and a five-column grid of the owner's own recordings with duration badges and camera-bubble thumbnails. Same page as the flow's New video menu step, with the menu closed. Screenshot: `captures/loom-product-library.jpg`.
- Meetings: An empty state for meeting recordings: a faded mock of a "Pod weekly sync" recording with three participants, then "Stay in the loop with meeting recordings" and copy about connecting a calendar to record and recap meetings with Loom AI. The call-to-action buttons sit just below the fold. Screenshot: `captures/loom-product-meetings.jpg`.
- Watch later: Empty Watch later list: heading, a Remove viewed videos button and a blocky green-and-blue illustration over "Nothing saved for later". Screenshot: `captures/loom-product-watch-later.jpg`.
- Recent: Recently viewed videos grouped under a date heading (March 17, 2026): three cards with thumbnail, duration, author, a "Share to Spaces" dropdown and view, comment and reaction counts. Screenshot: `captures/loom-product-recent.jpg`.
- View all spaces: Spaces directory with Open, Closed and Archived tabs, a New Space button and a table (Name, Members, Videos, Role) holding the single default workspace-wide space. Screenshot: `captures/loom-product-spaces.jpg`.

## Avoid
- Do not apply the 63px marketing headline scale inside the product; the product page heading is 32px.
- Do not present sampled values as exact; the Set password purple is sampled from a screenshot.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured states: recording, editing, first-time onboarding, paid-plan features or mobile layouts.

## Reference pages
- Homepage: https://www.loom.com/
- Pricing: https://www.loom.com/pricing
- Screen recorder: https://www.loom.com/screen-recorder

## Capture scope
Signed-in desktop capture of the owner's existing Loom account (free workspace at its 25-video limit), plus the logged-out sign-up and log-in pages. The Google sign-in step and first-time onboarding were not captured because the account already existed; recording itself hands off to the desktop app or extension and is not shown. Library, Recent and video screens show the owner's own recordings, published with the owner's agreement.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.