# Frontend Design

> Styling and design-system conventions — theme colors, MUI usage, typography. Use when styling components, adding colors, or making any visual/design change.

- Skill: `crossbill-app/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add crossbill-app/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/crossbill-app/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: crossbill-app (https://skillmd.com/u/crossbill-app)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/crossbill-app/frontend-design

---


# Frontend design

This app has an established design system; consistency with it beats novelty.

- The MUI theme in `frontend/src/theme/theme.ts` is the source of truth for
  colors, typography, and component styling. Read it before styling anything.
- Never hard-code color values in component code — use theme tokens. If a
  genuinely new color is needed, add it to the theme's `customColors` section
  first and reference it from there.
- Style through MUI components and the `sx` prop. Use semantic components
  (`Button`, `IconButton`) — never `<Box component="button">`; the semantic
  components carry the accessibility and interaction behavior.
- Icons come from `frontend/src/theme/Icons.tsx`, one glyph per domain name —
  an eslint rule blocks importing them from `@mui/icons-material` anywhere
  else. Size them from `ICON_SIZE` in `theme/iconSizes.ts` (`inline` 16, `ui`
  20, `prominent` 24), never below `ui` for something clickable.