Athanasius College · Design system

Option 03 — GCC

A design system for Athanasius College, derived from gcc.edu. Warm and institutional, closer to a printed viewbook than to a web app. Three choices carry it: every heading is set in a true small-caps cut, the default page ground is cream rather than white, and the primary action is a solid crimson block with a hairline white keyline floating inside it.

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 Color Brand, the error state, the neutral ramp, the three grounds 03 Typography Type ramp with exact size/line-height/tracking, and the rules 04 Space, shape, motion Spacing scale, measures, shape, strokes, motion 05 Actions The keyline button — variants, states, sizes, focus 06 Patterns Header, cards, pull quote, figures, forms, tags, alert bar 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.