An open-source design system

An open-source design system for designers wearing too many hats.

Lumen is twenty components, twenty-two tokens, and an opinion about how design and code should agree. Built by a product designer, for product designers who got tired of waiting on handoff.

Try it

Read the docs later. Touch a button first.

<Button
  variant="primary"
  size="md"
>
  Click me
</Button>

A note from Yuti

I built this because I needed it.

I trained as a product designer, which is to say I learned how to make things look right and reason about them.

What I didn't learn — what I picked up later, slowly, from open-source codebases on the internet — was how to actually ship the things I was designing. Every system I learned from was free, generous, and built by people who didn't have to share it.

Lumen is my small contribution back. Twenty components, an opinionated foundation, a clear convention between Figma and code. Built for designers who, like me, are ready to wear more than one hat — and need the tools that fit.

It's free. It will stay free. If it helps you, the only thing I ask is that you share it.