# Atelier / Design system — design contract

## Audience and atmosphere
Independent stories on spaces, objects and the people who make them. An editorial identity with room to read.

Warm parchment, burgundy emphasis, literary serif hierarchy and asymmetric editorial spreads.

## Principles
Use named semantic roles, clear typographic hierarchy, purposeful spacing and explicit recovery states. Keep light and dark themes equally usable; reserve saturated color for actions and feedback.

## Semantic roles

### Parchment
Warm parchment, burgundy emphasis, literary serif hierarchy and asymmetric editorial spreads.
- canvas: `#f7f0e7`
- surface: `#fffaf4`
- ink: `#38221f`
- muted: `#725047`
- primary: `#782e3b`
- on-primary: `#ffffff`
- border: `#96776a`
- success: `#e2efdf`
- on-success: `#24452e`
- danger: `#fbe0d9`
- on-danger: `#862f25`
- focus: `#782e3b`

### After hours
Warm parchment, burgundy emphasis, literary serif hierarchy and asymmetric editorial spreads.
- canvas: `#25191c`
- surface: `#322328`
- ink: `#fbf0e6`
- muted: `#d6bcb2`
- primary: `#ecc2a6`
- on-primary: `#3e2426`
- border: `#af897d`
- success: `#234c35`
- on-success: `#d2f4d1`
- danger: `#542a24`
- on-danger: `#ffd9cc`
- focus: `#ecc2a6`

## Typography
Family: editorial-serif; scale: 16.0px, 20.0px, 25.0px, 31.25px, 39.062px, 48.828px

## Layout and geometry
Spacing: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Radius: 0px, 2px, 4px
Density: comfortable

## Implementation
Import tokens.css and components.css. Use sr-screen and sr-card for the supplied components; set data-theme to a documented theme ID. Keep semantic roles stable. For Tailwind v4, import tailwind-v4.css and keep tokens.css next to it; compile in your own Tailwind project. JSON exports use this package's schema, not the DTCG specification.

## States and accessibility
Use the included default, secondary, disabled, focus, error and success states. Preserve visible labels, errors linked by aria-describedby, keyboard order and minimum 44px control height. The sample uses native controls and a responsive single-column fallback. Reduced-motion users get zero token-based transition duration.

Contrast token checks: 20/20
Opaque sRGB token pairs only. Normal-text threshold 4.5&\#58;1, input-boundary/focus threshold 3&\#58;1. Not a WCAG conformance audit; layout, states, keyboard, content, gradients and actual font rendering require browser and manual review.

## Change review
0 token changes. Theme removal, color semantics and type/spacing shifts require screen regression review. Use changes.json to trace exact before/after values.

## Application recipe
Profile: editorial
Brand: Atelier
Primary task: A journal of considered things.
Records: 4
Layouts: planning uses a project board, editorial an asymmetric spread, operations a dense table with local bulk acknowledgment. All expose review and identity screens.