---
title: "About design system"
label: "Overview"
id: "design-system:overview"
---

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). 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 <DocLink id="guide:theming"/> for more information.

### JavaScript

<Message status="warn">This section is under construction...</Message>
