Lumina

v10 · published

Luminous gradients, playful rings, motion that levels up.

luminousplayfulenergeticpremium

Lumina reads a learning platform as a game you love opening. The ground is a warm near-white washed with a soft lavender-to-peach light, so a single violet gradient and a spray of orange, teal and amber accents feel like XP lighting up. A chunky grotesque display shouts the headline while monospace labels tick across like a HUD; rings, streaks and badges turn progress into something you can feel. Energetic but premium - play with restraint.

Open the playground →Fork it · design a page →

re-imagined from https://www.codelevel.dev/

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Authenticate

npx synthesisui@latest login

2 · Add this design system

npx synthesisui add lumina --version 10

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/lumina/tokens.css";
@import "_synthesisui/ds/lumina/theme.css";

Ask your agent

Use the "Lumina" design system (slug: lumina) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add lumina` if `_synthesisui/ds/lumina/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/lumina/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/lumina/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/lumina/v10/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="lumina"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Wire the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use lumina "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Bricolage Grotesque, Geist, Geist Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Chartsnpm i recharts
Charts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.red

300#fca5a5

400#f87171

500#ef4444

600#dc2626

700#b91c1c

color.teal

50#ecfdf5

100#d1fae5

200#a7f3d0

300#6ee7b7

400#34d399

500#10b981

600#0d9488

700#0f766e

800#115e59

color.veil

500#0f172ab3

color.amber

100#fef3c7

200#fde68a

300#fcd34d

400#fbbf24

500#f59e0b

600#d97706

700#b45309

color.coral

50#fff7ed

100#ffedd5

200#fed7aa

300#fdba74

400#fb923c

500#f97316

600#ea580c

700#c2410c

800#9a3412

color.slate

50#ffffff

100#fbfaf6

200#f2f2f5

300#e2e3e9

400#b6bac6

500#8b90a0

600#5b6273

700#3d4456

800#1d2433

900#0f172a

950#060a14

color.violet

50#f5f3ff

100#ede9fe

200#ddd6fe

300#c4b5fd

400#a78bfa

500#8b5cf6

600#7c3aed

700#6d28d9

800#5b21b6

900#4c1d95

950#2e1065

color.semantic - resolved live via CSS variables

info

{color.violet.600}

faint

{color.slate.400}

muted

{color.slate.600}

scrim

{color.veil.500}

accent

{color.coral.700}

border

{color.slate.300}

canvas

{color.slate.100}

danger

{color.red.700}

raised

{color.slate.50}

overlay

{color.slate.200}

primary

{color.violet.600}

success

{color.teal.700}

surface

{color.slate.50}

warning

{color.amber.700}

foreground

{color.slate.900}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs0.25rem

2xs0.5rem

xs0.75rem

sm1rem

md1.5rem

lg2rem

xl3rem

2xl4rem

3xl6rem

shadow

glow

Typography

The voice of the system.

Display: Bricolage Grotesque · Body: Geist · Mono: Geist Mono

xsDesign, set free0.6875rem / 1rem

smDesign, set free0.875rem / 1.5

baseDesign, set free1rem / 1.6

lgDesign, set free1.125rem / 1.6

xlDesign, set free1.5rem / 1.25

2xlDesign, set free2.25rem / 1.1

displayDesign, set free4.5rem / 1.0

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 12 live

pop

beam

drift

float

sheen

fade-up

marquee

shimmer

twinkle

pulse-glow

aurora-text

aurora-shift

easings

standardcubic-bezier(0.4, 0, 0.2, 1)

luminacubic-bezier(0.2, 0.7, 0.2, 1)

smoothcubic-bezier(0.22, 1, 0.36, 1)

durations

base · 300msbeam · 7sfast · 150msslow · 500msdrift · 22saurora · 16sambient · 3.5s

interaction patterns

loopbeam

A light beam sweeps across on a long cadence, then clears.

loopdrift

Soft color blobs roam slowly behind the content, never repeating in sync.

loopaurora

The hero's living gradient breathes, sliding its color field across a long, calm cadence.

enterreveal

Rewards and tiles pop in from a spark, overshooting once.

loopticker

The status HUD scrolls endlessly across the top.

looptwinkle

Sparkles fade and swell like distant XP catching the light.

enterentrance

Content rises softly into place, staggered by ~90ms.

hovercta-sheen

A light sheen sweeps across primary CTAs on hover.

hoverhover-lift

Cards rise 4px and gain a violet-tinted shadow.

looptext-aurora

Gradient headline text lets its spectrum drift back and forth.

loopambient-float

Floating cards bob gently, alive but calm.

loopattention-pulse

Live indicators pulse a violet ring to pull the eye.

Components · 46

Recipes, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

ds-badge

Pill tag for status and XP. Tonal fills in the system's playful hues, mono label.

tone

accentprimarysuccesswarning

ds-button

Pill action. The primary intent carries the violet gradient signature and a soft glow; quieter intents stay in hairlines.

intent

ds-streak

Bespoke gamification chip - a warm flame count that celebrates a daily streak. The count leads bold; the label trails quiet.

12day streak

ds-xp-bar

Bespoke gamification progress bar - a track with a violet-to-light gradient fill that shimmers as it grows. Set the fill width inline.

tone

Level 4620 / 1000 XP

ds-join-field

Bespoke community CTA - a pill that morphs on click into an inline email field with a Join button, then into a success state. All three layers share one grid cell so the layout never shifts; the width eases open and layers cross-fade with a staggered slide. The collapsed trigger stays pill; the field, Join action and success box share a 14px radius.

ds-card

Floating content vessel. White surface, generous rounding and a soft shadow; lifts on hover with a violet-tinted glow.

emphasis

Default

A card wearing this system.

Featured

A card wearing this system.

ds-input

Rounded field on white, hairline border that lights up violet on focus.

ds-link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

A surface wearing this system.

ds-kicker

bespoke · text

Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.

tone

defaultaccent

ds-readout

bespoke · text

HUD data readout - a mono tabular value over a micro uppercase label ("42s · AVG RENDER"). The corner instrument of cinematic scenes; pair with the count-up hook for live-feeling numbers.

ValueLabel

ds-heading

bespoke · text

Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.

size

lgxl2xldisplay

ds-text

bespoke · text

Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.

size

xssmbaselg

tone

defaultmuted

ds-stack

bespoke · surface

Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.

gap

A surface wearing this system.

align

A surface wearing this system.

ds-row

bespoke · surface

Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.

gap

A surface wearing this system.

justify

A surface wearing this system.

align

A surface wearing this system.