Athanasius College · Design system

Option 04 — WTS

A design system for Athanasius College, derived from 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.

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 02 Colour The three grounds, the error state, the cool neutral ramp 03 Typography Type ramp with exact size/line-height/tracking, and the rules 04 Space, shape, motion Spacing scale, measures, shape, the one shadow, motion 05 Actions Gold actions — variants, states, sizes, focus, behaviour on a band 06 Patterns Header, coloured cards, raised card, pull quote, form, notice pair 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 tokens.css README.md

The board pages in this folder are generated by tools/build-boards.py from the .dc.html artboards, canvas.json and README.md. Edit those and re-run it; do not edit the generated pages.