# Relume · Design system migration spec

> Source: https://www.relume.io  ·  Curated by OpenDesign  ·  en

> Relume demonstrates how to balance high-impact typography with a clean, tool-like interface, making it an excellent reference for modern SaaS landing pages.

## 1. Identity DNA

Relume's design system functions as a creative co-pilot, a framework that balances AI-driven generation with human curation. Like a well-organized studio, it provides a neutral, warm-grey foundation where the work itself—the vibrant purple accent and clear, dark text—can take focus without visual noise.

**One-liner:** Relume is an AI-powered design and development tool for building marketing websites faster.
**Keywords:** AI-driven · design acceleration · marketing websites · developer tools
**Analogy:** A creative co-pilot for web design that blends AI generation with human curation.

## 2. Color

The palette is built on a restrained, warm off-white foundation, ensuring a clean canvas that feels approachable rather than sterile. A single, saturated purple accent provides the necessary pop for interactive focus and branding, while deep charcoal text guarantees legible contrast against the soft background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1F0EE` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#E4E2DF` | quiet area |
| `--ink` | `#161616` | body text |
| `--ink-soft` | `#686868` | secondary text |
| `--muted` | `#686868` | placeholder |
| `--accent` | `#6248FF` | single accent |
| `--line` | `rgba(22,22,22,0.1)` | divider |

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

The principle is one of deliberate limitation: a neutral field that allows a single, vibrant accent to command attention.

## 3. Typography

The typographic voice is clean and direct, built on a humanist sans-serif category that feels both professional and approachable. Rules enforce tight tracking on large display headings for impact and a consistent standard weight for body copy, creating a clear hierarchy from hero statement to fine print.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 500 | -2px | Main hero headline |
| h2 | 40px | 1.1 | 500 | -1px | Section headings |
| body-lg | 19px | 1.5 | 400 | 0 | Lead paragraphs |
| body | 16px | 1.5 | 400 | 0 | General body text |
| caption | 14px | 1.5 | 400 | 0 | Small text and labels |

**Type rules:**
- Tight tracking on large display headings.
- Standard 400 weight for all body copy.

## 4. Spacing

Spacing is governed by a strict 4px base unit, creating a predictable and harmonious rhythm across all components and layout decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent multiples of 4px create a structured, predictable rhythm across the layout.

## 5. Surfaces

Surfaces are defined by depth through soft, diffused shadows and a consistent, light border. This creates a clear layering system without resorting to heavy edges, maintaining a premium and uncluttered interface.

- **Radius:** sm 6px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is a centered column with generous whitespace, providing a stable and readable core. This structured foundation is punctuated by floating UI elements, like interactive cards, which add dynamism and frame the central message.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy centers on subtlety and purpose, using smooth opacity and transform transitions to provide feedback without distraction. Decorative elements employ gentle floating animations, while layout shifts are accelerated to feel responsive and intentional.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover.
  - Floating animations for decorative UI elements.
  - Accelerated layout shifts on viewport entry.

- **Hover:** Subtle background color shifts and slight vertical lifts on cards and buttons.
- **Click:** Immediate visual feedback via background changes or scale transforms.
- **Transition:** All transitions use a consistent cubic-bezier easing over 0.2s to 0.6s.
- **Keyboard:** Standard focus states with visible outlines on interactive elements.

## 8. Voice & Don'ts

The editorial voice is empowering and professional, using bold, direct headlines that focus on benefit. It avoids passive language and vague promises, opting instead for clear, action-oriented statements that speak to the user's goals.

- **Tone:** Empowering, professional, and innovative.
- **Headline style:** Bold, direct, and benefit-driven statements.
- **CTA style:** Action-oriented and inviting.
- **Avoid:** Passive language / Overly technical jargon without explanation / Vague promises

### Don'ts
- ❌ 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.

They deliberately do not use pure white backgrounds, harsh shadows, or cluttered layouts, ensuring the interface remains a premium, focused tool.

## System Prompt (paste into AI tool)

```
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.
```
