# Option 04 — "WTS" direction

A design system for Athanasius College, derived from
[wts.edu](https://www.wts.edu/).

Colour carries the page, not white space. A page is a sequence of full-bleed
bands — maroon, wine, gold, gainsboro — with a Light display serif floating on
top of them and a single gold marking every action.

**Live canvas:** https://claude.ai/code/artifact/5c308d53-2eea-4bc2-a655-c022f6baab97

---

## What's here

| File | What it is |
| --- | --- |
| `tokens.css` | **Start here when building.** Every value below as CSS custom properties. |
| `Main.dc.html` | Overview — principles, palette, the three typefaces |
| `Color.dc.html` | The three grounds, the error state, the cool neutral ramp |
| `Typography.dc.html` | Type ramp with exact size/line-height/tracking, and the rules |
| `Space.dc.html` | Spacing scale, measures, shape, the one shadow, motion |
| `Buttons.dc.html` | Gold actions — variants, states, sizes, focus, behaviour on a band |
| `Components.dc.html` | Header, coloured cards, raised card, pull quote, form, notice pair |
| `Homepage.dc.html` | The system applied — desktop, 1440px |
| `Mobile.dc.html` | The system applied — mobile, 390px |
| `canvas.json` | Canvas layout: positions, the three pages, launch view |
| `athanasius-design-system-wts.html` | Generated canvas (2.5 MB). Open in a browser to view and export PNG/PDF offline. Regenerated on every change — see below. |

Each `.dc.html` is a plain, self-contained HTML file. All values are inline
styles, so the source reads as a spec even without the canvas.

## Provenance — read this before you ship

wts.edu is a Webflow build that ships **named CSS custom properties**, so the
palette here is lifted rather than sampled: `--maroon #4A0009`, `--brown
#8A2233` (wine here), `--dark-goldenrod #BF8B3A` (gold), `--sienna #B5533C`,
`--dark-slate-grey #444C54`, `--light-slate-grey #8D9298`, `--gainsboro
#E7E5E2`, `--black #222`. The type ramp (56/61.6 with 1px tracking, 40/48,
34/40, 28/32, the 2px label tracking), the 200ms transition and the
left-thrown shadow are theirs too.

Two things are **added, not inherited**, and both are marked on the artboards.

**The typefaces.** Westminster licenses Kepler Std and Alverata through Adobe
Fonts; neither can be shipped without a licence. Lato is the exception — it is
free on Google Fonts, so it is the genuine article here.

| Role | WTS uses | Here |
| --- | --- | --- |
| Display | Kepler Std / Kepler Std Display, weight 300 | **Crimson Pro** 300 |
| Labels | Alverata, uppercase, tracked | **Alegreya Sans** |
| Body and UI | Lato | **Lato** — unchanged |

**The error colour.** Westminster's own form styling is:

```
.success-message, .error-message { color: var(--black); }
```

Success and error are given the *same* plain `#222`. `.error-text` sets only a
size, `.form-error` only a padding. The only coloured error styling anywhere on
the site is untouched Webflow boilerplate (`.w-form-fail` on `#FFDEDE`,
`.w-file-upload-error-msg` on `#EA384C`) — platform defaults the designers never
touched, not part of the design.

So **Alarm `#B71C1C`** is added. The separation problem here is the opposite of
the usual one: this palette already contains **three reds**, and they are all
*muted* — maroon, wine and sienna sit at 0.10–0.14 chroma in oklch. So hue and
lightness cannot separate an error colour, but **chroma can**: Alarm is vivid at
0.19, which is what makes it read as an alert rather than as another brand
surface. It clears 6.57:1 on white and 5.23:1 on gainsboro.

One hard limit, documented on the Colour sheet: **Alarm on maroon is 2.47:1 and
fails.** An error may never appear inside a maroon band — move the form to
gainsboro or white, or the message will be unreadable exactly when it matters.

There is still **no caution/warning colour**. Sienna is the obvious candidate and
is explicitly barred, because it is close enough to Alarm to be mistaken for it.
If you need one, that is a second token to add — and it should not be a red.

## The system in brief

**Bands, not sections.** Where another system would use a rule or a shift to
off-white, this one changes ground entirely. The colour boundary is the divider.

**Light type on dark ground.** The display serif is weight 300, usually white on
a band. That combination is fragile: below about 28px at 300 on maroon it starts
to break up, which is why the ramp has no small display sizes and no bold.

**Gold is the button fill — but not a type colour.** This is the one place the
system deliberately departs from the reference. Grove City's gold sets links and
button labels throughout, and it does not survive contrast: gold on white is
3.01:1, on gainsboro 2.40:1, and white on gold is 3.01:1 — all below AA at any
size. So here: anything placed **on** gold is maroon (5.38:1), a button label
included; a link on a light ground is **wine** (8.91:1); and gold type is
reserved for dark bands, where it reaches 5.38:1. The gold button's hover
inverts to a maroon fill with a gold label rather than darkening. The palette is
unchanged — only which colour carries which job.

**The coloured card is the recurring unit.** A column of maroon, wine or gold,
48px of padding top and bottom and 32px at the sides. The gold card inverts
completely — label, heading, body and rule all maroon — which is the general
rule rather than a special case.

**Cool neutrals against warm grounds.** The grays lean blue on purpose; a warm
gray next to maroon goes muddy.

**One shadow, thrown left.** `-11px 11px 15px rgb(0 0 0 / .2)` — down and to the
*left*, not down and right. Unusual enough to be a signature. Raised card only,
never on a band.

## Regenerating the canvas

`athanasius-design-system-wts.html` is a build artifact, not source. To change
the design, edit the `.dc.html` files and `canvas.json` here, then re-seed it.

The seeding helper ships with the `/design` skill and lives in a temporary
directory that does not persist between sessions. Run `/design` in Claude Code to
re-extract it, then from this directory:

```
node "<skill base dir>/seed-canvas.mjs" \
  --template "<skill base dir>/payload.template.html" \
  --out athanasius-design-system-wts.html \
  --title "Athanasius Design System — WTS Direction" \
  --artboard Main.dc.html --artboard Color.dc.html --artboard Typography.dc.html \
  --artboard Space.dc.html --artboard Buttons.dc.html --artboard Components.dc.html \
  --artboard Homepage.dc.html --artboard Mobile.dc.html \
  --canvas canvas.json
```

Publishing that file back to the artifact URL above keeps the same link.

## Compared with the other options

|  | [01 — NSA](../option-01-nsa/) | [02 — RFB](../option-02-rfb/) | [03 — GCC](../option-03-gcc/) | 04 — WTS |
| --- | --- | --- | --- | --- |
| Display | 60px navy serif, w400 | 120px Light serif, set solid | 44px true small-caps | 56px Light serif on dark |
| Body | 18/28 (1.55) | 20/38 (1.9) | 16/24 (1.5) | 16/26 (1.63) |
| Default ground | white | white | cream | **maroon / wine / gold bands** |
| Action | filled navy, 4px radius | hairline orange outline | crimson block + white keyline | gold block with a maroon label |
| Hierarchy | one ink at 100/75/60/50 | five-step neutral ramp | warm-gray ramp | white-on-band vs cool grays |
| Error | rubric `#8C1D2F` | rubric `#A31D1D` | bordeaux `#8A1538` + tint + icon | alarm `#B71C1C` + tint + icon |
| Feel | restrained, institutional | editorial, spacious | warm, dense, viewbook | saturated, ceremonial |