Introdução

O Design System do MAX: tokens, fundamentos e componentes extraídos do protótipo, organizados na taxonomia do Material Design 3.

O que é

Este é o Design System do produto MAX. Ele nasce do protótipo (a fonte de verdade) e segue a estrutura de sistemas robustos como o Material Design 3: tokens (cor, tipografia, forma, elevação, movimento), fundamentos e componentes.

Como funciona

  • Tokens são a fonte única, em src/design-system/tokens/theme.css, com os nomes do M3 (primary, on-surface, surface-container, title-medium, etc.).
  • Tailwind v4 lê esses tokens e gera as utilities (bg-primary, text-on-surface, rounded-large). O reset (Preflight) não é carregado, para conviver com o CSS legado do protótipo sem mudança visual.
  • Componentes ficam em src/components e são importados pelo alias @components.

Uso

---
import Button from "@components/Button/Button.astro";
import Text from "@components/Text/Text.astro";
---
<Button variant="primary">Confirmar</Button>
<Text size="title-medium" tone="on-surface">Olá</Text>

Princípios

  • Tema escuro por padrão (produto financeiro mobile).
  • Hierarquia por opacidade de branco sobre superfícies escuras.
  • Roxo de marca (primary) como acento; ações primárias em superfície invertida.
  • Migração incremental: o legado convive e migra tela a tela.