# Option 01 — "NSA" direction

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

Serif-led, generously spaced, almost without ornament. Hierarchy comes from scale
and opacity rather than color; the single accent is rationed to one moment per screen.

**Live canvas:** https://claude.ai/code/artifact/7f12bf3d-c2a7-4c47-a6c5-9face93cff77

---

## 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` | Full color system, the error state, the opacity ladder, the four gradients |
| `Typography.dc.html` | Type ramp with exact size/line-height/tracking, and the rules |
| `Space.dc.html` | Spacing scale, measures, corners, elevation, motion |
| `Buttons.dc.html` | Button variants, states, sizes, focus |
| `Components.dc.html` | Header, cards, pull quote, figures, forms, tags, separators |
| `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.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 is readable as a spec even without the canvas.

## Provenance — read this before you ship

The **color, type and motion values are real**, lifted from the live nsa.edu
stylesheet: the navy, slate, orange, off-white and gray are their published values,
as are the type sizes, line-heights, the 0.25em label tracking, the 4px radii and
both easing curves.

The **typefaces are not**. NSA licenses Signifier, Sabon and Articulat CF, none of
which can be shipped without buying. This system substitutes open equivalents with
close metrics:

| Role | NSA licenses | Substituted with |
| --- | --- | --- |
| Display serif | Signifier | **Newsreader** |
| Body serif | Sabon | **EB Garamond** |
| Label sans | Articulat CF | **Archivo** |

EB Garamond runs about one step small: set body copy at 19–20px where the reference
sets 18px. All three are on Google Fonts.

The name, marks and copy in these files are drafted for a college of this kind, not
lifted from NSA. Bracketed items (`[STREET ADDRESS]`) are facts to fill in; gray
blocks are image placeholders.

## The system in brief

**Color.** Seven values, only three ever large areas. Ink `#121A30`, slate `#384A6B`,
accent `#FF8021`, parchment `#F2F0ED`, ash `#F2F2F2`, stone `#A6A6A3`, paper `#FFFFFF`.

**Text has no gray tokens.** It is black or white stepped by opacity — 100 / 75 / 60 / 50 —
so the same four rungs work on white, on parchment and over photography.

**The accent is rationed.** One appearance per screen: a rule under a headline, a hover
state, the marker on the current nav item. It fails contrast as text on white below 24px,
so on light surfaces it is a shape, not type. The one exception is focus rings, which
are always a 2px accent outline offset by 3px.

**Errors are rubric `#8C1D2F`, not the accent.** The reference site has no error colour,
so this one is added rather than derived — it is the only value here that is not NSA's.
It is a cool crimson, which puts it on the navy's side of the palette rather than the
accent's: 33° away in hue and three lightness steps below, so the two stay distinct for a
reader who cannot tell red from orange. 9:1 on paper. An error is never carried on colour
alone — the message under the field does the work.

**Three voices.** Newsreader for headings 30px and up, weight 400 only — there is no bold
heading in this system. EB Garamond for everything that reads as a sentence, including
buttons and nav. Archivo only in uppercase, tracked, in two tiers: section labels at
700/0.25em and micro-meta at 600/~0.18em.

**The section opener** is the most repeated pattern: eyebrow, 16px, serif heading, 24px, body.

**Rhythm jumps between scales.** Component spacing steps in 4s up to 48; section spacing
goes 64 / 96 / 128 / 192, so the two are obviously different rulers.

**Corners are 4px or less** and content never carries a shadow. Cards separate by ground
color or by the hairline separator — a gradient that fades out at both ends rather than
meeting the margin.

## Regenerating the canvas

`athanasius-design-system.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.html \
  --title "Athanasius Design System" \
  --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.