20 minute build
Ship an accessible settings screen
Evaluate Lumen with a production-shaped account surface that includes forms, states, theming, and accessibility checks.
Follow the guidePractical guides
Start with a product problem, not a component list.
Follow focused paths that combine Lumen primitives into real workflows, with setup, accessibility, and verification included.
Follow Guides via RSSRecommended first
Evaluate Lumen on one representative screen.
Forms, feedback, layout, tokens, and keyboard behavior in one bounded exercise.
Build the settings screenChoose an outcome
Useful paths through the system
Integration guide
Build a validated form flow
Choose the right form integration for Astro Actions, React Hook Form, or standards-based custom elements.
Follow the guideAI workflow
Give your coding agent the design system
Install the portable skill and connect the MCP catalog so coding agents use real Lumen contracts.
Follow the guideInteractive lab
Create a product theme with semantic tokens
Adjust semantic roles in the browser and export a theme without creating a second component palette.
Follow the guideTeach with Lumen
Propose a guideSolved something others will encounter?
Propose a guide or share the finished project. Specific lessons from real products make the library easier to adopt than generic announcements do.