You can manually create and add colors, text styles, and sizes to your design system using the web app. To do it, go to the Design Systems tab and click on your Design System.

Click on the Add Color Style button, give the color a name, input its code --we support HEXA, HSLA, or RGBA-- and, optionally, a description for this style. To save it, click on the checkmark at the right or hit Enter. To cancel, click on the X or hit Esc.

In the Text Styles Section, you can view, edit, copy, delete or add new text styles. The preview is generated using the thickness and size of the style, applied to your system's default font.

Note: To manually add new text styles, you’ll need to make sure you have defined sizes and uploaded fonts first!

Here, you can attach the font files that are used in your project, so the dev team can access and download them. The system will try its best to generate the font preview for you. We support TTF, OTF, WOFF, and WOFF2 font files.

In this section, you can create, edit, or remove your spacing and sizes tokens. We support Px or REM units.

Note: Remember, Spacing is for blank spaces between elements, Size is for the size of the actual elements.

When you’re viewing a mockup, you’ll notice a new icon when hovering over any of the colors from the list in the Color tab on the right-hand menu. Clicking on it will add that style to the linked Design System. The visible blue icon marks it’s already part of the Design System, clicking on it will take you to the Design System manager.

As with the colors tab, you’ll notice a new icon when hovering over any of the text styles from the list in the Text tab on the right-hand menu. Clicking on it will add that style to the linked Design System. The visible blue icon marks it’s already part of the Design System, and clicking on it will take you to the Design System manager.