---
name: Loom
description: "A textbook example of a modern, high-trust SaaS landing page that balances professionalism with a friendly, accessible UI."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#292A2E"
  tertiary: "#1868DB"
  neutral: "#101214"
  bg-quiet: "#E9F2FE"
  line: "rgba(41,42,46,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, high-trust enterprise SaaS design that prioritizes clarity and user action.

*A clean, high-trust enterprise dashboard that prioritizes clarity and action.*

## Colors

Clean, high-contrast palette with a singular, vibrant blue for primary actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#292A2E`)** — uses `ink` token
- **Accent (`#1868DB`)** — uses `accent` token
- **Muted (`#101214`)** — uses `muted` token
- **Borders (`rgba(41,42,46,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- Use grotesque-sans for impactful display text and humanist-sans for approachable body copy.
- Maintain tight line heights (1.0-1.1) for large headlines to create a dense, modern feel.

## Layout

Centered, single-column layout for hero sections, transitioning to multi-column grids for feature sets.

*Rhythm:* Consistent 4px base with generous vertical spacing (111px) between major sections to ensure breathing room.

## Elevation & Depth

- 0px 2px 6px rgba(0,0,0,0.04)
- 0px 5px 18px rgba(0,0,0,0.06)
- 0px 24px 83px rgba(0,0,0,0.1)
- Borders: Thin, subtle borders using the primary ink color at low opacity.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Highly rounded (pill-shaped) primary buttons with bold blue background and white text, contrasted with subtle secondary buttons.
- **card:** Large, rounded-corner containers used for showcasing features or use cases, often containing imagery and descriptive text.
- **chip:** Pill-shaped badges or labels used for categorization.
- **input:** Clean, bordered input fields with clear labels and sufficient padding.
- **hero:** A dominant, centered text block with a large headline, supporting paragraph, and primary call-to-action, followed by a wide video or image element.

## Do's and Don'ts

**Don't:**
- Don't use sharp, rectangular corners on buttons — screenshot shows heavily rounded, pill-shaped buttons.
- Don't rely on a complex multi-color palette — screenshot shows a dominant blue accent against a neutral base.
- Don't use small, dense text for primary messages — screenshot shows large, bold display type for headlines.
- Don't create cluttered layouts with tight spacing — screenshot shows generous vertical gaps between major sections.
- Don't use decorative or serif fonts for body copy — screenshot uses clean, modern sans-serif families.
- Don't use harsh, dark backgrounds for the entire page — screenshot shows primarily light backgrounds with targeted dark sections.

---

## System Prompt (paste into AI agent)

```
Loom's design is a clean, high-trust SaaS aesthetic prioritizing clarity and action. It uses a primarily white (#FFFFFF) and light blue (#E9F2FE) background with a dominant, vibrant blue (#1868DB) accent for primary CTAs. Typography features a bold grotesque-sans for display headlines and a clean humanist-sans for body text. Critical donts: avoid sharp corners (pill shapes are used), avoid complex color schemes (keep it minimal), and avoid small text for primary messages (use bold, large display type). The layout is spacious and centered, with subtle shadows and fast, smooth transitions for micro-interactions.
```