# Enma

> Enma is Manish Mandal's design system: one core (spacing, type scale, components, states, motion, accessibility, rules) with six themes on top, each in light and dark. Use it for React and Next.js apps, React Native, Chrome and VS Code extensions, plain HTML and Claude artifacts. Name the theme, then follow the rules: one hero per screen, one accent spark per view, one primary button per view, big tabular numbers.

## Read first

- [enma.md](https://enma.manishmandal.com/enma.md): the whole system in one markdown file (rules, themes, token roles, HTML class recipes, component API)
- [Design skill](https://enma.manishmandal.com/skills/enma-design/SKILL.md): when and how to design in Enma
- [Frontend skill](https://enma.manishmandal.com/skills/enma-frontend/SKILL.md): setting Enma up per platform, building screens, accessibility and the definition of done

## Guides

- [Install Enma](https://enma.manishmandal.com/guides/install): one command from npm, starters and focused packages
- [React (web)](https://enma.manishmandal.com/guides/react)
- [React Native](https://enma.manishmandal.com/guides/react-native)
- [Plain HTML and Claude artifacts](https://enma.manishmandal.com/guides/html-and-artifacts)
- [Chrome extensions](https://enma.manishmandal.com/guides/chrome-extensions)
- [VS Code webviews](https://enma.manishmandal.com/guides/vscode-webviews)
- [Engineering standards](https://enma.manishmandal.com/guides/engineering-standards)

## Optional

- [Themes gallery](https://enma.manishmandal.com/themes)
- [Components](https://enma.manishmandal.com/components)
- [Changelog](https://enma.manishmandal.com/changelog)