design.md
Back to directory
glass · minimal · premium · modern · soft

Prism Glass.

Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration.

01 · Preview

The kitchen sink.

Prism.app
ProductPricingDocsAbout
Sign inGet started
glass · minimal · premium

Build with Prism Glass.

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
#1A1D2C
secondary
#5A5F73
tertiary
#1A1D2C
neutral
#EEF0F7
surface
RGBA(255,255,255,0.62)
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
10px
md
16px
lg
22px
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.

ArchetypeSoft

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: "Prism Glass"
3description: "Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration."
4tags: [glass, minimal, premium, modern, soft]
5colors:
6  primary:   "#1a1d2c"
7  secondary: "#5a5f73"
8  tertiary:  "#1a1d2c"
9  neutral:   "#eef0f7"
10  surface:   rgba(255,255,255,0.62)
11typography:
12  display: Manrope
13  body:    Manrope
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3.75rem / 1.04 / 700 / -0.035em"
17    h1:   "2.5rem / 1.12 / 700 / -0.025em"
18    h2:   "1.625rem / 1.25 / 600 / -0.02em"
19    body: "1rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 10px
22  md: 16px
23  lg: 22px
24  pill: 9999px
25shadows:
26  card:   "rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px"
27  button: "rgba(108,124,255,0.22) 0 6px 18px -6px"
28borders:
29  card:    "1px solid rgba(26,29,44,0.06)"
30  divider: rgba(26,29,44,0.06)
31buttons:
32  primary:
33    background: #6c7cff
34    color: #ffffff
35    border: none
36    shape: pill
37    padding: 10px 20px
38    font: 600 / 0.875rem
39    shadow: rgba(108,124,255,0.22) 0 6px 18px -6px
40  secondary:
41    background: rgba(255,255,255,0.65)
42    color: #1a1d2c
43    border: 1px solid rgba(26,29,44,0.08)
44    shape: pill
45    padding: 10px 20px
46    font: 600 / 0.875rem
47  outline:
48    background: transparent
49    color: #1a1d2c
50    border: 1px solid rgba(26,29,44,0.14)
51    shape: pill
52    padding: 10px 20px
53    font: 600 / 0.875rem
54  ghost:
55    background: transparent
56    color: #5a5f73
57    border: none
58    shape: pill
59    padding: 10px 16px
60    font: 600 / 0.875rem
61charts:
62  variant: "rounded-bars"
63  stroke_width: 1.5
64  fill_opacity: 0.1
65  gridlines: false
66  bar_gap: 12px
67  highlight: single
68  dot_marker: true
69fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Prism Glass
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Prism Glass** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  in your global stylesheet and reference it everywhere downstream.
99- The Google Fonts `<link>` is provided in the Typography section.
100  Add it to `<head>` before any component renders.
101 
102### 3 · Component recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — pill shape, bg `#6c7cff`, text `#ffffff`, padding `10px 20px`, weight `600`, shadow `rgba(108,124,255,0.22) 0 6px 18px -6px`.
111- **Secondary** — pill shape, bg `rgba(255,255,255,0.65)`, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.08)`, padding `10px 20px`, weight `600`.
112- **Outline** — pill shape, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.14)`, padding `10px 20px`, weight `600`.
113- **Ghost** — pill shape, text `#5a5f73`, padding `10px 16px`, weight `600`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `rgba(255,255,255,0.62)`
122- Border: `1px solid rgba(26,29,44,0.06)`
123- Shadow: `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px`
124- Radius: `radius.lg` (`22px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Tabs
128 
129Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.
130 
131#### Charts
132 
133- Bar/line variant: `rounded-bars`
134- No gridlines — let the bars/lines carry the data.
135- Highlight strategy: `single` — emphasize a single bar/point per chart.
136 
137#### Typography pairings
138 
139- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.
140- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.
141- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
142 
143### 4 · Hard constraints
144 
145Never do any of the following without explicit instruction from the user:
146 
147- Introduce a new color, font, radius, or shadow that isn't declared above.
148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
152 
153### 5 · Before you finish — verify
154 
155Run through this checklist for every screen you produce:
156 
157- [ ] Every color used appears in the Colors table above.
158- [ ] Headlines use the display font; body copy uses the body font.
159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
161- [ ] Cards and dividers use the declared border + shadow tokens.
162- [ ] No values were invented; if you needed something missing, you stopped and asked.
163 
164---
165 
166## 1. Atmosphere
167 
168Prism Glass is glassmorphism done with restraint. The backdrop is a soft tonal mesh — cool lavender shading into pale rose, never harsh, never neon — and surfaces sit on top as translucent panes that genuinely blur the layers behind them. Edges are 1px hairlines at 6% ink, never thick borders. The hero CTA is the single periwinkle moment in the entire system.
169 
170The discipline is in what's omitted: no second accent, no decorative gradients on the surfaces themselves, no glow halos. Glass earns its drama from the backdrop bleeding through, not from chrome.
171 
172**Signature moves**
173- Real `backdrop-filter: blur(28px) saturate(180%)` on every surface — not faked with white at 80%
174- Soft tonal mesh backdrop (lavender → pale rose), never a 2-color gradient
175- One periwinkle accent (`#6c7cff`), used only on the primary CTA and active pill tab
176- Pill shape on every interactive surface — buttons, tabs, badges
177- Hairline borders at 6% ink — the glass needs an edge to read
178 
179## 2. Palette
180 
181### Surfaces
182- **Glass** `rgba(255,255,255,0.62)` over a blurred backdrop — the standard pane
183- **Glass Strong** `rgba(255,255,255,0.78)` — for modals and the nav
184- **Glass Subtle** `rgba(255,255,255,0.42)` — for inline chips and inputs
185 
186### Backdrop (apply at body level)
187- `radial-gradient(ellipse 80% 50% at 15% 0%, oklch(0.92 0.08 280 / 0.45), transparent 60%)`
188- `radial-gradient(ellipse 70% 50% at 85% 10%, oklch(0.92 0.08 340 / 0.32), transparent 60%)`
189- Base `#eef0f7`
190 
191### Ink
192- **Ink** `#1a1d2c` — text, headings
193- **Ink 60** `#5a5f73` — secondary text
194- **Hairline** `rgba(26,29,44,0.06)` — every divider, every glass edge
195 
196### Accent
197- **Periwinkle** `#6c7cff` — primary CTA, active tab
198- **Periwinkle Soft** `rgba(108,124,255,0.12)` — focus ring
199 
200## 3. Typography
201 
202| Role | Font | Size | Weight | Leading | Tracking |
203|------|------|------|--------|---------|----------|
204| Hero | Manrope | 60px | 700 | 1.04 | -0.035em |
205| H1 | Manrope | 40px | 700 | 1.12 | -0.025em |
206| H2 | Manrope | 26px | 600 | 1.25 | -0.02em |
207| Body | Manrope | 16px | 400 | 1.6 | -0.005em |
208| UI | Manrope | 13px | 600 | 1.4 | 0 |
209| Mono / Metric | JetBrains Mono | 12px | 500 | 1.0 | 0.04em uppercase |
210 
211Manrope across the board — geometric, soft-cornered, calm. Three weights: 400 / 600 / 700.
212 
213## 4. Buttons
214 
215### Primary (Periwinkle Pill)
216```css
217background: #6c7cff;
218color: #ffffff;
219padding: 10px 20px;
220border-radius: 9999px;
221box-shadow: rgba(108,124,255,0.22) 0 6px 18px -6px;
222```
223 
224### Secondary (Glass Pill)
225- Glass surface (`rgba(255,255,255,0.65)`), backdrop-blur, 1px hairline at 8% ink
226- Same pill shape, ink text
227 
228### Outline & Ghost
229- Same pill shape — outline is 1px hairline at 14% ink, ghost has no border at all
230 
231## 5. Cards
232 
233Every card is a glass pane:
234```css
235background: rgba(255,255,255,0.62);
236backdrop-filter: blur(28px) saturate(180%);
237border: 1px solid rgba(26,29,44,0.06);
238box-shadow:
239  rgba(26,29,44,0.06) 0 1px 0 inset,
240  rgba(26,29,44,0.04) 0 2px 12px -4px;
241border-radius: 22px;
242```
243 
244The 1px inset highlight at the top is what sells the glass — without it, the pane reads as flat white-over-color.
245 
246## 6. Charts
247 
248Rounded bars (4px corner) with 12px gap. One bar in periwinkle, others in 14% ink. Line charts at 1.5px in periwinkle with a 10% fill underneath, ending in a small dot marker. No gridlines — the glass surface carries the rhythm.
249 
250## 7. Tabs
251 
252Pill tabs. Active = periwinkle background, white text. Inactive = no background, ink-secondary text. Hover = 12% periwinkle wash.
253 
254## 8. Spacing
255 
256- Base 4px
257- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80`
258- Section padding: 80px desktop, 40px mobile — glass needs negative space to breathe
259 
260## 9. Do's & don'ts
261 
262✅ **Do**
263- Use real `backdrop-filter` with both blur AND saturate — saturation is what makes it feel glass, not opacity
264- Hold the backdrop to soft tonal mesh, never a hard 2-color gradient
265- Use the periwinkle exactly once per screen — primary CTA OR active tab, not both
266- Keep the 1px inset highlight on every card — that is the glass
267 
268❌ **Don't**
269- Stack glass on glass — one pane per layer, never nested
270- Use a second accent color — periwinkle alone
271- Use sharp corners — every surface is 16-22px or pill
272- Skip backdrop-filter and fake it with white opacity — the depth disappears
273 
274---
275 
276## Tokens
277 
278> Generated from the same source the live preview renders from.
279> Treat the values below as the contract — never substitute approximations.
280 
281### Colors
282 
283| Role      | Value |
284|-----------|-------|
285| primary   | `#1a1d2c` |
286| secondary | `#5a5f73` |
287| tertiary  | `#1a1d2c` |
288| neutral   | `#eef0f7` |
289| surface   | `rgba(255,255,255,0.62)` |
290 
291### Typography
292 
293- **Display:** Manrope
294- **Body:** Manrope
295- **Mono:** JetBrains Mono
296 
297| Role | size / leading / weight / tracking |
298|------|------------------------------------|
299| Hero | 3.75rem / 1.04 / 700 / -0.035em |
300| H1   | 2.5rem / 1.12 / 700 / -0.025em |
301| H2   | 1.625rem / 1.25 / 600 / -0.02em |
302| Body | 1rem / 1.6 / 400 / -0.005em |
303 
304### Radius
305 
306- sm: `10px`
307- md: `16px`
308- lg: `22px`
309- pill: `9999px`
310 
311### Shadows
312 
313- **card:** `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px`
314- **button:** `rgba(108,124,255,0.22) 0 6px 18px -6px`
315 
316### Borders
317 
318- **card:** `1px solid rgba(26,29,44,0.06)`
319- **divider:** `rgba(26,29,44,0.06)`
320 
321### Buttons
322 
323Four variants, each fully tokenized. The preview renders from these exact values.
324 
325#### Primary
326 
327| Property | Value |
328|----------|-------|
329| shape | `pill` |
330| background | `#6c7cff` |
331| color | `#ffffff` |
332| border | `none` |
333| padding | `10px 20px` |
334| fontWeight | `600` |
335| fontSize | `0.875rem` |
336| shadow | `rgba(108,124,255,0.22) 0 6px 18px -6px` |
337 
338#### Secondary
339 
340| Property | Value |
341|----------|-------|
342| shape | `pill` |
343| background | `rgba(255,255,255,0.65)` |
344| color | `#1a1d2c` |
345| border | `1px solid rgba(26,29,44,0.08)` |
346| padding | `10px 20px` |
347| fontWeight | `600` |
348| fontSize | `0.875rem` |
349 
350#### Outline
351 
352| Property | Value |
353|----------|-------|
354| shape | `pill` |
355| background | `transparent` |
356| color | `#1a1d2c` |
357| border | `1px solid rgba(26,29,44,0.14)` |
358| padding | `10px 20px` |
359| fontWeight | `600` |
360| fontSize | `0.875rem` |
361 
362#### Ghost
363 
364| Property | Value |
365|----------|-------|
366| shape | `pill` |
367| background | `transparent` |
368| color | `#5a5f73` |
369| border | `none` |
370| padding | `10px 16px` |
371| fontWeight | `600` |
372| fontSize | `0.875rem` |
373 
374### Charts
375 
376| Property | Value |
377|----------|-------|
378| variant | `rounded-bars` |
379| strokeWidth | `1.5` |
380| fillOpacity | `0.1` |
381| gridlines | `false` |
382| barGap | `12px` |
383| highlight | `single` |
384| dotMarker | `true` |
385 
386---
387 
388## Pro tokens
389 
390> Production-fidelity tokens. States, density, motion, elevation,
391> content rules and a measured WCAG contract — derived from the
392> resting tokens unless explicitly authored.
393 
394### States
395 
396#### Button
397 
398- **hover** — shadow: `0 8px 24px -10px rgba(26, 29, 44, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
399- **focus** — outline: `2px solid rgba(26, 29, 44, 0.4)`, outline-offset: `3px`
400- **active** — transform: `translateY(0) scale(0.98)`
401- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
402- **loading** — opacity: `0.65`
403- **selected** — bg: `rgba(26, 29, 44, 0.18)`, color: `#1a1d2c`
404 
405#### Input
406 
407- **hover** — bg: `rgba(26, 29, 44, 0.03)`, border: `1px solid rgba(26, 29, 44, 0.4)`
408- **focus** — border: `1px solid rgba(26, 29, 44, 0.6)`, shadow: `0 0 0 4px rgba(26, 29, 44, 0.12)`
409- **disabled** — opacity: `0.4`
410- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
411 
412#### Card
413 
414- **hover** — shadow: `0 16px 40px -16px rgba(26, 29, 44, 0.3)`, transform: `translateY(-3px)`
415- **selected** — bg: `rgba(26, 29, 44, 0.04)`, border: `1px solid rgba(26, 29, 44, 0.5)`
416- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
417 
418#### Tab
419 
420- **hover** — bg: `rgba(26, 29, 44, 0.08)`, color: `#1a1d2c`
421- **focus** — outline: `2px solid rgba(26, 29, 44, 0.4)`, outline-offset: `2px`
422- **selected** — bg: `rgba(26, 29, 44, 0.16)`, color: `#1a1d2c`
423 
424### Density
425 
426| Mode | padding × | row × | body | radius × | Use for |
427|------|-----------|-------|------|----------|---------|
428| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
429| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
430| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
431 
432### Motion
433 
434**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
435 
436```css
437transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
438```
439 
440| Token | Value |
441|-------|-------|
442| duration.instant | `120ms` |
443| duration.fast | `240ms` |
444| duration.base | `400ms` |
445| duration.slow | `600ms` |
446| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
447| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
448| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
449| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
450 
451### Elevation
452 
453Five-level scale, system-specific recipe.
454 
455| Level | Shadow | Recipe |
456|-------|--------|--------|
457| level0 | `none` | Flat — the tone separates, not the shadow. |
458| level1 | `0 2px 6px -2px rgba(26, 29, 44, 0.12)` | Soft tinted lift. |
459| level2 | `0 8px 24px -10px rgba(26, 29, 44, 0.2)` | Floating card — pastel-tinted shadow. |
460| level3 | `0 16px 48px -16px rgba(26, 29, 44, 0.28)` | Sheet — visible tinted glow. |
461| level4 | `0 32px 80px -24px rgba(26, 29, 44, 0.4)` | Modal — tinted wash, scrim required. |
462 
463### Content
464 
465- **measure:** `64ch` (max line length for body prose)
466- **paragraph spacing:** `1.35em`
467- **list indent:** `1.5em`
468- **list gap:** `0.6em`
469- **link:** color `#1a1d2c`, underline `hover`
470- **blockquote:** border `2px solid rgba(26, 29, 44, 0.5)`, padding `0.9em 1.2em`
471- **code:** background `rgba(26, 29, 44, 0.1)`, color `#1a1d2c`
472 
473### Accessibility (WCAG 2.1)
474 
475**Overall:** AA
476 
477| Pair | Ratio | Required | Grade | Suggested fix |
478|------|-------|----------|-------|---------------|
479| Body text on surface | 16.72:1 | AA | AAA | — |
480| Body text on canvas | 14.68:1 | AA | AAA | — |
481| Muted text on surface | 6.33:1 | AA | AA | — |
482| Accent on surface | 16.72:1 | AA-Large | AAA | — |
483| Accent on canvas | 14.68:1 | AA-Large | AAA | — |
484
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=Manrope:wght@400;500;600;700&family=JetBrains+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: ['"Manrope"', 'serif'],
        sans:    ['"Manrope"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1a1d2c',
        secondary: '#5a5f73',
        accent:    '#1a1d2c',
        neutral:   '#eef0f7',
        surface:   'rgba(255,255,255,0.62)',
      },
      borderRadius: {
        sm: '10px',
        md: '16px',
        lg: '22px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Mistveil Gradient

A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface.

gradientminimalmodernpremiumsaas
Mistveil.app
ProductPricingDocsAbout
Sign inGet started
gradient · minimal · modern

Build with Mistveil Gradient.

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

Quartz Monochrome

No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.

minimalmonochromelightpremiummodern
Quartz.app
ProductPricingDocsAbout
Sign inGet started
minimal · monochrome · light

Build with Quartz Monochrome.

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