UI Design Tool

It’s still a WIP, but has grown to become very useful for me.

Motivation

Starting a new project usually consists of setting up a certain base. This includes:

• Colors
• Typography
• Layout
• Spacings
• Shadows
• and styling common elements

I wanted to create a tool that does exactly that. It started of simple, but it keeps growing and the results it outputs can easily be used in a new project and stay there until the end. The rest is project specific.

Description

This tool is sort of a UI / companion to a set of CSS utils and styles that we use at norcode. In the end it outputs a config, which is a set of CSS variables, that, when combined with the CSS utils, create a solid foundation for most websites.

It currently has 6 sections:

Presets

It does what it says. It sets a few parameters to create a certain look, that might be a good starting point to your next project.

Typography

This is where you define your font families, create font sizes and other parameters of your typography.

Colors

This is probably the most fleshed out part of this application. We currently create a color palette with a light and dark theme, two accent colors and semantic neutral colors. It relies heavily on oklch as its color format and most of the colors are calculated based on the input. We have a ton of parameters to tweak, but in the end you get a solid set of color variables, that should be sufficient for most projects.

The amount and names were shaped by what we liked in other projects and lots of time discussing it. It’s a mix of “not too many” while still being flexible enough and covering most use cases.

Everything solely relies on CSS variables and colors are calculated using color-mix and CSS math functions. This allows us to easily manipulate it in the projects later on, too.

Borders & Shadows

Spacings / Sizes, shadows and borders are defined here. Most things are simple, the shadows are a little bit more complex and you can tweak them to your liking.

Components

There are no definitions here. It is a showcase of the components that we built (in CSS), how to use them and what they look like. We also document, how you use parameters to adjust them. Everything is CSS only, since we think that is most flexible and we love CSS.

Layout

Same as components, but for layout classes.

Further functions

There is a bit of functionality around import and exporting in different formats. Some of them are more useful, some less.

• Export as a URL. It’s a neat way to share the settings and keep the config in each project for later tweaking
• Copy JSON colors. They can be used in Figma, for example
• Copy WP colors (WIP) - It was an idea, but it’s not done
• Export the config. This is the main use case. It’s a list of CSS variables, that you can easily copy into your project.

Future

There are still a few ideas and we will probably keep tweaking the current possibilities, but we also reached a point, where stability is an increasingly important factor, at least for naming.

It definitely is “good enough” for production use, but we will keep improving it.