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.

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

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.

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.zip from the link above.
Unzip it — you get a folder with the .pen file and the images it uses, side by side. Don't separate the .pen from the images, or it loses them.
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).
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, the design-system-guide resource already reads AGENTS.md and docs/pen-workflow.md on its own, so the assistant knows this workflow even without pasting the whole prompt.

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 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 follow the same principle, with one difference: Pen's AI can draw directly in the file (batch_design), not just read it — ask it to "design the [name] screen with me in Pen" before moving to code, if you want.

4. Check it in the app

kasy run --web

Home → 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 --web and test it.

Information

What ships in the project

After kasy new:

File	What it is
`docs/pen-guia.md`	This offline guide, in the project's language
`docs/pen-workflow.md`	Rules for the AI (English)
`docs/figma-guia.md`	Same guide, for Figma instead — the project ships with both
`docs/figma-workflow.md`	Rules for the AI about Figma (English)
`DESIGN_SYSTEM.md`	Design-system contract for AI/devs (not where you edit colors)

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 08/02/2026

Pen (rebrand and screens)

On this page