Every detail.
A shared intention.

Primitive → semantic
→ component.

Primitives describe the available values. Semantic tokens give them a purpose. Component tokens define a specific piece of the interface, including the optical geometry that makes the launcher and widgets feel balanced.

design/tokens.json is the source. The generator resolves references into typed Rust constants and CSS custom properties. CI checks for stale outputs, broken references and cycles. Desktop components consume tokens; the framework stays independent of this visual identity.

python3 scripts/generate-design-tokens.py
python3 scripts/generate-design-tokens.py --check

Components ask for primary, on_primary and surface. Switching themes changes their values together, including icon tints. Text pairs in both themes have automated contrast checks.

This browser illustration explains two semantic themes. The component lab compares the actual Rust-rendered controls across all exported palettes and states. Native desktop actions run in the VM. The landing page uses a separate mint-and-ink brand theme from the same token source.

Space to breathe.
Type that belongs.

Dimensions are logical pixels. The compositor’s output scale determines physical pixels. Type roles range from compact captions to the stacked desktop clock.

The spacing scale

A grid with enforced relationships

The launcher, dock and top bar settle on the same 16-pixel shell grid as widget anchors. Control slots and gaps use 8 pixels; compact insets use a 4-pixel subdivision. Launcher rows and search fields are 48 pixels high. Panel heights and bar widths derive from their contents, and geometry tests enforce alignment, equal gutters and containment.

On screen sizes that do not divide evenly by 16, leftover pixels stay outside the shell. Text metrics and image aspect ratios keep their precision. Animation moves continuously between aligned endpoints; the renderer does not snap every frame.

Corners, with hierarchy

Continuity you can feel.

The Rust runtime samples Motion::value(now). The panel uses a 500 ms spatial curve that settles directly at its target without overshoot; launcher selection updates immediately; content enters in 320 ms and exits in 190 ms. Retargeting starts at the current value, even halfway through a transition.

Sharper at higher density

The framebuffer follows the output’s negotiated density. At 2×, one logical pixel covers four physical pixels. Supersampling text improves coverage; it does not add detail to a low-resolution original. Fractional scaling uses optional Wayland fractional-scale/viewport protocols with integer fallback. A scoped one-output live-video resize and density-retargeting run passes; physical, secure and broader multi-output acceptance remains separate. The merged text engine supports script shaping, bidirectional text, font fallback and opt-in ordinary IME. Owned native IME checks pass, while third-party, physical and cross-output text acceptance remains open. See the library guide for those source-specific boundaries.

A recipe, not a bag
of magic numbers.

The desktop composes framework primitives using lucent-design. Choose a semantic role, then a type, spacing and corner token. Component geometry lives under component.launcher, component.calendar and the other component groups.

use lucent_design::{Theme, component, font, radius};

let theme = Theme::new(settings.light);
let launch = theme.button("Open application", Message::Launch)
    .font(font::BODY)
    .padding_xy(component::launcher::ROW_PADDING_INLINE, component::launcher::ROW_PADDING_BLOCK)
    .radius(radius::BUTTON)
    .background(theme.primary)
    .color(theme.on_primary);

// Selection and field recipes share the same semantic roles and geometry.
let choice = theme.choice_button("30 FPS", Message::Rate(30), selected);
let input = theme.text_input(value, selection, "Media path", Message::Edit);
let pause = theme.toggle_row("Pause all", Message::PauseAll, paused);
let status = theme.status_text("Saving preferences…", false);

// Shared hover and elevation recipes, including child elements.
theme.apply(launch)

Keep raw values in the token source. A new component-specific dimension should name its purpose—for example component.launcher.row_height. Arithmetic, timekeeping and protocol values remain ordinary code.

Padding follows
the shape.

Capsules need more room at their ends than above and below their contents. The framework exposes padding_xy(horizontal, vertical); the design system chooses the insets. Backgrounds and hit targets keep their full size.

Command icons and labels share a vertical center. The dock derives its width from slots, gaps and equal end insets. Panel contents use the 20px inset token.

A shared spatial rhythm

Widgets move freely while dragging and snap on release to component.widget_layout.grid_step → space.lg: 16 logical pixels. The saved position uses that grid; screen edges take priority so a widget remains visible. This aligns anchors without forcing every widget to have the same size.

Application window corners use component.window.radius → radius.panel: 20px. The generated Hyprland configuration sets the compositor default for rounding and gaps, so terminals and browsers share it; explicit application rules and Omarchy gap toggles can take precedence. The compositor draws and clips application corners. Lucent draws its own panels. The integration can remove the generated configuration without replacing user settings.

One family.
Each app distinct.

58 original pictograms share a shape, stroke weight and monochrome treatment. The launcher and dock select the same artwork by desktop-entry ID, so translated app names do not change their icon. These are Lucent interpretations, separate from the applications’ official logos.

Edit design/app-icons.json to change the artwork or desktop-ID aliases. Glyphs use the theme’s semantic foreground on transparent backgrounds. Geometry lives in app_icon.* tokens. Unmapped apps retain their supplied icon; a Lucent application glyph is the final fallback.

python3 scripts/generate-design-tokens.py
python3 scripts/generate-app-icons.py
python3 scripts/generate-app-icons.py --check

From our renderer.

Open the component lab for selectable native control stories, palettes, focus/hover states and densities. The references below show production desktop compositions.

These are fixed Vulkan renders of the Rust components, taken from the visual-test baselines. The app names are fixtures; their icons come from the actual Lucent catalog. Keyboard selection, input alignment, switch geometry and seven visible rows are checked separately from the image comparison.

Shell icons use pinned, Apache-2.0 Material Symbols Rounded SVGs and an original Lucent notification bell. Images keep their aspect ratio. Focus, caret and toggle geometry use named component tokens. Run the native component checks ↗

Find your token.

This catalog is generated directly from design/tokens.json. Copy a Rust constant path or a CSS custom property.

50 tokens

No tokens match. Try a different group or search.