Creating a design system
naina provides a short wizard, to assist in the steps of creating your initial design system.
The focus of this short journey is for you to be able to provide basic information and make initial choices, which you can later adjust to your needs.
All this is structured in a three-step wizard, let’s see what they are then we can talk about what happens after.
1. Name, description and industry
naina needs a name for obvious reasons. The need for a description may not be that obvious.
The description is used to help naina understand the personality and goals of your brand. This will be later used to help suggest colors and fonts that align with your brand identity.
The industry is somewhat similar. Different industries will have different color specifics, which naina tries to use. Also, the layouts that naina creates based on this are more and more customized to chosen industry.
At the moment naina offers only a few industries, more are coming soon.
2. Initial colors
When it comes to colors, as to many other tokens in the system, naina follows a unique approach.
When designers choose colors, they would typically pick a primary one and then a few secondary ones and then several neutral colors.
naina on the other hand, asks you to pick four action colors. These are colors that will be used for actions, such as buttons and links.
These are the primary, secondary, tertiary and delete action colors. And naina picks them for you in the beginning, based on the industry you specified. Later you can of course edit and add any other ones.
Beyond this, naina will also generate 10 neutral colors. These are created based on the hue of the primary color which makes them match your primary color a little better.
naina uses the OKlch color space, which is a mathematical way to describe colors.
naina uses this color space because it is currently considered the best on the web for multiple reasons:
- Perceptually uniform - changing lightness by 10% looks like the same amount of change whether the color is dark or bright (unlike RGB/HSL)
- Predictable lightness - colors with the same L value appear equally bright to human eyes (HSL fails at this - yellow and blue at 50% lightness look completely different in brightness)
- Wide gamut ready - can represent colors beyond sRGB that modern screens can display (P3, Rec2020)
- Consistent hue - changing lightness doesn't shift the hue like it does in HSL
- Better gradients - interpolating between colors looks natural without weird muddy middle points
- Accessibility - easy to ensure contrast ratios by controlling the L value directly
3. Initial font family
naina needs at least one font family to be able to create a dynamic type system for you.
As soon as this is done, you can create the system which will include many best practices you can use out of the box.
See below for details.
What do you get at the end of the wizard?
1. A complete design system
- A centered grid system that has adjustable width, is entirely responsive to screen size and has preset breakouts for emphasis, all these fully configurable
- Color tokens in both light and dark modes, with presets in place to allow for system color detection
- A responsive typography scale, that prestyles default text types, for instance, all the headings and paragrahs
- A dynamic spacing system that is also responsive, allowing you to use single steps or custom steps in the spacing settings for padding, margin, etc.
- All using modern web standards
2. A component library
20 to 30 pre built, responsive components:
- Prestyled HTML elements
- Navigation headers
- Hero sections
- Product and service cards
- Pricing tables
- Footers
- Article layouts
- Image galleries
- Call to action sections
3. Your first homepage
- Built using your selected colors and fonts, then augmented with a lot of best practice choices
- Uses CSS Grid and Flexbox, using naina’s powerful layout system
- Highly consistent across the system with the tokens that have been set and you can edit to your liking