screenroveScreenrove / Design references
Loom design guide
A friendly blue-and-white video tool: pill buttons and big display type outside, a compact Atlassian-style workspace inside.
Typography
Observed family: Atlassian Sans. Font files are not distributed.
marketing: Light, blue accents and dark bands
- 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)
Layout and components
- 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.
- 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
- 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
Layout and components
- 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.
- 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).
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.
Download DESIGN.md