LumiWed Design System
How we design at LumiWed.
A look behind the gold-on-ivory system — for the designers and engineers who build on it. Why we chose this palette, how we run tokens as a single source of truth, and how one set of components reskins into every wedding theme.
Why these colors
The palette is an argument
Quiet luxury, old money — warm, never cold, never corporate. Three decisions do most of the work, and each one is on purpose.
One warm hue family
Everything lives in OKLCH hue ≈30–45°. Background is warm ivory, never pure white; foreground is warm charcoal, never pure black. A single hue family keeps the platform calm and coherent — no clashing accents, no cold corporate blue.
Contrast is a constraint, not an afterthought
The gold primary and every status hue are deliberately darkened so white text on the fill clears WCAG AA. We never lighten them back to look prettier — accessibility wins the argument every time.
Tints that travel
Every tint and surface is derived with color-mix(in oklch, …) off the semantic tokens. Because they’re relationships, not fixed hex, the same component reskins correctly into all ten wedding themes without a rewrite.
How the system works
A design system, not a sticker sheet
The system is wired into the codebase so it stays true. Tokens drive everything; a gate keeps it honest; one component set serves the whole platform and every guest theme.
Tokens are the source of truth
Semantic OKLCH tokens (--primary, --background, --muted …) live in packages/config/tailwind/themes.css. Components read the variables — never raw hex. Rebrand a value once and it propagates everywhere.
A deterministic core + validation gate
design-tokens.json is ground truth. A Husky pre-commit gate rejects any staged color that doesn’t conform. The system is enforced structurally, not by a style guide nobody reads.
Write once, reskin everywhere
A theme shell remaps the semantic tokens to a couple’s wedding palette at runtime. Authors build one guest site; the shared primitives repaint themselves per theme.
shadcn primitives, owned in-repo
We standardize on shadcn-style components in packages/ui — copy-paste, fully owned, bound to the tokens. No black-box UI kit, full control over markup and states.
Browse the system
Four ways in
Read the foundations, inspect the components, audition the ten wedding themes, or just play with the live guest site.
Foundations
One warm OKLCH hue family — ivory, gold, blush — tuned for WCAG AA. Type, spacing, radii, and the signature soft shadow.
Tokens & specimensComponents
Pill buttons, soft luxury cards, badges, and warm form controls — shadcn-style primitives bound to semantic tokens.
Component libraryWedding themes
Ten curated guest-site themes. Write content once; every shared primitive reskins to the couple’s palette automatically.
Theme catalogLive prototype
A click-through guest wedding site: switch language, switch theme, RSVP. The system, running.
Open the click dummyStanding on shoulders
Inspired by wise.design
The airy, editorial structure of this showcase — calm sticky nav, generous whitespace, foundations-first storytelling — takes its cue from the excellent wise.design. We borrowed the rigor and the calm, then dressed it in our own warm, gold-on-ivory voice.
Take the system with you
A printable spec sheet of the full design system, plus the live click-through prototype for sharing with stakeholders.