---
version: alpha
name: "relume.ai"
description: "Design system extracted from https://www.relume.ai/ on 2026-10-28"
colors:
  background: "#f1f0ee"
  surface: "#ffffff"
  surface-2: "#e4e3e1"
  foreground: "#101010"
  muted-foreground: "#343434"
  primary: "#ff00f4"
  on-primary: "#111111"
  secondary: "#98eafd"
  border: "#dcdbd9"
typography:
  headline-display:
    fontFamily: "Geist Variable"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "67.2px"
    letterSpacing: "-1.68px"
  headline-lg:
    fontFamily: "Geist Variable"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: "48px"
    letterSpacing: "-0.8px"
  headline-md:
    fontFamily: "Geist Variable"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "25.2px"
    letterSpacing: "-0.36px"
  body-md:
    fontFamily: "Geist Variable"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "27px"
  label-md:
    fontFamily: "Geist Variable"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "18px"
  button:
    fontFamily: "Geist Variable"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "20.02px"
rounded:
  none: "0px"
  md: "6px"
  sm: "4px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "72px"
  9: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "6px"
    height: "32px"
    padding: "6px 12px"
  button-secondary:
    backgroundColor: "#ffffffeb"
    textColor: "#101010"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "88px"
    padding: "0px 0px"
  button-ghost:
    backgroundColor: "#f1f0eee6"
    textColor: "#161616"
    typography: "{typography.button}"
    rounded: "6px"
    height: "25px"
    padding: "0px 8px"
  card:
    backgroundColor: "#ffffffcc"
    rounded: "0px"
    padding: "0px"
---

# relume.ai

## Overview

Relume — AI Website Builder for Marketing Websites: Relume's AI website builder: build on the components behind 2M+ websites, publish in Relume or export to Webflow, Figma & React. Free to start.

Gently rounded controls, layered shadows for depth, large display type at 56px / 400, a single pink accent on neutrals. The site ships in light mode by default. Measured from 5032 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1, rest
- `screenshots/c-button-1--hover.png`: Button 1, hover
- `screenshots/c-button-1--focus.png`: Button 1, focus
- `screenshots/c-button-1--active.png`: Button 1, active
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-link-1--rest.png`: Text link 1 ("Andy McKay"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Andy McKay"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Andy McKay"), focus
- `screenshots/c-overlay-tooltip-1--open.png`: Tooltip 1 opened by link "Andy McKay"
- `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("Standard"), rest
- `screenshots/c-radio-1--rest.png`: Radio 1 ("1"), rest
- `screenshots/c-radio-1--disabled.png`: Radio 1 ("1"), disabled
- `screenshots/c-radio-1--checked.png`: Radio 1 ("1"), checked
- `screenshots/c-label-1--rest.png`: Field label 1 ("Style"), rest
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Pricing"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Products"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Products"), hover
- `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Products"), clicked
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Relume PublishNew"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Relume PublishNew"), hover
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-social-links-1--hover.png`: Social icon links 1, hover
- `screenshots/c-theme-toggle-1--rest.png`: Theme toggle 1, rest
- `screenshots/c-theme-toggle-1--hover.png`: Theme toggle 1, hover
- `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("Explore Publish"), rest
- `screenshots/c-badge-1--hover.png`: Badge / pill / tag 1 ("Explore Publish"), hover
- `screenshots/c-chip-1--rest.png`: Chip (removable / selectable tag) 1 ("Hero / Primary Orientati"), rest
- `screenshots/c-counter-badge-1--rest.png`: Counter / notification dot 1, rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("What is an AI website bu"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f1f0ee` | Page background |
| surface | `#ffffff` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#e4e3e1` | Secondary surface |
| foreground | `#101010` | Primary text |
| muted-foreground | `#343434` | Secondary text, captions |
| primary | `#ff00f4` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#111111` | Text on the accent |
| secondary | `#98eafd` | Secondary accent (cyan) |
| border | `#dcdbd9` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f1f0ee`, `#ff9fff`, `#ffffff`, `#98eafd`, `#f4c490`, `#ffcfff`, `#ff8225`, `#ffdb01`.

