# Themes

Every theme defines the same roles in both modes, so code never changes when the theme does. Set the theme on the root: `<html data-enma="ember" data-theme="dark">` and `class="e-canvas"` on `<body>`, or `<EnmaRoot theme="ember">` in React.

| Theme      | Use it for                                      | Home  | Feel                                                                                |
| ---------- | ----------------------------------------------- | ----- | ----------------------------------------------------------------------------------- |
| `graphite` | B2B SaaS, dev tools, dashboards, internal tools | dark  | Precise instrument. Mono numerals, one electric lime signal.                        |
| `glass`    | Consumer iOS-style apps, lifestyle, wellness    | light | Frosted, layered, very round. Coral spark.                                          |
| `paper`    | Learning, reading, writing, content             | light | Editorial. Italic serif numbers, hairline rules, sharp corners, one vermilion mark. |
| `mineral`  | Finance, premium, trust-heavy, client work      | light | Calm and grounded. Forest hero, brass accent on sage.                               |
| `enamel`   | Playful side projects, landing pages, social    | light | Loud on purpose. Ink outlines, hard offset shadows, yellow and pink.                |
| `ember`    | Fitness, media, night-time use                  | dark  | Cinematic. A warm light source, amber on the key numbers and actions.               |

## Faces

| Theme    | Display              | Body            | Numbers                              |
| -------- | -------------------- | --------------- | ------------------------------------ |
| Graphite | Inter Tight 600      | Inter Tight     | JetBrains Mono 500                   |
| Glass    | Hanken Grotesk 700   | Hanken Grotesk  | Hanken Grotesk 700                   |
| Paper    | Instrument Serif 400 | Instrument Sans | Instrument Serif italic, scaled 1.36 |
| Mineral  | Sora 600             | Manrope         | Sora 600                             |
| Enamel   | Space Grotesk 700    | Space Grotesk   | Space Grotesk 700                    |
| Ember    | Geist 600            | Geist           | Geist 600                            |

Load only your theme's fonts (`@enma-design/css/fonts/<theme>.css` or `enma-design/fonts/<theme>`).

## Shape and depth

| Theme    | Radius sm / md / lg / xl / control | Depth                                                 |
| -------- | ---------------------------------- | ----------------------------------------------------- |
| Graphite | 8 / 12 / 18 / 30 / 10              | 1px ring plus a top highlight; long soft drop in dark |
| Glass    | 12 / 18 / 26 / 40 / pill           | Frosted blur, white inner highlight, soft drop        |
| Paper    | 2 / 4 / 6 / 10 / 3                 | None. Borders and rules only                          |
| Mineral  | 10 / 14 / 22 / 36 / 14             | White top highlight, soft green-tinted drop           |
| Enamel   | 10 / 14 / 18 / 28 / 14             | 2px ink outlines, hard 6px offset shadow              |
| Ember    | 10 / 16 / 24 / 38 / pill           | Hairline ring, warm glow behind the hero and primary  |

## Signatures you get for free

- The hero card: Graphite's dark slab, Glass's frosted panel, Paper's ruled block, Mineral's forest panel with a brass ring, Enamel's yellow plate, Ember's glow.
- The press: a spring scale on most themes, a hard push into the shadow on Enamel.
- The canvas: Graphite's dot grid, Glass's three soft light sources, Ember's warm glow. Never recreate them by hand.

## Tweak budget

A project may change the accent color, the display font and the radius dial, in one `overrides.css` loaded after Enma. The selectors must mirror the theme map so the override wins everywhere:

```css
[data-enma='ember'],
[data-enma='ember'][data-theme],
[data-enma='ember'] [data-theme]:not([data-enma]) {
  --e-r-control: 14px;
}
```

Re-check contrast for any color you change: text 4.5:1, controls, focus and chart marks 3:1.