Athanasius College · Design system

Option 01 — NSA

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

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 Full color system, the error state, the opacity ladder, the four gradients 03 Typography Type ramp with exact size/line-height/tracking, and the rules 04 Space, shape, motion Spacing scale, measures, corners, elevation, motion 05 Actions Button variants, states, sizes, focus 06 Patterns Header, cards, pull quote, figures, forms, tags, separators 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.