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:
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.