Every Value Is a Token
Colour, type, spacing, radius and components — the single source the whole site is built from. Change a token here and it changes everywhere.
Semantic Tokens, Not Hex Values
Nothing in the codebase names a colour directly. Every surface, rule and accent resolves through a token, so light and dark are one system rather than two.
--bgPage ground--surfaceCard / panel--surface-2Recessed band--textBody copy--text-midSecondary copy--ruleHairline--rule-brightField border--brandPrimary action--brand-deepPrimary hover--brand-strongAccent label, light--brand-on-darkAccent label, dark--on-brandText on brand--leafSuccess--roseDestructive--amberWarning--skyInfo--pineSupport accent--ringFocus ringA Display Face and a Working Face
Cormorant-class display for headings and scripture; Jost for everything that has to be read quickly. Six deliberate steps, no arbitrary sizes.
Where Every Child Discovers
Section headings live here
Card and panel titles
“Trust in the Lord with all your heart.”
The lead paragraph that opens a section and carries its promise.
Body copy at its default size, set for comfortable reading across a measure of roughly seventy characters.
One Baseline Height
Buttons, fields and selects share a computed height and a radius. Width is layout-driven; size comes from padding.
Every control shares one baseline height, driven by padding — never a fixed height. Minimum touch target is 44×44px.
Fields, States and Surfaces
Labels sit above their control, errors are explicit, and the form carries its own background.
Enter a valid email address.
Forms always carry their own gradient surface, so they read as an object on any background — including a photo. The fields above are a specimen, not a working form.
The Recurring Pieces
Cards, callouts, tabs and badges — the vocabulary every page reuses.
Card
Surface, hairline border, shared radius.
A tinted fill of the accent — replaces the old left-border rule.
Three Values, Everywhere
A single radius scale. Mixing sharp, rounded and pill shapes without a reason is how a system falls apart.
--radius-smFields, tags--radius-uiCards, panels, buttons, media50%
Avatars only
