design-system

name	design-system
description	Create or modify coherent visual tokens and reusable component rules for color, typography, spacing, radius, elevation, controls, and interaction states.

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.