Create beautiful, clear design systems

From a simple component library through to detailed descriptions of your styles, lucid makes it easy.

Designers, use lucid to:describe the details behind the design

Lucid is a tool for creating, managing and sharing design systems. From a simple component library through to detailed descriptions of your styles.

Developers, rely on lucid as:the single source of truth

Lucid gives you all the design styles in one place. So you don’t need to go hunting through layers in a file, or risk coding a component from the wrong design.

PRODUCT TEAMS USE LUCID TO:STAY RELEVANT, UP TO DATE AND IN SYNC

Changed a style? Added a new component? No problem. Jump into Lucid and update it. No need to ask the developers on your team to update it (they’ve probably got better things to do).

There’s no custom website to code, no need to worry about where to host it, and no need to spend time thinking about how it should work. So you can get back to creating great products.

A MODERN APPROACH FOR COLLABORATIVE TEAMS

Changed a style? Added a new component? No problem. Jump into Lucid and update it. No need to ask the developers on your team to update it.

The old way

Out of date style guides

Difficult to maintain

Effort to design and build

Purple Lucid Logo

The new way

Beautiful, clear design systems

Easy to update and share

No need to build or host

Features designed to make your life easier

PRINCIPLES
Principles

Let people know why you created your design system and why they should use it.

STYLE
Style

Describe colors, fonts and icons and present them clearly.

IMAGES
Images

Provide guidelines for your photography, illustration styles and logos.

Guidelines
Writing guidelines

Set the tone, explain what to say and how to say it.

COMPONENTS
Components & examples

Describe components in detail to help developers. Show examples to inspire designers.

DO'S AND DONT'S
Do's and dont's

Guide people on what to do, and what not to do.

CODE SNIPPETS
Code snippets

Add code so developers can hit the ground running.

EXAMPLES
Resources

Add your design files and links to things like your Zeplin or Figma projects.

CUSTOMISATION
Customisation

Choose colors for your header and links. Add your logo and a header image.

Plans and pricing

Free

0 Per month

3 projects that you can publish for 30 days

(so you can test Lucid)

Early adopter price!

Designer

7 Per month

3 projects that you can publish and share forever

Professional

25 Per month

Unlimited projects!
New pro features coming soon

TAKE A CLOSER LOOK AT LUCID WITH OUR EXAMPLE DESIGN SYSTEM

‘Crema’ is a small demo design system created with Lucid so you can see the kind of output you can create quickly and easily.

See demo