Lumen documentation

One system, every platform.

Build with your coding agent or follow the platform guides. Lumen combines accessible components, a shared design language, and precise API guidance for web and native interfaces.

Choose a platform Build with AI

Choose your environment

Start with the platform

Each guide uses the vocabulary, setup, and accessibility conventions expected by its ecosystem. The shared foundations stay familiar when you move between them.

Full catalog

Web platform

Web

@santi020k/lumen-{astro,react,elements}

Build accessible interfaces with Astro, React, or Web Components using one stylesheet, token system, and component contract.

Open Web docs

Native primitives

React Native

@santi020k/lumen-react-native

Use Lumen foundations and native primitives in React Native without depending on CSS, DOM behavior, or the web runtime.

Open React Native docs

SwiftUI package

Apple platforms

Apple / SwiftUI

LumenUI

Share a Lumen design language across iPhone, iPad, Mac, Apple TV, and Apple Watch while keeping SwiftUI behavior native.

Open Apple docs

Compose module

Android platform

Android / Compose

com.santi020k:lumen-compose

Use the shared Lumen foundations through Jetpack Compose and Material 3 while preserving Android interaction and accessibility conventions.

Open Android docs

Shared design language

One foundation beneath every adapter

Understand the semantic tokens and cross-platform contracts that keep every Lumen implementation recognizably part of one system.

Understand the system

Canonical vocabulary

ColorSpacingRadiusTypographyMotionElevation

One token source, translated into platform-native values and components.

Build with confidence

Keep design and code in sync

Move from design to implementation with the same public vocabulary, then keep up with the system as its packages evolve.

Design workflow

Figma library

Use the same variables, component intent, and handoff vocabulary as the code packages.

Open Figma guidance

Agent workflow

AI integrations

Give coding agents direct access to Lumen’s real component contracts and usage rules.

Install the AI skill

What changed

Release history

Follow package changes across web and native adapters from one release timeline.

Read the changelog