# Option 02 — "RFB" direction

A design system for Athanasius College, derived from
[reformationbiblecollege.org](https://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.

**Live canvas:** https://claude.ai/code/artifact/e5f110ed-903e-4749-86b7-a727ae74b087

---

## What's here

| File | What it is |
| --- | --- |
| `tokens.css` | **Start here when building.** Every value below as CSS custom properties. |
| `Main.dc.html` | Overview — principles, palette, the three typefaces |
| `Color.dc.html` | Brand colors, the error state, the neutral ramp, behavior on pitch |
| `Typography.dc.html` | Type ramp with exact size/line-height/tracking, and the rules |
| `Space.dc.html` | Spacing scale, measures, shape, strokes, motion |
| `Buttons.dc.html` | Button variants, states, sizes, focus |
| `Components.dc.html` | Header, cards, pull quote, figures, forms, tags |
| `Homepage.dc.html` | The system applied — desktop, 1440px |
| `Mobile.dc.html` | The system applied — mobile, 390px |
| `canvas.json` | Canvas layout: positions, the three pages, launch view |
| `athanasius-design-system-rfb.html` | Generated canvas (2.5 MB). Open in a browser to view and export PNG/PDF offline. Regenerated on every change — see below. |

Each `.dc.html` is a plain, self-contained HTML file. All values are inline
styles, so the source reads as a spec even without the canvas.

## Provenance — read this before you ship

The **color, type and motion values are real**, lifted from the live
reformationbiblecollege.org stylesheet: the orange and brass, the whole neutral
ramp, the 120/120 display sizes, the 20/38 body leading, the 0.2em label
tracking, the 57px button height and the 750ms underline.

The **typefaces are not**. RBC licenses Freight Big Pro, Freight Text Pro and
Futura PT, none of which can be shipped without buying:

| Role | RBC licenses | Substituted with |
| --- | --- | --- |
| Display serif | Freight Big Pro Light | **Cormorant Garamond** 300 (+ italic) |
| Body serif | Freight Text Pro Book | **Source Serif 4** |
| Label sans | Futura PT Book | **Jost** |

Cormorant runs small and very light: at 32px and below, step up one size or move
to weight 400. All three are on Google Fonts.

The name, marks and copy are drafted for a college of this kind, not lifted from
RBC. Bracketed items (`[STREET ADDRESS]`) are facts to fill in; grey blocks are
image placeholders.

## The system in brief

**Scale, not weight.** The display serif is Light and never gets heavier. A
heading earns attention by being 120px, not by being bold — which only works if
the page gives it room, so sections run 160px of vertical padding and heroes 220.

**Display is set solid.** Line-height equals font-size at 120, 110 and 60, so a
multi-line headline reads as one block of texture. Body copy does the opposite
and opens to 1.9 — 20px over 38px. There is no middle ground in the ramp, and
that contrast is the whole idea.

**Body copy is slate, not ink.** `#4E4E4E` at 20px beside a Light 120px heading
reads as one voice at two volumes; full ink looks like a mistake.

**Nothing is filled at rest.** Every button is a 1px rectangle around tracked
uppercase Jost; the fill is the hover state. One flame button per screen — a
second one beside it takes the ink outline. Never place a flame button on sand or
chalk; both grounds mute it.

**Corners are square, everywhere.** The only curve in the system is a full circle
on avatars. There are no shadows at all — depth comes from full-bleed imagery and
the pitch-black bands.

**Sections open with a stroke.** A 50×2px ink rule, then the label, then the
display heading, then the body — 20px between each, 32px before the paragraph.
Columns use a 20×2px slate sub-marker instead.

**The flame fails contrast** as text on white below about 24px. Use it as an
outline, a rule, a short tracked label — not as body copy or small type. Focus
rings are ink, not flame, since the flame is already the button's own border.

**Errors are rubric `#A31D1D`, not the flame.** The source site has no error
colour, so this one is added rather than derived — it is the only value here that
is not RBC's. It clears 7.6:1 on paper and sits two lightness steps below the
flame, which is what keeps the two apart for a reader who cannot distinguish red
from orange; the hues are only ~10° apart. An error is never carried on colour
alone — the message under the field does the work.

## Regenerating the canvas

`athanasius-design-system-rfb.html` is a build artifact, not source. To change the
design, edit the `.dc.html` files and `canvas.json` here, then re-seed it.

The seeding helper ships with the `/design` skill and lives in a temporary
directory that does not persist between sessions. Run `/design` in Claude Code to
re-extract it, then from this directory:

```
node "<skill base dir>/seed-canvas.mjs" \
  --template "<skill base dir>/payload.template.html" \
  --out athanasius-design-system-rfb.html \
  --title "Athanasius Design System — RFB Direction" \
  --artboard Main.dc.html --artboard Color.dc.html --artboard Typography.dc.html \
  --artboard Space.dc.html --artboard Buttons.dc.html --artboard Components.dc.html \
  --artboard Homepage.dc.html --artboard Mobile.dc.html \
  --canvas canvas.json
```

Publishing that file back to the artifact URL above keeps the same link.

## Compared with option 01

|  | [Option 01 — NSA](../option-01-nsa/) | Option 02 — RFB |
| --- | --- | --- |
| Display | 60px navy serif, weight 400 | 120px Light serif set solid, plus an italic voice |
| Body | 18/28, leading 1.55 | 20/38, leading 1.9 |
| Hierarchy | one ink at 100/75/60/50 opacity | a five-step neutral ramp of real colors |
| Action | filled navy button, 4px radius | hairline orange outline, square, fills on hover |
| Section marker | full-width hairline that fades at both ends | 50×2px ink stroke |
| Feel | restrained, institutional | editorial, spacious, louder in one place |