Athanasius College · Preliminaries

Five design systems, five directions

Open the design boards to see the foundations, the components and the system applied at desktop and mobile, or open the website mockup to browse a six-page site built on that system with the real handbook copy. The canvas link opens the same boards in the editor on claude.ai.

Distinctly classical

Graduating leaders who shape culture

Gain skills for work and wisdom for life.

Apply now

Visit

Option 01 — NSAnsa.edu

Restrained and institutional. Hierarchy comes from scale and opacity rather than colour — one ink at 100/75/60/50 — and the single orange is rationed to one moment per screen.

Palette
Display: Newsreader 60/75
Body: EB Garamond 18/28
Action: Filled navy, 4px radius
Error: Rubric #8C1D2F

Design boards Website mockup

Open the canvas ↗

Academics

Shaped by Truth

One curriculum, read closely and argued over.

Apply now

Option 02 — RFBreformationbiblecollege.org

Editorial and spacious. Display type is set solid at 120px while body copy opens right up to 1.9 leading — nothing is filled at rest, and every corner is square.

Palette
Display: Cormorant Garamond 120/120
Body: Source Serif 4 20/38
Action: Hairline outline, square
Error: Rubric #A31D1D

Design boards Website mockup

Open the canvas ↗

Academics

You were made with a purpose.

Sixty majors, one core curriculum every student takes.

Apply now

Visit

Option 03 — GCCgcc.edu

Warm and dense, closer to a printed viewbook. Headings use a true small-caps cut, cream is the default ground rather than white, and the button carries a hairline white keyline inside its fill.

Palette
Display: Spectral SC 44/44
Body: Mulish 16/24
Action: Crimson block + white keyline
Error: Bordeaux #8A1538

Design boards Website mockup Inquiry mockup

Open the canvas ↗

Since 1998

To Christ, despite all, we hold

A graduate school where the languages come first.

Apply now

Inquire

Option 04 — WTSwts.edu

Saturated and ceremonial. Colour carries the page instead of white space — maroon, wine and gold bands in sequence, with a Light display serif floating on top of them.

Palette
Display: Crimson Pro 56/61.6
Body: Lato 16/26
Action: Gold block, maroon label
Error: Alarm #B71C1C

Design boards Website mockup

Open the canvas ↗

Athanasius College

Pensacola, Florida

Committed to absolute truth

A classical Christian college in the life of Providence Church.

Apply now

Request info

Option 05 — Identitythe college’s own brand guide

Alexandria, not Oxford. Built from the Brand Identity Guide rather than another school’s site: Gulf Petrol instead of navy, Roman inscriptional capitals, one vermeil gold rationed to a single place per composition, and the Beacon A as the mark. The only option whose typefaces are the real ones.

Palette
Display: Cinzel 48/56, caps, tracked
Body: EB Garamond 18/30
Action: Petrol block, Cinzel label, 6px
Error: Cinnabar #B42318

Design boards Website mockup

Open the canvas ↗

Logo explorationsseven studies

The generated studies the identity came out of — three lighthouse seals, three on the older book-and-lamp subject, and the reductive letter A that became the Beacon A. Exploratory raster only: the lettering in several is misspelt or broken, and the page says which. Ends with the drawn vector mark and seal the studies produced.

View logo explorations Brand identity guide

Thumbnails are drawn live in each system's own tokens and typefaces, not screenshots — so what you see is the real palette and the real type at small size. Every option ships a tokens.css to build from and a README.md recording exactly which values came from the reference site and which were added, and opens onto its eight design boards — colour, typography, space, actions, patterns and the system applied — one page each. Each also has a website mockup in mockup-0N-*/index.html: a single self-contained file with six routed pages (Home, About, Academics, Admissions, Students, Contact) carrying the student handbook and advertisement copy. In the first four the typefaces are open substitutes for licensed ones; the fifth uses the identity’s real faces. In all five the error colour is an addition: not one of the reference sources had a usable error colour of its own.