---
version: alpha
name: Terracotta Drafting
description: "Warm studio UI for architecture practices: mulberry actions on clay-tinted neutrals, olive and ochre status, grotesk headings."
colors:
  background: "#faf7f3"
  foreground: "#1f1a16"
  card: "#ffffff"
  card-foreground: "#1f1a16"
  popover: "#ffffff"
  popover-foreground: "#1f1a16"
  primary: "#8a4179"
  primary-foreground: "#ffffff"
  secondary: "#f3eee7"
  secondary-foreground: "#36302a"
  muted: "#f3eee7"
  muted-foreground: "#635a4e"
  accent: "#f4e6f1"
  accent-foreground: "#3d1a36"
  destructive: "#a93529"
  destructive-foreground: "#ffffff"
  success: "#4b6127"
  success-foreground: "#ffffff"
  warning: "#f0dca3"
  warning-foreground: "#4a3410"
  border: "#e5ddd3"
  input: "#d0c6ba"
  ring: "#a25a92"
  dark-background: "#1f1a16"
  dark-foreground: "#faf7f3"
  dark-card: "#29231f"
  dark-card-foreground: "#faf7f3"
  dark-popover: "#2f2924"
  dark-popover-foreground: "#faf7f3"
  dark-primary: "#bd7db0"
  dark-primary-foreground: "#261021"
  dark-secondary: "#4c443b"
  dark-secondary-foreground: "#f3eee7"
  dark-muted: "#4c443b"
  dark-muted-foreground: "#d0c6ba"
  dark-accent: "#3d1a36"
  dark-accent-foreground: "#f4e6f1"
  dark-destructive: "#e0705e"
  dark-destructive-foreground: "#37100c"
  dark-success: "#92b262"
  dark-success-foreground: "#1b220e"
  dark-warning: "#d1ad4d"
  dark-warning-foreground: "#2f2009"
  dark-border: "#4c443b"
  dark-input: "#635a4e"
  dark-ring: "#bd7db0"
typography:
  display-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 49px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.03em
  display-md:
    fontFamily: Schibsted Grotesk
    fontSize: 39px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Hanken Grotesk
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: -0.015em
  heading-sm:
    fontFamily: Hanken Grotesk
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Hanken Grotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Hanken Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Hanken Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Hanken Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Hanken Grotesk
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
---

# Terracotta Drafting

## Overview

Terracotta Drafting serves architecture studios and their clients: principals, project managers and homeowners reviewing drawing sets. Surfaces take their color from materials, so neutrals carry a clay tint and the one saturated hue is Mulberry. The layout favors readable sheet lists, flat cards with 1px borders and a single primary action per view.

Moods: warm-human, earthy, approachable, calm. Built for: architecture, interior-design, construction. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Mulberry (brand, hue about 315) is the only action color. It fills primary (brand.600 light, brand.400 dark) and ring (brand.500 light, brand.400 dark). Every neutral step keeps the same warm clay tint, rising slightly in chroma toward 950 so dark surfaces read as fired clay, not grey. Success is an olive ramp, with 700 to 950 pulled back from green toward yellow-olive. Warning is ochre. Both sit on the warm side and match the neutrals' temperature. Destructive is brick red near hue 25 (danger.600 light, danger.400 dark), well over ΔE 18 from primary in both modes. Light-mode text pairs: foreground on background is about 16:1, muted-foreground (neutral.700) on muted (neutral.100) about 5.8:1, and white on primary about 6.7:1. Dark-mode text pairs: primary-foreground on primary is about 5.6:1, and muted-foreground (neutral.300) on muted (neutral.800) about 5.6:1.

