LIFE

LIFE Church · Walla Walla — Design System

Eleven skins,
one token contract.

Each direction below is a self-contained folder — a tokens-only tokens.css plus a standalone index.html — sharing one component library. Only the token values change between them; the names stay constant. Swap a tokens.css and the whole page reskins.

The token contract
bg--color-bg
surface--color-surface
text--color-text
muted--color-text-muted
accent--color-accent
eyebrow--color-eyebrow
border--color-border

Color

  • --color-bg / surface
  • --color-text / text-muted
  • --color-accent / on-accent
  • --color-eyebrow / border
  • --color-reversed-* (inverted)

Type

  • --font-display / display-accent
  • --font-body / lead / accent
  • --font-eyebrow / label / link
  • --text-hero / h2 / eyebrow / body
  • --weight-* / --tracking-* / --leading-display
  • --transform-display

Shape & space

  • --radius-button / card / tag
  • --border-width / border-style
  • --space-sm / md / lg / xl

Component (Tier 3)

  • --btn-primary-bg / text
  • --btn-secondary-bd / text
  • --shadow-card / --hero-gradient
Component inventory
Buttons
Primary Secondary
Text link →
Eyebrow + heading

We're so glad you're here

Find the life
you were made for.

Card
Pursuit Night
WED · 7:00 PM
List block
  1. 01Know God
  2. 02Find freedom
  3. 03Discover purpose
Tags
Minimal Warm Editorial
Media placeholder
CANDID PHOTO · FAMILY ON THE LAWN
The eleven skins
01 · Saved SeatQuiet · editorial · airy
Homes →Open →
02 · Harvest PressLetterpress · wood-type
Homes →Open →
03 · Northwest StoneCinematic · high-contrast
Homes →Open →
06 · Morning LightSunny · friendly · bright
Homes →Open →
07 · HonorCondensed · sign-bold · civic
Homes →Open →
13 · There Is MoreEditorial · rooted · series
Homes →Open →
14 · FreedomGeometric · confident
Homes →Open →
17 · CandlelightSeasonal · editorial · warm
Homes →Open →
19 · RevivalCondensed · high-energy
Homes →Open →
25 · Grace NoteAiry · refined · elegant
Homes →Open →
26 · LecternClassic · teaching
Homes →Bencium →Open →
Home-page explorations

Eleven skins have been grown into full home pages — five per skin, ramping from mild (the skin as-shipped, grown to a full page) to spicy (the palette pushed as far as it goes). Skin 26 also carries a second, more experimental set authored via the bencium UX-designer skill.

01 · Saved Seat
All five →
  1. 01 · Longtable — a seat saved for youMild
  2. 02 · Kinfolk — warm photo editorialMild
  3. 03 · Placesetting — full-bleed cinemaMedium
  4. 04 · Harvest Table — four seats, one tableSpicy
  5. 05 · Sunroom — Sunday-morning lightSpicy
02 · Harvest Press
All five →
  1. 01 · Broadside — the skin, read straightMild
  2. 02 · Almanac — ruled & seasonalMild
  3. 03 · Threshing Floor — ink bands, registration marksMedium
  4. 04 · Harvest — molten wood type, revival heatSpicy
  5. 05 · Overflow — maximal broadside, off the pageSpicy
03 · Northwest Stone
All five →
  1. 01 · Ridgeline — calm editorial darkMild
  2. 02 · Field Notes — editorial split gridMild
  3. 03 · Overlook — full-bleed cinemaMedium
  4. 04 · Basalt — daylight letterpressSpicy
  5. 05 · Pillar — worship-night cinemaSpicy
06 · Morning Light
All five →
  1. 01 · Daybreak — a sun rising, as-shippedMild
  2. 02 · Meadowlark — wheat-country editorialMild
  3. 03 · Threshold — full-bleed cinema, hour by hourMedium
  4. 04 · Sunburst — sun-ray letterpress posterSpicy
  5. 05 · Horizon — pre-dawn to goldSpicy
07 · Honor
All five →
  1. 01 · Marquee — a civic board, the week on a tickerMild
  2. 02 · Ledger — the honor roll as a registerMild
  3. 03 · Pennant — bunting, banners & photographyMedium
  4. 04 · Ovation — a cinematic dark-stage roarSpicy
  5. 05 · Homecoming — warm daylight, a wall of namesSpicy
13 · There Is More
All five →
  1. 01 · Ember — a banked coal, as-shippedMild
  2. 02 · Kindling — dark cover onto a study pageMild
  3. 03 · Windward — full-bleed worship cinemaMedium
  4. 04 · Wildfire — molten revival broadsideSpicy
  5. 05 · Pentecost — one tongue of flameSpicy
14 · Freedom
All five →
  1. 01 · Open Air — the skin, sung straightMild
  2. 02 · Bulletin — the Sunday programMild
  3. 03 · Anthem — one blue fieldMedium
  4. 04 · Jubilee — pill as architectureSpicy
  5. 05 · Unbound — the night sessionSpicy
17 · Candlelight
All five →
  1. 01 · Vigil — a candle kept lit for youMild
  2. 02 · Taper — a printed weekly bulletinMild
  3. 03 · Lantern — full-bleed worship cinemaMedium
  4. 04 · Ember — worship-night nocturneSpicy
  5. 05 · Luminary — coral Christmas coverSpicy
19 · Revival
All five →
  1. 01 · Spark — one flame on black, as-shippedMild
  2. 02 · Kindling — warm daylight editorial, the after-glowMild
  3. 03 · Nightfall — cinematic dark stage, running marqueeMedium
  4. 04 · Wildfire — molten rust broadsideSpicy
  5. 05 · Uproar — black + electric-yellow chant wallSpicy
25 · Grace Note
All five →
  1. 01 · Aria — the skin, sung straightMild
  2. 02 · Hymnal — printed order of serviceMild
  3. 03 · Evensong — dusk, arches, candlelightMedium
  4. 04 · Nocturne — a night of pursuitSpicy
  5. 05 · Crescendo — poster loudSpicy
26 · Lectern
All five →
  1. 01 · Lection — the skin, read straightMild
  2. 02 · Folio — the teaching, in printMild
  3. 03 · Exposition — an evening lectureMedium
  4. 04 · Illumination — gold leaf, gilt framesSpicy
  5. 05 · Pulpit — night-service posterSpicy
26 · Lectern · bencium
All five →
  1. 01 · Vellum — a quiet dark reading roomMild
  2. 02 · Marginalia — the annotated book pageMild
  3. 03 · Lamplight — a lamp on a dark deskMedium
  4. 04 · Gilt — gold leaf, illuminated versalsSpicy
  5. 05 · The Vigil — light shafts, cathedral dramaSpicy