One token source
tokens/lumen.tokens.json is the canonical platform-neutral source for every generated adapter.
Shared design languageCanonical tokens
Shared foundations
Understand the semantic tokens and cross-platform contracts that keep every Lumen implementation recognizably part of one system.
Package
@santi020k/lumen-tokensMost applications should consume tokens through their platform package. Use the platform-neutral token package for tooling and custom adapters.
See the contract
A role, not a fixed color
These swatches follow the current docs theme. Change the theme to see each role adapt.
canvasPage backgroundsurfaceCards and panelssurface-mutedSecondary surfacesinkPrimary textbrandBrand expressionbrand-solidPrimary actionssuccessSuccessful outcomeswarningNeeds attentiondangerErrors and destructive actionsUse roles for their purpose; status also needs a label or icon so color never carries the meaning alone.
From tokens to a screen
Let each layer own its space
Card owns padding. Stack separates groups. Field keeps its label and input together.
Workspace settings
---
import { Button, Card, Field, Input, Label, Stack } from '@santi020k/lumen-astro'
---
<Card>
<Stack gap="group">
<Field>
<Label for="workspace">Workspace name</Label>
<Input id="workspace" value="Lumen Labs" />
</Field>
<Stack direction="horizontal" gap="related" wrap>
<Button>Save changes</Button>
<Button variant="outline">Cancel</Button>
</Stack>
</Stack>
</Card>---
import { Button, Card, Field, Input, Label, Stack } from '@santi020k/lumen-astro'
---
<Card>
<Stack gap="group">
<Field>
<Label for="workspace">Workspace name</Label>
<Input id="workspace" value="Lumen Labs" />
</Field>
<Stack direction="horizontal" gap="related" wrap>
<Button>Save changes</Button>
<Button variant="outline">Cancel</Button>
</Stack>
</Stack>
</Card>Explore Stack spacing or build a theme in the interactive lab.
Compare the foundations
Space, type, and surface
These examples use the live Lumen variables, so theme and preset changes carry through.
Spacing scale
Bars magnify each spacing token four times so the differences are easy to compare.
xssmmdlgxl2xl3xlReading hierarchy
Workspace overview
A clear heading introduces the idea. Body text gives it enough context to act.
Supporting text adds a detail without competing with the heading.
Corner radius
Use the shared radius scale to keep controls and surfaces related.
Elevation
Shadows follow the current theme. Pair elevation with a clear border and hierarchy.
Motion with a purpose
Compare transition timing
Replay a single transition using the fast, default, and slow duration tokens. Reduced motion keeps the markers still.
fastdefaultslowEnable JavaScript to replay the timing comparison.
Get started
Install and configure
Most applications should consume tokens through their platform package. Use the platform-neutral token package for tooling and custom adapters.
pnpm add @santi020k/lumen-tokensSupported surface
Components and capabilities
Foundations define shared roles and expectations. Each adapter remains responsible for native rendering, interaction, focus, and navigation.
Color
Spacing
Radius
Typography
Motion
Elevation
Light theme
Dark theme
Platform contract
Designed for Foundations
Shared intent
Semantic purpose, variants, states, content rules, and accessibility expectations form the shared contract.
Native implementation
Rendering, gestures, navigation, focus systems, and platform conventions stay inside each adapter.
Continue exploring
Move between platform guidance without losing the shared Lumen design language.