# Atelier — Gamma DESIGN.md

> Editorial calm. Newsreader headings, moss on cool stone.

Atelier separates the display voice from the interface voice: headings set in Newsreader carry the character, while Instrument Sans keeps controls plain. The canvas is a cool stone rather than cream, the accent is a deep moss green, and radii stay small so the page feels printed rather than inflated. Transitions are long enough to be noticed and never overshoot.

Generated from Gamma's design-system contract (`src/design-systems/atelier.ts`). This file describes a design language: no third-party logos, copy, or imagery travel with it.

## Point of view

- Two voices. Serif display for headings, humanist sans for everything a person operates.
- Cool stone, not cream. A faint green-gray canvas keeps the moss accent from going warm.
- Small radii. Six-pixel controls and eight-pixel panels read as print, not app.
- Unhurried motion. Longer durations, exponential ease-out, no spring.

## Color — light

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#f4f5f4` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#fbfbfa` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#e8ebe8` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#1d2320` | Primary text and icons. |
| `--gamma-muted` | `#5a655e` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#d5d9d4` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#2f6f4e` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#f4f8f5` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#e2eee7` | Selected and hovered tints. |
| `--gamma-success` | `#2e7d5b` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#e0f0e8` | Background behind success text. |
| `--gamma-danger` | `#b03a2e` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#f6e3e0` | Background behind danger text. |
| `--gamma-warning` | `#85600f` | Attention that is not an error. |
| `--gamma-warning-soft` | `#f3ead6` | Background behind warning text. |

### Depth and focus

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-shadow-low` | `0 1px 2px rgba(29, 35, 32, 0.07)` | Resting depth. |
| `--gamma-shadow-mid` | `0 10px 30px rgba(29, 35, 32, 0.09)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 30px 70px rgba(29, 35, 32, 0.15)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 3px rgba(47, 111, 78, 0.26)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(47, 111, 78, 0.22)` | Text selection. |

## Color — dark

Define these on the same scope under `[data-theme="dark"]`; do not invent a separate scale.

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#161a18` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#1c211e` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#252b27` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#eceee9` | Primary text and icons. |
| `--gamma-muted` | `#9ea69f` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#2f3632` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#8fcaa8` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#0f1a14` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#22362b` | Selected and hovered tints. |
| `--gamma-success` | `#8fcaa8` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#1f3128` | Background behind success text. |
| `--gamma-danger` | `#e98b7e` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#3a231f` | Background behind danger text. |
| `--gamma-warning` | `#e0b96a` | Attention that is not an error. |
| `--gamma-warning-soft` | `#332c1c` | Background behind warning text. |
| `--gamma-shadow-low` | `0 1px 2px rgba(0, 0, 0, 0.4)` | Resting depth. |
| `--gamma-shadow-mid` | `0 10px 30px rgba(0, 0, 0, 0.4)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 30px 70px rgba(0, 0, 0, 0.55)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 3px rgba(143, 202, 168, 0.35)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(143, 202, 168, 0.3)` | Text selection. |

## Type

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-font-ui` | `"Instrument Sans", ui-sans-serif, system-ui, sans-serif` | Interface copy, labels, and buttons. |
| `--gamma-font-display` | `"Newsreader", Georgia, "Times New Roman", serif` | Headings and the few largest statements. |
| `--gamma-font-code` | `"JetBrains Mono", ui-monospace, SFMono-Regular, monospace` | Data, measurements, token names, and code. |
| `--gamma-tracking-display` | `-0.015em` | Letter spacing for display headings. |

## Shape

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-radius-small` | `3px` | Chips, tags, and tiny controls. |
| `--gamma-radius-control` | `6px` | Inputs, slots, and menus. |
| `--gamma-radius-button` | `6px` | Primary and secondary buttons. |
| `--gamma-radius-panel` | `8px` | Cards, panels, sheets, and trays. |
| `--gamma-radius-pill` | `999px` | Switches, badges, and fully rounded controls. |
| `--gamma-hairline` | `1px` | Border width for every divider and outline. |

## Motion

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-duration-fast` | `140ms` | Hover and press feedback. |
| `--gamma-duration-base` | `260ms` | Routine state changes and reveals. |
| `--gamma-duration-slow` | `480ms` | Overlays, layout changes, and large arrivals. |
| `--gamma-ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Everyday state changes. |
| `--gamma-ease-emphasized` | `cubic-bezier(0.16, 1, 0.3, 1)` | Entrances and settles. |
| `--gamma-ease-spring` | `cubic-bezier(0.2, 1.08, 0.3, 1)` | Elastic movement and selection trails. |

## Rules for implementation

1. Read every color, font, radius, easing, and shadow from a `--gamma-*` custom property. Do not hardcode a value that a token can express.
2. Use `DesignSystemScope` for an island, or apply `data-design-system` to a region. The nearest scope wins.
3. Native elements own interaction: a button is a `<button>`, a choice is a radio group, and a disclosure exposes `aria-expanded`.
4. Every focused control has a visible `:focus-visible` ring. Do not remove the browser outline without a replacement.
5. Every animation has a `prefers-reduced-motion: reduce` rule that removes movement but keeps the state legible.
6. Numbers that change use `font-variant-numeric: tabular-nums`.
7. Arrivals use `--gamma-ease-emphasized`; routine state changes use `--gamma-ease-standard`; elastic movement uses `--gamma-ease-spring`.
8. Pair `accent` with `accent-ink` for text and icons. Never place `muted` on `surface-2` without checking contrast.

## Apply the system

```tsx
import { DesignSystemScope, GammaButton } from "@/components";

export function Panel() {
  return (
    <DesignSystemScope system="atelier">
      <GammaButton>Save changes</GammaButton>
    </DesignSystemScope>
  );
}
```

Import `tokens.css`, `library.css`, and `design-systems.css` once. Pass `mode` to pin a mode instead of following the page theme.

## Source boundary

This brief is generated from Gamma's own token contract. It does not contain a third-party site's layout, copy, imagery, or code, and it is not a substitute for a license to reuse the sites that informed the library.