Theme builder

Color grid

We've opened up log in and released the alpha version of our theme builder. Creating an account will allow you to save multiple themes and designs as well as easily track publish and edit history for components. Create themes by importing existing site styles, customizing curated templates, or starting from scratch.

Theme import

We want to make it as easy as possible to utilize your existing visual brand. Currently you can import styles from a URL. Via the CSS Stats API, we automate parsing visual styles from CSS, automatically sorting your colors, typography, shadows, and borders into scales you can edit as needed.

Color systems

Accessibility table

Build accessible and balanced color systems. Jump start your designs with a growing set of theme presets or import your existing colors to use as generative input for other components.

Automated accessibility info

Accessibility table

As you build out your color system, get a variety of automated documentation and visual feedback loops that allow you to navigate accessible ways to use your color palette. Automatically shows accessible color combos from within each color group as well as the color contrast scores with both black and white.

Color modes

Beyond two color combinations for text and background - generate, customize, and visualize more complex ways to combine colors to build UI. It’s never been easier to explore dark mode options your palette has to offer.

Color modes

Gradients

Color modes

Using our generative algorithms, explore what’s possible with CSS gradients and your color palette. Fore more complex gradients check out our gradient component

Shadows

Generate box shadows and preview their application on cards, buttons, images, and more.

Box shadow previewed on a card

Design for the web with web values

Color modes

Build modular scales for spacing and typography to build fluid systems with the units of your choice.

Color modes

Constrain to theme

Existing components and our in-flight component builder all allow you to constrain generative inputs to values from your theme. You can always choose a custom value for one-off needs - but we are working to make it easy as possible to apply existing theme values to new designs.

Publish

Publish a visual style guide along with hosted assets you can use directly in your app. Consume your theme as JavaScript, JSON, or CSS. Easy to use with Styled System and Theme UI.

Multi-format export

You should be able to seamlessly use your visual brand anywhere. Export your theme as JavaScript, JSON, Responsive utility based CSS, CSS variables, and Sass variables. Our goal is to make your theme as interoperable as possible.

Get started here. We can't wait to see what you make.

Roadmap

We'd love to hear about your computational theming needs. Drop us feature requests or issues here.