saas · material · playful · minimal · modern

Lumen Material.

Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI.

01 · Preview

The kitchen sink.

Lumen.app

ProductPricingDocsAbout

Sign inGet started

saas · material · playful

Build with Lumen Material.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#1D1B20

secondary

#79747E

tertiary

#6750A4

neutral

#F7F2FA

surface

#FEF7FF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

8px

md

12px

lg

16px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

1---
2name: "Lumen Material"
3description: "Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI."
4tags: [saas, material, playful, minimal, modern]
5colors:
6  primary:   "#1D1B20"
7  secondary: "#79747E"
8  tertiary:  "#6750A4"
9  neutral:   "#F7F2FA"
10  surface:   "#FEF7FF"
11typography:
12  display: "Roboto Flex"
13  body:    "Roboto Flex"
14  mono:    "Roboto Mono"
15  scale:
16    hero: "3.5625rem / 1.12 / 400 / -0.015em"
17    h1:   "2rem / 1.25 / 400 / 0"
18    h2:   "1.375rem / 1.27 / 500 / 0"
19    body: "1rem / 1.5 / 400 / 0.03125em"
20radius:
21  sm: 8px
22  md: 12px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)"
27  button: "0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)"
28borders:
29  card:    "1px solid #CAC4D0"
30  divider: "#CAC4D0"
31buttons:
32  primary:
33    background: #6750A4
34    color: #FFFFFF
35    border: none
36    shape: pill
37    padding: 10px 24px
38    font: body / 500 / 0.875rem / 0.00714em
39    shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)
40    hover: lift
41  secondary:
42    background: #E8DEF8
43    color: #1D192B
44    border: none
45    shape: pill
46    padding: 10px 24px
47    font: body / 500 / 0.875rem / 0.00714em
48  outline:
49    background: transparent
50    color: #6750A4
51    border: 1px solid #79747E
52    shape: pill
53    padding: 9px 24px
54    font: body / 500 / 0.875rem / 0.00714em
55  ghost:
56    background: transparent
57    color: #6750A4
58    border: none
59    shape: pill
60    padding: 10px 12px
61    font: body / 500 / 0.875rem / 0.00714em
62    hover: glow
63charts:
64  variant: "rounded-bars"
65  gridlines: true
66  bar_radius: 4px
67  bar_gap: 12px
68  highlight: single
69  axis_color: "#79747E"
70  palette: ["#6750A4", "#625B71", "#7D5260"]
71fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap"
72dependencies: ["lucide-react"]
73---
74 
75# Lumen Material
76 
77## AI Build Instructions
78 
79> **Read this section before writing any code.** The rules below
80> are non-negotiable. Every value used in the UI must come from this
81> file's frontmatter — never substitute, approximate, or invent new
82> colors, fonts, radii, or shadows. If a value is missing, ask the
83> user before adding one.
84 
85### 1 · Your role
86 
87You are building UI for a project that has adopted **Lumen Material** as its
88design system. Treat `DESIGN.md` as the single source of truth.
89Your job is to translate the user's product requirements into
90components and pages that look like they were designed by the same
91person who authored this file.
92 
93### 2 · Token compliance
94 
95- Pull every color, font family, radius, shadow, and spacing value
96  from the frontmatter at the top of this file.
97- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
98  hard-code hex values that bypass the system.
99- When a token can be expressed as a CSS variable, declare it once
100  in your global stylesheet and reference it everywhere downstream.
101- The Google Fonts `<link>` is provided in the Typography section.
102  Add it to `<head>` before any component renders.
103 
104### 3 · Component recipes
105 
106Use these recipes verbatim when building the corresponding component.
107 
108#### Buttons
109 
110Four variants are defined. Pick one — never blend variants or invent a fifth.
111 
112- **Primary** — pill shape, bg `#6750A4`, text `#FFFFFF`, padding `10px 24px`, weight `500`, shadow `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`.
113- **Secondary** — pill shape, bg `#E8DEF8`, text `#1D192B`, padding `10px 24px`, weight `500`.
114- **Outline** — pill shape, text `#6750A4`, border `1px solid #79747E`, padding `9px 24px`, weight `500`.
115- **Ghost** — pill shape, text `#6750A4`, padding `10px 12px`, weight `500`.
116 
117Reach for **primary** as the single dominant CTA per screen.
118**Secondary** for the supporting action. **Outline** for tertiary
119actions in toolbars. **Ghost** for inline links and table actions.
120 
121#### Cards
122 
123- Background: `#FEF7FF`
124- Border: `1px solid #CAC4D0`
125- Shadow: `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`
126- Radius: `radius.lg` (`16px`)
127- Internal padding: `20px` for compact cards, `24–28px` for content cards.
128 
129#### Charts
130 
131- Bar/line variant: `rounded-bars`
132- Bar radius: `4px`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134- Use the declared palette in order: `#6750A4`, `#625B71`, `#7D5260`.
135 
136#### Typography pairings
137 
138- **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## Overview
166Lumen Material is a faithful implementation of the modern tonal-elevation product spec. It uses dynamic-color purple **#6750A4** as the primary, tonal surface containers for elevation (instead of opacity overlays), full-rounded **9999px** buttons, and **Roboto Flex** as the single typeface across display and body. Cards rest on a tonal hierarchy — `surface` for the base, `surface-container-low` for the page canvas, with a 1px `outline-variant` hairline.
167 
168This is a system designed for product UI: it is generous, dependable, and accessible by construction. State layers, label-large typography, and 40px touch targets all match the spec.
169 
170## Color (tonal palette)
171The system is built on the seven-role color spec. Surface tones replace the old opacity-overlay elevation model.
172 
173| Role | Token | Hex |
174|------|-------|-----|
175| Primary | `primary` | `#6750A4` |
176| On-Primary | `on-primary` | `#FFFFFF` |
177| Primary Container | `primary-container` | `#EADDFF` |
178| On-Primary Container | `on-primary-container` | `#21005D` |
179| Secondary | `secondary` | `#625B71` |
180| Secondary Container | `secondary-container` | `#E8DEF8` |
181| On-Secondary Container | `on-secondary-container` | `#1D192B` |
182| Surface | `surface` | `#FEF7FF` |
183| Surface Container Low | `surface-container-low` | `#F7F2FA` |
184| On-Surface | `on-surface` | `#1D1B20` |
185| Outline | `outline` | `#79747E` |
186| Outline Variant | `outline-variant` | `#CAC4D0` |
187 
188## Typography
189**Roboto Flex** at every level. The type scale follows the published display/headline/title/body roles.
190 
191| Role | Size | Weight | Leading | Tracking |
192|------|------|--------|---------|----------|
193| Display Large | 3.5625rem | 400 | 1.12 | -0.015em |
194| Headline Large | 2rem | 400 | 1.25 | 0 |
195| Title Large | 1.375rem | 500 | 1.27 | 0 |
196| Body Large | 1rem | 400 | 1.50 | +0.03125em |
197| Label Large | 0.875rem | 500 | 1.43 | +0.00714em |
198 
199Display and headline run at **weight 400** — the spec is intentionally light at the top of the scale.
200 
201## Shape
202- **Small:** 8px (chips, dense buttons)
203- **Medium:** 12px (cards, sheets)
204- **Large:** 16px (dialogs, large cards)
205- **Full:** 9999px (buttons, FAB)
206 
207Buttons are **pills**. Cards are **12px medium**. Sharp corners are out of system.
208 
209## Elevation (tonal)
210The system uses tonal surface colors for elevation rather than opacity overlays. Six elevation levels exist; the resting card uses Level 1.
211 
212- **Level 0:** `surface` — flat
213- **Level 1:** key shadow `0 1px 2px rgba(0,0,0,0.30)` + ambient `0 1px 3px 1px rgba(0,0,0,0.15)`
214- **Level 3:** `0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15)` — used on filled buttons and floating actions
215 
216## Buttons
217Five canonical variants exist in the spec; this system ships four:
218 
219- **Filled** (primary) — purple background, white ink, level-1 shadow, full-rounded. The default high-emphasis CTA.
220- **Filled tonal** (secondary) — `secondary-container` fill #E8DEF8 with on-secondary-container ink #1D192B. No shadow. Use when filled would compete with another primary.
221- **Outlined** — 1px `outline` border #79747E, primary-color label. Medium emphasis.
222- **Text** (ghost) — bare label in primary color with state-layer hover. Lowest emphasis, used inline.
223 
224All four are **full-rounded pills** (9999px). Touch height 40px. Label-large typography (14/500/+0.7px tracking).
225 
226## Charts & Data
227Rounded bars (4px corner radius), 12px gap, primary color with faint `outline-variant` gridlines. The spec leans on subtle gridlines — they help with scan, they don't dominate. Axis labels in `outline` #79747E.
228 
229## State Layers
230Interactive elements carry an 8% / 12% / 16% state layer for hover / focus / pressed in their own ink color. Implement as a translucent overlay, not as a separate fill — the underlying token color must remain readable.
231 
232## Do's and Don'ts
233- ✅ Use tonal surface containers for elevation. Never use opacity overlays.
234- ✅ Full-rounded pills for all buttons. 9999px is the spec.
235- ✅ Keep Roboto Flex for both display and body — single-typeface clarity is intentional.
236- ✅ Use `outline-variant` #CAC4D0 for hairline borders, never `outline` #79747E (that's for emphasis).
237- ✅ Apply label-large typography on buttons (14/500/+0.7px). Don't shrink it.
238- ❌ No sharp corners on buttons or cards. 8px is the floor.
239- ❌ No bold display headlines — weight 400 is correct at hero size.
240- ❌ Don't use the primary purple as a body color. It is for action and brand identity.
241- ❌ Don't add drop-shadows beyond the published elevation levels.
242 
243---
244 
245## Tokens
246 
247> Generated from the same source the live preview renders from.
248> Treat the values below as the contract — never substitute approximations.
249 
250### Colors
251 
252| Role      | Value |
253|-----------|-------|
254| primary   | `#1D1B20` |
255| secondary | `#79747E` |
256| tertiary  | `#6750A4` |
257| neutral   | `#F7F2FA` |
258| surface   | `#FEF7FF` |
259 
260### Typography
261 
262- **Display:** Roboto Flex
263- **Body:** Roboto Flex
264- **Mono:** Roboto Mono
265 
266| Role | size / leading / weight / tracking |
267|------|------------------------------------|
268| Hero | 3.5625rem / 1.12 / 400 / -0.015em |
269| H1   | 2rem / 1.25 / 400 / 0 |
270| H2   | 1.375rem / 1.27 / 500 / 0 |
271| Body | 1rem / 1.5 / 400 / 0.03125em |
272 
273### Radius
274 
275- sm: `8px`
276- md: `12px`
277- lg: `16px`
278- pill: `9999px`
279 
280### Shadows
281 
282- **card:** `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)`
283- **button:** `0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)`
284 
285### Borders
286 
287- **card:** `1px solid #CAC4D0`
288- **divider:** `#CAC4D0`
289 
290### Buttons
291 
292Four variants, each fully tokenized. The preview renders from these exact values.
293 
294#### Primary
295 
296| Property | Value |
297|----------|-------|
298| shape | `pill` |
299| background | `#6750A4` |
300| color | `#FFFFFF` |
301| border | `none` |
302| padding | `10px 24px` |
303| fontFamily | `body` |
304| fontWeight | `500` |
305| fontSize | `0.875rem` |
306| tracking | `0.00714em` |
307| shadow | `0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15)` |
308| hoverHint | `lift` |
309 
310#### Secondary
311 
312| Property | Value |
313|----------|-------|
314| shape | `pill` |
315| background | `#E8DEF8` |
316| color | `#1D192B` |
317| border | `none` |
318| padding | `10px 24px` |
319| fontFamily | `body` |
320| fontWeight | `500` |
321| fontSize | `0.875rem` |
322| tracking | `0.00714em` |
323 
324#### Outline
325 
326| Property | Value |
327|----------|-------|
328| shape | `pill` |
329| background | `transparent` |
330| color | `#6750A4` |
331| border | `1px solid #79747E` |
332| padding | `9px 24px` |
333| fontFamily | `body` |
334| fontWeight | `500` |
335| fontSize | `0.875rem` |
336| tracking | `0.00714em` |
337 
338#### Ghost
339 
340| Property | Value |
341|----------|-------|
342| shape | `pill` |
343| background | `transparent` |
344| color | `#6750A4` |
345| border | `none` |
346| padding | `10px 12px` |
347| fontFamily | `body` |
348| fontWeight | `500` |
349| fontSize | `0.875rem` |
350| tracking | `0.00714em` |
351| hoverHint | `glow` |
352 
353### Charts
354 
355| Property | Value |
356|----------|-------|
357| variant | `rounded-bars` |
358| gridlines | `true` |
359| barRadius | `4px` |
360| barGap | `12px` |
361| highlight | `single` |
362| axisColor | `#79747E` |
363| palette | `#6750A4`, `#625B71`, `#7D5260` |
364

03 · How to use it

Wire it into your agent.

markdown

# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Roboto Flex"', 'serif'],
        sans:    ['"Roboto Flex"', 'sans-serif'],
        mono:    ['"Roboto Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1D1B20',
        secondary: '#79747E',
        accent:    '#6750A4',
        neutral:   '#F7F2FA',
        surface:   '#FEF7FF',
      },
      borderRadius: {
        sm: '8px',
        md: '12px',
        lg: '16px',
      },
    },
  },
};