Loom

---
version: alpha
name: Loom landing-page reference
description: A video-messaging landing page with Atlassian-blue acquisition controls,
  bold centered typography, a large rounded video hero, alternating product stories,
  pastel use-case cards and contrasting enterprise panels.
colors:
  primary: '#1868DB'
  surface: '#FFFFFF'
  on-surface: '#101214'
  secondary: '#E9F2FE'
  purple: '#EED7FC'
  dark-surface: '#292A2E'
typography:
  headline-display:
    fontFamily: Charlie Display
    fontSize: 63.2692px
    fontWeight: 700
    lineHeight: 65.104px
  headline-md:
    fontFamily: Charlie Display
    fontSize: 44.1538px
    fontWeight: 700
    lineHeight: 50.4678px
  headline-mobile:
    fontFamily: Charlie Display
    fontSize: 35px
    fontWeight: 700
    lineHeight: 36.015px
  body-md:
    fontFamily: Charlie Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

# Loom landing-page reference

## Overview

Observed at https://www.loom.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A video-messaging landing page with Atlassian-blue acquisition controls, bold centered typography, a large rounded video hero, alternating product stories, pastel use-case cards and contrasting enterprise panels. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Keep media previews central and show a clear hierarchy between the free action and extension action.

## Typography

The visible display sample uses "Charlie Display", 63.2692px size, 65.104px line height and weight 700. Tracking is normal. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Lead with an announcement, spacious centered promise, two actions and a large rounded video frame. Follow with customer logos, a blue AI-feature panel, alternating feature explanations, a dark security section, four audience cards, resource links, enterprise and testimonial panels, and a dense footer. Use generous gaps between features so the media and copy remain distinct.

At 390px the wordmark and menu appear above a wrapped blue announcement. The headline and supporting paragraph align left with about 32px gutters. The two actions stack independently, and the large video preview keeps rounded corners within a narrower inset frame. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

Use a soft shadow around the main video and layers of recording/editor UI within feature imagery. Blue and near-black full-width panels provide sectional contrast. Videos and dynamic illustrations are represented by static frames; a blank or changing animation region is not a specification of its interaction.

## Shapes

Rounded pill actions contrast with very large rounded media frames and softly curved feature panels. Small circular play controls and speaker portraits reinforce the video theme. Maintain consistent curved corners across pastel and dark cards. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

Pair a blue free-product action with a pale-blue extension action. The hero video uses a prominent play control. Capability chapters show recording, editing, sharing and feedback; later cards organize use cases by team. Security and enterprise sections use reversed colors. No video playback or extension installation was triggered.

## Do's and Don'ts

Keep media previews central and show a clear hierarchy between the free action and extension action. Use blue panels sparingly to establish chapters. Do not claim that static media captures cover all video states, playback controls or responsive breakpoints.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.