frontend-design-systemlisted

# Frontend — Design System (compartilhado) Gera `docs/frontend/shared/03-design-system.md`. Documento **compartilhado** entre web, mobile e desktop. ## Contexto (ler uma vez) - `docs/blueprint/01-vision.md` — visao e identidade do produto (define a personalidade visual) - `docs/blueprint/04-domain-model.md` — entidades e termos do dominio - `docs/prd.md` — complemento - Template a preencher: `docs/frontend/shared/03-design-system.md` ## Convencoes - **Escrita:** doc so com `{{placeholders}}` → Write. Doc com conteudo real → Edit, inserindo antes de `<!-- APPEND:... -->`. Alteracao pontual → `/blueprint:increment`. - **Origem:** marque conteudo derivado com `<!-- do blueprint: XX-arquivo.md -->`. - **Versoes:** bibliotecas de UI → `mcp__context7__resolve-library-id` → `mcp__context7__query-docs`. - **Perguntas:** as escolhas de tipografia e paleta **sao** as perguntas desta skill — apresente opcoes em vez de decidir sozinho. ## Cobertura - **Design Tokens**: cores, tipografia, espacamento, breakpoints - **Temas**: light/dark/custom — implementacao e alternancia - **Ferramentas**: Figma, Storybook - **Catalogo de Componentes Base**: primitivos (Button, Input, Typography, ...) --- ## Tipografia — Google Fonts via Fontpair Escolha um par (heading + body) em https://www.fontpair.co/all usando Google Fonts. 1. Analise a **visao e identidade do produto** (`docs/blueprint/01-vision.md`) 2. Escolha a **categoria** que representa a personalidade do produto: | Categoria | Qu