design.md
Back to directory
premium · metallic · warm · luxury · editorial

Champagne Foundry.

Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation.

01 · Preview

The kitchen sink.

Champagne.app
ProductPricingDocsAbout
Sign inGet started
premium · metallic · warm

Build with Champagne Foundry.

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
#1F1A14
secondary
#7A6B58
tertiary
#C9A96A
neutral
#F4EFE6
surface
#FBF7EE
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
2px
md
4px
lg
6px
pill
999px
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: "Champagne Foundry"
3description: "Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation."
4tags: [premium, metallic, warm, luxury, editorial]
5colors:
6  primary:   "#1F1A14"
7  secondary: "#7A6B58"
8  tertiary:  "#C9A96A"
9  neutral:   "#F4EFE6"
10  surface:   "#FBF7EE"
11typography:
12  display: "Cormorant Garamond"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 400 / -0.025em"
17    h1:   "3.25rem / 1.05 / 400 / -0.02em"
18    h2:   "1.625rem / 1.3 / 500 / -0.01em"
19    body: "1rem / 1.7 / 400 / 0em"
20radius:
21  sm: 2px
22  md: 4px
23  lg: 6px
24shadows:
25  card:   "0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)"
26  button: "0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)"
27borders:
28  card:    "1px solid rgba(122, 107, 88, 0.15)"
29  divider: "rgba(122, 107, 88, 0.18)"
30buttons:
31  primary:
32    background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)
33    color: #1F1A14
34    border: 1px solid rgba(122, 89, 45, 0.35)
35    shape: rounded
36    padding: 12px 26px
37    font: 500 / 0.9375rem / 0em
38    shadow: 0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)
39  secondary:
40    background: #FBF7EE
41    color: #1F1A14
42    border: 1px solid rgba(122, 107, 88, 0.25)
43    shape: rounded
44    padding: 12px 26px
45    font: 500 / 0.9375rem / 0em
46  outline:
47    background: transparent
48    color: #7A6B58
49    border: 1px solid rgba(122, 107, 88, 0.40)
50    shape: rounded
51    padding: 11px 24px
52    font: 500 / 0.9375rem / 0em
53  ghost:
54    background: transparent
55    color: #7A6B58
56    border: none
57    shape: rounded
58    padding: 11px 4px
59    font: 500 / 0.9375rem / 0em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 1.5
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#7A6B58"
68  palette: ["#C9A96A", "#A88848", "#7A6B58"]
69fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Champagne Foundry
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 **Champagne Foundry** 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** — rounded shape, bg `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)`, text `#1F1A14`, border `1px solid rgba(122, 89, 45, 0.35)`, padding `12px 26px`, weight `500`, shadow `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)`.
111- **Secondary** — rounded shape, bg `#FBF7EE`, text `#1F1A14`, border `1px solid rgba(122, 107, 88, 0.25)`, padding `12px 26px`, weight `500`.
112- **Outline** — rounded shape, text `#7A6B58`, border `1px solid rgba(122, 107, 88, 0.40)`, padding `11px 24px`, weight `500`.
113- **Ghost** — rounded shape, text `#7A6B58`, padding `11px 4px`, weight `500`.
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: `#FBF7EE`
122- Border: `1px solid rgba(122, 107, 88, 0.15)`
123- Shadow: `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)`
124- Radius: `radius.lg` (`6px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `line`
130- No gridlines — let the bars/lines carry the data.
131- Highlight strategy: `last` — emphasize a single bar/point per chart.
132- Use the declared palette in order: `#C9A96A`, `#A88848`, `#7A6B58`.
133 
134#### Typography pairings
135 
136- **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
139 
140### 4 · Hard constraints
141 
142Never do any of the following without explicit instruction from the user:
143 
144- Introduce a new color, font, radius, or shadow that isn't declared above.
145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
149 
150### 5 · Before you finish — verify
151 
152Run through this checklist for every screen you produce:
153 
154- [ ] Every color used appears in the Colors table above.
155- [ ] Headlines use the display font; body copy uses the body font.
156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
158- [ ] Cards and dividers use the declared border + shadow tokens.
159- [ ] No values were invented; if you needed something missing, you stopped and asked.
160 
161---
162 
163## Overview
164Champagne Foundry is a warm metallic premium system. Cream paper canvas, deep ink type in a high-contrast serif, and one machined gesture: a brushed champagne primary CTA with a top-edge gloss and a bottom-edge shadow that reads as lit metal.
165 
166For high-end consumer brands, watchmakers, private banking, concierge platforms, hospitality. Premium without ostentation — restraint is the whole point.
167 
168## The Metallic Gesture
169The primary button is the system's signature. It uses a vertical 3-stop gradient that mimics a lit brushed surface:
170 
171```css
172background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%);
173border: 1px solid rgba(122, 89, 45, 0.35);
174box-shadow:
175  0 8px 20px -10px rgba(122, 89, 45, 0.40),
176  inset 0 1px 0 rgba(255, 245, 220, 0.55),
177  inset 0 -1px 0 rgba(122, 89, 45, 0.20);
178```
179 
180The inner top-edge highlight is what reads as "polished." Without it the button looks flat. The inner bottom-edge shadow gives the metal weight. Both must be present.
181 
182**Where it appears:**
183- The primary CTA fill.
184- An optional thin horizontal divider beneath the hero (1px gradient line).
185 
186**Where it never appears:**
187- Body text. Card fills. Backgrounds. Logos. Any second button on the page.
188 
189## Color
190- **Ink #1F1A14** — primary text.
191- **Bronze #7A6B58** — secondary text, refined captions.
192- **Champagne #C9A96A** — the accent endstop.
193- **Cream Paper #F4EFE6** — page canvas.
194- **Warm Paper #FBF7EE** — card surface.
195 
196The system is monochromatic-warm. There is no second hue. Restraint of palette is what allows the metal to feel precious.
197 
198## Typography
199- **Display: Cormorant Garamond 400** at 5.5rem with -2.5% tracking. High-contrast serif, never bolded above 500.
200- **Body: Inter 400** at 1rem with **1.7 leading**.
201- Italic Cormorant for emphasis inside hero headlines (one word per hero).
202 
203| Role | Font | Size | Weight | Tracking |
204|------|------|------|--------|----------|
205| Hero | Cormorant Garamond | 5.5rem | 400 | -0.025em |
206| H1 | Cormorant Garamond | 3.25rem | 400 | -0.02em |
207| H2 | Cormorant Garamond | 1.625rem | 500 | -0.01em |
208| Body | Inter | 1rem | 400 | 0 / 1.7 |
209 
210## Geometry
211- **Radii: 2 / 4 / 6.** Architectural restraint. The metal looks expensive at 4px; at 12px it looks cheap.
212- **Section gap: 160px** desktop, 96px mobile. Air around the metal is mandatory.
213- **Card padding: 40px** minimum.
214 
215## Buttons
216- **Primary** — brushed champagne with the full gloss/shadow stack. The single most precious element on the page.
217- **Secondary** — warm paper, 25% bronze hairline.
218- **Outline** — transparent with a 40% bronze hairline.
219- **Ghost** — bare bronze label, hover underline.
220 
221All four are softly rounded at 4px. The rest is restraint.
222 
223## Cards
224Warm paper surface, 1px bronze hairline at 15%, a 1px shadow at 4%. Radius 6px. Cards never lift — the page is a layered paper composition, not a stack of floating tiles.
225 
226## Charts & Data
227A single 1.5px champagne line over the cream canvas, no gridlines, no fills. A champagne dot at the latest reading. The chart should feel like a hand-engraved plot.
228 
229## Do's and Don'ts
230- ✅ The metallic gradient appears once per page — the primary CTA. That's it.
231- ✅ Always include the inner top-edge highlight + inner bottom-edge shadow. Without them the metal dies.
232- ✅ Cormorant 400 for display — never bolded above 500. The serif's contrast is the elegance.
233- ✅ Italic Cormorant on one accent word per hero, max.
234- ❌ No second metallic surface. No silver, no rose-gold, no chrome.
235- ❌ No drop shadows beyond the warm bronze underglow on the primary CTA.
236- ❌ No pills. No 12px+ radii. The metal needs sharp edges to read as crafted.
237- ❌ No saturated chromatic accents. The system is warm-monochrome.
238 
239---
240 
241## Tokens
242 
243> Generated from the same source the live preview renders from.
244> Treat the values below as the contract — never substitute approximations.
245 
246### Colors
247 
248| Role      | Value |
249|-----------|-------|
250| primary   | `#1F1A14` |
251| secondary | `#7A6B58` |
252| tertiary  | `#C9A96A` |
253| neutral   | `#F4EFE6` |
254| surface   | `#FBF7EE` |
255 
256### Typography
257 
258- **Display:** Cormorant Garamond
259- **Body:** Inter
260- **Mono:** JetBrains Mono
261 
262| Role | size / leading / weight / tracking |
263|------|------------------------------------|
264| Hero | 5.5rem / 1 / 400 / -0.025em |
265| H1   | 3.25rem / 1.05 / 400 / -0.02em |
266| H2   | 1.625rem / 1.3 / 500 / -0.01em |
267| Body | 1rem / 1.7 / 400 / 0em |
268 
269### Radius
270 
271- sm: `2px`
272- md: `4px`
273- lg: `6px`
274 
275### Shadows
276 
277- **card:** `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)`
278- **button:** `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)`
279 
280### Borders
281 
282- **card:** `1px solid rgba(122, 107, 88, 0.15)`
283- **divider:** `rgba(122, 107, 88, 0.18)`
284 
285### Buttons
286 
287Four variants, each fully tokenized. The preview renders from these exact values.
288 
289#### Primary
290 
291| Property | Value |
292|----------|-------|
293| shape | `rounded` |
294| background | `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)` |
295| color | `#1F1A14` |
296| border | `1px solid rgba(122, 89, 45, 0.35)` |
297| padding | `12px 26px` |
298| fontWeight | `500` |
299| fontSize | `0.9375rem` |
300| tracking | `0em` |
301| shadow | `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)` |
302 
303#### Secondary
304 
305| Property | Value |
306|----------|-------|
307| shape | `rounded` |
308| background | `#FBF7EE` |
309| color | `#1F1A14` |
310| border | `1px solid rgba(122, 107, 88, 0.25)` |
311| padding | `12px 26px` |
312| fontWeight | `500` |
313| fontSize | `0.9375rem` |
314| tracking | `0em` |
315 
316#### Outline
317 
318| Property | Value |
319|----------|-------|
320| shape | `rounded` |
321| background | `transparent` |
322| color | `#7A6B58` |
323| border | `1px solid rgba(122, 107, 88, 0.40)` |
324| padding | `11px 24px` |
325| fontWeight | `500` |
326| fontSize | `0.9375rem` |
327| tracking | `0em` |
328 
329#### Ghost
330 
331| Property | Value |
332|----------|-------|
333| shape | `rounded` |
334| background | `transparent` |
335| color | `#7A6B58` |
336| border | `none` |
337| padding | `11px 4px` |
338| fontWeight | `500` |
339| fontSize | `0.9375rem` |
340| tracking | `0em` |
341| hoverHint | `underline` |
342 
343### Charts
344 
345| Property | Value |
346|----------|-------|
347| variant | `line` |
348| strokeWidth | `1.5` |
349| gridlines | `false` |
350| highlight | `last` |
351| dotMarker | `true` |
352| axisColor | `#7A6B58` |
353| palette | `#C9A96A`, `#A88848`, `#7A6B58` |
354 
355---
356 
357## Pro tokens
358 
359> Production-fidelity tokens. States, density, motion, elevation,
360> content rules and a measured WCAG contract — derived from the
361> resting tokens unless explicitly authored.
362 
363### States
364 
365#### Button
366 
367- **hover** — bg: `rgba(201, 169, 106, 0.92)`, shadow: `0 4px 20px -8px rgba(201, 169, 106, 0.4)`
368- **focus** — outline: `1.5px solid #C9A96A`, outline-offset: `4px`
369- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
370- **disabled** — opacity: `0.45`
371- **loading** — opacity: `0.7`
372- **selected** — bg: `#1F1A14`, color: `#FBF7EE`
373 
374#### Input
375 
376- **hover** — border: `1px solid #1F1A14`
377- **focus** — border: `1px solid #C9A96A`, shadow: `0 1px 0 0 #C9A96A`
378- **disabled** — opacity: `0.45`
379- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
380 
381#### Card
382 
383- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
384- **selected** — border: `1px solid #1F1A14`
385 
386#### Tab
387 
388- **hover** — color: `#1F1A14`
389- **focus** — outline: `1.5px solid #C9A96A`, outline-offset: `3px`
390- **selected** — color: `#C9A96A`, border: `0 0 2px 0 solid #C9A96A`
391 
392### Density
393 
394| Mode | padding × | row × | body | radius × | Use for |
395|------|-----------|-------|------|----------|---------|
396| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
397| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
398| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
399 
400### Motion
401 
402**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
403 
404```css
405transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
406```
407 
408| Token | Value |
409|-------|-------|
410| duration.instant | `80ms` |
411| duration.fast | `180ms` |
412| duration.base | `320ms` |
413| duration.slow | `500ms` |
414| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
415| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
416| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
417| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
418 
419### Elevation
420 
421Five-level scale, system-specific recipe.
422 
423| Level | Shadow | Recipe |
424|-------|--------|--------|
425| level0 | `none` | Hairline only — typical editorial resting state. |
426| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
427| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
428| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
429| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
430 
431### Content
432 
433- **measure:** `60ch` (max line length for body prose)
434- **paragraph spacing:** `1.5em`
435- **list indent:** `1.75em`
436- **list gap:** `0.55em`
437- **link:** color `#C9A96A`, underline `always`
438- **blockquote:** border `4px solid #C9A96A`, padding `0.4em 0 0.4em 1.5em`
439- **code:** background `rgba(31, 26, 20, 0.06)`, color `#1F1A14`
440 
441### Accessibility (WCAG 2.1)
442 
443**Overall:** FAIL
444 
445| Pair | Ratio | Required | Grade | Suggested fix |
446|------|-------|----------|-------|---------------|
447| Body text on surface | 16.15:1 | AA | AAA | — |
448| Body text on canvas | 15.08:1 | AA | AAA | — |
449| Muted text on surface | 4.82:1 | AA | AA | — |
450| Accent on surface | 2.1:1 | AA-Large | FAIL | `#876a31` → 4.75:1 (AA) |
451| Accent on canvas | 1.96:1 | AA-Large | FAIL | `#80652e` → 4.8:1 (AA) |
452
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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter: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: ['"Cormorant Garamond"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1F1A14',
        secondary: '#7A6B58',
        accent:    '#C9A96A',
        neutral:   '#F4EFE6',
        surface:   '#FBF7EE',
      },
      borderRadius: {
        sm: '2px',
        md: '4px',
        lg: '6px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

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

Neo-Memphis

1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients.

playfulmaximalistretrogeometric
Neo-Memphis.app
ProductPricingDocsAbout
Sign inGet started
playful · maximalist · retro

Build with Neo-Memphis.

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