design.md
Back to directory
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 · Pro tokens

The states behind the resting style.

ArchetypeMaterial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · 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 
365---
366 
367## Pro tokens
368 
369> Production-fidelity tokens. States, density, motion, elevation,
370> content rules and a measured WCAG contract — derived from the
371> resting tokens unless explicitly authored.
372 
373### States
374 
375#### Button
376 
377- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
378- **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px`
379- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
380- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
381- **loading** — opacity: `0.7`
382- **selected** — bg: `#6750A4`, color: `#FEF7FF`
383 
384#### Input
385 
386- **hover** — border: `1px solid rgba(103, 80, 164, 0.5)`
387- **focus** — border: `1.5px solid #6750A4`, shadow: `0 0 0 4px rgba(103, 80, 164, 0.15)`
388- **disabled** — bg: `rgba(29, 27, 32, 0.04)`, opacity: `0.4`
389- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
390 
391#### Card
392 
393- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
394- **selected** — bg: `rgba(103, 80, 164, 0.04)`, border: `1.5px solid #6750A4`
395- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
396 
397#### Tab
398 
399- **hover** — bg: `rgba(103, 80, 164, 0.06)`, color: `#6750A4`
400- **focus** — outline: `2px solid rgba(103, 80, 164, 0.5)`, outline-offset: `2px`
401- **selected** — color: `#6750A4`, border: `0 0 2px 0 solid #6750A4`
402 
403### Density
404 
405| Mode | padding × | row × | body | radius × | Use for |
406|------|-----------|-------|------|----------|---------|
407| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
408| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
409| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
410 
411### Motion
412 
413**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
414 
415```css
416transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
417```
418 
419| Token | Value |
420|-------|-------|
421| duration.instant | `80ms` |
422| duration.fast | `160ms` |
423| duration.base | `240ms` |
424| duration.slow | `380ms` |
425| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
426| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
427| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
428| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
429 
430### Elevation
431 
432Five-level scale, system-specific recipe.
433 
434| Level | Shadow | Recipe |
435|-------|--------|--------|
436| level0 | `none` | Flat — hairline border separates. |
437| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
438| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
439| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
440| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
441 
442### Content
443 
444- **measure:** `68ch` (max line length for body prose)
445- **paragraph spacing:** `1.2em`
446- **list indent:** `1.5em`
447- **list gap:** `0.5em`
448- **link:** color `#6750A4`, underline `hover`
449- **blockquote:** border `3px solid rgba(103, 80, 164, 0.6)`, padding `0.5em 0 0.5em 1.25em`
450- **code:** background `rgba(29, 27, 32, 0.06)`, color `#1D1B20`
451 
452### Accessibility (WCAG 2.1)
453 
454**Overall:** AA-Large
455 
456| Pair | Ratio | Required | Grade | Suggested fix |
457|------|-------|----------|-------|---------------|
458| Body text on surface | 16.23:1 | AA | AAA | — |
459| Body text on canvas | 15.48:1 | AA | AAA | — |
460| Muted text on surface | 4.33:1 | AA | AA-Large | `#746f79` → 4.65:1 (AA) |
461| Accent on surface | 6.12:1 | AA-Large | AA | — |
462| Accent on canvas | 5.84:1 | AA-Large | AA | — |
463
04 · 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.
05 · 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

js
// 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Ledger Quiet

A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen.

fintechminimalpremiummoderndashboard
Ledger.app
ProductPricingDocsAbout
Sign inGet started
fintech · minimal · premium

Build with Ledger Quiet.

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

Warm Canvas

Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent.

minimalwarmproductivitysaas
Warm.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · productivity

Build with Warm Canvas.

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