---
name: enma-design
description: Design UI in Enma, Manish Mandal's design system with one core and six themes (Graphite, Glass, Paper, Mineral, Enamel, Ember). Use whenever you build, mock up or review a screen, component, landing page or Claude artifact that should look like Enma, when you pick a theme for a project, or when the user mentions Enma.
---

# Enma design

Enma is one core (spacing, type scale, components, states, motion, accessibility, rules) with six themes on top. A theme changes only the surface: color, fonts, radius, depth and how presses feel. Every screen should feel calm, precise and a little bit crafted.

## When to use this skill

- Building any UI for one of Manish's projects: React and Next.js apps, React Native, Chrome and VS Code extensions, freelance work, Claude artifacts.
- Making a mockup or prototype "in Enma".
- Reviewing a screen against Enma's rules.

For project setup, states, accessibility and the definition of done, also use the `enma-frontend` skill.

## 1. Pick the theme

Use the default for the project type. Override only with a reason, and write the decision down (`UI: Enma · ember · dark (home), toggle: no`).

| Project type                                    | Theme      | Home mode |
| ----------------------------------------------- | ---------- | --------- |
| B2B SaaS, dev tools, dashboards, internal tools | `graphite` | dark      |
| Consumer iOS-style apps, lifestyle, wellness    | `glass`    | light     |
| Learning, reading, writing, content             | `paper`    | light     |
| Finance, premium, trust-heavy, client work      | `mineral`  | light     |
| Playful side projects, landing pages, social    | `enamel`   | light     |
| Fitness, media, night-time use                  | `ember`    | dark      |

Every theme has light and dark; use the home mode unless the product needs a toggle. A project may change only three things: the accent color, the display font and the radius dial. Anything bigger is a new theme in the system. Details: [references/themes.md](references/themes.md).

## 2. Follow the core rules

- **One hero per screen:** a hero card with the big number, or a display headline. Everything else stays quiet.
- **One spark per view:** `--e-accent` marks one or two things (the highlighted bar, a status dot, the active tab). Never a background.
- **One primary button per view.** Siblings are `secondary` or `ghost`.
- **Numbers are the signature:** key figures use `Stat` in the theme's number face with tabular figures; units sit outside the number ("12,480 kg"); amounts right-align in tables.
- **Group with tone, not lines:** `raised` panels inside `surface` cards. Hairlines separate rows and table cells only (Paper is the exception: it is built from rules).
- **Smooth corners that nest:** `xl` frame, `lg` card, `md` group, `sm` input.
- **Physical motion, used sparingly:** presses spring back, numbers count up and bars grow once on first view, nothing loops, everything is instant under reduced motion.
- **Density follows the surface:** mobile is comfortable (44px targets, `lg` buttons, 16 to 20px padding); B2B is compact (`sm` toolbar controls, 13px table text, 12px labels).

## 3. Use tokens and roles, never raw values

Style everything with the `--e-*` roles, which always point at the active theme: `--e-bg`, `--e-surface`, `--e-raised`, `--e-field`, `--e-line`, `--e-line-strong`, `--e-ink`, `--e-ink-2`, `--e-primary`, `--e-on-primary`, `--e-accent`, `--e-on-accent`, `--e-accent-ink`, `--e-accent-soft`, `--e-positive`, `--e-positive-soft`, `--e-negative`, `--e-negative-soft`, `--e-hero`, `--e-on-hero`, `--e-on-hero-2`, `--e-track`, `--e-focus`, radius `--e-r-sm|md|lg|xl|control`, `--e-shadow-card`, fonts `--e-font-display|body|num|meta`. Shared scales: `--space-*`, `--control-sm|md|lg`, `--touch-min`, `--duration-*`, `--easing-*`. What each role means and the type scale: [references/tokens.md](references/tokens.md).

## 4. Build from components

Use the existing components before writing custom UI: `EnmaRoot`, `Button`, `IconButton`, `Icon`, `Badge`, `Card`, `Stat`, `Bars`, `LineChart`, `Sparkline`, `Donut`, `ListGroup`, `Table`, `TextField`, `Switch`, `Checkbox`, `SegmentedControl`, `TabBar`, `Avatar`, `Progress`, `Toast`. When to use each: [references/components.md](references/components.md). Without React (HTML, artifacts, other frameworks), use the class recipes: [references/recipes.md](references/recipes.md).

Missing something (dialog, menu, popover, combobox)? Build it on an accessible primitive (Radix UI or React Aria on web) and style it with Enma roles.

## 5. Write in Enma's voice

- Sentence case everywhere. Verbs first on actions: "Start workout", "New invoice", "Export".
- Say the outcome: "Invoice sent", "Saved". Never "successfully", "please" or exclamation marks.
- Errors say what happened and what to do, in one sentence: "The card was declined. Try another."
- Numbers carry units and context: "+12.4% this month", "4 × 8 · 80 kg".
- Placeholders are real examples ("Acme Labs"), not "e.g." or a repeat of the label.
- Status is always a word too ("Paid", "Overdue"), never color alone.

## Never

- Raw hex values or the raw per-theme tokens (`--ember-accent`) in product code.
- Two themes on one screen, or a theme re-tinted beyond the tweak budget.
- Blue-to-purple gradients, emoji as icons, cards with a colored left border, decorative blobs outside the canvas, glow on anything but the hero or primary.
- More than one primary button, hero or highlighted bar per view.
- Status shown by color alone, gray text below 4.5:1, focus rings removed.
- Animating everything. Motion marks a press, a first view or a change, nothing else.

## Reference

- Docs: https://enma.manishmandal.com (every page in every theme)
- Everything in one file: https://enma.manishmandal.com/enma.md