# KitZ Brand System v1.0.0 | 2026-05-27 | https://kitz.services/branding

Machine-readable brand reference for Claude, GPT, Cursor, and other AI tools.

---

## Brand Identity

- **Product name:** KitZ (never "KitZ OS", "KitZ(OS)", or "Kitz")
- **Tagline:** Tu operación, más ágil con IA.
- **Audience:** Latin American SMBs (Panama-first, then LATAM-wide)
- **Design system:** Japandi Terminal — warm, editorial, light-only
- **Website:** https://kitz.services

## Logo

Black speech bubble with a white serif K (Playfair Display 700). The bubble has a tail pointing bottom-left. The K is centered inside.

- The K is always white on black — never inverted
- Minimum size: 24x24px
- No border-radius on the logo container
- When placed next to the wordmark "KitZ", use a 10px gap

---

## Color Palette

### Surfaces

| Token | Hex | Usage |
|-------|-----|-------|
| --kz-bone | #F9F6EF | Page background |
| --kz-paper | #F2EEE4 | Card/input background |
| --kz-paper-2 | #ECE7DA | Hover background |
| --kz-veil | #E5DECD | Overlay |
| --kz-card | #FDFBF6 | Elevated surface, email card |

### Ink

| Token | Hex | Usage |
|-------|-----|-------|
| --kz-ink | #1A1A1A | Primary text, CTA background, logo fill |
| --kz-ink-2 | #3A3733 | Headings, body text |
| --kz-ink-3 | #6E6A62 | Secondary text, muted labels |
| --kz-ink-4 | #9A9489 | Captions, footer text |

### Borders

| Token | Hex | Usage |
|-------|-----|-------|
| --kz-rule | #D9D2BF | Borders, dividers |
| --kz-rule-2 | #C7BFA8 | Active borders |

### Accents

| Token | Hex | Usage |
|-------|-----|-------|
| --kz-gold | #A68B5B | Links, highlights, CTA accents |
| --kz-gold-deep | #8C7244 | Hover gold |
| --kz-gold-soft | #D9C9A6 | Background accent |
| --kz-moss | #7A8B6F | Success states |
| --kz-moss-deep | #5E6E54 | Success hover |
| --kz-moss-soft | #BFCBB1 | Success background |

### Status

| Token | Hex | Usage |
|-------|-----|-------|
| --kz-warn | #B8884B | Warning |
| --kz-error | #A14B3C | Danger/error |
| --kz-whatsapp | #25D366 | WhatsApp green |

---

## Typography

### Font Families

| Role | Font | CSS Variable |
|------|------|-------------|
| Headings | Cormorant Garamond (400-500) | --kz-font-serif |
| Body / UI | JetBrains Mono (400-500) | --kz-font-mono |
| System fallback | Inter (400-600) | --kz-font-sans |
| Logo K | Playfair Display (700) | --kz-font-logo |

### Type Scale

| Name | Size | Weight | Family | Notes |
|------|------|--------|--------|-------|
| h1 | 26px | 500 | Serif | Page titles |
| h2 | 20px | 500 | Serif | Section headings |
| h3 | 16px | 500 | Serif | Subsections |
| body | 13.5px | 400 | Mono | Default body text |
| body-sm | 13px | 400 | Mono | Compact body |
| label | 12px | 500 | Mono | Form labels |
| button | 11px | 500 | Mono | Uppercase, 0.12em tracking |
| caption | 11px | 400 | Mono | Muted annotations |
| legal | 10px | 400 | Mono | Footer disclaimers |

---

## Design Rules

1. **Square corners** everywhere (border-radius: 0). Only exception: 9999px for avatars.
2. **Light only.** No dark mode. Japandi Terminal is a warm light aesthetic.
3. **Thin borders:** 1px using #D9D2BF (--kz-rule). Never heavy.
4. **Primary CTA:** #1A1A1A background, #FDFBF6 text, monospace 11px uppercase, 0 radius.
5. **Secondary CTA:** #FDFBF6 background, #1A1A1A text, 1px solid #D9D2BF border.
6. **Links:** Gold #A68B5B, no underline.
7. **Motion:** Transitions 150ms max. No bouncy springs. Respect prefers-reduced-motion.
8. **No cool blues, neon colors, or random gray ladders.**
9. **No serif in body text** unless intentional (greeting lines only).
10. **Product name is always "KitZ"** — never "KitZ OS".

---

## Voice Guide

- **Language:** Spanish-first (neutral LATAM), with English and Portuguese support
- **Tone:** Warm, direct — like a smart friend who gets business
- **No emojis** in professional material, subject lines, or formal comms
- **Subject lines:** Short, personal, no emojis
- **Email display name:** Always "KitZ"

---

## Agent Colors and Roles

| Agent | Color | Hex | Role |
|-------|-------|-----|------|
| Luna | Dusk Slate | #6E7A8C | SDR |
| Marco | Gold | #A68B5B | Account Exec |
| Nova | Terracotta | #B16A4F | Customer Success |
| Sage | Moss | #7A8B6F | Advisor |
| Flux | Warm Stone | #8C7A6E | Operations |
| Creativa | Plum | #6E5778 | Branding |

---

## Email Template Structure

1. Logo (black K box + monospace KitZ wordmark)
2. Gold rule (2px #A68B5B, 40px wide)
3. Greeting (serif, 26px, centered)
4. Body (monospace 13.5px, #3A3733, line-height 1.7)
5. CTA button(s)
6. Footer links (gold 11px monospace)
7. Legal footer (10px #C7BFA8 monospace)

---

## Component Specs

### Buttons

- **Primary:** bg #1A1A1A, text #FDFBF6, mono 11px, uppercase, 0.12em tracking, 0 radius
- **Secondary:** bg #FDFBF6, text #1A1A1A, border 1px solid #D9D2BF
- **Ghost:** bg transparent, text #A68B5B (gold)

### Cards

- **Elevated:** bg #FDFBF6, border 1px solid #D9D2BF, 0 radius
- **Flat:** bg #F2EEE4, no border
- **Hover state:** bg #ECE7DA, border 1px solid #C7BFA8

---

## Machine-Readable Files

| File | Format | Purpose |
|------|--------|---------|
| kitz-brand.tokens.json | W3C Design Tokens | Token integration |
| kitz-brand.css | CSS custom properties | Drop-in stylesheet |
| kitz-brand.tailwind.js | Tailwind preset | Tailwind projects |
| kitz-brand.md | Markdown | AI tool reference |
| llms.txt | Plain text | AI agent discovery |