# Design System

> Create or modify coherent visual tokens and reusable component rules for color, typography, spacing, radius, elevation, controls, and interaction states.

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

---


# Design system

Build a small system before styling individual nodes.

- Put shared values in CSS custom properties under `:root`: semantic colors,
  type scale, spacing, radii, shadows, borders, and motion durations.
- Name tokens by purpose (`--surface-raised`, `--text-muted`, `--space-3`), not
  by a one-off component or raw color.
- Define reusable classes for repeated patterns such as buttons, fields, cards,
  navigation items, badges, and overlays. Keep state styles adjacent to their
  base component.
- Maintain readable contrast and a visible keyboard focus ring. Color alone
  must not communicate state.
- Use a restrained type scale and spacing rhythm. A design becomes coherent by
  repeating decisions, not by adding decoration.

When the inspector scope is `design-system`, find the token or reusable rule
behind the selected node and change that source of truth. Update every
semantically matching instance and verify that unrelated components did not
regress. Do not solve a system-wide request with a new inline style.