Generative design tools
for the web

Customize, curate, and publish designs faster than ever.

Get started for free
A

Theme builder New

Design your visual brand. Use it anywhere.

Product

A growing set of generative components for UI and graphic design.

Explore

Cycle through generated designs or create your own from scratch with the ease of parametric controls.

Augment

Manipulate parameters until the design is just right. Lock inputs for properties or combinations of properties you like to find your visual language.

Navigate

Vote generated designs up or down to curate future output. Save as many iterations as you want.

Multi-format export

Export designs in a growing list of formats including: React, JS, JSON, JSX, SVG, PNG, HTML, CSS, CSS custom properties, and Sass.

One-click publish

Instantly share your designs with colleagues or clients to present or collaborate. Publish hosted web pages along with hosted assets for styles as JS, JSON, and CSS.

Constraint-based designs

Design with scales and systems. Components automatically use your defined brand guidelines, retaining the ability to override with custom values at any time.

Theme import

Start using your visual brand immediately. Audit and edit or use to drive constraints for generative components.

Automated accessibility docs

Rapid visual feedback loops for contrast scores and accessible combinations available in a theme.

Responsive themes

Don't just design for a single screen size. Easily target values across your defined breakpoints. Manage responsive typography, layout, and spacing.

1000+ fonts

Full support for the entire Google Font Library + any fonts you have installed locally.

Variable font support

The first design tool with full support for variable fonts. Automatically exposes all custom axis so you can get the fine-grained control variable fonts were meant to enable.

Curated design assets

Browse curated presets to customize or use in your designs.

Color Systems

Scales optimized for designing digital interfaces. Add typography, spacing, borders, and shadows to define your complete theme. Extend, modify, or use out of the box. Export as CSS, Custom properties, JS, JSON, or Sass to use in any type of web project.

LCH - Natural

156 colors

7,768 accessible combinations

LCH - B-Spline

132 colors

5,252 accessible combinations

LCH - Monotone

156 colors

7,256 accessible combinations

LCH - Linear

156 colors

7,256 accessible combinations

LAB - Natural

168 colors

8,816 accessible combinations

LAB - B-Spline

156 colors

8,212 accessible combinations

LAB - Monotone

132 colors

5,390 accessible combinations

LAB - Linear

180 colors

10,918 accessible combinations

Explore

Easy to customize, ready to use assets

Generate & Explore

Cycle through generated designs or create your own from scratch.

Augment

Quickly customize or create your own designs. Lock inputs for properties or combinations of properties you like to find your aesthetic.

Save & Export

Save iterations you like for later use. Export designs as Images, React, JSX, JS, or static HTML and CSS, to use in your projects.

Generative Logo DesignA brief walkthrough of the thinking and process behind our recent logo redesign.Read more

Sign up for early access to new features and products

We are hiring!

If you're a designer and or developer interested in joining our team, drop us a line at hello@components.ai

See our open Senior Software Engineer position →