Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Lume®
Lume® is a Webflow agency template that treats saturated colour as structural grammar rather than decoration — each hero section swaps between burgundy dusk, electric cobalt, and warm terracotta to mark a new visual chapter, while the surrounding system stays disciplined: stark black ink on gallery white, oversized Bebas Neue display type, and a tight uppercase Inter voice for navigation and labels. The result reads like an editorial fashion portfolio crossed with a creative studio's pitch deck — bold, cinematic hero photography and video loops anchor every page, bracketed by a consistently minimal chrome of pill buttons, hairline dividers, and generous whitespace. Structurally the template is spacious and confident: 150px section rhythm, 1300px content container, pill-shaped buttons, and a sticky wave-animation footer that turns the closing CTA into its own moment. Colour sections are elevated like theatrical backdrops against an otherwise quiet black-and-white foundation, so the brand feels equally at home in monochrome portfolio mode and full-bleed colour-blocked campaign mode.
Colors
Canvas
Soft Stone
#fafaf9
Lifted section surface. Used for alternating gray sections like FAQ and team blocks.
Gallery White
#ffffff
Page canvas. Base background for content sections and card surfaces.
Ink
Midnight Script
#0c0c1d
Primary text & ink. Headlines, body copy, button fills, and footer background.
Accent
Amber Rust
#c97d3f
Secondary warm accent. Complements terracotta in apparel and badge imagery.
Burgundy Dusk
#3d1418
Deep hero backdrop. One of the rotating full-bleed colour chapters behind editorial photography.
Electric Cobalt
#1a3fd6
High-energy hero backdrop. Signals the studio's digital/motion-driven project chapters.
Terracotta Clay
#b5623f
Warm editorial accent. Appears in portrait wardrobe tones and supporting imagery.
State — utility only
Signal Blue
#3898ec
Interactive/focus state. Checkbox checked state and focus outlines on form fields.
Typography
The quick brown fox jumps
Body copy, navigation, labels, forms, and UI chrome.
The quick brown fox jumps
Display headlines, hero titles, oversized section statements.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1300pxSection gap
150pxCard padding
30pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150px--spacing-200
200pxBorder radius
cards7pxsmall4pxcircle160pxbuttons48pxcontainers9.6pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Gallery White
Level 2Soft Stone
Level 3Midnight Script
Level 4Burgundy Dusk
Level 5Electric Cobalt
Do's and don'ts
- Use full-bleed hero sections with a single dominant colour (burgundy, cobalt, or terracotta) per page or chapter to create visual contrast between sections.
- Pair oversized Bebas Neue display type with tightly tracked uppercase Inter labels for a disciplined editorial hierarchy.
- Keep buttons fully pill-shaped (48px+ radius) with uppercase 14px bold labels in black-on-white or white-on-black only.
- Reserve the 150px section rhythm and 1300px container for a consistent, breathable page cadence.
- Let photography and video bleed edge-to-edge behind text, using mix-blend or overlay techniques to keep copy legible.
- Use the small uppercase square-bullet label pattern (■ SECTION NAME) to introduce every content block.
- Keep the footer dark with a looping background video or wave animation to bookend every page memorably.
- Don't introduce more than one saturated accent colour per hero section — let each chapter read as a single mood.
- Don't use rounded-corner cards larger than 7–10px radius; the system contrasts sharp cards against pill buttons intentionally.
- Don't set body copy in Bebas Neue — it is reserved exclusively for display and hero-scale headlines.
- Don't shrink the hero title below display scale; it is meant to dominate the viewport on entry.
- Don't add drop shadows to cards or images — depth comes from colour blocking and video, not elevation shadows.
- Don't break the uppercase convention on navigation links, labels, or button text.
- Don't crowd sections — spacing is intentionally generous (60–200px) and should never collapse to a compact grid.
Example prompts
New hero section
Services block
CTA footer
Team card
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide