About design system

Overview

The design system of Camome is divided into Color palette, Typography, and Misc. Although it is called a design system, not as strict as to constraint the whole design completely. For example, grid systems for determining the placement of UI parts and sizes for padding are not included.

However, Color palette is somewhat systematically specified. This is mainly to make it easy to customize themes.

How to use

All design tokens are defined in @camome/system. The source code is a JavaScript object, but of course it also generates CSS.

CSS

In CSS, all design tokens are declared as CSS Custom Properties. They are in the form with cmm- prefix, like --cmm-color-primary-5.

You can import the default theme from @camome/system/theme.css, but it is also possible to customize it. See Theming for more information.

JavaScript

This section is under construction...