Pen (rebrand and screens)
Download the Kasy design system as a Pen file, change the brand, and ask an AI to implement it in Flutter.
Kasy also ships its 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). You 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 the variables (colors, font), and the editor's AI
applies it to Flutter.
Pen is one of two design tool options for Kasy, the other is Figma. Both deliver the exact same design system (same color, spacing, radius, and typography tokens), and both have their own MCP, usable from any IDE (Cursor, Claude Code, Claude Desktop…). Pick whichever you prefer; this page covers the Pen path.
Pen is only one piece. The in-app Design System screen mirrors the code;
DESIGN_SYSTEM.md is the AI contract. Roles of all three: Design System.
With the Kasy MCP, a rebrand is a conversation. Ask "rebrand my app" and the rebrand_project tool asks the essentials (brand document, logo, typography, Pen file), shows a preview and only applies after your yes. The instructions come through the MCP, with an active subscription. They are not a public page and not a file in the project.
Implementation
Downloading the design system
Unlike Figma, Pen has no cloud page to "duplicate" from: it's an actual zip you download once, and it's already yours.
- Download
Kasy-Design-System.zipfrom the link above. - Unzip it, you get a folder with the
.penfile and the images it uses, side by side. Don't separate the.penfrom the images, or it loses them. - Open the
.penfile (from inside the extracted folder) in the Pen desktop app (get it at pen.dev if you don't have it yet). - Keep the Pen app open with that file while you ask the AI to work on it, the Pen MCP talks to the running app, not to a link.
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. Prompt for the AI
With the Kasy MCP installed, just ask: "rebrand my app from my Pen file: [URL]". The rebrand_project tool (designTool: "pen") asks what is missing, shows a preview and only applies after your yes.
Use the Kasy MCP tool rebrand_project, with designTool "pen".
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 in lib/core/theme/colors.dart
(KasyColors.light() and KasyColors.dark()), not just the primary color.
If the background changed, update the splash color in pubspec.yaml.
Check the Design System in the app (light and dark).
flutter analyze with no errors.New screens: with the Kasy MCP installed, ask "create the [name] screen like the Pen frame: [URL]". The create_screens tool builds immediately.
4. Check it in the app
kasy run --webHome → Design System. Toggle light/dark in Settings.
Only create new screens after the rebrand is correct.
Creating a new screen
- Design it in the same Pen file (or a new one), using the same variables.
- Ask the AI to implement the frame (faithful, functional, Kasy components, i18n).
- Run
kasy run --weband test it.
Information
What ships in the project
After kasy new:
| File | What it is |
|---|---|
DESIGN_SYSTEM.md | Design-system contract for AI/devs (not where you edit colors) |
The rebrand and screen-building instructions are not shipped in the project. They come through the MCP, with an active subscription.
The design system doesn't ship as a ready-made project file: download it from
the link above. Screens for your product can live in the same .pen file
or a new one.
Useful commands
| Command | For what |
|---|---|
kasy new | Creates the project (includes Pen and Figma docs) |
kasy run --web | Runs it in the browser |
flutter analyze | Should come back clean |
Common mistakes
| Problem | What to do |
|---|---|
| Pen tool won't connect | Open (or reopen) the file in the Pen app, it needs to be running |
| App is still the old color | Sync all colors, not just the primary one |
| The AI used raw Material | Ask for KasyButton, KasyCard, KasyTextField |
| Color outside the mockup | Check the design system before the code |
Summary
- Rebrand in Pen's variables → AI →
lib/core/theme/. - Screens in the same file → AI → faithful and functional.
- Color outside the DS → the AI flags it, doesn't hardcode it.
See also Figma (the other design option), Colors and Design System.
Last updated on 11/03/2026