Gradients in use: `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))`.

The accent `#ff00f4` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Geist Variable** for h1, h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Geist** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Geist Variable | 56px | 400 | 67.2px | -1.68px |
| headline-lg | Geist Variable | 40px | 400 | 48px | -0.8px |
| headline-md | Geist Variable | 18px | 400 | 25.2px | -0.36px |
| body-md | Geist Variable | 18px | 400 | 27px | normal |
| label-md | Geist Variable | 12px | 400 | 18px | normal |
| button | Geist Variable | 14px | 500 | 20.02px | normal |

Type scale in use: 10px, 12px, 14px, 16px, 18px, 28px, 32px, 40px, 56px. Base body size 18px.

The hero heading (h1) renders at 56px / 400, center aligned, up to 640px wide, tracking -1.68px. Sample: "Fastest AI website builder for simple marketing sites".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 72, 80 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 32, 80 px.
- Content max width: 1280px, centred.
- Breakpoints: 479px, 700px, 767px, 768px, 991px.
- Header: 56px tall, relative, background `rgba(0, 0, 0, 0)`; 8 nav links at 14px / 500 (Pricing · Contact Sales · Component Voting · Learn).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(27, 25, 25, 0.1) 0px 0px 0px 1px inset`
- shadow-2: `rgba(27, 25, 25, 0.1) 0px -1px 0px 0px inset`
- shadow-3: `rgb(27, 25, 25) 0px 0px 0px 1.25px inset`
- shadow-4: `rgb(255, 159, 255) 0px 0px 0px 1px inset`

## Shapes

- Buttons: 6px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, md 6px, sm 4px, full 9999px

## Components

### Button, primary

Background `#ff00f4`, text `#ffffff`, border none, radius 6px, height 32px, padding 6px 12px, 14px / 400. Sample label: "Generate Website".

### Button, secondary

Background `#ffffffeb`, text `#101010`, border none, radius 9999px, height 88px, padding 0px 0px, 14px / 400, shadow `rgba(0, 0, 0, 0.24) 0px 8px 32px 0px`.

### Button, ghost

Background transparent (it sits on `#f1f0eee6`, so place it on that colour), text `#161616`, border none, radius 6px, height 25px, padding 0px 8px, 14px / 400. Sample label: "Aura Trails".

### Card

Background `#ffffffcc`, border 1px solid #1b19191a, radius 16px, padding 0px, no shadow. Typical size about 640×174px.

### Link

