Foundations
The system behind the components
Luc UI is a small set of rules applied consistently. These pages are the contract: if something is not here, it is not part of the system yet.
Principles
Six rules that decide most design arguments before they start.
Quiet at rest, alive on interaction
01A passive surface carries no animation, no glow and no colour. Attention is spent only when the user acts.
Eighty percent restraint
02Delight is a budget, not a style. One memorable moment per view beats five competing ones.
Tokens before components
03Colour, radius, motion and elevation are named roles. A component that needs a new raw value needs a new token.
Depth is luminance, not shadow
04Dark surfaces separate by a luminance step and a hairline. Shadows stay small and mostly communicate layering of overlays.
Motion is an enhancement
05Every animation has a reduced-motion answer that keeps the meaning and drops the travel.
Accessibility is construction
06Keyboard paths, focus visibility, contrast and semantics come from the primitive, not from a later patch.
Token layers
Values flow in one direction. Components read the semantic layer; themes replace it.
tokens.css · @themeScale values that never change with the theme: type, radius, motion, density, z-index.tokens.css · :root / .darkTheme-dependent roles: surface, fg, line, accent, status, shadow, glow.styles/index.css · @theme inlineThe bridge that turns semantic tokens into Tailwind utilities like bg-surface-default.tokens.css · [data-palette] / [data-typeface]Seven accent families and four type voices, selected by one attribute on any subtree. A product with its own brand points the accent and font variables at its values; components never change.Adding to the system
The same four steps every time, so the system stays predictable.
Find the role
Name what the value is for, not what it looks like.
Add the token
Colour, radius, motion and elevation live in tokens.css.
Use the utility
Consume bg-*, text-*, rounded-*, shadow-* — never raw values.
Document it
Update DESIGN_SYSTEM.md and this showcase in the same change.
Explore
The principles behind Luc UI.
Semantic surfaces, text and accents.
Roles, scale and numeric text.
The 4pt rhythm and density modes.
One radius scale, applied with intent.
The luminance hierarchy.
Restrained elevation levels.
Where the accent is allowed to shine.
Duration and easing vocabulary.
Depth, elevation rungs and the press gesture — library-wide.
Seven brand palettes and four type voices, live.
Geometry, density and motion physics as one attribute.