Spacing, Radii, Shadows, Rules

A 10-step fixed ladder on an 8px base handles component rhythm — card gaps, icon spacing, stacked text. Two fluid tokens handle section-level macro rhythm, so nobody has to invent a bespoke clamp() when a tenth interior page shows up.

Spacing ladder (fixed, 8px base)

Fluid section padding

Resize the window — these two are the ONLY fluid tokens in the system. Everything else is the fixed ladder above.

--space-section-sm — tighter sections: process steps, stat band
--space-section — standard section outer padding

Radii — hard-working, not soft-blob

The emblem is a horseshoe and a gear: mechanical, hand-tooled forms. The pill is reserved for actual pills (badges, tags) — nothing else gets fully rounded.

sm · 4px
md · 8px
lg · 14px
pill

Shadows — warm-tinted, modest depth

sm
md
lg

The hairline rule — lifted from the logo itself

The logo file's own thin green rules (under "ESTD"/"1982", under the wordmark) become a system-wide device rather than a one-off flourish on the emblem.

Single rule — .scyf-rule


Double rule — .scyf-rule--double (echoes the wordmark underline)

Fence Line — the one bridge pattern

Bridge/connective copy lives INSIDE a section as a bounded element, never as its own floating section. This is that element — hairline rules top and bottom, the reserved italic accent role, generous padding. It is always nested inside a parent section.

"We are neighbors before we are anything else — the Foundation just gives that a place to happen."