# Figma: rebrand and screens

Kasy ships the design system as a **Figma Community** file. Duplicate it to
your account, edit colours and font, then let your AI assistant sync Flutter.

**Duplicate link:**
https://www.figma.com/design/S083trj2ctFrEFNjcavtpC/Kasy-Design-System/duplicate

Figma is only **one** piece. 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/figma-guia.md` | This guide offline in your project language |
| `docs/figma-workflow.md` | Rules for AI assistants (English) |
| `DESIGN_SYSTEM.md` | Design-system contract for AI/devs |

The design system is **not** copied as a local file. Use the link above.

Product screens live in a **separate** Figma file you create, e.g. `My App`.

---

## Duplicate the design system

1. Open the duplicate link above (free Figma account required).
2. Save a copy to your **Drafts**.
3. Open the duplicated file in Figma.

---

## Rebrand in 4 steps

### 1. Open Variables

In Figma: **Local variables** → collection **Kasy Colors**.

Modes: **Light** and **Dark**. Colour order matches the app: Accent, Default,
Success, Warning, Danger, Foreground, Background, Surface, Form field,
Separator, Other.

### 2. Change your brand

- **brand/primary/base:** main brand color (CTA buttons). In Dart:
  `context.colors.primary`. Kit example: light `#0553B1`, dark `#2563EB`
  (bound on Sign In in the Figma master). Dark links use `text/link`
  (`foregroundLink`, `#4BA3FF`). No `brand/secondary`.
- **color/background/background** or **background/base:** page background
  (also affects splash). In Dart: `context.colors.background`.
- **color/foreground/foreground** or **foreground/base:** main text.
- Product fonts: **Poppins** (single family: Display, headings, body/UI). Figma
  and the app use the same family. To migrate an old file (Inter/Nunito), run
  the **Kasy Poppins Sync** plugin (`tools/kasy-figma-poppins-sync/`). To
  regenerate tokens from scratch, use **Kasy DS Generator**
  (`tools/kasy-figma-generator/`).

### 3. Paste the prompt for AI

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

My Figma file: [PASTE YOUR DUPLICATED FILE URL]
Use Figma MCP get_variable_defs on page 01 Tokens.

Sync ALL colours into lib/core/theme/colors.dart
(KasyColors.light() and .dark()), not accent only.

If background changed, update splash colour in pubspec.yaml.

Verify on Design System screen (light + dark).
flutter analyze clean.
```

### 4. Verify in the app

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

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

Build new screens **only after** rebrand looks correct.

---

## Icon, logo, and favicon

After `kasy new`, brand artwork lives in `assets/branding/`:

| File | Used for | Command |
| ---- | -------- | ------- |
| `app-icon.png` | App launcher icon (iOS/Android) | `kasy icon --image ...` |
| `logo-light.png` / `logo-dark.png` | In-app logo (login, sidebar) | `kasy splash` (keeps in sync) or replace the file |
| `splash-logo-light.png` / `splash-logo-dark.png` | Native splash | `kasy splash --light ... --dark ...` |
| `favicon.png` | Browser tab / PWA | `kasy favicon --image ...` |

Manual: replace the PNG, then run `dart run flutter_launcher_icons` (icon/favicon)
or `dart run flutter_native_splash:create` (splash). Docs:
[Icon](https://kasy.dev/docs/personalizacao/icone),
[Splash](https://kasy.dev/docs/personalizacao/splash),
[Favicon](https://kasy.dev/docs/personalizacao/favicon).

---

## Create a new screen

### 1. Design

Create a Figma file `My App`. Use the **same variables** as the design system.

### 2. Prompt for the AI

```
Read docs/figma-workflow.md.
My screens file: [FIGMA URL]
Implement the screen [FRAME NAME].
Faithful to the layout, functional (buttons, fields, navigation).
Kasy components, tokens, i18n (pt, en, es).
If a colour 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 |
| ------- | ---------- |
| App is still blue | Ask to sync **all** colours, not just accent |
| AI used raw Material | Ask for `KasyButton`, `KasyCard`, `KasyTextField` |
| Colour differs from the mockup | It goes into the design system first, then into code |
| Hardcoded text in Dart | Everything via i18n |

---

## Summary

1. **Rebrand** in Figma (variables) → AI → `lib/core/theme/`.
2. **Screens** in the app file → AI → faithful and functional.
3. **Colour outside the DS** → AI warns you, no hardcoding.

See also [Colors](https://kasy.dev/docs/personalizacao/cores) and
[Design System](https://kasy.dev/docs/conceitos/design-system).