Extraia um design system de um screenshot

Transforme uma tela de referência em tokens e componentes reutilizáveis, em vez de uma pilha de classes Tailwind avulsas.

I am attaching a screenshot of a UI I like. Do not copy its content or brand — extract its system.

STEP 1 — TOKENS
List the design tokens you can infer:
- Colour scale (background, surface, border, text primary/secondary, one accent) as HSL values.
- Type scale with font sizes, weights and line heights.
- Spacing scale, border radii, shadow levels.
Output them as CSS custom properties plus the matching Tailwind theme extension.

STEP 2 — PRIMITIVES
Implement Button (3 variants, 3 sizes), Input, Select, Card, Badge, Tabs and Table using only those tokens. No hardcoded hex values anywhere.

STEP 3 — PROOF
Build one page that uses every primitive so I can review them together.

RULES
- Semantic tokens only: components reference --border, never a raw colour.
- Every interactive component has hover, focus-visible and disabled states.
- Keep it framework-plain: React + Tailwind, no extra UI dependency.