---
name: Relume
description: "Relume demonstrates how to balance high-impact typography with a clean, tool-like interface, making it an excellent reference for modern SaaS landing pages."
version: alpha

colors:
  background: "#F1F0EE"
  primary: "#161616"
  secondary: "#686868"
  tertiary: "#6248FF"
  neutral: "#686868"
  bg-soft: "#FFFFFF"
  bg-quiet: "#E4E2DF"
  line: "rgba(22,22,22,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 19px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

Relume is an AI-powered design and development tool for building marketing websites faster.

*A creative co-pilot for web design that blends AI generation with human curation.*

## Colors

Neutral, warm-grey foundations provide a clean canvas, allowing the vibrant purple accent and dark text to drive focus.

- **Background (`#F1F0EE`)** — uses `bg` token
- **Primary text (`#161616`)** — uses `ink` token
- **Secondary text (`#686868`)** — uses `ink-soft` token
- **Accent (`#6248FF`)** — uses `accent` token
- **Muted (`#686868`)** — uses `muted` token
- **Borders (`rgba(22,22,22,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Tight tracking on large display headings.
- Standard 400 weight for all body copy.

## Layout

Centered column layout with generous whitespace and floating UI elements in the hero.

*Rhythm:* Consistent multiples of 4px create a structured, predictable rhythm across the layout.

## Elevation & Depth

- rgba(0, 0, 0, 0.04) 0px 1px 2px 0px
- rgba(0, 0, 0, 0.08) 0px 1px 3px 0px
- rgba(0, 0, 0, 0.08) 0px 8px 10px -4px
- Borders: 1px solid rgba(22,22,22,0.1)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Dark filled primary button with white text and a purple-outlined ghost variant.
- **card:** White or light-grey cards with soft shadows and rounded corners.
- **chip:** Small, rounded pill badges for social proof and navigation labels.
- **input:** Large, prominent input field with a gradient border and a filled action button inside.
- **hero:** Massive typography centered over a light background, flanked by floating, interactive UI cards.

## Do's and Don'ts

**Don't:**
- Don't use a pure white background — screenshot shows a warm off-white instead.
- Don't use a serif display font — screenshot shows a geometric or humanist sans-serif.
- Don't use bright neon accents — screenshot shows a deep, saturated purple.
- Don't clutter the layout — screenshot shows generous whitespace and centered alignment.
- Don't use harsh drop shadows — screenshot shows soft, diffused box-shadows.
- Don't use sharp corners on UI elements — screenshot shows rounded corners up to 16px.

---

## System Prompt (paste into AI agent)

```
Relume is a premium AI-powered design tool for marketing websites, positioned as a fast, collaborative co-pilot rather than a replacement for human designers. The design uses a warm off-white background (#F1F0EE) with dark charcoal text (#161616) and a signature purple accent (#6248FF). Typography is centered around a clean, humanist-sans category for both display and body. Critical design rules: do not use pure white backgrounds, avoid serif fonts for headings, and maintain generous whitespace to keep the interface looking premium and uncluttered.
```