# Option 05 — "Identity" direction

A design system for Athanasius College built from the college's **own**
brand identity — the Brand Identity Guide (Edition I, July 2026) and the
identity package — rather than from another institution's website.

Alexandria, not Oxford. Deep coastal petrol instead of navy, Roman
inscriptional capitals instead of colonial script, one vermeil gold that
appears in exactly one place per composition, and the Beacon A — the letter
crowned by the Cross — as the mark.

**Live canvas:** https://claude.ai/code/artifact/0ff66676-0826-4f12-920f-f975f8df9cc2

---

## What's here

| File | What it is |
| --- | --- |
| `tokens.css` | **Start here when building.** Every value below as CSS custom properties. |
| `brand/` | The identity package: the mark, lockups, wordmark, seal and favicon as outlined SVG, and the Brand Identity Guide itself. **Source of truth.** |
| `Main.dc.html` | Overview — principles, palette, the three typefaces, the mark |
| `Color.dc.html` | The brand palette, the derived neutrals, the error state, what sits on petrol |
| `Typography.dc.html` | Type ramp with exact size/line-height/tracking, and the rules |
| `Space.dc.html` | Spacing scale, measures, shape, the marks' clear space, motion |
| `Buttons.dc.html` | Actions — variants, states, on petrol, focus |
| `Components.dc.html` | Header, lockups in use, cards, pull quote, figures, forms, badges |
| `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-identity.html` | Generated canvas. 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

Everything the guide defines is **used as defined**: Gulf Petrol `#0F3B40`,
Vermeil `#A9873F`, Limestone `#F2EDE2`, Ink `#1C1C18`, Porphyry `#6E2639`
and white; Cinzel 600 for display and the wordmark, EB Garamond for running
text and the italic motto, Inter for interfaces and forms; the 10px card
radius and 20px badge; the 13px/0.28em kicker; the 18px/1.65 body; the 64px
section and 90px hero rhythm; the 1080px frame; and the mark, lockups and
their clear-space rules. All three typefaces are open and on Google Fonts —
this is the only one of the five options whose typefaces are the real thing.

What a logo guide leaves undefined is **derived** here, and each derivation
is marked on the artboards:

| Added | Why |
| --- | --- |
| Parchment `#FBF9F4`, Field `#F3EFE5`, Rule `#E4DFD2` | The guide's own page ground, table-header tint and rule colour, promoted to tokens. |
| Umber `#6B6353` | The guide's caption colour (`#8A7F6A`, kept as *Sand*) is 3.75:1 on parchment and fails AA for text. Umber is the same hue two steps darker: 5.65:1. |
| Seafoam `#C9D2CF`, Mist `#9FB3AE` | Lifted from the guide's own dark cards: body and meta on petrol, 7.91:1 and 5.54:1. |
| The ramp below display: h2 26/34, h3 19/28, lead 21/32, UI 15/22, caption 13/20 | The guide sets display, h2, h3 and body; the rest is interpolated. |
| Buttons | The guide has none. A petrol block with a limestone label set in Cinzel — the wordmark's face — 6px radius, 48px tall. |
| **Cinnabar `#B42318`** | The error colour. See below. |

**The error colour.** The guide has no error state, and its only red —
porphyry — is reserved for regalia. Cinnabar is separated from porphyry by
**chroma**, not hue: porphyry is muted (oklch C 0.10), Cinnabar vivid (0.18),
23° warmer. It clears 6.57:1 on white, 6.25:1 on parchment and 5.63:1 on
limestone. **On petrol it is 1.86:1 and fails** — an error never appears
inside a petrol band. Forms live on parchment, limestone or white. An error
carries three signals: the cinnabar rule, the tint behind the message, and
an icon.

**One deliberate departure.** The guide sets its kickers in vermeil at 13px
on a light ground, which its own contrast table rates as failing for text
(2.9–3.4:1). Here the kicker is petrol on light grounds and mist on petrol;
vermeil keeps the roles the guide gives it — the cross, a rule, the motto,
large display — and gains none.

## The system in brief

**Carved, then written.** Every heading is Cinzel 600, always caps, always
tracked. Write headings in sentence case and let CSS uppercase them, so a
screen reader gets words. Body copy is EB Garamond at 18/30; anything a user
operates — nav meta, forms, tables, captions — is Inter.

**One accent, one place.** Vermeil appears once per composition: the cross in
the mark, or a 48×2 rule under a heading, or the motto set in italic. It is
never a field and never body text. As standalone type it appears only on
petrol at 22px or larger; inside a lockup the motto is artwork and scales with
the mark, and the Α and Ω are glyphs, not words. Where a second emphasis is
needed, use scale or petrol, not more gold.

**Petrol is the flag.** Heroes, the footer and one institutional band are
petrol; on it, headings are limestone, body is seafoam, the motto is vermeil
at 22px or larger. Porphyry appears at most once on a site, for a moment of
gravity — the pull quote — and never as decoration.

**Warm grounds, cool greys.** The page is parchment, not white; white is for
cards and forms; limestone sets a section apart. The greys lean cool so they
keep their distance from the warm grounds.

**Soft corners, no depth.** Cards are 10px, controls 6px, badges pills. There
are no shadows and no gradients — the guide bars both on the mark, and the
page follows. Cards separate with a 1px rule.

**The mark carries the identity, the seal carries ceremony.** The horizontal
lockup serves the header; the stacked lockup serves the footer and any
centred composition; the wordmark alone where the mark is already nearby.
The seal appears on diplomas and letterhead and never on the website.

## Regenerating the canvas

`athanasius-design-system-identity.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-identity.html \
  --title "Athanasius Design System — Identity" \
  --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](../option-04-wts/) | 05 — Identity |
| --- | --- | --- | --- | --- | --- |
| Source | nsa.edu | reformationbiblecollege.org | gcc.edu | wts.edu | **the college's own brand guide** |
| Display | 60px navy serif | 120px Light serif | 44px true small caps | 56px Light serif on dark | 48px Roman inscriptional caps, tracked |
| Body | EB Garamond 18/28 | Source Serif 20/38 | Mulish 16/24 | Lato 16/26 | EB Garamond 18/30 |
| Default ground | white | white | cream | maroon / wine / gold bands | parchment, with petrol bands |
| Action | filled navy, 4px | hairline outline | crimson keyline block | gold block, maroon label | petrol block, limestone Cinzel label, 6px |
| Accent | orange, rationed | flame outline | crimson + amber | gold fill | vermeil, once per composition, never a fill |
| Error | rubric `#8C1D2F` | rubric `#A31D1D` | bordeaux `#8A1538` | alarm `#B71C1C` | cinnabar `#B42318` |
| Typefaces | substitutes | substitutes | substitutes | one real, two substitutes | **all real** |