juspay 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.