# ZeScale — Brand Kit

Single source of truth for ZeScale's visual identity. Everything you
need to put ZeScale anywhere : press, partner pages, social, Shopify
App Store, ads, decks, swag.

Public download : `https://zescale.co/brand-kit/` (the whole folder
is statically served).

---

## 1. The mark

ZeScale's identity revolves around a bold **Z mark** : a stylized
capital Z built on diagonal strokes, sitting on a navy-to-electric-blue
radial-gradient field with a small emerald spark in the corner
(suggests AI energy without being literal).

The Z reads clearly down to a 32×32 favicon. Keep its surrounding
clear-space equal to ½× the Z's height in every direction.

### Logo files

| File | Use case | Dimensions | Format |
|---|---|---|---|
| `logo/zescale-logo-color.png` | Light backgrounds (default) | 1200×500 | PNG |
| `logo/zescale-logo-white.png` | Dark backgrounds, press, video | 932×268 | PNG |
| `logo/zescale-logo-compact.png` | Small contexts, sidebars | 275×183 | PNG |
| `logo/zescale-logo-email.png` | Email signatures (matches Gmail/Outlook DPR) | 275×183 | PNG |

### Icon files (square, app/marketplace use)

| File | Use case | Dimensions | Format |
|---|---|---|---|
| `icon/zescale-icon-1200.png` | Press, social profile pic | 1200×1200 | PNG |
| `icon/zescale-icon-512.jpg` | Embedding in emails / docs | 512×512 | JPG |
| `icon/zescale-app-icon-1200.jpg` | **Shopify App Store** (≤ 1 MB limit) | 1200×1200 | JPG (98 KB) |
| `icon/zescale-app-icon-1200.png` | iOS / Android stores fallback | 1200×1200 | PNG flat 24-bit |
| `icon/zescale-app-icon-1024.png` | iOS App Store (1024 spec) | 1024×1024 | PNG |

### Favicon set (web)

| File | Use case | Dimensions |
|---|---|---|
| `favicon/favicon.ico` | Legacy browser tab fallback | 16/32/48 multi-res |
| `favicon/favicon-1024.png` | Source PNG (high-res) | 1024×1024 |
| `favicon/icon-192.png` | PWA manifest (small) | 192×192 |
| `favicon/icon-512.png` | PWA manifest (large) | 512×512 |
| `favicon/apple-icon-180.png` | iOS home-screen icon | 180×180 |

### Don'ts — what NOT to do with the mark

- ❌ Don't recolor the Z. It's white on the gradient. Always.
- ❌ Don't apply drop shadows, glows, or "3D" tilts.
- ❌ Don't rotate, skew, or stretch.
- ❌ Don't place on busy photographic backgrounds. Use the gradient or
      a solid brand color.
- ❌ Don't reintroduce `mix-blend-multiply` to fake transparency — the
      logos already have a real alpha channel (via `strip-white-bg.js`).
- ❌ Don't use the old pre-2026 wordmark in any new asset.

---

## 2. Color palette

Single bold accent : **ZeScale Blue `#448EEF`**. Used sparingly — one
primary button or accent per surface, never as decoration. Other accents
exist to categorize content (one color = one meaning), not to decorate.

### Primary

| Token | Hex | Use |
|---|---|---|
| **Navy** | `#0E0B3D` | Headlines, body text on light, dark surface backgrounds |
| **Brand blue** | `#448EEF` | Primary CTAs, links, brand accents |
| **Blue dark** | `#2B6FD4` | Hover state for brand blue |
| **Blue light** | `#EDF4FF` | Selected row tint, info banners |
| **White** | `#FFFFFF` | Body background, card surfaces |

### Categorical accents (one meaning each — DO NOT decorate)

| Token | Hex | Used to flag |
|---|---|---|
| Purple | `#7214FF` | UGC / video tools |
| Cyan | `#21DDFF` | API / developer surfaces |
| Gold | `#FFC933` | Premium tier, upgrades |
| Orange | `#F87B45` | Trials, time-bound offers |
| Pink | `#F6285F` | Affiliate / referral |
| Green | `#22C55E` | Success, "active" state |
| Red | `#EF4444` | Error, destructive |

### Neutrals

| Token | Hex | Use |
|---|---|---|
| Ink-2 | `#535479` | Secondary body text |
| Ink-3 | `#6C6F93` | Tertiary text, captions, eyebrows |
| Muted | `#B3B8D0` | Disabled, placeholders |
| Line | `#F3F5FB` | Hairline borders |
| Soft | `#F7F9FC` | Section backgrounds |

