design.md
Back to directory
fintech · minimal · premium · bold · modern

Stadium Bank.

Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only.

01 · Preview

The kitchen sink.

Stadium.app
ProductPricingDocsAbout
Sign inGet started
fintech · minimal · premium

Build with Stadium Bank.

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
#191C1F
secondary
#505A63
tertiary
#191C1F
neutral
#F4F4F4
surface
#FFFFFF
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
20px
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.

ArchetypeDark Luxury

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: "Stadium Bank"
3description: "Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only."
4tags: [fintech, minimal, premium, bold, modern]
5colors:
6  primary:   "#191c1f"
7  secondary: "#505a63"
8  tertiary:  "#191c1f"
9  neutral:   "#f4f4f4"
10  surface:   "#ffffff"
11typography:
12  display: "Space Grotesk"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 500 / -2.72px"
17    h1:   "3rem / 1 / 500 / -1.5px"
18    h2:   "2.5rem / 1.21 / 500 / -0.48px"
19    body: "1rem / 1.5 / 400 / 0.24px"
20radius:
21  sm: 8px
22  md: 12px
23  lg: 20px
24  pill: 9999px
25shadows:
26borders:
27  card:    none
28  divider: "#c9c9cd"
29buttons:
30  primary:
31    background: #191c1f
32    color: #ffffff
33    border: none
34    shape: pill
35    padding: 14px 32px
36    font: display / 500
37  secondary:
38    background: #f4f4f4
39    color: #000000
40    border: none
41    shape: pill
42    padding: 14px 34px
43    font: display / 500
44  outline:
45    background: transparent
46    color: #191c1f
47    border: 2px solid #191c1f
48    shape: pill
49    padding: 12px 30px
50    font: display / 500
51  ghost:
52    background: rgba(244,244,244,0.1)
53    color: #191c1f
54    border: 2px solid #191c1f
55    shape: pill
56    padding: 12px 26px
57    font: display / 500
58charts:
59  variant: bars
60  stroke_width: 2
61  fill_opacity: 0
62  gridlines: false
63  bar_radius: "4px 4px 0 0"
64  bar_gap: 10px
65  highlight: single
66  dot_marker: false
67fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
68dependencies: ["lucide-react"]
69---
70 
71# Stadium Bank
72 
73## AI Build Instructions
74 
75> **Read this section before writing any code.** The rules below
76> are non-negotiable. Every value used in the UI must come from this
77> file's frontmatter — never substitute, approximate, or invent new
78> colors, fonts, radii, or shadows. If a value is missing, ask the
79> user before adding one.
80 
81### 1 · Your role
82 
83You are building UI for a project that has adopted **Stadium Bank** as its
84design system. Treat `DESIGN.md` as the single source of truth.
85Your job is to translate the user's product requirements into
86components and pages that look like they were designed by the same
87person who authored this file.
88 
89### 2 · Token compliance
90 
91- Pull every color, font family, radius, shadow, and spacing value
92  from the frontmatter at the top of this file.
93- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
94  hard-code hex values that bypass the system.
95- When a token can be expressed as a CSS variable, declare it once
96  in your global stylesheet and reference it everywhere downstream.
97- The Google Fonts `<link>` is provided in the Typography section.
98  Add it to `<head>` before any component renders.
99 
100### 3 · Component recipes
101 
102Use these recipes verbatim when building the corresponding component.
103 
104#### Buttons
105 
106Four variants are defined. Pick one — never blend variants or invent a fifth.
107 
108- **Primary** — pill shape, bg `#191c1f`, text `#ffffff`, padding `14px 32px`, weight `500`.
109- **Secondary** — pill shape, bg `#f4f4f4`, text `#000000`, padding `14px 34px`, weight `500`.
110- **Outline** — pill shape, text `#191c1f`, border `2px solid #191c1f`, padding `12px 30px`, weight `500`.
111- **Ghost** — pill shape, bg `rgba(244,244,244,0.1)`, text `#191c1f`, border `2px solid #191c1f`, padding `12px 26px`, weight `500`.
112 
113Reach for **primary** as the single dominant CTA per screen.
114**Secondary** for the supporting action. **Outline** for tertiary
115actions in toolbars. **Ghost** for inline links and table actions.
116 
117#### Cards
118 
119- Background: `#ffffff`
120- Border: `none`
121- Radius: `radius.lg` (`20px`)
122- Internal padding: `20px` for compact cards, `24–28px` for content cards.
123 
124#### Charts
125 
126- Bar/line variant: `bars`
127- Bar radius: `4px 4px 0 0`
128- No gridlines — let the bars/lines carry the data.
129- Highlight strategy: `single` — emphasize a single bar/point per chart.
130 
131#### Typography pairings
132 
133- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.
134- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
135- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
136 
137### 4 · Hard constraints
138 
139Never do any of the following without explicit instruction from the user:
140 
141- Introduce a new color, font, radius, or shadow that isn't declared above.
142- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
143- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
144- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
145- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
146 
147### 5 · Before you finish — verify
148 
149Run through this checklist for every screen you produce:
150 
151- [ ] Every color used appears in the Colors table above.
152- [ ] Headlines use the display font; body copy uses the body font.
153- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
154- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
155- [ ] Cards and dividers use the declared border + shadow tokens.
156- [ ] No values were invented; if you needed something missing, you stopped and asked.
157 
158---
159 
160## 1. Atmosphere
161 
162Stadium Bank is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on a geometric grotesque that creates billboard-scale headlines at 88–136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
163 
164The marketing surface is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate. The colorful semantic tokens (teal, blue, deep-pink, brown) are reserved for the product interface, not the marketing page. The result is a binary that lets typography and whitespace carry the entire story.
165 
166What distinguishes Stadium Bank is its **pill-everything button system**. Every button uses 9999px radius — primary dark, secondary light, outlined, and ghost on dark. The padding is generous (14px 32–34px), creating large, confident touch targets. Combined with Inter for body text at positive letter-spacing (0.16–0.24px), the result feels both premium and accessible.
167 
168**Signature moves**
169- Geometric grotesque at weight 500 — never bold, authority comes from size + tracking
170- Aggressive negative tracking: -2.72px at 88px, -1.5px at 48px
171- Universal pill buttons (9999px) with generous 14×32 padding
172- Inter body at +0.16–0.24px tracking — airy, well-spaced reading
173- **Zero shadows** — depth from color contrast and whitespace only
174- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
175- Dark/light section alternation as the primary depth mechanism
176 
177## 2. Palette
178 
179### Primary
180- **Stadium Dark** `#191c1f` — primary surface, button background, near-black text
181- **Pure White** `#ffffff` — page surface, label on dark
182- **Light Surface** `#f4f4f4` — secondary button, subtle surface
183 
184### Brand
185- **Stadium Blue** `#494fdf` — primary brand blue
186- **Action Blue** `#4f55f1` — header accent
187- **Link Blue** `#376cd5` — link text
188 
189### Semantic
190- Danger `#e23b4a` · Deep Pink `#e61e49`
191- Warning `#ec7e00` · Yellow `#b09000`
192- Teal `#00a87e` · Light Green `#428619` · Green Text `#006400`
193- Light Blue `#007bc2` · Brown `#936d62`
194 
195### Neutrals
196- Mid Slate `#505a63` — secondary text
197- Cool Gray `#8d969e` — tertiary
198- Gray Tone `#c9c9cd` — borders, dividers
199 
200## 3. Typography
201 
202| Role | Size | Weight | Leading | Tracking |
203|------|------|--------|---------|----------|
204| Display Mega | 136px | 500 | 1.00 | -2.72px |
205| Display Hero | 80px | 500 | 1.00 | -0.8px |
206| Section | 48px | 500 | 1.21 | -0.48px |
207| Sub-heading | 40px | 500 | 1.20 | -0.4px |
208| Card title | 32px | 500 | 1.19 | -0.32px |
209| Feature title | 24px | 400 | 1.33 | normal |
210| Nav / UI | 20px | 500 | 1.40 | normal |
211| Body Large | 18px | 400 | 1.56 | -0.09px |
212| Body | 16px | 400 | 1.50 | +0.24px |
213| Body Semibold | 16px | 600 | 1.50 | +0.16px |
214| Body Bold Link | 16px | 700 | 1.50 | +0.24px |
215 
216**Weight 500 is the display default.** No bold for headings — authority comes from size and aggressive negative tracking, not weight stacks. The contrast: compressed display, airy body. Inter's body tracking is *positive* (+0.16–0.24px), creating an unmistakable reading rhythm.
217 
218## 4. Buttons
219 
220### Primary Dark Pill
221```css
222background: #191c1f;
223color: #ffffff;
224padding: 14px 32px;
225border-radius: 9999px;
226```
227Hover: opacity 0.85.
228 
229### Secondary Light Pill
230- Background `#f4f4f4`, text `#000000`
231- 14px 34px padding, 9999px radius
232 
233### Outlined Pill
234- Transparent background, `#191c1f` text
235- `2px solid #191c1f`, 9999px radius
236 
237### Ghost on Dark
238- `rgba(244,244,244,0.1)` background, `#f4f4f4` text
239- `2px solid #f4f4f4`, 9999px radius
240 
241## 5. Cards
242 
243- Background: `#ffffff` or `#f4f4f4`
244- **No border, no shadow** — flat surfaces only
245- Radius: 12px (small) or 20px (cards)
246- Containment via dark/light section alternation
247 
248## 6. Charts
249 
250Big confident bars, single highlighted maximum bar in stadium dark. **No gridlines** — flat by design, just like the rest of the system. The chart card itself has no border or shadow — it sits as a plain block on its section background.
251 
252## 7. Spacing
253 
254- Base: 8px
255- Scale: `4, 6, 8, 14, 16, 20, 24, 32, 40, 48, 80, 88, 120`
256- Section vertical: 80–120px
257 
258## 8. Depth & elevation
259 
260| Level | Treatment | Use |
261|-------|-----------|-----|
262| 0 | Flat | Everything |
263| Focus | `0 0 0 0.125rem` ring | Accessibility only |
264 
265**Zero-shadow philosophy.** Stadium Bank uses no drop shadows anywhere. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
266 
267## 9. Do's & don'ts
268 
269✅ **Do**
270- Use weight 500 for all display headings — never bold
271- Apply 9999px radius to *every* button — pill is universal
272- Use generous button padding (14×32 minimum)
273- Keep marketing surfaces to near-black + white binary
274- Apply positive letter-spacing (+0.16–0.24px) on Inter body
275 
276❌ **Don't**
277- Use shadows — Stadium Bank is flat by design
278- Use weight 700 for display — 500 is the ceiling
279- Use small buttons — generous padding is intentional
280- Apply semantic colors (teal, deep pink, etc.) to marketing surfaces
281- Use rectangular CTAs — pills only
282 
283---
284 
285## Tokens
286 
287> Generated from the same source the live preview renders from.
288> Treat the values below as the contract — never substitute approximations.
289 
290### Colors
291 
292| Role      | Value |
293|-----------|-------|
294| primary   | `#191c1f` |
295| secondary | `#505a63` |
296| tertiary  | `#191c1f` |
297| neutral   | `#f4f4f4` |
298| surface   | `#ffffff` |
299 
300### Typography
301 
302- **Display:** Space Grotesk
303- **Body:** Inter
304- **Mono:** JetBrains Mono
305 
306| Role | size / leading / weight / tracking |
307|------|------------------------------------|
308| Hero | 5.5rem / 1 / 500 / -2.72px |
309| H1   | 3rem / 1 / 500 / -1.5px |
310| H2   | 2.5rem / 1.21 / 500 / -0.48px |
311| Body | 1rem / 1.5 / 400 / 0.24px |
312 
313### Radius
314 
315- sm: `8px`
316- md: `12px`
317- lg: `20px`
318- pill: `9999px`
319 
320### Shadows
321 
322 
323### Borders
324 
325- **card:** `none`
326- **divider:** `#c9c9cd`
327 
328### Buttons
329 
330Four variants, each fully tokenized. The preview renders from these exact values.
331 
332#### Primary
333 
334| Property | Value |
335|----------|-------|
336| shape | `pill` |
337| background | `#191c1f` |
338| color | `#ffffff` |
339| border | `none` |
340| padding | `14px 32px` |
341| fontFamily | `display` |
342| fontWeight | `500` |
343 
344#### Secondary
345 
346| Property | Value |
347|----------|-------|
348| shape | `pill` |
349| background | `#f4f4f4` |
350| color | `#000000` |
351| border | `none` |
352| padding | `14px 34px` |
353| fontFamily | `display` |
354| fontWeight | `500` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `pill` |
361| background | `transparent` |
362| color | `#191c1f` |
363| border | `2px solid #191c1f` |
364| padding | `12px 30px` |
365| fontFamily | `display` |
366| fontWeight | `500` |
367 
368#### Ghost
369 
370| Property | Value |
371|----------|-------|
372| shape | `pill` |
373| background | `rgba(244,244,244,0.1)` |
374| color | `#191c1f` |
375| border | `2px solid #191c1f` |
376| padding | `12px 26px` |
377| fontFamily | `display` |
378| fontWeight | `500` |
379 
380### Charts
381 
382| Property | Value |
383|----------|-------|
384| variant | `bars` |
385| strokeWidth | `2` |
386| fillOpacity | `0` |
387| gridlines | `false` |
388| barRadius | `4px 4px 0 0` |
389| barGap | `10px` |
390| highlight | `single` |
391| dotMarker | `false` |
392 
393---
394 
395## Pro tokens
396 
397> Production-fidelity tokens. States, density, motion, elevation,
398> content rules and a measured WCAG contract — derived from the
399> resting tokens unless explicitly authored.
400 
401### States
402 
403#### Button
404 
405- **hover** — shadow: `0 0 24px -4px rgba(25, 28, 31, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
406- **focus** — outline: `1.5px solid #191c1f`, outline-offset: `3px`
407- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
408- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
409- **loading** — opacity: `0.6`
410- **selected** — bg: `#191c1f`, color: `#0A0A0A`
411 
412#### Input
413 
414- **hover** — border: `1px solid rgba(25, 28, 31, 0.5)`
415- **focus** — border: `1px solid #191c1f`, shadow: `0 0 0 3px rgba(25, 28, 31, 0.2)`
416- **disabled** — opacity: `0.35`
417- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
418 
419#### Card
420 
421- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(25, 28, 31, 0.18)`, transform: `translateY(-2px)`
422- **selected** — border: `1px solid #191c1f`, shadow: `0 0 0 1px #191c1f`
423- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
424 
425#### Tab
426 
427- **hover** — color: `#191c1f`
428- **focus** — outline: `1.5px solid #191c1f`, outline-offset: `2px`
429- **selected** — color: `#191c1f`, border: `0 0 1.5px 0 solid #191c1f`
430 
431### Density
432 
433| Mode | padding × | row × | body | radius × | Use for |
434|------|-----------|-------|------|----------|---------|
435| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
436| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
437| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
438 
439### Motion
440 
441**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
442 
443```css
444transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
445```
446 
447| Token | Value |
448|-------|-------|
449| duration.instant | `100ms` |
450| duration.fast | `180ms` |
451| duration.base | `280ms` |
452| duration.slow | `450ms` |
453| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
454| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
455| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
456| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
457 
458### Elevation
459 
460Five-level scale, system-specific recipe.
461 
462| Level | Shadow | Recipe |
463|-------|--------|--------|
464| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
465| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
466| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
467| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(25, 28, 31, 0.25)` | Sheet — Accent-Halo. |
468| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(25, 28, 31, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
469 
470### Content
471 
472- **measure:** `66ch` (max line length for body prose)
473- **paragraph spacing:** `1.3em`
474- **list indent:** `1.5em`
475- **list gap:** `0.5em`
476- **link:** color `#191c1f`, underline `hover`
477- **blockquote:** border `2px solid #191c1f`, padding `0.8em 1.2em`
478- **code:** background `rgba(25, 28, 31, 0.12)`, color `#191c1f`
479 
480### Accessibility (WCAG 2.1)
481 
482**Overall:** AAA
483 
484| Pair | Ratio | Required | Grade | Suggested fix |
485|------|-------|----------|-------|---------------|
486| Body text on surface | 17.11:1 | AA | AAA | — |
487| Body text on canvas | 15.56:1 | AA | AAA | — |
488| Muted text on surface | 7.04:1 | AA | AAA | — |
489| Accent on surface | 17.11:1 | AA-Large | AAA | — |
490| Accent on canvas | 15.56:1 | AA-Large | AAA | — |
491
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=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&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: ['"Space Grotesk"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#191c1f',
        secondary: '#505a63',
        accent:    '#191c1f',
        neutral:   '#f4f4f4',
        surface:   '#ffffff',
      },
      borderRadius: {
        sm: '8px',
        md: '12px',
        lg: '20px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Atrium Folio

An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page.

editorialportfoliopremiumwarmminimal
Atrium.app
ProductPricingDocsAbout
Sign inGet started
editorial · portfolio · premium

Build with Atrium Folio.

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