# Themes

A theme is a full look: type, corners, density, borders, shadows, motion and
color, in light and dark. `@elements/ui` renders the design system's
monochrome until an app imports one, as one line after the package and before
`vars.css`:

```css app/shared/styles/page.css
@import "@elements/ui";
@import "@elements/ui/themes/editorial";
@import "./vars.css";
```

Every template reads the same tokens, so a theme restyles all of them at
once, and the base classes with them. Dark mode follows the OS preference,
and `<html data-theme="dark">` or `data-theme="light"` forces one. Under
`prefers-reduced-motion` every theme turns its motion off. Branding stays in
`vars.css`: the accent tokens there apply inside any theme
(`elements man style/theming`).

## Each theme

| Theme | The look |
|---|---|
| `default` | The monochrome look: navy-tinted neutrals, system sans, 4px corners, quiet shadows. |
| `elements` | The elements.dev house look: Inter, bold headings with tight tracking, the Elements blue for actions, links and selection. |
| `editorial` | Warm paper and near-black ink, an old-style serif for everything including controls, hairline rules, no shadows, an oxblood accent used sparingly. |
| `coder` | A terminal look for tools: monospace everywhere, square corners, dense rows, flat surfaces with 1px rules, labels in small uppercase, a phosphor green accent. |
| `dashboard` | Dense and productive, for data apps and admin tools: small type, compact controls and rows, square corners, flat surfaces held by cool-gray rules, one blue for action. |
| `commerce` | A storefront and checkout look: neutral grays that stay out of the way of product photos, a near-black pill for every primary action, larger controls, roomy cards. |
| `marketing` | For landing pages and launches: display-size headings in a heavy weight, roomy surfaces, large controls, an electric violet accent on violet-tinted neutrals. |
| `civic` | Plain public-service forms: one familiar sans at a larger reading size, square corners, 2px borders, big targets, a thick yellow focus band, no motion. |
| `playful` | Bright and friendly, for consumer and family apps: a rounded sans, big soft corners, chunky controls and checks, pastel lilac neutrals, a candy pink accent. |
| `brutalist` | White paper and black ink, 2px black edges on every control, hard offset shadows with no blur, square corners, one ultramarine accent, no motion. |
| `luxury` | Ivory and black, light high-contrast didone headings over a geometric sans, small wide-spaced uppercase controls, hairline rules, gold as the detail color. |
| `calm` | For wellness, journaling and focus apps: warm-gray paper, sage green as the only color, a humanist sans at easy weights, roomy spacing, slow soft motion. |

## Choosing one

Pick by the kind of app: `dashboard` or `coder` for a tool, `commerce` for a
store, `marketing` for a launch page, `civic` for a form everyone has to
finish, `editorial` or `calm` for reading, `elements` for the house look.
When you create an app, show the user this table, set the import for the one
they pick, and treat it as a starting point: `vars.css` adjusts any token a
theme sets.

Emails take the mail-safe baseline instead of a theme:
`@import "@elements/ui/email";` in `app/shared/styles/email.css`, which a new
app has too.