→ Ready-to-paste tokens : `colors.css` (CSS vars) and
   `tailwind-tokens.js` (Tailwind config).

---

## 3. Typography

| Role | Font | Where |
|---|---|---|
| Body, UI | **Geist Sans** | Everything by default |
| Eyebrow, technical | **Geist Mono** (uppercase, letter-spacing 0.16em) | Section labels, badges |
| Accent / italic | **Instrument Serif Italic** | ONE word per headline, max |

Fonts ship via `next/font/google` in the codebase. For external use
(decks, partner pages), grab them from :
- Geist Sans / Mono : https://vercel.com/font (free, OFL)
- Instrument Serif : https://fonts.google.com/specimen/Instrument+Serif (Google Fonts, OFL)

### Type scale (web)

| Style | Size | Line-height | Weight | Class (codebase) |
|---|---|---|---|---|
| Display | 64px / 72px | 1.05 | 700 | `text-display` |
| H1 | 48px / 56px | 1.1 | 650 | `text-h1` |
| H2 | 32px / 40px | 1.15 | 650 | `text-h2` |
| H3 | 22px / 28px | 1.25 | 600 | `text-h3` |
| Body-lg | 18px / 28px | 1.55 | 400 | `text-body-lg` |
| Body | 16px / 24px | 1.5 | 400 | `text-body` |
| Caption | 13px / 18px | 1.4 | 500 | `text-caption` |
| Eyebrow | 12px / 16px | 1 | 600 (mono, uppercase) | `.eyebrow` |

---

## 4. Voice & copy

- **Concise, decisive, no fluff.** Cut hedging ("might", "could be").
  Make claims and own them.
- **Numbers over adjectives.** "+10 000 utilisateurs" beats "popular".
  The "+10 000" copy is the ONLY user-count line allowed in marketing.
- **Never name AI providers** in user-facing UI (no Claude/Anthropic/
  OpenAI/fal.ai/Stability mentions). Backend code, env vars, system
  prompts : fine. Frontend visible to a customer : never.
- **CTA copy** : "Commencer maintenant" or "Commencer". Never
  "Commencer gratuitement". No "Voir la démo" secondary CTA.
- **No green success toasts.** Inline UI state only. `toast.error` and
  `toast.info` are OK.
- **Single CTA per section.** Hero, pricing, contact — all one button.

---

## 5. Usage rights

These assets are property of **SIMEO LLC** (operating as ZeScale).
You may use them :

- ✅ To reference, link to, or write about ZeScale (press, blogs,
      reviews).
- ✅ As partner / integration logos on your own marketing surfaces
      (Shopify app pages, partner directories, etc.).
- ✅ Inside ZeScale-funded ads, decks, and content.

You may NOT :

- ❌ Imply ZeScale endorses your product without explicit written
      agreement.
- ❌ Modify the mark (recolor, redraw, stretch, animate).
- ❌ Use ZeScale assets to promote competing AI image / video
      generation products.

For press inquiries or extended licensing : **`press@zescale.co`** (or
`contact@zescale.co` while press@ propagates).

---

## 6. Files in this kit

```
brand-kit/
├── BRAND.md                          ← you are here
├── colors.css                        ← CSS variables (paste into any project)
├── tailwind-tokens.js                ← Tailwind extend.colors config
├── logo/
│   ├── zescale-logo-color.png        1200×500 — primary
│   ├── zescale-logo-white.png         932×268 — on dark
│   ├── zescale-logo-compact.png       275×183 — small surfaces
│   └── zescale-logo-email.png         275×183 — email-optimized
├── icon/
│   ├── zescale-icon-1200.png         1200×1200 — social profile
│   ├── zescale-icon-512.jpg           512×512  — emails / docs
│   ├── zescale-app-icon-1200.jpg     1200×1200 — Shopify App Store (98 KB)
│   ├── zescale-app-icon-1200.png     1200×1200 — iOS/Android fallback
│   └── zescale-app-icon-1024.png     1024×1024 — iOS App Store
└── favicon/
    ├── favicon.ico                              — legacy
    ├── favicon-1024.png              1024×1024 — source
    ├── icon-192.png                   192×192  — PWA small
    ├── icon-512.png                   512×512  — PWA large
    └── apple-icon-180.png             180×180  — iOS home screen
```

Need a one-file download ? Grab `zescale-brand-kit.zip` (same content,
zipped) from the same folder — built by the same script.

---

**Last updated** : 2026-05-24
**Maintained by** : the ZeScale team
**Contact for assets** : `contact@zescale.co`