← All design directions
Athanasius College · Design system

Option 05 — Identity

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.

The boards

Eight boards, in reading order. Each is the artboard itself, at full size — the foundations first, then the components, then the system applied.

01 Overview Principles, palette, the three typefaces, the mark 02 Colour The brand palette, the derived neutrals, the error state, what sits on petrol 03 Typography Type ramp with exact size/line-height/tracking, and the rules 04 Space, shape, marks, motion Spacing scale, measures, shape, the marks' clear space, motion 05 Actions Variants, states, on petrol, focus 06 Patterns Header, lockups in use, cards, pull quote, figures, forms, badges 07 Homepage — desktop The system applied — desktop, 1440px 08 Homepage — mobile The system applied — mobile, 390px

Files

The board pages are generated from the artboards in this folder. To build anything real, start at tokens.css; the README records which values came from the reference and which were added here.

Start at the overview Website mockup Live canvas Brand identity guide tokens.css README.md