[Epic]: Design system — micro + macro components so screens compose

### Executive Summary

We want screens to be assembled from a rich, documented component library instead of hand-rolling layout in every view, because today each of the ~12 app views re-implements the same patterns inline (page headers, status badges, dividers, empty states, callouts, list rows). This epic exists to close that gap: build the micro (atoms) and macro (organisms) components so building a screen is composition, not bespoke layout.

### Strategic Intent

The intent is a design system where views "just compose" — every recurring UI pattern is a named, Storybook-documented component, grounded in real product references (Cohere, Anthropic, TwelveLabs, Linear API-console screens) and the existing token system.

### Problem Statement

`apps/self-service/src/views/api-keys-list-view.tsx` is the exemplar: a single ~400-line view inlines ~9 distinct patterns (PageHeader, Badge, Divider, EmptyState, Callout, ListRow, Pagination) with raw `Div` + inline `designTokens` styles. Every view repeats subsets of these. The result: inconsistency risk, duplicated styling, and slow screen work. The Storybook review (epic #67, #72) surfaced this concretely.

### Desired Outcome

- A library of micro + macro components in `packages/ui`, each with a Storybook story, deployed to the Pages Storybook.
- App views refactored to compose them, shrinking bespoke layout to near-zero.
- A consistent, calm, restrained visual language across screens.

### Scope (In / Out)

#### In Scope
- Micro atoms: Badge, Divider, Callout, Avatar, Spinner, Icon wrapper, FieldLabel.
- Macro organisms: PageHeader, ListRow, DataCard, StatCard, EmptyState, FormField, ConfirmDialog, Pagination, Toolbar.
- Storybook stories for each; incremental refactor of app views to compose them.

#### Out of Scope
- A charting primitive (needed for StatCard trends) — evaluated separately.
- Visual redesign / rebrand — this keeps the existing calm/neutral token direction.
- expo-ui adoption (see ADR 0006).

### Source of truth (links)

Direct request from the accountable owner (2026-07-08) to "capture more Refero references, rebuild in Storybook, build micro/macro components so the UI just composes." Builds on epic #67 (Storybook) and #72 (component revamp). Design references pulled via Refero (Cohere/Anthropic/TwelveLabs/Linear API-console screens).

### Stakeholders

- Product/Technical Owner: @stephane-segning

### Success metrics

| Metric | Current | Target | Source |
| ------ | ------- | ------ | ------ |
| Recurring patterns available as named components | ~0 | full micro+macro set | Storybook |
| Inlined layout patterns in api-keys-list-view | ~9 | 0 | the rebuilt view |
| App views composed from the library | 0 | all core views | PRs under this epic |

### Child User Stories

1. Phase 1: 6 foundational components (Badge, Divider, Callout, EmptyState, PageHeader, ListRow) + rebuild api-keys-list-view (this PR).
2. Phase 2+: remaining atoms/organisms + refactor remaining views (subsequent tickets).

### Human accountable owner

@stephane-segning

### AI Usage Declaration

Research, Ticket decomposition, Technical proposal

### Human verification completed

- [x] I am the accountable owner and accept responsibility for this epic.

Start with apps/self-service/src/views/api-keys-list-view.tsx and the existing token system, then inspect packages/ui and the Storybook work from epics #67 and #72. The epic is complete when the specified micro and macro components have stories, are deployed to Pages Storybook, and core views compose them instead of duplicating layout.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.