- **Primary** `#8a4179` / dark `#bd7db0`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf7f3` / dark `#1f1a16` on `#1f1a16` / dark `#faf7f3`: page surface and body text.
- **Card** `#ffffff` / dark `#29231f`: raised surfaces.
- **Secondary** `#f3eee7` / dark `#4c443b`: secondary buttons and quiet controls.
- **Muted** `#f3eee7` / dark `#4c443b` with **muted-foreground** `#635a4e` / dark `#d0c6ba`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#f4e6f1` / dark `#3d1a36`: highlights, selected rows, badges.
- **Destructive** `#a93529` / dark `#e0705e`, **Success** `#4b6127` / dark `#92b262`, **Warning** `#f0dca3` / dark `#d1ad4d`: status only, always paired with an icon or label.
- **Border** `#e5ddd3` / dark `#4c443b`, **Input** `#d0c6ba` / dark `#635a4e`, **Ring** `#a25a92` / dark `#bd7db0`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The type scale uses a 1.25 ratio from a 16px body: 20, 25, 31, 39, 49. Schibsted Grotesk 600/700 sets display-lg, display-md and heading-lg (31px and up). Letter spacing tightens from -0.02em to -0.03em as size grows. Hanken Grotesk 400/500/600 sets heading-md down to caption, with body line height of 1.55 to 1.6. Geist Mono 400 at 13px is for sheet IDs, drawing numbers, dimensions and code.

- Display: **Schibsted Grotesk** (fallback system-ui, sans-serif)
- Interface: **Hanken Grotesk** (fallback system-ui, sans-serif)
- Mono: **Geist Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Schibsted Grotesk | 49px | 1.08 | 700 |
| display-md | Schibsted Grotesk | 39px | 1.12 | 700 |
| heading-lg | Schibsted Grotesk | 31px | 1.2 | 600 |
| heading-md | Hanken Grotesk | 25px | 1.28 | 600 |
| heading-sm | Hanken Grotesk | 20px | 1.35 | 600 |
| body-lg | Hanken Grotesk | 18px | 1.6 | 400 |
| body-md | Hanken Grotesk | 16px | 1.6 | 400 |
| body-sm | Hanken Grotesk | 14px | 1.55 | 400 |
| label | Hanken Grotesk | 14px | 1.3 | 500 |
| caption | Hanken Grotesk | 12px | 1.4 | 500 |
| code | Geist Mono | 13px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid (space tokens 0.5 to 24). Content columns max out at 1180px. Project and sheet lists use 48px rows with 16px (space.4) horizontal padding. Rows are divided by the border token, not by shadows.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Mostly flat. Cards use a 1px border plus shadow.sm. Popovers and menus use shadow.md. Dialogs over the drawing canvas use shadow.lg. In dark mode, depth comes from surface steps: background #1f1a16, card #29231f, popover #2f2924. Shadows are not the main cue there.

- sm: `0 1px 2px rgba(54, 48, 42, 0.06)`
- md: `0 4px 12px -2px rgba(54, 48, 42, 0.12)`
- lg: `0 16px 40px -8px rgba(54, 48, 42, 0.20)`

## Shapes

Controls (button, input) use radius.md (8px), cards radius.lg (12px) and image or drawing containers radius.xl (16px). radius.full is used only for status badges (Draft, Approved, Issued) at 22px height.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button (primary / primary-foreground, 40px high) per view. Render other actions as secondary or ghost buttons.
- **Do:** Show focus as a 2px ring token outline with a 2px offset on buttons, inputs and list rows in both modes.
- **Do:** Set sheet numbers, dimensions and areas in the code style (Geist Mono 13px), and right-align numeric table columns.
- **Do:** Use Schibsted Grotesk only for display-lg (49px), display-md (39px) and heading-lg (31px). Use Hanken Grotesk for heading-md and everything smaller.
- **Do:** Pair each status badge (Draft, Approved, Issued, Overdue) with a text label or icon, using success, warning or destructive with its matching foreground.
- **Don't:** Don't use primary or accent for errors, deletions or overdue states. Use destructive / destructive-foreground.
- **Don't:** Don't place body text longer than one line on the accent surface. Reserve accent for selected rows and highlights.
- **Don't:** Don't put shadow.md or shadow.lg on cards. Cards use shadow.sm plus a 1px border.
- **Don't:** Don't introduce pure black, #000-based overlays or cool greys. Draw every surface and divider from the neutral ramp.
- **Don't:** Don't set Schibsted Grotesk below 24px or in all caps, and don't use muted-foreground for text smaller than caption (12px).