# Pen: rebrand and screens

Kasy also ships the design system as a **Pen** file (pen.dev — the same
product that used to be called "Pencil"; if you see `pencil` in a package
name or tool name, it's the same thing). Download a zipped folder (the `.pen`
file and the images it uses, together), unzip it, open the `.pen` file in the
Pen desktop app, edit colors and font, then let your AI assistant sync it
into Flutter.

**Download link:**
https://xkefozfsrmqjtesiitvk.supabase.co/storage/v1/object/public/design-downloads/Kasy-Design-System.zip

Unlike Figma, Pen has no cloud page to "duplicate" from: you download the zip
once, unzip it, and the `.pen` file inside is already yours, opened locally in
the Pen app. **Don't separate the `.pen` from the images** — they need to stay
in the same folder, or the file loses its images.

Pen is only **one** of the pieces (the other is Figma — both deliver the same
result, pick whichever you prefer). The in-app Design System screen mirrors
the code; `DESIGN_SYSTEM.md` is the AI contract (a ruler, not a color table to
edit). On the site: docs → Concepts → Design System.

---

## What you get in the project

After `kasy new`:

| File | What it is |
| ---- | ---------- |
| `docs/pen-guia.md` | This guide offline in your project language |
| `docs/pen-workflow.md` | Rules for AI assistants (English) |
| `docs/figma-guia.md` | The same guide, for Figma instead |
| `DESIGN_SYSTEM.md` | Design-system contract for AI/devs |

The design system is **not** copied as a ready-made local project file. Use
the link above to download your Pen copy (or the Figma duplicate link, if you
prefer that tool).

---

## Downloading the folder

1. Open the link above and download `Kasy-Design-System.zip`.
2. Unzip it — you get a folder with the `.pen` file **and** the images it uses,
   side by side. Don't move the `.pen` file out of that folder.
3. Open the `.pen` file (from inside the extracted folder) in the **Pen
   desktop app** (get it at pen.dev if you don't have it yet).
4. Keep the Pen app **open with that file** while you ask the AI to work on
   it — the Pen MCP talks to the app that's currently running, not to a link
   or file path. If a Pen tool errors with a connection message, that's
   usually why: the app is closed or the file isn't open.

---

## Rebrand in 4 steps

### 1. Open the variables

In Pen: find the file's color variable collection (Figma's "Variables"
equivalent).

### 2. Change your brand

- **Primary/accent color:** start here.
- **Background color:** also affects the splash.
- **Foreground (text) color.**
- Kit default font: Poppins.

### 3. Paste the prompt for AI

```
Read AGENTS.md and docs/pen-workflow.md.

My design system is open in the Pen desktop app right now.
Call get_editor_state, then get_variables to read the tokens.

Sync ALL colors into lib/core/theme/colors.dart
(KasyColors.light() and .dark()), not just the primary color.

If the background changed, update the splash color in pubspec.yaml.

Check the Design System screen in the app (light and dark).
flutter analyze with no errors.
```

### 4. Verify in the app

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

Open **Home → Design System**. Toggle light/dark in Settings.

Only create new screens **after** the rebrand looks correct.

---

## Creating a new screen

### 1. Design

In the same Pen file (or a new one), using the same design-system variables,
ask the AI to design the screen with you — unlike Figma, Pen's AI can draw
directly in the file, not just read it.

### 2. Prompt for the AI

```
Read docs/pen-workflow.md.
My screen is on page/frame [NAME] in the Pen file that's open right now.
Implement that screen.
Faithful to the layout, functional (buttons, fields, navigation).
Kasy components, tokens, i18n (pt, en, es).
If a color doesn't exist in the design system, warn me before coding.
flutter analyze clean.
```

### 3. Test

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

---

## Common issues

| Problem | What to do |
| ------- | ---------- |
| Pen tool won't connect | Open (or reopen) the file in the Pen app — it needs to be running |
| App still shows the old color | Ask to sync **all** colors, not just the primary one |
| AI used raw Material | Ask for `KasyButton`, `KasyCard`, `KasyTextField` |
| Color differs from the mockup | It goes into the design system first, then into code |

---

## Summary

1. **Rebrand** in Pen's variables → AI → `lib/core/theme/`.
2. **Screens** in the same file → AI → faithful and functional.
3. **Color outside the DS** → AI warns you, no hardcoding.

See also [Colors](https://kasy.dev/docs/personalizacao/cores),
[Figma](https://kasy.dev/docs/personalizacao/figma) (the other design option),
and [Design System](https://kasy.dev/docs/conceitos/design-system).