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

Atelier Glass.

A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.

01 · Preview

The kitchen sink.

Atelier.app
ProductPricingDocsAbout
Sign inGet started
glass · modern · premium

Build with Atelier 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
#1A1830
secondary
#6B6987
tertiary
#1A1830
neutral
#E6E3F0
surface
#EEEAF5
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.

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: "Atelier Glass"
3description: "A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome."
4tags: [glass, modern, premium, minimal, saas]
5colors:
6  primary:   "#1a1830"
7  secondary: "#6b6987"
8  tertiary:  "#1a1830"
9  neutral:   "#e6e3f0"
10  surface:   "#eeeaf5"
11typography:
12  display: Spectral
13  body:    "Plus Jakarta Sans"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 1.02 / 500 / -0.035em"
17    h1:   "3rem / 1.1 / 600 / -0.025em"
18    h2:   "1.625rem / 1.25 / 600 / -0.012em"
19    body: "1.0625rem / 1.62 / 400 / -0.005em"
20radius:
21  sm: 10px
22  md: 16px
23  lg: 22px
24  pill: 9999px
25shadows:
26  card:   "rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px"
27  button: none
28borders:
29  card:    "1px solid rgba(255,255,255,0.55)"
30  divider: rgba(26,24,48,0.10)
31buttons:
32  primary:
33    background: #3d3a8a
34    color: #f4f2fb
35    border: none
36    shape: rounded
37    padding: 11px 22px
38    font: 600 / 0.875rem
39  secondary:
40    background: rgba(255,255,255,0.55)
41    color: #1a1830
42    border: 1px solid rgba(26,24,48,0.10)
43    shape: rounded
44    padding: 11px 22px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #1a1830
49    border: 1px solid rgba(26,24,48,0.18)
50    shape: rounded
51    padding: 11px 22px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #6b6987
56    border: none
57    shape: rounded
58    padding: 11px 16px
59    font: 500 / 0.875rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.5
63  fill_opacity: 0.1
64  gridlines: false
65  bar_gap: 5px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Atelier Glass
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Atelier Glass** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#3d3a8a`, text `#f4f2fb`, padding `11px 22px`, weight `600`.
110- **Secondary** — rounded shape, bg `rgba(255,255,255,0.55)`, text `#1a1830`, border `1px solid rgba(26,24,48,0.10)`, padding `11px 22px`, weight `500`.
111- **Outline** — rounded shape, text `#1a1830`, border `1px solid rgba(26,24,48,0.18)`, padding `11px 22px`, weight `500`.
112- **Ghost** — rounded shape, text `#6b6987`, padding `11px 16px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#eeeaf5`
121- Border: `1px solid rgba(255,255,255,0.55)`
122- Shadow: `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px`
123- Radius: `radius.lg` (`22px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Spectral`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Plus Jakarta Sans`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Atelier Glass is a studio interface built around real glassmorphism. The page surface is a soft tonal lavender-bone `#eeeaf5` — never white, never grey. Cards are frosted glass: `background: rgba(255,255,255,0.55)`, `backdrop-filter: blur(20px)`, with a 1px white inner border at 55% opacity that picks up the page tint and reads as light bouncing through the pane. Display headlines run in Spectral 500 at 80px with one italic word per headline — the calligraphic accent through frosted glass. Body sits in Plus Jakarta Sans at 17px on a 1.62 leading. The single accent is deep indigo `#3d3a8a` reserved for the primary CTA, the active panel ring, and the focus state — never as a background, never as a fill.
168 
169The discipline is in the glass behaviour: every elevated surface uses `backdrop-filter: blur(20px) saturate(1.4)` with a 55% white tint — the saturation lift is what makes the lavender bleed through and reads as actual frosted glass, not as a grey overlay.
170 
171**Signature moves**
172- Real `backdrop-filter: blur(20px) saturate(1.4)` on every elevated card
173- Lavender-bone surface `#eeeaf5` — the tint that bleeds through the glass IS the system
174- Spectral 500 italic accent on one word per headline — the calligraphic moment
175- Indigo `#3d3a8a` exclusively on primary CTA + active panel ring + focus state
176- 1px inner border at 55% white on every glass card — the bouncing-light edge
177 
178## 2. Palette
179 
180### Surfaces
181- **Lavender Bone** `#eeeaf5` — page background (the tint that bleeds through glass)
182- **Lavender Lift** `#e6e3f0` — secondary tonal surface, tab rail
183- **Glass** `rgba(255,255,255,0.55)` — frosted card fill (always with backdrop-blur 20px + saturate 1.4)
184- **Glass Edge** `rgba(255,255,255,0.55)` — 1px inner border on every glass card
185 
186### Ink
187- **Ink** `#1a1830` — text, headings (deep indigo-black, slight purple undertone)
188- **Ink 50** `#6b6987` — secondary text, mono labels
189 
190### Accent
191- **Indigo** `#3d3a8a` — primary CTA, active panel ring, focus state
192- **Indigo Soft** `rgba(61,58,138,0.12)` — focus ring background, hovered state
193 
194## 3. Typography
195 
196| Role | Font | Size | Weight | Leading | Tracking |
197|------|------|------|--------|---------|----------|
198| Hero | Spectral | 80px | 500 | 1.02 | -0.035em |
199| Hero Italic Word | Spectral (italic) | 80px | 500 | 1.02 | -0.035em |
200| H1 | Plus Jakarta Sans | 48px | 600 | 1.1 | -0.025em |
201| H2 | Plus Jakarta Sans | 26px | 600 | 1.25 | -0.012em |
202| Body | Plus Jakarta Sans | 17px | 400 | 1.62 | -0.005em |
203| UI / Button | Plus Jakarta Sans | 14px | 600 | 1.4 | 0 |
204| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.08em uppercase |
205| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |
206 
207Spectral italic is the signature moment — exactly one word per headline gets the italic. Anything more and the page reads as a wedding invitation.
208 
209## 4. Buttons
210 
211### Primary (Indigo Rounded)
212```css
213background: #3d3a8a;
214color: #f4f2fb;
215padding: 11px 22px;
216border-radius: 16px;
217font-weight: 600;
218```
219 
220The 16px radius matches the glass cards — the button reads as a solid indigo glass tile sitting alongside the frosted ones.
221 
222### Secondary (Glass)
223```css
224background: rgba(255,255,255,0.55);
225backdrop-filter: blur(20px) saturate(1.4);
226border: 1px solid rgba(26,24,48,0.10);
227```
228 
229The secondary IS a glass tile — same blur, same border, smaller scale.
230 
231### Outline & Ghost
232- Outline: transparent, 1px hairline at 18% ink
233- Ghost: no border, ink-50, hover lifts to glass
234 
235## 5. Cards
236 
237```css
238background: rgba(255,255,255,0.55);
239backdrop-filter: blur(20px) saturate(1.4);
240border: 1px solid rgba(255,255,255,0.55);
241border-radius: 22px;
242box-shadow: rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px;
243```
244 
245The `saturate(1.4)` is what separates this from generic 2018 glassmorphism — it pulls the lavender tint forward through the glass instead of greying it out. The 1px inner border at 55% white catches the page tint and reads as light bouncing off the front face of the pane.
246 
247## 6. Charts
248 
249Thin precise bars (4px wide, 5px gap). One bar in indigo, others in 22% ink. Line charts at 1.5px ink with a 10% indigo fill, ending in an indigo dot marker. NO gridlines — the glass card itself frames the chart.
250 
251## 7. Tabs
252 
253Pill tabs (9999px radius). Active = indigo-soft background fill, ink text, no border. Inactive = transparent, ink-50. Sits inside a glass rail.
254 
255## 8. Spacing
256 
257- Base 4px
258- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`
259- Section padding: 96px desktop, 48px mobile
260 
261## 9. Do's & don'ts
262 
263✅ **Do**
264- Use real `backdrop-filter: blur(20px) saturate(1.4)` — the saturation lift is non-negotiable
265- Hold the lavender-bone page surface — the tint that bleeds through the glass IS the system
266- Reserve indigo for primary CTA + active panel ring + focus state — never as a background
267- Use Spectral italic on exactly one word per headline — the calligraphic moment
268 
269❌ **Don't**
270- Use white or grey backgrounds — the tint is what makes the glass read as glass
271- Use `opacity: 0.5` instead of `backdrop-filter` — that is fake glass and reads as fog
272- Use indigo as a fill or background — three surfaces only
273- Use Spectral for body — Plus Jakarta Sans handles all prose; Spectral is accent only
274 
275---
276 
277## Tokens
278 
279> Generated from the same source the live preview renders from.
280> Treat the values below as the contract — never substitute approximations.
281 
282### Colors
283 
284| Role      | Value |
285|-----------|-------|
286| primary   | `#1a1830` |
287| secondary | `#6b6987` |
288| tertiary  | `#1a1830` |
289| neutral   | `#e6e3f0` |
290| surface   | `#eeeaf5` |
291 
292### Typography
293 
294- **Display:** Spectral
295- **Body:** Plus Jakarta Sans
296- **Mono:** JetBrains Mono
297 
298| Role | size / leading / weight / tracking |
299|------|------------------------------------|
300| Hero | 5rem / 1.02 / 500 / -0.035em |
301| H1   | 3rem / 1.1 / 600 / -0.025em |
302| H2   | 1.625rem / 1.25 / 600 / -0.012em |
303| Body | 1.0625rem / 1.62 / 400 / -0.005em |
304 
305### Radius
306 
307- sm: `10px`
308- md: `16px`
309- lg: `22px`
310- pill: `9999px`
311 
312### Shadows
313 
314- **card:** `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px`
315- **button:** `none`
316 
317### Borders
318 
319- **card:** `1px solid rgba(255,255,255,0.55)`
320- **divider:** `rgba(26,24,48,0.10)`
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 | `#3d3a8a` |
332| color | `#f4f2fb` |
333| border | `none` |
334| padding | `11px 22px` |
335| fontWeight | `600` |
336| fontSize | `0.875rem` |
337 
338#### Secondary
339 
340| Property | Value |
341|----------|-------|
342| shape | `rounded` |
343| background | `rgba(255,255,255,0.55)` |
344| color | `#1a1830` |
345| border | `1px solid rgba(26,24,48,0.10)` |
346| padding | `11px 22px` |
347| fontWeight | `500` |
348| fontSize | `0.875rem` |
349 
350#### Outline
351 
352| Property | Value |
353|----------|-------|
354| shape | `rounded` |
355| background | `transparent` |
356| color | `#1a1830` |
357| border | `1px solid rgba(26,24,48,0.18)` |
358| padding | `11px 22px` |
359| fontWeight | `500` |
360| fontSize | `0.875rem` |
361 
362#### Ghost
363 
364| Property | Value |
365|----------|-------|
366| shape | `rounded` |
367| background | `transparent` |
368| color | `#6b6987` |
369| border | `none` |
370| padding | `11px 16px` |
371| fontWeight | `500` |
372| fontSize | `0.875rem` |
373 
374### Charts
375 
376| Property | Value |
377|----------|-------|
378| variant | `thin-bars` |
379| strokeWidth | `1.5` |
380| fillOpacity | `0.1` |
381| gridlines | `false` |
382| barGap | `5px` |
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** — bg: `rgba(26, 24, 48, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 24, 48, 0.4)`
399- **focus** — outline: `1.5px solid #1a1830`, outline-offset: `4px`
400- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
401- **disabled** — opacity: `0.45`
402- **loading** — opacity: `0.7`
403- **selected** — bg: `#1a1830`, color: `#eeeaf5`
404 
405#### Input
406 
407- **hover** — border: `1px solid #1a1830`
408- **focus** — border: `1px solid #1a1830`, shadow: `0 1px 0 0 #1a1830`
409- **disabled** — opacity: `0.45`
410- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
411 
412#### Card
413 
414- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
415- **selected** — border: `1px solid #1a1830`
416 
417#### Tab
418 
419- **hover** — color: `#1a1830`
420- **focus** — outline: `1.5px solid #1a1830`, outline-offset: `3px`
421- **selected** — color: `#1a1830`, border: `0 0 2px 0 solid #1a1830`
422 
423### Density
424 
425| Mode | padding × | row × | body | radius × | Use for |
426|------|-----------|-------|------|----------|---------|
427| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
428| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
429| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
430 
431### Motion
432 
433**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
434 
435```css
436transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
437```
438 
439| Token | Value |
440|-------|-------|
441| duration.instant | `80ms` |
442| duration.fast | `180ms` |
443| duration.base | `320ms` |
444| duration.slow | `500ms` |
445| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
446| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
447| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
448| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
449 
450### Elevation
451 
452Five-level scale, system-specific recipe.
453 
454| Level | Shadow | Recipe |
455|-------|--------|--------|
456| level0 | `none` | Hairline only — typical editorial resting state. |
457| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
458| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
459| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
460| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
461 
462### Content
463 
464- **measure:** `60ch` (max line length for body prose)
465- **paragraph spacing:** `1.5em`
466- **list indent:** `1.75em`
467- **list gap:** `0.55em`
468- **link:** color `#1a1830`, underline `always`
469- **blockquote:** border `4px solid #1a1830`, padding `0.4em 0 0.4em 1.5em`
470- **code:** background `rgba(26, 24, 48, 0.06)`, color `#1a1830`
471 
472### Accessibility (WCAG 2.1)
473 
474**Overall:** AA-Large
475 
476| Pair | Ratio | Required | Grade | Suggested fix |
477|------|-------|----------|-------|---------------|
478| Body text on surface | 14.56:1 | AA | AAA | — |
479| Body text on canvas | 13.65:1 | AA | AAA | — |
480| Muted text on surface | 4.44:1 | AA | AA-Large | `#666581` → 4.73:1 (AA) |
481| Accent on surface | 14.56:1 | AA-Large | AAA | — |
482| Accent on canvas | 13.65:1 | AA-Large | AAA | — |
483
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=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&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: ['"Spectral"', 'serif'],
        sans:    ['"Plus Jakarta Sans"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1a1830',
        secondary: '#6b6987',
        accent:    '#1a1830',
        neutral:   '#e6e3f0',
        surface:   '#eeeaf5',
      },
      borderRadius: {
        sm: '10px',
        md: '16px',
        lg: '22px',
      },
    },
  },
};
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

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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