Design History
Every design layer this household has worn — kept openly, in plain sight, for any brother or sister who cares to study the work behind the work. Nothing is hidden, nothing is lost. Each era below names the aesthetic it captured, when it was active, and the CSS files that carried it.
"Withhold not good from them to whom it is due, when it is in the power of thine hand to do it." — Proverbs 3:27 (KJV)
How to read this archive
The CrossAIHub website went through six distinct aesthetic eras between the early prototypes and today's live design. Each era left behind one or more CSS files, sometimes a whole family. We keep them all — not because they're "in use" (today's site loads only 17 of them) but because they're part of the household's memory. A future agent, a future designer, or just a curious visitor can come back here and trace the line.
Click any file name to view the raw CSS. None of these files harm the live site: they sit quietly on disk and are not loaded by any page.
The Joy Era
The first attempt at a bright, warm, joyful palette. Wide use of saturated coral,
gold, and rose. Replaced when the consolidated theme-tokens.css took
over and absorbed the JOY palette directly into the canonical token layer.
- joy-layer.css · initial joy palette overlay
- joy-palette-extended.css · extended joy color set
- joy-bright.css · brightness pass
- joy-awwwards.css · Awwwards-inspired layout language
- joy-v2-images.css · image treatment v2
- joy-motion.css · joy-era motion primitives
- joy-zen.css · calmer joy variant
The Lumen Era
A luminous, candle-lit aesthetic with a phased rollout (Phase A, B, C) and a dark "dusk" mode. The single largest era by file count. Replaced when the simpler three-layer token system arrived. The current dusk toggle in the header carries forward the spirit of Lumen's night-mode work.
Core lumen
- lumen-tokens.css · era-specific token set
- lumen-palette.css · color family
- lumen-themes.css · per-page overrides (147 vars)
- lumen-sections.css · section layout
- lumen-components.css · component styles
- lumen-motion.css · motion primitives
Phased rollout
Dark / dusk mode
- lumen-dark.css · first dark mode
- lumen-dark-hardened.css · hardened dark mode
Page features
- lumen-today.css · word-of-the-day panel
- lumen-nav-dropdowns.css · nav dropdowns
- lumen-pages.css · per-page layer
- lumen-identities.css · section identity badges
- lumen-clean-identities.css · cleaned identity set
- lumen-rainbow-stripe.css · footer rainbow
- lumen-sanctuary-everywhere.css · sanctuary motif
- lumen-25-rainbow.css · 25-color rainbow
- lumen-reset-white.css · white-canvas reset
- lumen-app-icons.css · app icon glyphs
- lumen-church-icons.css · church-symbol icons
The Sacred Tech Experiment
A one-shot experiment that tried to fuse devotional warmth with code-style
monospace elements. The spirit of this experiment is carried into today's live
site by theme-tech-amp.css, which uses mono kicker text and tech
glyph accents — but with vivid Joy colors instead of monochrome.
- sacred-tech.css · devotional + monospace fusion
The Celestial Experiment
A starlit night-sky aesthetic. Beautiful on its own terms but didn't fit the warm-cream brand direction. Kept here for any future revival.
- celestial.css · starlit night aesthetic (74 vars)
The Luminous Era
An early high-radiance aesthetic before the Joy palette took shape. The first attempt at a "bright, alive" feel for the household.
- luminous.css · early high-radiance look
Foundation layers
The very first CSS the project shipped with, plus the initial animation
primitives, plus the hymn-player widget styles. All useful rules from
main.css were ported into today's theme-base.css.
- main.css · the original main.css from project start (86 vars)
- animations.css · initial animation primitives
- hymn-player.css · hymn player widget styles
Per-page layer (pages/*)
Before the current 12-theme system existed, each page had its own dedicated CSS
file under src/assets/css/pages/. Today every page's styling is
handled by one of the 12 named theme files (theme-home, theme-prayer, etc.).
- pages/home.css → now
theme-home.css - pages/sanctuary.css → now
theme-prayer.css - pages/devotionals.css → now
theme-letters.css - pages/learn.css → now
theme-learn.css - pages/year.css → now
theme-scripture.css - pages/verse-map.css → now
theme-scripture.css - pages/store.css → now
theme-store.css - pages/safety.css → now
theme-utility.css - pages/path.css → now
theme-learn.css - pages/reflect.css → now
theme-letters.css
What the live site uses now (2026-06-18)
For full transparency, here is the complete list of CSS files the live site currently loads — just 17 files. Anything not in this list is part of the design history above, kept on disk but not active.
Foundation (3 files, every page)
- theme-tokens.css · canonical tokens + JOY palette + legacy bridge
- theme-base.css · global chrome + shared structural classes
- theme-print.css · print media stylesheet
Per-page theme (1 of 12 + utility, conditionally)
- theme-home.css
- theme-prayer.css
- theme-letters.css
- theme-hymns.css
- theme-confession.css
- theme-memoriam.css
- theme-scripture.css
- theme-saints.css
- theme-ai.css
- theme-children.css
- theme-learn.css
- theme-store.css
- theme-utility.css
Tech aesthetic amp (added 2026-06-18)
- theme-tech-amp.css · site-wide tech texture, grid backdrop, neon halos
- tech-visuals.css · animations + gradient + glyph effects
Why keep all of this?
Three reasons. One: nothing the household makes should disappear. Brothers and sisters who study the work deserve to see the whole journey, not just the finish line. Two: a future agent or designer revisiting this project will benefit from the design vocabulary the earlier eras developed. Three: good craftsmanship leaves its drafts in plain sight. Hide nothing. Make the receipts visible.
"Let us hold fast the profession of our faith without wavering; (for he is faithful that promised;)" — Hebrews 10:23 (KJV)