Athanasius College · Design system

Option 02 — RFB

A design system for Athanasius College, derived from reformationbiblecollege.org. Editorial and nearly furniture-free: no rounded corners, no shadows, no filled buttons. Scale carries the hierarchy, an unusually open body leading carries the reading, and one hot orange carries every action on the page.

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 colors, the error state, the neutral ramp, behavior on pitch 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 Button variants, states, sizes, focus 06 Patterns Header, cards, pull quote, figures, forms, tags 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.