CURATED · OPEN · FREE

Relume

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

designtool

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://www.relume.io

📦 Browse pack contents →

Identity DNA

AI-drivendesign accelerationmarketing websitesdeveloper tools

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

Color

#6248FFAccent

#161616Ink

#686868Ink soft

#F1F0EEBG

#FFFFFFBG soft

#E4E2DFBG quiet

rgba(22,22,22,0.1)Line

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

Typography

humanist-sans · monospace

display80px · 500
h240px · 500
body-lg19px · 400
body16px · 400
caption14px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 6px

md · 8px

lg · 16px

pill · 999px

1px solid rgba(22,22,22,0.1)

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

Smooth opacity and transform transitions on hover. · Floating animations for decorative UI elements. · Accelerated layout shifts on viewport entry.

Subtle background color shifts and slight vertical lifts on cards and buttons. · Immediate visual feedback via background changes or scale transforms.

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.

Voice & Don'ts

Tone Empowering, professional, and innovative.
Headlines Bold, direct, and benefit-driven statements.
CTAs Action-oriented and inviting.

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.
Avoid: Passive language
Avoid: Overly technical jargon without explanation
Avoid: Vague promises

Inside the pack — real screenshots

Relume — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko