Atelier

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.