# Modes

> Foundations has four modes: Chartory Light, Chartory Dark, Ember and Ember Light. Every token has a value in each, so switching the mode restyles every Hearth chart at once.

| Mode | Built from | Use it for |
| --- | --- | --- |
| Chartory Dark | Chartory palette, 181 colours | Dark products, this site |
| Chartory Light | Chartory palette, 181 colours | Light products |
| Ember | Its own values | A warm, deep launchpad look |
| Ember Light | Its own values | Ember on light surfaces |

## Light mirrors dark

Each colour family keeps its hue in both modes; **only lightness moves**. Neutrals come from one grey base, inverted, so a chart reads the same in light and dark.

## Switch the mode

In Figma, set the **Foundations** mode on a frame; every Hearth chart inside follows. Presets are modes too, so a new preset never changes a component.

**Note: Check both.** Before you ship a dashboard, look at it in light and in dark side by side.

## What stays, what moves

| Stays the same | Moves with the mode |
| --- | --- |
| Token names | Token values |
| Hue per colour family | Lightness |
| Layout, sizes, type | Surfaces and text contrast |

- [Motion](https://usechartory.com/docs/motion): How charts move, in every mode.