mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
2.0 KiB
2.0 KiB
docs — how to use the system
The design system is one idea applied without exception: Lux is monochrome, true black, white type, and color is a signal — never a decoration. Everything else is machinery in service of that idea.
If you remember one thing: import one file, then reach for a token instead of a literal. Do that and your surface is already 90% on-brand.
@import "@luxfi/design/styles.css";
The map
| You want | Go to |
|---|---|
| To wire the tokens into an app | integrate.md |
| The raw values (color, type, space, radius, motion, z, elevation) | ../tokens/ |
| A component and how to use it | ../components/ + its *.prompt.md |
| To see a rule rendered | ../guidelines/ specimen cards |
| An AI to generate an on-brand screen | ../prompts/ |
| The words — voice, taglines | ../content/ |
| The mark, wordmark, logos | ../assets/ |
Why it is built this way
- One import. A single
styles.csspulls the whole token layer in a fixed order. There is no partial setup to get wrong. - Tokens, not literals. Every value is a CSS custom property whose name matches lux.network's own variables. Code copies between the app and this system 1:1, because they speak the same names.
- Dark by construction. Surfaces mount dark. Light is a
.lightoverride for the few brand and docs pages that need it. - Opacity is the palette. One neutral ladder plus an opacity ladder is the entire non-semantic color system. Rank reads as opacity. This is why Lux looks like Lux and not like a theme.
- The parts are self-contained. Components carry their own inline styles, so one drops into Next, Vite, Tamagui, or nothing and renders identically.
The one rule that overrides the rest
When a decision is unclear, return to the atom. Monochrome, true black, white type. If the work reinforces it, keep the work. If it doesn't, change the work.