---
title: "Relume design system"
variant: extended
source: https://www.relume.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/relume-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Relume · Design System

> Warm editorial canvas, electric magenta, tangible product craft

**Theme:** light · **Industry:** ai · **Source:** https://www.relume.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Relume pairs a restrained warm-neutral interface with sharp magenta calls to action and vivid product previews. Spacious, centered messaging gives way to modular proof, export workflows, customer stories, and demo projects.

## North star

Keep the warm neutral canvas and clear editorial hierarchy dominant; use magenta sparingly to mark action and emphasis.

## Overview

The page is built on a warm off-white canvas (#f1f0ee), not pure white, which keeps the long homepage calm while allowing saturated magenta (#ff00f4) to make the primary actions and small uppercase trust labels immediately visible. Near-black headings and body copy carry the message; fine gray borders quietly define controls and card edges. Typography is clean, mostly Geist Variable, with large, regular-weight centered hero text and compact monospaced uppercase eyebrows. The hero leaves generous breathing room around the brief-input panel, then introduces a framed product interface with vivid pink and yellow geometric illustration. Lower sections alternate between concise copy and screenshots, collage-like component previews, and customer examples. The layout remains modular and grid-led, while bright cyan, pink, peach, and yellow chiefly animate product imagery rather than replacing the neutral brand canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f1f0ee` | `--color-warm-canvas` | brand | Dominant page background across the hero, section bands, and footer. |
| Electric Magenta | `#ff00f4` | `--color-electric-magenta` | accent | Primary CTA fills, trust eyebrow text, and select product-interface highlights. |
| Soft Ink | `#101010` | `--color-soft-ink` | neutral | Headings, primary navigation, body text, and strong foreground details. |
| Grid Charcoal | `#1b1919` | `--color-grid-charcoal` | semantic | Subtle inset rules and technical grid effects, not a broad page surface. |
| Quiet Border | `#dbdad9` | `--color-quiet-border` | neutral | Hairline outlines around navigation controls, cards, and interface elements. |
| Blush Edge | `#ffd9ff` | `--color-blush-edge` | accent | Faint pink edge detail on button states; secondary to the main magenta. |
| Deep Charcoal | `#161616` | `--color-deep-charcoal` | neutral | Occasional strong copy and interface text, close to the primary ink. |
| Candy Pink | `#ff9fff` | `--color-candy-pink` | accent | Bright preview-card fills, interface framing, and soft radial decorative effects. |
| Muted Ink | `#343434` | `--color-muted-ink` | neutral | Secondary copy, supporting navigation links, and subdued text. |
| Butter Cream | `#fff5cb` | `--color-butter-cream` | semantic | Pale text or decorative details inside product previews, not a core page surface. |
| Soft Butter | `#fff2b0` | `--color-soft-butter` | semantic | Light yellow illustration or mockup detail; not a defining interface color. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Input panel, white controls, and selected product-preview surfaces. |
| Peach Sand | `#f4c490` | `--color-peach-sand` | surface | Warm product-preview or card accents, rather than a major page band. |
| Quiet Gray | `#8a8a8a` | `--color-quiet-gray` | neutral | Low-emphasis helper text and muted details. |
| Roasted Brown | `#361d02` | `--color-roasted-brown` | semantic | Dark lettering or imagery detail within embedded sample-site previews. |
| Bright Cyan | `#98eafd` | `--color-bright-cyan` | surface | Cyan cards and export-preview accents, mostly within showcased product imagery. |
| Pink Mist | `#ffcfff` | `--color-pink-mist` | surface | Pastel card or preview backgrounds; use as an illustration surface, not the page canvas. |

### Semantic aliases

`--color-canvas` → `#f1f0ee` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#98eafd` (Bright Cyan) · `--color-surface-3` → `#ffcfff` (Pink Mist) · `--color-surface-4` → `#f4c490` (Peach Sand) · `--color-text` → `#101010` (Soft Ink) · `--color-text-muted` → `#343434` (Muted Ink) · `--color-text-subtle` → `#fff5cb` (Butter Cream) · `--color-border` → `#dbdad9` (Quiet Border) · `--color-accent` → `#ff00f4` (Electric Magenta) · `--color-accent-2` → `#ff9fff` (Candy Pink) · `--color-accent-3` → `#f4c490` (Peach Sand) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101010` | `#f1f0ee` | 16.71:1 | AAA |
| `#101010` | `#ffffff` | 19.03:1 | AAA |
| `#101010` | `#98eafd` | 14.07:1 | AAA |
| `#101010` | `#ffcfff` | 14.15:1 | AAA |
| `#343434` | `#f1f0ee` | 10.93:1 | AAA |
| `#343434` | `#ffffff` | 12.45:1 | AAA |
| `#343434` | `#98eafd` | 9.2:1 | AAA |
| `#343434` | `#ffcfff` | 9.26:1 | AAA |
| `#fff5cb` | `#f1f0ee` | 1.04:1 | fail |
| `#fff5cb` | `#ffffff` | 1.1:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(27, 25, 25) 1.25px, rgba(0, 0, 0, 0) 0px), linear-gradient(rgb(27, 25, 25) 1.25px, rgba(0, 0, 0, 0) 0px)`
- `radial-gradient(circle, rgb(255, 159, 255) 0%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(90deg, rgb(241, 240, 238), rgba(241, 240, 238, 0))`
- `linear-gradient(90deg, rgba(241, 240, 238, 0) 22%, rgb(241, 240, 238))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist Variable | `--font-body` | webfont | 400, 500, 440 | Primary display, headings, body, and much of the interface copy | Inter |
| Helvetica Now Display | `--font-display` | system | 400, 500 | Secondary headings, captions, and small display details | Inter |
| PP Writer | `--font-pp-writer` | system | 400 | Occasional serif styling in embedded sample-site content | Instrument Serif |
| Relume Icons | `--font-relume-icons` | webfont | 400 | Small product and interface iconography | Material Symbols |
| Geist Mono Variable | `--font-mono` | webfont | 500, 400 | Uppercase navigation-style eyebrows and technical labels | Geist Mono |
| ABC Diatype Semi-Mono | `--font-abc-diatype-semi-mono` | system | 500 | Minor semi-monospace interface or mockup text | IBM Plex Mono |

- **Geist Variable:** Regular, open sans-serif; large headlines use tight negative tracking, with restrained weights.
- **Helvetica Now Display:** Clean display sans; medium weights and slightly positive tracking for compact labels.
- **PP Writer:** Use sparingly for sample-site editorial content, not the main Relume interface.
- **Relume Icons:** Keep icons compact and functional; do not substitute decorative illustration for interface symbols.
- **Geist Mono Variable:** Compact uppercase labels; medium weight and slightly tight tracking.
- **ABC Diatype Semi-Mono:** Use only for occasional compact interface details; it is not a dominant text face.

### Type scale — Major Third (ratio ≈ 1.255, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.2 | -0.03em | — | Geist Variable | Large promotional statements and prominent centered hero messaging. |
| h1 | 40px | 400 | 1.2 | -0.02em | — | Geist Variable | Primary hero headline and major page-level statement. |
| h2 | 32px | 400 | 1 | -0.01em | — | Helvetica Now Display | Major feature-section headings and secondary promotional statements. |
| h3 | 28px | 440 | 1.4 | -0.02em | — | Geist Variable | Feature titles and supporting section headings. |
| h4 | 23.5px | 500 | 1.4 | 0.01em | — | Helvetica Now Display | Card and subsection headings within product stories. |
| body | 18px | 400 | 1.5 | 0 | — | Geist Variable | Hero description and explanatory product or feature copy. |
| caption | 16px | 400 | 1.4 | 0.01em | — | Helvetica Now Display | Compact supporting descriptions and image or card details. |
| nav | 14px | 500 | 1.43 | -0.02em | uppercase | Geist Mono Variable | Small uppercase monospaced navigation-style labels and eyebrows. |
| link | 12px | 500 | 1.5 | 0 | — | Geist Variable | Short links, attribution, and compact supporting actions. |
| eyebrow | 5.5px | 400 | 1.5 | 0.03em | uppercase | Helvetica Now Display | Small uppercase section identifiers above headings. |
| code | 14px | 500 | 1.43 | -0.02em | uppercase | Geist Mono Variable | Compact uppercase technical or product-interface labels. |

OpenType features in use: `"liga"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 8, 9, 12, 16, 24, 32 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1280px.

The measured page max width is 1280px, with comfortable density and a recurring 80px section rhythm. The hero is centered and narrow in composition, while product and proof sections shift into two- and three-column arrangements. Keep copy aligned to the start in feature sections, but center the primary hero and closing CTA. Use generous gaps between major blocks and tighter groupings within cards and controls. The opening navigation is a slim horizontal bar; long sections remain visually light despite dense screenshots.

## Shape & elevation

- Radius: button `6px` · card `16px` · media `5px` · badge `9999px` · nav `6px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (other, button, card): `rgba(27, 25, 25, 0.1) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button, card, other): `rgba(27, 25, 25, 0.1) 0px -1px 0px 0px inset`
- Shadow `inset-3` (other): `rgb(27, 25, 25) 0px 0px 0px 1.25px inset`
- Shadow `inset-4` (other, button): `rgb(255, 159, 255) 0px 0px 0px 1px inset`
- Shadow `hairline` (card, other): `rgba(27, 25, 25, 0.1) 1px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgba(27, 25, 25, 0.1) 0px 1px 0px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with thin gray hairlines separating controls and outlining subtle surfaces. Buttons and cards use restrained inset edge effects rather than prominent drop shadows. Product screenshots gain depth through overlapping panels, colorful frames, and layered mockup content; preserve those overlaps while keeping surrounding page sections quiet.

## Imagery

Product imagery is central: large browser-like interface previews, component collages, and polished sample-site screenshots demonstrate the workflow. Bright pink, cyan, peach, and yellow mostly live inside those previews. Geometric, gridded 3D-like forms flank the hero and CTA, while the testimonial section uses a rounded portrait crop. Keep imagery crisp and framed by the warm canvas rather than applying a heavy global tint.

## Components

### Top navigation

A horizontal header with the Relume mark, compact product links, a bordered Log in control, and a magenta Start for free button.

### Brief input

A broad white, lightly rounded text-entry surface with muted placeholder text and compact action controls aligned along its bottom edge.

### Primary CTA

Bright #ff00f4 fill, white text, compact Geist label, and measured 6px corner radius.

### Product preview

Large browser-like interface imagery with layered application chrome, sample-site content, and vivid illustrated framing.

### Feature panels

Editorial split sections pairing a concise heading and copy with product screenshots or preview cards.

### Demo project cards

Three side-by-side site previews with image-led layouts and compact labels beneath the screenshots.

### Footer

A light multi-column link area with brand mark, community imagery, and grouped product and support navigation.

### Measured component styles

- **Primary button** (“Start for free”): background #ff00f4 · text #ffffff · radius 6px · padding 6px 12px · 400 14px Geist Variable
- **Secondary button** (“Log in”): transparent background · text #101010 · border 1px solid #dbdad9 · radius 6px · padding 6px 12px · 400 14px Geist Variable
- **Link** (“Andy McKay”): transparent background · text #101010 · radius 0px · padding 0px · 500 12px Geist Variable
- **Input**: transparent background · text #101010 · radius 0px · padding 20px · 400 16px Geist Variable
- **Card** (“Aura Trails Brief Wireframe Style Guide ”): background #98eafd · text #101010 · radius 16px · padding 0px · 400 14px Geist Variable
- **Badge** (“icon-attachment”): background #101010 · text #101010 · radius 0px · padding 0px · 400 0px Relume Icons
- **Navigation item** (“Products Pricing Contact Sales Component”): transparent background · text #101010 · radius 0px · padding 0px · 400 14px Geist Variable

## Do

- Use #f1f0ee as the dominant page canvas.
- Reserve #ff00f4 for primary actions and small high-attention accents.
- Keep hero messaging centered and concise.
- Use crisp sans-serif typography with compact uppercase eyebrows.
- Show real-looking product screens as evidence, not generic decoration.
- Separate major blocks with generous whitespace and subtle hairlines.

## Don't

- Do not turn the whole page into a bright pink or white surface.
- Do not use heavy shadows to lift ordinary cards.
- Do not crowd the hero with extra navigation or copy.
- Do not treat mockup colors as the main brand palette.
- Do not make every section a centered text block.
- Do not use oversized decorative type in interface controls.

## Agent prompt

Build a new Relume-style page on a warm #f1f0ee canvas, using #101010 for confident, readable headings and #343434 for secondary copy. Use #ff00f4 selectively for primary actions and compact uppercase trust or section labels; keep #ffffff for input and control surfaces, with #dbdad9 hairlines instead of heavy shadows. Set headlines in a clean Geist-like sans, with a centered, generous hero and narrower supporting copy. Organize lower content into modular split sections and image-led grids. Feature crisp browser-style product previews; allow #ff9fff, #98eafd, #ffcfff, and #f4c490 to appear mainly inside those previews. Maintain comfortable whitespace, align feature copy deliberately, and build depth through layered screenshots rather than decorative card elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy above a wide brief-entry panel, with product preview emerging below. | brief input, generate action, example link | magenta trust label, white input panel, paired CTAs |
| 2 | video | Full-width, single-column application preview beneath the hero. | product walkthrough | browser-style frame, pink framing, layered screenshot |
| 3 | logo-cloud | One horizontal band of compact customer logos. | social proof | small logo row, neutral canvas |
| 4 | feature-grid | Introductory heading and copy followed by alternating product-focused feature panels. | choose publishing path, feature exploration | split panels, pink and cyan imagery, compact feature lists |
| 5 | product-showcase | Two-column showcase with a website mockup and supporting export copy. | export workflow, tool comparison | sample site preview, tool icons, split layout |
| 6 | feature-grid | Section introduction above two large preview cards and supporting copy. | system explanation, component evidence | collage previews, layered cards, short feature captions |
| 7 | video | Full-bleed centered statement with oversized illustrated wordmark and small follow-up link. | agency story link | oversized yellow lettering, neutral open space |
| 8 | testimonials | Portrait image beside a left-aligned testimonial and attribution. | customer proof, attribution | rounded portrait crop, small magenta eyebrow, editorial split |
| 9 | gallery | Section title and brief introduction above a row of three site-preview cards. | browse demos, open project | three-column gallery, website screenshots, compact metadata |
| 10 | cta | Centered closing headline and brief form with scattered geometric illustrations. | enter a brief, generate website | magenta CTA, white input panel, floating illustrations |
| 11 | footer | Brand and community area beside multiple grouped link columns. | browse resources, follow social links | multi-column footer, small community portraits, grouped navigation |

## Source CSS custom properties (selected)

```css
--_publish-colors---foreground--primary: #101010;
--_publish-colors---foreground--tertiary: #5c5c5c;
--_publish-colors---foreground--secondary: #343434;
--_publish-colors---borders--subtle-light: #1b19191a;
--_publish-colors---states--hover: #16161614;
--_publish-colors---background--inverse: #101010;
--_publish-colors---foreground--inverse: white;
--_publish-colors---borders--strong: #101010;
--_publish-primitives---colors--neutral-1000: #101010;
--_publish-colors---background--secondary: white;
--_publish-colors---background--primary: #f1f0ee;
--_publish-colors---background--tertiary: #e4e2df;
--_publish-colors---foreground--disabled: #b9b9b9;
--_publish-colors---background--secondary-blur: #fffc;
--_publish-colors---background--accent-bold: #ff00f4;
--_publish-primitives---colors--pink-400: #ff3ff7;
--_publish-colors---foreground--upgrade: #ff00f4;
--code-block-background: #222;
--_publish-primitives---colors--neutral-200: #e4e2df;
--_publish-primitives---colors--neutral-000: white;
--_hipages-colors---background--brand-subtle: #fff0e3;
--_hipages-colors---foreground--primary: #1d2a41;
--_publish-colors---background--purple-subtle: #eadcff;
--_publish-primitives---font-size--body-m: .875rem;
--_publish-colors---states--surface: #1616160f;
--_publish-colors---background--primary-blur: #f1f0eee6;
--_publish-primitives---colors--transparent: transparent;
--_publish-colors---foreground--ai: #ff00f4;
--_publish-colors---states--primary-hover: #ff29f6;
--_publish-colors---borders--subtle-dark<deleted|variable-33e37350-e4c8-bde3-f81f-713712c7cb29>: #ffffff1a;
--_publish-colors---states-light--hover<deleted|variable-45dfd020-0d99-e75b-e0f9-3abb8f0d4cb2>: #ffffff14;
--_publish-colors---background--toasts: #101010cc;
--_publish-colors---foreground--blue: #00b8ed;
--_publish-colors---background--ai-bold: #ff00f4;
--_publish-colors---background--accent-subtle: #ffcfff;
--_publish-colors---foreground--accent: #ff00f4;
--_publish-colors---foreground--global: #00dc11;
--_publish-colors---foreground--purple: #7c2dff;
--_publish-colors---background--accent-subtle-brand: #ff9fff;
--_publish-colors---background--blue-subtle-brand: #98eafd;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/relume-io