Design System
Tipografia, cores, componentes Kasy e como personalizar sem quebrar o app.
O app gerado já vem com design system centralizado. Mudou um token num lugar, muda no app inteiro (web, iOS, Android).
Princípio: clean, moderno, minimalista. A tela Home é a referência visual.
Três lugares, três papéis
Não são três fontes de verdade. Cada um serve pra uma coisa:
| Lugar | Pra quê | Quando você mexe |
|---|---|---|
| Figma (arquivo Community) | Rebrand e desenho. Você vê a marca, troca variables, monta telas novas. | Uma vez no rebrand (e quando inventar UI nova). Depois a IA leva os números pro código. |
| Home → Design System / Components (no app) | Visualizar o que já está no código: tokens, variantes, estados. É o espelho vivo. | Não “edita” tokens aqui. Só confere claro/escuro depois do rebrand. |
DESIGN_SYSTEM.md (na raiz do projeto) | Contrato pra IA e dev: use token, use KasyButton, nested card = filled, etc. | Quase nunca. Atualiza quando o comportamento do kit muda, não a cada troca de cor. |
A fonte que o app executa é só o código: lib/core/theme/ + lib/components/.
Por que não dropar o .md e deixar a IA “seguir a tela”? A tela roda no Flutter. A IA do editor lê arquivos do repo. Sem o contrato escrito, ela inventa Material cru e número hardcoded (já vimos isso com Card). O .md é barato de manter se ficar como régua, não como cópia de toda tabela de token.
Fluxo típico de rebrand: Figma (variables) → IA sincroniza colors.dart / theme → confere na tela Design System do app. Detalhe em Figma (rebrand e telas).
Camadas
| Camada | Onde | Exemplo |
|---|---|---|
| Tipografia | KasyTextTheme | context.textTheme.pageTitle |
| Ícones | KasyIconSize | KasyIconSize.rowLeading |
| Espaçamento | KasySpacing | KasySpacing.md (16) |
| Raios | KasyRadius | KasyRadius.lg (16) |
| Cores | context.colors.* | Resolve claro/escuro sozinho |
| Componentes | lib/components/ | KasyButton, KasyCard, KasyTextField |
Pelo MCP: antes de criar ou editar qualquer tela, o assistente deveria chamar list_components, ela escaneia lib/components/ ao vivo (não uma lista fixa) e devolve cada KasyXxx com o resumo de uso, pra nunca inventar Material cru quando já existe um componente Kasy pra isso. Veja MCP do Kasy.
KasyScreen
Envolva telas novas em KasyScreen para herdar fundo, gutter, largura máxima (~600) e card opcional:
KasyScreen(
title: 'Minha tela',
child: ...,
)Você não fica preso
Rebrand = trocar tokens (cor primária, tipografia) num lugar. Componentes aceitam variantes e overrides.
Guard-rail opcional
dart run tool/design_check.dartAvisa quando uma tela usa valor cru (cor/fonte Material direto) em vez do design system. Opcional, não bloqueia build.
Atualizado em 03/11/2026