---
version: alpha
name: Drafting Room
description: A blueprint: the page is the wash, the ink is indigo, and every panel is dimensioned like a drawing.
meta:
  id: "theme-drafting-room"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Everything on this page is measured.
  bestFor: Engineering and construction tools, CAD and spec software, hardware documentation, technical estimating
  avoidFor: Consumer commerce, editorial, marketing sites, anything playful
  defaultMode: light
  surfaceStyle: outline
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 1
    duration: 160ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Dimension lines draw themselves from both ends inward when a panel opens."
  displayFont: Saira
  displayKind: sans
  bodyFont: Be Vietnam Pro
  monoFont: Fira Code
colors:
  background: "#BCDDE2"
  foreground: "#011013"
  card: "#C4CFD1"
  card-foreground: "#011013"
  popover: "#C4CFD1"
  popover-foreground: "#011013"
  primary: "#004E82"
  primary-foreground: "#F1FDFE"
  secondary: "#B7C6C9"
  secondary-foreground: "#011013"
  muted: "#B7C6C9"
  muted-foreground: "#395459"
  accent: "#902855"
  accent-foreground: "#F1FDFE"
  destructive: "#91000C"
  destructive-foreground: "#F1FDFE"
  border: "#A7B5B7"
  input: "#A7B5B7"
  ring: "#004E82"
  chart-1: "#035C97"
  chart-2: "#734992"
  chart-3: "#862E35"
  chart-4: "#7D6400"
  chart-5: "#005748"
colorsDark:
  background: "#05262A"
  foreground: "#EAFCFF"
  card: "#0C3136"
  card-foreground: "#EAFCFF"
  popover: "#0C3136"
  popover-foreground: "#EAFCFF"
  primary: "#84C4FF"
  primary-foreground: "#001013"
  secondary: "#033F47"
  secondary-foreground: "#EAFCFF"
  muted: "#033F47"
  muted-foreground: "#8EA8AC"
  accent: "#EF7EA8"
  accent-foreground: "#001013"
  destructive: "#FFA096"
  destructive-foreground: "#001013"
  border: "#214E55"
  input: "#214E55"
  ring: "#84C4FF"
  chart-1: "#72BCFD"
  chart-2: "#C196E4"
  chart-3: "#FF9FA0"
  chart-4: "#BDA03E"
  chart-5: "#61DEC0"
typography:
  display-lg:
    fontFamily: Saira
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1.06
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Saira
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Saira
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Be Vietnam Pro
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Be Vietnam Pro
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Be Vietnam Pro
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.46
  label-caps:
    fontFamily: Be Vietnam Pro
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: Fira Code
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
  numeral-xl:
    fontFamily: Fira Code
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 0px
  md: 1px
  lg: 2px
  xl: 2px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 16px
  margin: 32px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 11px
  panel-drawing:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 20px
  title-block:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Drafting Room

## Overview

Drafting Room is a blueprint. The page itself is the blue wash — a mid-tone, not
paper — and every line drawn on it is indigo. That inversion is what makes the
system unmistakable: most technical interfaces are white with blue accents, and
this one is blue with white space cut out of it.

Its structural commitment is dimensioning. Panels are not simply spaced; they are
*measured*, with extension lines and arrowed dimension rules stating the widths
that matter, and a title block anchored in the lower right of every major view
carrying scale, revision and date. A person should be able to look at any screen
and know when it was last revised.

It suits estimating, specification and hardware documentation. It has no
register for delight and should not be asked for one.

## Colors

Wash, ink, and a correction red.

- **Ground (blue wash):** the print itself. Mid-tone, so both lighter panels and
  darker wells are available as surfaces.
- **Primary (indigo):** every line and every piece of structure. Rules,
  borders, dimension lines, the primary button.
- **Accent (red):** corrections and out-of-tolerance values, set as *text*
  rather than as a fill — a red pen mark on a print is writing, not a highlight.
- **Neutrals** stay close to the wash so that a panel reads as an area of the
  print rather than a card laid on it.
- Charts are polychrome, because a project schedule genuinely has unrelated
  series, but every series is drawn as a 1px line with no fill.

## Typography

Saira for display, Be Vietnam Pro for body, Fira Code for every figure.

- **Display:** Saira at 50px, weight 600. Slightly condensed and technical
  without being a stencil.
- **Body:** Be Vietnam Pro at 14px, 1.58, 68ch. It has a large x-height and
  clear figures, which matters in a system where prose is mostly specification.
- **Every number is Fira Code.** Dimensions, tolerances, revisions, quantities.
  A figure set in the body face is a bug in this system.
- **Labels:** uppercase at 0.18em, always the smallest text on screen.

## Layout

A 12-column grid at 1400px with tight 16px gutters and a 32px margin that is
never violated — the margin is the border of the print. The signature structure
is the **dimensioned panel**: a bordered area with extension lines dropping from
its edges and an arrowed rule beneath stating its width in the mono face.

The **title block** sits in the lower right of every full view: a 3×2 mono grid
of project, sheet, scale, revision, drawn-by and date.

## Elevation & Depth

Outline only, and flat. Nothing casts a shadow, because a drawing has no
thickness. Hierarchy comes from line weight: hairline for extension lines, 1px
for panel borders, 2px for the outer frame.

Dimension lines animate by drawing inward from both ends, which is how they are
struck by hand.

## Shapes

Square. Zero radius on controls, 1px on panels, 2px on modals. The only curves
in the system are arrowheads and the radius callouts inside drawings.

Photography is cool-treated and rare. Where an image appears it is placed inside
a dimensioned panel like any other element.

## Components

- **Dimensioned panel:** the signature component. Border, extension lines,
  arrowed dimension rule, mono measurement centred on the rule.
- **Title block:** lower right, 3×2 mono grid, always present on a full view.
- **Revision cloud:** a dashed outline in accent red around anything changed
  since the last revision, with a numbered triangle tag.
- **Buttons:** indigo fill, zero radius, 11px padding, uppercase label.
- **Tables:** 1px rules on all four sides of every cell — a schedule, not a
  list.

## Do's and Don'ts

- Do dimension the panels that matter and state the measurement in mono.
- Do put a title block on every full view.
- Do set every number in Fira Code.
- Do use the red as text, never as a fill.
- Don't add a shadow; the drawing is flat.
- Don't round anything above 2px.
- Don't violate the 32px margin — it is the edge of the sheet.