Design systems, accessibility, responsive UI, and i18n

A design system is a governed contract, not a gallery of components.

Layers

1. design primitives: color, type, spacing, motion;
2. semantic tokens: surface, action, border, status;
3. accessible interaction primitives;
4. product components;
5. page composition and usage guidance.

Tailwind expresses tokens and composition. Flowbite or CDK can supply starting behaviors. Angular packages ownership and contracts.

Accessibility

Use semantic HTML first. Every interactive element must be keyboard reachable, visibly focused, named, and operable without pointer or color alone. Announce meaningful dynamic changes without creating screen-reader noise.

Dialogs require focus placement, trap, escape/close policy, background inertness, labeling, and focus restoration. Menus are not generic navigation.

Responsive behavior

Design with real content, zoom, narrow screens, large text, RTL, empty states, errors, long translations, and slow networks. A mobile sidebar must have its own scroll area with the final action reachable.

Internationalization

Keep user-facing text extractable. Use locale-aware number/date/currency APIs. Do not concatenate translated sentence fragments or use visual direction words as logic.

Governance

Components need owners, tests, accessibility expectations, deprecation policy, changelog, and migration path. Count consumers before breaking shared behavior.

Feynman check

A token is a shared decision. A primitive enforces interaction. A component solves a repeated product need. Explain which layer owns “danger red” and which owns “delete invoice.”