design.md
Back to directory
warm · minimal · editorial · premium

Parchment Atelier.

Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech.

01 · Preview

The kitchen sink.

Parchment.app
ProductPricingDocsAbout
Sign inGet started
warm · minimal · editorial

Build with Parchment Atelier.

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
#1C1C1C
secondary
#5F5F5D
tertiary
#1C1C1C
neutral
#F7F4ED
surface
#F7F4ED
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
4px
md
6px
lg
12px
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.

ArchetypeEditorial

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

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Parchment Atelier"
3description: "Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech."
4tags: [warm, minimal, editorial, premium]
5colors:
6  primary:   "#1c1c1c"
7  secondary: "#5f5f5d"
8  tertiary:  "#1c1c1c"
9  neutral:   "#f7f4ed"
10  surface:   "#f7f4ed"
11typography:
12  display: "Inter Tight"
13  body:    "Inter Tight"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3.75rem / 1.05 / 600 / -1.5px"
17    h1:   "3rem / 1 / 600 / -1.2px"
18    h2:   "2.25rem / 1.1 / 600 / -0.9px"
19    body: "1.125rem / 1.38 / 400 / 0"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 12px
24  pill: 9999px
25shadows:
26  button: "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px"
27buttons:
28  primary:
29    background: #1F1B16
30    color: #F7F4ED
31    border: none
32    shape: rounded
33    padding: 12px 20px
34    font: display / 500
35  secondary:
36    background: rgba(31,27,22,0.06)
37    color: #1F1B16
38    border: none
39    shape: rounded
40    padding: 12px 20px
41    font: display / 500
42  outline:
43    background: transparent
44    color: #1F1B16
45    border: 1px solid rgba(31,27,22,0.18)
46    shape: rounded
47    padding: 12px 20px
48    font: display / 500
49  ghost:
50    background: transparent
51    color: rgba(31,27,22,0.7)
52    border: none
53    shape: rounded
54    padding: 10px 12px
55    font: display / 500
56    hover: underline
57charts:
58  variant: bars
59  stroke_width: 1.5
60  fill_opacity: 0.08
61  gridlines: true
62  bar_radius: "2px 2px 0 0"
63  bar_gap: 6px
64  highlight: gradient
65  dot_marker: true
66fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
67dependencies: ["lucide-react"]
68---
69 
70# Parchment Atelier
71 
72## AI Build Instructions
73 
74> **Read this section before writing any code.** The rules below
75> are non-negotiable. Every value used in the UI must come from this
76> file's frontmatter — never substitute, approximate, or invent new
77> colors, fonts, radii, or shadows. If a value is missing, ask the
78> user before adding one.
79 
80### 1 · Your role
81 
82You are building UI for a project that has adopted **Parchment Atelier** as its
83design system. Treat `DESIGN.md` as the single source of truth.
84Your job is to translate the user's product requirements into
85components and pages that look like they were designed by the same
86person who authored this file.
87 
88### 2 · Token compliance
89 
90- Pull every color, font family, radius, shadow, and spacing value
91  from the frontmatter at the top of this file.
92- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
93  hard-code hex values that bypass the system.
94- When a token can be expressed as a CSS variable, declare it once
95  in your global stylesheet and reference it everywhere downstream.
96- The Google Fonts `<link>` is provided in the Typography section.
97  Add it to `<head>` before any component renders.
98 
99### 3 · Component recipes
100 
101Use these recipes verbatim when building the corresponding component.
102 
103#### Buttons
104 
105Four variants are defined. Pick one — never blend variants or invent a fifth.
106 
107- **Primary** — rounded shape, bg `#1F1B16`, text `#F7F4ED`, padding `12px 20px`, weight `500`.
108- **Secondary** — rounded shape, bg `rgba(31,27,22,0.06)`, text `#1F1B16`, padding `12px 20px`, weight `500`.
109- **Outline** — rounded shape, text `#1F1B16`, border `1px solid rgba(31,27,22,0.18)`, padding `12px 20px`, weight `500`.
110- **Ghost** — rounded shape, text `rgba(31,27,22,0.7)`, padding `10px 12px`, weight `500`.
111 
112Reach for **primary** as the single dominant CTA per screen.
113**Secondary** for the supporting action. **Outline** for tertiary
114actions in toolbars. **Ghost** for inline links and table actions.
115 
116#### Cards
117 
118- Background: `#f7f4ed`
119- Radius: `radius.lg` (`12px`)
120- Internal padding: `20px` for compact cards, `24–28px` for content cards.
121 
122#### Charts
123 
124- Bar/line variant: `bars`
125- Bar radius: `2px 2px 0 0`
126- Highlight strategy: `gradient` — emphasize a single bar/point per chart.
127 
128#### Typography pairings
129 
130- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
131- **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs.
132- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
133 
134### 4 · Hard constraints
135 
136Never do any of the following without explicit instruction from the user:
137 
138- Introduce a new color, font, radius, or shadow that isn't declared above.
139- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
140- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
141- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
142- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
143 
144### 5 · Before you finish — verify
145 
146Run through this checklist for every screen you produce:
147 
148- [ ] Every color used appears in the Colors table above.
149- [ ] Headlines use the display font; body copy uses the body font.
150- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
151- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
152- [ ] Cards and dividers use the declared border + shadow tokens.
153- [ ] No values were invented; if you needed something missing, you stopped and asked.
154 
155---
156 
157## 1. Atmosphere
158 
159Parchment Atelier earns its warmth through restraint. Every page sits on a creamy parchment canvas (`#f7f4ed`) — a deliberate move away from the cold-white default of most developer tools. The surface feels approachable, almost analog, like a well-kept notebook. Near-black ink (`#1c1c1c`) on warm cream produces an easy, sharp read without the chill of pure black on pure white.
160 
161The system leans on a humanist variable sans that carries the brand voice. At display sizes (48–60px), weight 600 with aggressive negative tracking (-0.9px to -1.5px) compresses headlines into confident editorial statements. Body copy stays at normal tracking for an unhurried reading rhythm.
162 
163Most distinctive of all: the depth model is opacity-driven. Instead of an arbitrary gray scale, every gray on the page is `#1c1c1c` modulated through opacity (0.03, 0.04, 0.4, 0.82–0.83). The result is a tonal range that's nearly impossible to fake with hand-picked hexes.
164 
165**Signature moves**
166- Warm parchment background (`#f7f4ed`) — never pure white
167- Humanist variable sans, weight 600 with negative tracking at scale
168- Opacity-derived grays, all from a single `#1c1c1c` source
169- Multi-layer inset shadow on the dark pill: `rgba(255,255,255,0.2) 0 0.5px 0 0 inset, rgba(0,0,0,0.2) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0`
170- Warm border palette: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)
171- Soft diffuse focus shadow: `rgba(0,0,0,0.1) 0 4px 12px`
172 
173## 2. Palette
174 
175### Primary
176- **Cream** `#f7f4ed` — page, card and button surfaces
177- **Charcoal** `#1c1c1c` — headings, primary text, dark button background
178- **Off-White** `#fcfbf8` — text on dark surfaces
179 
180### Opacity scale (all derived from `#1c1c1c`)
181- 100% `#1c1c1c` — primary text
182- 83% `rgba(28,28,28,0.83)` — strong secondary
183- 82% `rgba(28,28,28,0.82)` — body copy
184- 40% `rgba(28,28,28,0.4)` — interactive borders
185- 4% `rgba(28,28,28,0.04)` — hover micro-tints
186- 3% `rgba(28,28,28,0.03)` — barely-visible overlays
187- Muted `#5f5f5d` — captions, descriptions
188 
189### Lines
190- Passive border: `#eceae4`
191- Interactive border: `rgba(28,28,28,0.4)`
192- Focus shadow: `rgba(0,0,0,0.1) 0 4px 12px`
193- Ring: `rgba(59,130,246,0.5)` 2px
194 
195## 3. Typography
196 
197| Role | Size | Weight | Leading | Tracking |
198|------|------|--------|---------|----------|
199| Display | 60px | 600 | 1.05 | -1.5px |
200| Section | 48px | 600 | 1.00 | -1.2px |
201| Sub-heading | 36px | 600 | 1.10 | -0.9px |
202| Card title | 20px | 400 | 1.25 | normal |
203| Body L | 18px | 400 | 1.38 | normal |
204| Body | 16px | 400 | 1.50 | normal |
205| Button | 16px | 400 | 1.50 | normal |
206| Caption | 14px | 400 | 1.50 | normal |
207 
208**Two weights, clear roles:** 400 for body/UI/links/buttons, 600 for headings. Hierarchy comes from size and tracking, not weight stacks. Never reach for 700 — it breaks the system.
209 
210## 4. Buttons
211 
212### Primary Dark (inset shadow)
213```css
214background: #1c1c1c;
215color: #fcfbf8;
216padding: 8px 16px;
217border-radius: 6px;
218box-shadow:
219  rgba(255,255,255,0.2) 0 0.5px 0 0 inset,
220  rgba(0,0,0,0.2) 0 0 0 0.5px inset,
221  rgba(0,0,0,0.05) 0 1px 2px 0;
222```
223 
224### Ghost
225- Transparent background, `#1c1c1c` text
226- `1px solid rgba(28,28,28,0.4)` border, 6px radius
227- Active: opacity 0.8
228 
229### Cream Surface
230- `#f7f4ed` background, no border, 6px radius — for tertiary actions
231 
232### Pill / Icon
233- `#f7f4ed` background, 9999px radius, same inset shadow as primary dark
234- Reserved for icon toggles, never rectangular labels
235 
236## 5. Cards
237 
238- Background: `#f7f4ed` (matches page — no card lift)
239- Border: `1px solid #eceae4`
240- Radius: 12px standard, 16px featured, 8px compact
241- No box-shadow — borders carry containment
242 
243## 6. Spacing
244 
245- Base: 8px
246- Scale: `8, 10, 12, 16, 24, 32, 40, 56, 80, 96, 128, 176, 192, 208`
247- Section vertical: 80–208px — generous editorial breathing room
248- Container max: ~1200px
249 
250## 7. Radius scale
251 
252`4 / 6 / 8 / 12 / 16 / 9999` — pill is for action toggles and icon buttons, never rectangular CTAs.
253 
254## 8. Depth & elevation
255 
256| Level | Treatment | Use |
257|-------|-----------|-----|
258| 0 | Flat cream | Page, content |
259| 1 | `1px solid #eceae4` | Cards, image frames |
260| 2 | Inset stack on dark pill | Primary CTA |
261| 3 | `rgba(0,0,0,0.1) 0 4px 12px` | Focus, active |
262 
263The depth philosophy is shallow. Borders contain, the inset shadow on dark pills creates a pressed-into-surface tactility, and focus uses a diffuse warm glow rather than a sharp ring.
264 
265## 9. Do's & don'ts
266 
267✅ **Do**
268- Use cream (`#f7f4ed`) as the page foundation
269- Derive grays from `#1c1c1c` at varying opacity
270- Apply the inset shadow on every dark pill — it is the brand
271- Use `#eceae4` borders instead of card shadows
272- Keep the weight palette to 400 / 600 only
273 
274❌ **Don't**
275- Use pure white as the page background
276- Apply heavy drop-shadows to cards
277- Reach for weight 700
278- Use saturated accent colors — the palette is intentionally warm-neutral
279- Apply 9999px radius to rectangular buttons
280 
281---
282 
283## Tokens
284 
285> Generated from the same source the live preview renders from.
286> Treat the values below as the contract — never substitute approximations.
287 
288### Colors
289 
290| Role      | Value |
291|-----------|-------|
292| primary   | `#1c1c1c` |
293| secondary | `#5f5f5d` |
294| tertiary  | `#1c1c1c` |
295| neutral   | `#f7f4ed` |
296| surface   | `#f7f4ed` |
297 
298### Typography
299 
300- **Display:** Inter Tight
301- **Body:** Inter Tight
302- **Mono:** JetBrains Mono
303 
304| Role | size / leading / weight / tracking |
305|------|------------------------------------|
306| Hero | 3.75rem / 1.05 / 600 / -1.5px |
307| H1   | 3rem / 1 / 600 / -1.2px |
308| H2   | 2.25rem / 1.1 / 600 / -0.9px |
309| Body | 1.125rem / 1.38 / 400 / 0 |
310 
311### Radius
312 
313- sm: `4px`
314- md: `6px`
315- lg: `12px`
316- pill: `9999px`
317 
318### Shadows
319 
320- **button:** `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
321 
322### Buttons
323 
324Four variants, each fully tokenized. The preview renders from these exact values.
325 
326#### Primary
327 
328| Property | Value |
329|----------|-------|
330| shape | `rounded` |
331| background | `#1F1B16` |
332| color | `#F7F4ED` |
333| border | `none` |
334| padding | `12px 20px` |
335| fontFamily | `display` |
336| fontWeight | `500` |
337 
338#### Secondary
339 
340| Property | Value |
341|----------|-------|
342| shape | `rounded` |
343| background | `rgba(31,27,22,0.06)` |
344| color | `#1F1B16` |
345| border | `none` |
346| padding | `12px 20px` |
347| fontFamily | `display` |
348| fontWeight | `500` |
349 
350#### Outline
351 
352| Property | Value |
353|----------|-------|
354| shape | `rounded` |
355| background | `transparent` |
356| color | `#1F1B16` |
357| border | `1px solid rgba(31,27,22,0.18)` |
358| padding | `12px 20px` |
359| fontFamily | `display` |
360| fontWeight | `500` |
361 
362#### Ghost
363 
364| Property | Value |
365|----------|-------|
366| shape | `rounded` |
367| background | `transparent` |
368| color | `rgba(31,27,22,0.7)` |
369| border | `none` |
370| padding | `10px 12px` |
371| fontFamily | `display` |
372| fontWeight | `500` |
373| hoverHint | `underline` |
374 
375### Charts
376 
377| Property | Value |
378|----------|-------|
379| variant | `bars` |
380| strokeWidth | `1.5` |
381| fillOpacity | `0.08` |
382| gridlines | `true` |
383| barRadius | `2px 2px 0 0` |
384| barGap | `6px` |
385| highlight | `gradient` |
386| dotMarker | `true` |
387 
388---
389 
390## Pro tokens
391 
392> Production-fidelity tokens. States, density, motion, elevation,
393> content rules and a measured WCAG contract — derived from the
394> resting tokens unless explicitly authored.
395 
396### States
397 
398#### Button
399 
400- **hover** — bg: `rgba(28, 28, 28, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 28, 28, 0.4)`
401- **focus** — outline: `1.5px solid #1c1c1c`, outline-offset: `4px`
402- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
403- **disabled** — opacity: `0.45`
404- **loading** — opacity: `0.7`
405- **selected** — bg: `#1c1c1c`, color: `#f7f4ed`
406 
407#### Input
408 
409- **hover** — border: `1px solid #1c1c1c`
410- **focus** — border: `1px solid #1c1c1c`, shadow: `0 1px 0 0 #1c1c1c`
411- **disabled** — opacity: `0.45`
412- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
413 
414#### Card
415 
416- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
417- **selected** — border: `1px solid #1c1c1c`
418 
419#### Tab
420 
421- **hover** — color: `#1c1c1c`
422- **focus** — outline: `1.5px solid #1c1c1c`, outline-offset: `3px`
423- **selected** — color: `#1c1c1c`, border: `0 0 2px 0 solid #1c1c1c`
424 
425### Density
426 
427| Mode | padding × | row × | body | radius × | Use for |
428|------|-----------|-------|------|----------|---------|
429| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
430| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
431| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
432 
433### Motion
434 
435**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
436 
437```css
438transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
439```
440 
441| Token | Value |
442|-------|-------|
443| duration.instant | `80ms` |
444| duration.fast | `180ms` |
445| duration.base | `320ms` |
446| duration.slow | `500ms` |
447| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
448| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
449| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
450| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
451 
452### Elevation
453 
454Five-level scale, system-specific recipe.
455 
456| Level | Shadow | Recipe |
457|-------|--------|--------|
458| level0 | `none` | Hairline only — typical editorial resting state. |
459| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
460| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
461| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
462| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
463 
464### Content
465 
466- **measure:** `60ch` (max line length for body prose)
467- **paragraph spacing:** `1.5em`
468- **list indent:** `1.75em`
469- **list gap:** `0.55em`
470- **link:** color `#1c1c1c`, underline `always`
471- **blockquote:** border `4px solid #1c1c1c`, padding `0.4em 0 0.4em 1.5em`
472- **code:** background `rgba(28, 28, 28, 0.06)`, color `#1c1c1c`
473 
474### Accessibility (WCAG 2.1)
475 
476**Overall:** AA
477 
478| Pair | Ratio | Required | Grade | Suggested fix |
479|------|-------|----------|-------|---------------|
480| Body text on surface | 15.51:1 | AA | AAA | — |
481| Body text on canvas | 15.51:1 | AA | AAA | — |
482| Muted text on surface | 5.83:1 | AA | AA | — |
483| Accent on surface | 15.51:1 | AA-Large | AAA | — |
484| Accent on canvas | 15.51:1 | AA-Large | AAA | — |
485
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=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter Tight"', 'serif'],
        sans:    ['"Inter Tight"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1c1c1c',
        secondary: '#5f5f5d',
        accent:    '#1c1c1c',
        neutral:   '#f7f4ed',
        surface:   '#f7f4ed',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '12px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Helvetic Grid

Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint.

swissminimaleditorialpremiummodern
Helvetic.app
ProductPricingDocsAbout
Sign inGet started
swiss · minimal · editorial

Build with Helvetic Grid.

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

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.

glassminimalpremiummodernsoft
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