Design System Reference

Internal reference only — not linked in navigation. Colors, type scale, spacing, and component classes used across kff-bricks.

Colors

Rust · #AF4003 · --color-rust

Love All · #1A5C3A · --color-love-all

Lift All · #9B7A00 · --color-lift-all

Live All · #6B1E52 · --color-live-all

Full Circle · #0E1B4A · --color-full-circle

Cream · #F4EAE0 · --color-cream

Charcoal · #1C1510 · --color-charcoal

Black · #0A0A0A · --color-black

White · #FFFFFF · --color-white

Rust Light · #D4500A · --color-rust-light

White Muted · rgba(255,255,255,0.85) · --color-white-muted

Charcoal 3% · rgba(28,21,16,0.03) · --color-charcoal-a03

Charcoal 12% · rgba(28,21,16,0.12) · --color-charcoal-a12

Charcoal 20% · rgba(28,21,16,0.2) · --color-charcoal-a20

Charcoal 40% · rgba(28,21,16,0.4) · --color-charcoal-a40

Charcoal 55% · rgba(28,21,16,0.55) · --color-charcoal-a55

Charcoal 65% · rgba(28,21,16,0.65) · --color-charcoal-a65

Cream 35% · rgba(244,234,224,0.35) · --color-cream-a35

White 12% · rgba(255,255,255,0.12) · --color-white-a12

Error · #B3261E · --color-error

Shadow · rgba(0,0,0,0.06) · --color-shadow

Role aliases (not shown as separate swatches — same colors as above): --color-primary = rust, --color-secondary = full-circle, --color-accent = rust-light, --color-neutral = cream.

Spacing

--space-2xs · 3–4px

--space-xs · 6–8px

--space-s · 12–16px

--space-m · 24–32px

--space-l · 48–64px

--space-xl · 72–96px

--space-2xl · 96–128px

Radius

--radius-none · 0px

--radius-s · 4px — cards

--radius-m · 5px — buttons

--radius-lg · 8px

--radius-full · 9999px — pills

Typography

Heading 1 — typ-h1

Heading 2 — typ-h2

Heading 3 — typ-h3

Heading 4 — typ-h4

Heading 5 — typ-h5

Body text — typ-body. The quick brown fox jumps over the lazy dog. Used for all paragraph copy sitewide.

Small text — typ-small · Caption text — typ-caption (all-caps eyebrow style)

Buttons

btn-primary btn-outline

btn-ghost-dark

Cards · grid-3

Card title

Standard .card class — used for every repeating card pattern sitewide (partner cards, story cards, scholar cards).

Card title

grid-2/3/4/5 all step down responsively (tablet_portrait mid-step added 2026-07-06).

Card title

Use _rowGap/_columnGap on flex containers, not _gap — confirmed no-op on layout elements this Bricks install.