---
title: "Design systems, accessibility, responsive UI, and i18n"
chapter: "13"
---

# 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.”