98
AAA
40 tokens
primarysecondarybaseraisedprimarydefaultsuccessdanger
Live preview
atelier · rendered from tokens
Color
Typography
3xl
2xl
xl
lg
base
sm
Components
Buttons
Inputs
Fintech
Selection
Notifications
AutoManual
Feedback
successdangerwarninginfo
Tokens validatedAll contrast checks pass WCAG AA.
Data
AMRKJD+5
2,847+12%
Storage64%
Navigation
OverviewTokensActivity
Home/Library/Item
123
Cards
Pro
$12/ mo
Unlimited exports
Private systems
Priority support
Radius, shadow & spacing
sm
md
lg
full
sm
md
Use this system
Three ways to drop Atelier into your workflow.
Save the file for your tool — your agent then generates UI in Atelier, automatically.
CCClaude Code
CLAUDE.mdRepo root — Claude Code reads it automatically.
CuCursor
.cursor/rules/atelier.mdcProject rule — applied to every generation.
WsWindsurf
.windsurfrulesRepo root — Cascade reads it automatically.
GCGitHub Copilot
.github/copilot-instructions.mdRepo-wide custom instructions for Copilot.
The system
Brand & Voice
Atelier is a portfolio that isn't afraid to be seen. Oversized display type, a vivid magenta, and a springy easing make every scroll feel like a reveal. The work is the show; the system turns up the lights.
Layout & Grid
Asymmetric, generous layouts with huge headlines and full-bleed imagery. Body copy stays tight and readable so the drama lives in the headers.
Components
Buttons
Pill radius.full buttons in color.brand.primary with a colored shadow.md
glow on hover.
Project Cards
Large image cards that scale slightly and lift on hover, captions in muted text
with a color.brand.primary link.
Accessibility
Loud visuals, calm contrast: primary and muted text pass WCAG AA on every surface. Motion respects reduced-motion, and focus rings stay bold and visible.
Tokens
Color (14)
Tokens
breakpoint
iconography
motion
radius
shadow
spacing
typography
zIndex
Export
One source of truth, five formats — copy or download any of them.
design.md98 lines
1
---2
$schema: https://designmd.in/schema/v1.json3
id: atelier4
name: Atelier5
title: Atelier — Expressive Portfolio6
version: 1.0.07
category: portfolio8
tags: [portfolio, expressive, magenta, bold, creative]9
author: designmd10
license: CC-BY-4.011
updatedAt: 2026-06-2212
colorMode: [light]13
tokens:14
color:15
brand:16
primary: { value: "oklch(0.55 0.25 330)", type: color }17
secondary: { value: "oklch(0.56 0.2 290)", type: color }18
onBrand: { value: "oklch(0.99 0 0)", type: color }19
text:20
primary: { value: "oklch(0.22 0.02 320)", type: color }21
muted: { value: "oklch(0.46 0.03 320)", type: color }22
link: { value: "{color.brand.primary}", type: color }23
surface:24
base: { value: "oklch(0.99 0.004 320)", type: color }25
raised: { value: "oklch(1 0 0)", type: color }26
sunken: { value: "oklch(0.96 0.008 320)", type: color }27
border:28
default: { value: "oklch(0.9 0.012 320)", type: color }29
state:30
success: { value: "oklch(0.58 0.15 150)", type: color }31
danger: { value: "oklch(0.56 0.2 25)", type: color }32
warning: { value: "oklch(0.72 0.15 75)", type: color }33
info: { value: "oklch(0.6 0.16 290)", type: color }34
typography:35
family:36
display: { value: "Clash Display, system-ui, sans-serif", type: fontFamily }37
sans: { value: "Satoshi, system-ui, sans-serif", type: fontFamily }38
mono: { value: "ui-monospace, monospace", type: fontFamily }39
scale:40
sm: { value: "0.875rem", type: dimension }41
base: { value: "1rem", type: dimension }42
lg: { value: "1.35rem", type: dimension }43
xl: { value: "2rem", type: dimension }44
"2xl": { value: "3rem", type: dimension }45
"3xl": { value: "4.5rem", type: dimension }46
weight:47
regular: { value: 400, type: fontWeight }48
bold: { value: 700, type: fontWeight }49
leading:50
tight: { value: 1.02, type: number }51
normal: { value: 1.5, type: number }52
spacing:53
base: { value: "0.25rem", type: dimension }54
radius:55
sm: { value: "0.5rem", type: dimension }56
md: { value: "1rem", type: dimension }57
lg: { value: "1.75rem", type: dimension }58
full: { value: "9999px", type: dimension }59
shadow:60
sm: { value: "0 2px 6px oklch(0.22 0.02 320 / 0.1)", type: shadow }61
md: { value: "0 16px 40px oklch(0.55 0.25 330 / 0.18)", type: shadow }62
motion:63
duration:64
base: { value: "240ms", type: duration }65
easing:66
standard: { value: "cubic-bezier(0.34, 1.3, 0.5, 1)", type: cubicBezier }67
breakpoint:68
md: { value: "768px", type: dimension }69
iconography:70
style: { value: "2.5px stroke, bold and expressive", type: descriptor }71
zIndex:72
dropdown: { value: 1000, type: number }73
modal: { value: 1300, type: number }74
---75
76
# Atelier Design System77
78
## Brand & Voice79
Atelier is a portfolio that isn't afraid to be seen. Oversized display type, a80
vivid magenta, and a springy easing make every scroll feel like a reveal. The81
work is the show; the system turns up the lights.82
83
## Layout & Grid84
Asymmetric, generous layouts with huge headlines and full-bleed imagery. Body85
copy stays tight and readable so the drama lives in the headers.86
87
## Components88
### Buttons89
Pill `radius.full` buttons in `color.brand.primary` with a colored `shadow.md`90
glow on hover.91
92
### Project Cards93
Large image cards that scale slightly and lift on hover, captions in muted text94
with a `color.brand.primary` link.95
96
## Accessibility97
Loud visuals, calm contrast: primary and muted text pass WCAG AA on every98
surface. Motion respects reduced-motion, and focus rings stay bold and visible.