Terracotta Drafting

About 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.

Color

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.

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.

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.

Elevation

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.

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.

Do

• Use one primary button (primary / primary-foreground, 40px high) per view. Render other actions as secondary or ghost buttons.
• Show focus as a 2px ring token outline with a 2px offset on buttons, inputs and list rows in both modes.
• Set sheet numbers, dimensions and areas in the code style (Geist Mono 13px), and right-align numeric table columns.
• Use Schibsted Grotesk only for display-lg (49px), display-md (39px) and heading-lg (31px). Use Hanken Grotesk for heading-md and everything smaller.
• 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 place body text longer than one line on the accent surface. Reserve accent for selected rows and highlights.
• Don't put shadow.md or shadow.lg on cards. Cards use shadow.sm plus a 1px border.
• Don't introduce pure black, #000-based overlays or cool greys. Draw every surface and divider from the neutral ramp.
• Don't set Schibsted Grotesk below 24px or in all caps, and don't use muted-foreground for text smaller than caption (12px).