Colour `#101010`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (31 of 87 in the checklist, 66 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 14 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost, ghost-with-icon, ghost-with-icon sm, primary, ghost lg, ghost, ghost-with-icon sm, ghost-with-icon lg | hover, focus, active |  |
| Icon button | ghost, ghost, secondary, secondary | rest only |  |
| Toggle / segmented control | ghost, ghost | rest only | "Agents" |
| Text link | underlined, plain, plain, underlined | hover, focus | "Andy McKay" |
| Textarea | outlined, outlined | rest only |  |
| Combobox / custom select | filled sm | rest only | "Standard" |
| Radio | native, native | disabled | "1" |
| Field label | default | rest only | "Style" |
| Header / navbar | default | rest only | "Products PublishTake your proj" |
| Navigation link | plain, underlined | hover, focus | "Pricing" |
| Menu / dropdown trigger | ghost | hover, open | "Products" |
| Tabs | plain, pill | rest only | "PublishExport" |
| Footer | default | rest only | "Dan AnisseCo-Founder & CEOicon" |
| Footer link | plain | hover | "Relume PublishNew" |
| Social icon links | default | hover |  |
| Theme toggle | default | hover |  |
| Badge / pill / tag | neutral-square, brand-square, neutral-square, subtle-square, inverse-square, success-pill, neutral-pill, success-square | hover | "Explore Publish" |
| Chip (removable / selectable tag) | inverse-square | rest only | "Hero / Primary Orientation" |
| Counter / notification dot | warning-filled | rest only |  |
| Card | elevated, elevated, elevated-with-media, filled-with-media, filled-with-media, elevated-with-media | rest only |  |
| Accordion / disclosure | details | rest only | "What is an AI website builder?" |
| Avatar | 16px-rounded, 19px-rounded, 57px-rounded | rest only |  |
| Avatar stack | default | rest only |  |
| Image / figure | aspect-2.5, aspect-1.71-rounded, aspect-1.71 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | outline-55px, outline-9px, outline-48px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Button group, Floating action button, Close / dismiss button, Text input, Search field, Select (native), Checkbox, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Language / region switch, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via toggle (Switch to dark theme). Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#f1f0ee` | `#101010` |
| surface | `#ffffff` | `#2b2319` |
| surface-2 | `#e4e3e1` | `#1a1a1a` |
| foreground | `#101010` | `#ffffff` |
| muted-foreground | `#343434` | `#8a8a8a` |
| primary | `#ff00f4` | `#6c0063` |
| on-primary | `#111111` | `#ffffff` |
| secondary | `#98eafd` | `#102d66` |
| border | `#dcdbd9` | `#1e1e1e` |

Dark-theme shadows: `rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset`; `rgba(255, 255, 255, 0.06) 0px -1px 0px 0px inset`; `rgb(27, 25, 25) 0px 0px 0px 1.25px inset`; `rgb(108, 0, 99) 0px 0px 0px 1px inset`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 432px | 14px | 56px, 2 lines, center | 56px, 4 links | text only | 2→1 col; 2→2 col; 2→1 col | content-width |
| laptop 1024px | 922px | 192px | 14px | 56px, 2 lines, center | 56px, 4 links | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 691px | 64px | 14px | 52px, 2 lines, center | 56px, hamburger (Open menu), 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 351px | 20px | 14px | 40px, 3 lines, center | 56px, hamburger (Open menu), 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 56px → 40px (71%), 2 → 3 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 56px → 56px.
- Card grids: 3 columns → 1 column on phones (gap 62.26px → 77.84px).
- Body text is 14px at the sampled desktop and phone widths.
- Phone side gutter 20px.

## Interaction & Motion

514 elements carry transitions; typical 0.2s with ease, mostly on opacity, color, transform. 10 running keyframe animations (ra-caret-blink 1.06s infinite; ra-trail-run 5s infinite; logoloop 30s infinite).

- Hover on button-primary ("Generate Website"): moves down 1px; cursor pointer; transition opacity, color, border-color, background-color, transform | 0.2s, 0.2s, 0.2s, 0.2s, 0.2s | ease, ease, ease, ease, ease-out | delay 0s, 0s, 0s, 0s, 0s.
- Hover on button-secondary ("Generate"): no visible change; cursor pointer; transition opacity, color, border-color, background-color, transform | 0.2s, 0.2s, 0.2s, 0.2s, 0.2s | ease, ease, ease, ease, ease-out | delay 0s, 0s, 0s, 0s, 0s.
- Hover on nav-link ("Pricing"): background transparent → #1616160f; cursor pointer; transition transform | 0.2s | ease-out.
- Hover on card ("icon-attachmentPublishExportGenerate Web"): background #ffffffcc → #ffffff, shadow added (rgba(0, 0, 0, 0.05) 0px 4px 8px -2px, rgba(0, 0, 0, 0.01) 0p); cursor auto; transition min-height, background-color, box-shadow | 0.42s, 0.2s, 0.2s | cubic-bezier(0.22, 1, 0.36, 1), ease-out, ease-out | delay 0s, 0s, 0s.
- Hover on input: no visible change; cursor text; transition min-height, max-height | 0.42s, 0.42s | cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1) | delay 0s, 0s.
- Focus on button-primary: outline 1px auto rgb(16, 16, 16).
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (.tooltip-icon): width: 1.25rem; height: 1.25rem.
- 2 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 9 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#ff00f4` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 18px in Geist Variable.
- Do match corner radii per element class (buttons 6px, cards 0px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.