# Pen: rebrand e telas

O Kasy também entrega o design system como arquivo do **Pen** (pen.dev — o
mesmo produto que já foi chamado de "Pencil"; se você ver `pencil` em algum
nome de pacote ou ferramenta, é a mesma coisa). Você baixa uma pasta zipada
(o arquivo `.pen` e as imagens que ele usa, juntos), extrai, abre o `.pen` no
app do Pen no seu computador, edita as cores e a fonte, e a IA do editor aplica
no Flutter.

**Link para baixar:**
https://xkefozfsrmqjtesiitvk.supabase.co/storage/v1/object/public/design-downloads/Kasy-Design-System.zip

Diferente do Figma, o Pen não tem uma página na nuvem pra "duplicar": você
baixa o zip uma vez, extrai a pasta, e o `.pen` de dentro dela já é seu, aberto
localmente no app do Pen. **Não separe o `.pen` das imagens** — elas têm que
continuar na mesma pasta, senão o arquivo perde as imagens.

Pen é só **uma** das peças (a outra é o Figma — os dois entregam o mesmo
resultado, escolha o que preferir). A tela Design System no app espelha o
código; o `DESIGN_SYSTEM.md` é o contrato pra IA (régua, não tabela de cores
pra editar). No site: docs → Conceitos → Design System.

---

## O que vem no projeto

Depois de `kasy new`, você tem:

| Arquivo | O que é |
| ------- | ------- |
| `docs/pen-guia.md` | Este guia offline no idioma do projeto |
| `docs/pen-workflow.md` | Regras para a IA (inglês) |
| `docs/figma-guia.md` | O mesmo guia, só que pro Figma |
| `DESIGN_SYSTEM.md` | Contrato do design system pra IA/dev |

O design system **não** vem pronto como arquivo local do projeto. Use o link
acima pra baixar sua cópia do Pen (ou o link de duplicate do Figma, se preferir
essa ferramenta).

---

## Baixando a pasta

1. Abra o link acima e baixe `Kasy-Design-System.zip`.
2. Extraia o zip — vira uma pasta com o arquivo `.pen` **e** as imagens que ele
   usa, lado a lado. Não mova o `.pen` pra fora dessa pasta.
3. Abra o `.pen` (de dentro da pasta extraída) no **app do Pen** (baixe o app
   em pen.dev, se ainda não tiver).
4. Deixe o app do Pen **aberto com o arquivo** enquanto pede pra IA mexer nele
   — o MCP do Pen conversa com o app que está rodando, não com um link ou
   caminho de arquivo. Se uma ferramenta do Pen der erro de conexão, o problema
   normalmente é esse: o app fechado ou o arquivo não aberto.

---

## Rebrand em 4 passos

### 1. Abrir as variáveis

No Pen: encontre a coleção de variáveis de cor do arquivo (o equivalente às
"Variables" do Figma).

### 2. Mudar sua marca

- **Cor principal (primary/accent):** comece por aqui.
- **Cor de fundo (background):** também afeta a splash.
- **Cor do texto (foreground).**
- Fonte padrão do kit: Poppins.

### 3. Colar o prompt na IA

Abra a pasta do projeto no Cursor e cole:

```
Leia AGENTS.md e docs/pen-workflow.md.

Meu design system está aberto no app do Pen agora.
Chame get_editor_state e depois get_variables pra ler os tokens.

Sincronize TODAS as cores em lib/core/theme/colors.dart
(KasyColors.light() e KasyColors.dark()), não só a cor principal.

Se o fundo mudou, atualize a cor do splash no pubspec.yaml.

Confira na tela Design System do app (claro e escuro).
flutter analyze sem erros.
```

### 4. Conferir no app

```bash
kasy run --web
```

Vá em **Home → Design System**. Alterne tema claro/escuro em Configurações.

Só crie telas novas **depois** que o rebrand estiver certo.

---

## Criar uma tela nova

### 1. Desenhar

No mesmo arquivo do Pen (ou em um novo), usando as mesmas variáveis do design
system, peça pra IA desenhar a tela com você — diferente do Figma, a IA do Pen
consegue desenhar direto no arquivo, não só ler.

### 2. Prompt para a IA

```
Leia docs/pen-workflow.md.
Minha tela está na página/frame [NOME] do arquivo do Pen aberto agora.
Implemente essa tela.
Fiel ao layout, funcional (botões, campos, navegação).
Componentes Kasy, tokens, i18n (pt, en, es).
Se alguma cor não existir no design system, avise antes de codar.
flutter analyze limpo.
```

### 3. Testar

```bash
kasy run --web
```

---

## Erros comuns

| Problema | O que fazer |
| -------- | ----------- |
| Ferramenta do Pen não conecta | Abra (ou reabra) o arquivo no app do Pen — precisa estar rodando |
| App continua com a cor antiga | Peça sync de **todas** as cores, não só a principal |
| IA usou Material cru | Peça `KasyButton`, `KasyCard`, `KasyTextField` |
| Cor diferente do mockup | Primeiro entra no design system, depois no código |

---

## Resumo

1. **Rebrand** nas variáveis do Pen → IA → `lib/core/theme/`.
2. **Telas** no mesmo arquivo → IA → fiel e funcional.
3. **Cor fora do DS** → IA avisa, não hardcode.

Veja também [Cores](https://kasy.dev/docs/personalizacao/cores),
[Figma](https://kasy.dev/docs/personalizacao/figma) (a outra opção de design)
e [Design System](https://kasy.dev/docs/conceitos/design-system).