Themes / 08
Atelier
A spare, high-fashion theme for portfolios and houses. Ivory and black, a didone at display size, and no corner rounded.
npx shadcn@latest add https://strictthemes.com/r/atelier.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.
Home
The opening page of a small fashion house, with one very large heading, one large picture placed off-center, the current collection, three pieces from it and a link onward.
31.8k characters · Run 3 times in Claude Code
Strict Check 100%
Collection
A season's lookbook for a fashion house, with numbered looks laid out large and uneven across the grid, each with a caption and credits, and a short text about the season.
32.7k characters · Run 3 times in Claude Code
Strict Check 100%
Piece
The page for one garment, with large pictures, its name and price, a size choice, details and materials, care, and a request form that opens on the page.
34.4k characters · Run 3 times in Claude Code
Strict Check 100%
House
The about page of a small fashion house, with a long heading, its story in a narrow column, a portrait of its founder, a timeline and the workshops where the clothes are made.
32.2k characters · Run 3 times in Claude Code
Strict Check 100%
Appointment
A page for booking a fitting at a fashion house's atelier, with its address and opening hours and a form for a name, an email, a date, a time and a note.
34.1k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#141414 / #F3F0EA
on-primary
#FAF8F5 / #141414
secondary
#E4DFD6 / #2B2A27
on-secondary
#141414 / #F3F0EA
tertiary
#DDBBAA
on-tertiary
#141414
neutral
#68635C / #A6A097
background
#FAF8F5 / #0F0F0F
surface
#F1EEE8 / #1A1A19
foreground
#141414 / #F3F0EA
border
#D6D1C8 / #353330
error
#A32020 / #FF8577
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Bodoni Moda · 72px · weight 500 · line 1
The quick brown fox
h1
Bodoni Moda · 44px · weight 500 · line 1.1
The quick brown fox
h2
Bodoni Moda · 28px · weight 500 · line 1.2
The quick brown fox
body
Hanken Grotesk · 16px · weight 400 · line 1.65
The quick brown fox
label
Fragment Mono · 12px · weight 400 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
none
0px
xs
4px
sm
8px
md
16px
lg
32px
xl
64px
2xl
128px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, no full rounds
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Atelier is for work that is looked at: a fashion house, a photographer, an architect, a gallery, a lookbook. It takes its manners from a printed catalogue. The page is almost empty, the type is large and thin-stroked, and the interface steps back so that the work is the only thing with color.
Colors
- Primary (
#141414) is black, for buttons, links and rules that matter. - Secondary (
#E4DFD6) is stone, a quiet fill for the second button. - Tertiary (
#DDBBAA) is blush, the single tint. Use it for one badge such as "New season", never for text. - Neutral (
#68635C) sets captions, credits and small print. - Background (
#FAF8F5) is ivory. Surface (#F1EEE8) is a slightly deeper paper for a caption block or a form. - Error (
#A32020) is the only saturated color in the interface, and appears only with a message.
Typography
Bodoni Moda sets headings: a didone with hairline serifs, at its best large, so the display size is 72px and headings are few. Its italic is the theme's one flourish; use it for a single word or a title, not a paragraph. Hanken Grotesk sets body text at 16px. Fragment Mono sets labels, uppercase with very wide tracking: credits, dates, sizes, prices.
Layout
A 12-column grid, 1320px at its widest, with 32px gutters. Images run large and are placed off-center: a picture in eight columns with its caption in the ninth, not a tidy row of three. Spacing comes from the scale (4, 8, 16, 32, 64, 128), and the big steps are the ones to use: 128px between sections. White space is the main material.
Elevation & Depth
None. Nothing has a shadow, and nothing sits on a card with a fill unless it is a form. Things are separated by space first and a 1px hairline second.
Shapes
Square. Every corner is 0: buttons, inputs, images, badges. The only curves on the page are in the letters.
Components
- Buttons: black with ivory text for the main action, stone for the second. Uppercase mono labels, generous padding, square corners.
- Cards: used rarely. A block of the deeper paper with 32px padding and no border.
- Badges: blush with black text, square, one or two words.
- Links: black with a 1px underline. Never colored.
- Icons: 1px or 1.5px stroke line icons, used sparingly. Never emoji.
Do's and Don'ts
- Do give one image or one heading the whole screen.
- Do set captions and credits small, in the mono font, and let them be found.
- Do use the italic for one word or one title at a time.
- Don't round a corner, add a shadow or tint a background to make something "pop".
- Don't set long text in Bodoni: below 28px its hairlines break up.
- Don't introduce a color, size or radius that is not a token above.