dkdk/atelier
Atelier
Warm hand-made feel — creamy off-whites, terracotta, sage. Humanist serif + rounded sans, generous radii, soft shadows.
install
npx designkit-cli add designkit-sh/atelierTypography
Every text element the kit ships — headings through code
Headings
The quick brown fox
Section heading
Subsection heading
Minor heading
Overline heading
Body text
Lead paragraph.Body text sits at the backbone of any interface — if it reads well, everything else has a chance. If it doesn't, nothing else matters.
Standard paragraph at the body size. Type hierarchies work best when the jump from body to subheading is clear but not disruptive — around 1.25-1.5× works across most contexts. Inline elements like a link, inline code, emphasis, strong, and highlighted text should all feel native to the kit.
Small / caption text — used for metadata, timestamps, descriptions under labels. Usually 14px or slightly smaller.
Lists
Unordered
- Token-driven styling
- Agent-readable format
- Composable kits
- Colors
- Typography
- Component stylings
- Portable between projects
Ordered
- Describe the kit in prose
- Extract colors and typography
- Apply to a sample UI
- Iterate on token values
Blockquote
“Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.”
Code
// install a kit
$ npx designkit-cli add airbnb
// apply it to your project
import { applyKit } from "@designkit/theme"
applyKit("airbnb")Rule
Buttons
Primary, secondary, outline, ghost — every state the kit ships
Default
Sizes
With icon
Form fields
Every input control the kit ships — text, select, checkboxes, radios, switches, file
Text inputs
Textarea
Select
Checkboxes
Radio group
Toggle switch
File input
Feedback
Alerts, badges, progress, tooltips, avatars — the signal surface of every UI
Alerts
Scheduled maintenance
We'll be rolling out a new version on Friday at 22:00 UTC. Expect a short read-only window.
Kit published
Your DESIGN.md is live. Anyone can now install it with `npx designkit-cli add you/my-kit`.
Deprecated API
You're calling /v1/kits which will be removed in 30 days. Migrate to /v2/kits.
Build failed
Two component tokens reference an undefined color. Run `designkit lint` to see them.
Badges & tags
Avatars
Jeremy Dupont
Author
Progress
Spinner
Tooltip (static)
Keyboard shortcut
Press ⌘ K to open the command palette, or Esc to dismiss.
Data display
Table, definition list, empty state — how the kit shows structured data
Table
| Kit | Author | Installs | Updated | Status |
|---|---|---|---|---|
| airbnb | getdesign | 12.4K | 2d ago | Active |
| claude | getdesign | 8.1K | 5d ago | Active |
| stripe | getdesign | 7.9K | 1w ago | Active |
| linear.app | getdesign | 6.2K | 2w ago | Beta |
| heritage | dk | 2.1K | 1mo ago | Draft |
Definition list
- Name
- Airbnb
- Author
- getdesign · Claude
- Format
- DESIGN.md (Google Stitch spec)
- Primary font
- Nunito (substitute for Airbnb Cereal VF)
- Installs
- 12,408
- License
- MIT
Empty state
No kits yet
You haven't published any kits on this account. Drop a DESIGN.md in a public repo to get started.
Breadcrumbs
Tabs
Sign in
Centered auth card — the most scrutinised surface in any app
Dashboard KPIs
Four-card stat row — the staple of every internal dashboard
Overview
Performance for the last 30 days
Active users
12,408
+4.2% vs last period
MRR
$28.9K
+12.1% vs last period
Churn
1.8%
-0.3% vs last period
NPS
72
+5 vs last period
Chat thread
Agent + user turn-based chat — bubbles, avatar, timestamp
Design Agent
online · responds in seconds
Hero
Landing-page headline + subtitle + primary CTA
Designed for humans. Built for agents.
Ship a brand-aligned product in hours. Coding agents write UI that matches your design system — no brief, no handoff.
Pricing
Three-tier comparison grid with a highlighted middle tier
Simple pricing
Pay for what you use. Change plans any time.
Hobby
- 1 project
- Community support
- Public kits only
Pro
Popular- Unlimited projects
- Private kits
- Priority support
- AI kit generator
Team
- Everything in Pro
- Shared workspace
- SSO + audit logs
- Dedicated support
source
---
name: Atelier
description:
Warm hand-made feel — creamy off-whites, terracotta, sage. Humanist serif +
rounded sans, generous radii, soft shadows.
colors:
background: "#F4EEE2"
surface: "#FBF7EE"
surface-raised: "#FFFDF7"
ink: "#2B2420"
ink-muted: "#7A6E62"
accent: "#C8553D"
accent-soft: "#E8A598"
accent-alt: "#708B75"
border: "#E4DAC6"
link: "{colors.accent}"
typography:
h1:
family: "'Fraunces', 'Cooper BT', Georgia, serif"
size: "3.25rem"
weight: 500
lineHeight: 1.08
letterSpacing: "-0.015em"
h2:
family: "'Fraunces', Georgia, serif"
size: "2rem"
weight: 500
lineHeight: 1.18
h3:
family: "'Fraunces', Georgia, serif"
size: "1.375rem"
weight: 500
lineHeight: 1.3
body:
family: "'Nunito', 'Work Sans', system-ui, sans-serif"
size: "1rem"
weight: 400
lineHeight: 1.65
caption:
family: "'Nunito', system-ui, sans-serif"
size: "0.8125rem"
weight: 500
letterSpacing: "0.02em"
spacing:
xs: "0.5rem"
sm: "0.875rem"
md: "1.375rem"
lg: "2.25rem"
xl: "3.5rem"
rounded:
sm: "8px"
md: "14px"
lg: "22px"
xl: "32px"
shadows:
sm: "0 1px 2px rgba(43, 36, 32, 0.06)"
md: "0 6px 18px rgba(43, 36, 32, 0.08)"
lg: "0 18px 40px rgba(43, 36, 32, 0.12)"
components:
button-primary:
background: "{colors.accent}"
color: "{colors.surface}"
border: "1px solid {colors.accent}"
radius: "{rounded.lg}"
padding: "0.75rem 1.5rem"
shadow: "{shadows.sm}"
button-secondary:
background: "{colors.surface-raised}"
color: "{colors.ink}"
border: "1px solid {colors.border}"
radius: "{rounded.lg}"
padding: "0.75rem 1.5rem"
card:
background: "{colors.surface-raised}"
border: "1px solid {colors.border}"
radius: "{rounded.lg}"
padding: "{spacing.lg}"
shadow: "{shadows.md}"
input:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "0.625rem 0.875rem"
---
## Overview
Atelier is a warm, hand-made design language for small studios, makers, food &
lifestyle brands, and anything that should feel unhurried. It leans into creamy
paper whites, a confident terracotta accent, and Fraunces — a humanist serif
with optical sizing.
## Colors
- The background is an aged-paper off-white (`#F4EEE2`) with two lighter
surfaces for layering.
- Terracotta (`#C8553D`) is the brand accent; a soft sage (`#708B75`) is the
secondary.
- Ink is a warm near-black (`#2B2420`), never pure `#000`, to keep the whole
palette warm.
## Typography
- Fraunces for everything editorial — headings, quotes, large numbers. Its
softness pairs perfectly with the rounded sans body.
- Nunito for body text — friendly, slightly rounded terminals, highly readable
at small sizes.
## Usage
Reach for Atelier when "artisanal", "maker", or "editorial-warm" appears in the
brief. Generous radii (14–22px) and soft shadows carry the handmade feel. Avoid
hard black, thin hairlines, or aggressive rectangles — they fight the vibe.