# Kroni Design System v2 — Brand & Asset Reference

> **Canonical machine-readable reference for the Kroni brand.**
> Public URLs below. Use directly in HTML decks, presentations, emails, ads — copy `<img src>`, download, or paste.
> Live source: <https://kroni-brandbook-v2.vercel.app/design.md> · Interactive brand book: <https://kroni-brandbook-v2.vercel.app>

**Asset base URL:** `https://kroni-brandbook-v2.vercel.app/logos_v3/`

All logo files are public static assets — no auth required to fetch them. The interactive brand book page is password-gated, but the raw files (and this doc) are not. So any Claude-generated HTML/presentation can embed them by URL.

---

## How to use (for Claude / agents building HTML)

```html
<!-- Master logo on light background -->
<img src="https://kroni-brandbook-v2.vercel.app/logos_v3/kroni_base_black.svg" alt="Kroni" style="height:48px">

<!-- Master logo on dark background -->
<img src="https://kroni-brandbook-v2.vercel.app/logos_v3/kroni_base_gray.svg" alt="Kroni" style="height:48px">

<!-- Product lockup -->
<img src="https://kroni-brandbook-v2.vercel.app/logos_v3/kroni_atlas_rec_black.svg" alt="Kroni Atlas" style="height:40px">
<img src="https://kroni-brandbook-v2.vercel.app/logos_v3/kroni_go_rec_black.svg" alt="Kroni Go" style="height:40px">
```

**Rule of thumb:** prefer `.svg` for any logo (crisp at any size). Use `_black` on light backgrounds, `_gray` on dark backgrounds. Use `.png` only when SVG isn't supported (some email clients).

---

## 1. Logo assets — public URLs

Base = `https://kroni-brandbook-v2.vercel.app/logos_v3/`

### Master logo (Kroni)

| Asset | On | File | URL |
|-------|----|------|-----|
| Wordmark + isotype | light bg | `kroni_base_black.svg` | `…/logos_v3/kroni_base_black.svg` |
| Wordmark + isotype | light bg | `kroni_base_black.png` | `…/logos_v3/kroni_base_black.png` |
| Wordmark + isotype | dark bg | `kroni_base_gray.svg` | `…/logos_v3/kroni_base_gray.svg` |
| Wordmark + isotype | dark bg | `kroni_base_gray.png` | `…/logos_v3/kroni_base_gray.png` |
| Legacy wordmark | — | `logo_kroni.png` | `…/logos_v3/logo_kroni.png` |

### Isotype (cohete 4-puntas, símbolo solo)

| Variant | File | URL |
|---------|------|-----|
| Navy / base | `kroni_isotype_black.svg` · `.png` | `…/logos_v3/kroni_isotype_black.svg` |
| Gray (dark bg) | `kroni_isotype_gray.svg` · `.png` | `…/logos_v3/kroni_isotype_gray.svg` |
| Atlas purple `#7C4DFF` | `kroni_isotype_atlas.svg` · `.png` | `…/logos_v3/kroni_isotype_atlas.svg` |
| Go cyan `#00E1FF` | `kroni_isotype_go.svg` · `.png` | `…/logos_v3/kroni_isotype_go.svg` |

### Kroni Atlas (fulfillment B2B)

| Asset | File | URL |
|-------|------|-----|
| Lockup rec · light | `kroni_atlas_rec_black.svg` · `.png` | `…/logos_v3/kroni_atlas_rec_black.svg` |
| Lockup rec · dark | `kroni_atlas_rec_gray.svg` · `.png` | `…/logos_v3/kroni_atlas_rec_gray.svg` |
| Square · light | `kroni_atlas_square_black.svg` · `.png` | `…/logos_v3/kroni_atlas_square_black.svg` |
| Square · dark | `kroni_atlas_square_gray.svg` | `…/logos_v3/kroni_atlas_square_gray.svg` |
| App icon 1024 | `kroni_atlas_app_icon.png` | `…/logos_v3/kroni_atlas_app_icon.png` |
| Background 1:1 (social) | `kroni_atlas_background_black.svg` · `.png` | `…/logos_v3/kroni_atlas_background_black.png` |
| Background purple simple | `kroni_atlas_background_purple_simple.jpg` | `…/logos_v3/kroni_atlas_background_purple_simple.jpg` |

### Kroni Go (envíos SMB)

| Asset | File | URL |
|-------|------|-----|
| Lockup rec · light | `kroni_go_rec_black.svg` · `.png` | `…/logos_v3/kroni_go_rec_black.svg` |
| Lockup rec · dark | `kroni_go_rec_gray.svg` · `.png` | `…/logos_v3/kroni_go_rec_gray.svg` |
| Cuadrada · light | `kroni_go_cuadrada.svg` · `.png` | `…/logos_v3/kroni_go_cuadrada.svg` |
| Cuadrada · dark | `kroni_go_cuadrada_gray.svg` | `…/logos_v3/kroni_go_cuadrada_gray.svg` |
| App icon | `kroni_go_app_icon.svg` · `.png` | `…/logos_v3/kroni_go_app_icon.svg` |
| Shopify icon | `kroni_go_shopify_icon.png` | `…/logos_v3/kroni_go_shopify_icon.png` |
| Background 1:1 (social) | `kroni_go_background_black.svg` · `.png` | `…/logos_v3/kroni_go_background_black.png` |

### Backgrounds & misc

| Asset | File | URL |
|-------|------|-----|
| Plain black background | `kroni_bg_black.jpg` | `…/logos_v3/kroni_bg_black.jpg` |
| Email signature (Alvaro) | `AlvaroEmailSignature.png` | `…/logos_v3/AlvaroEmailSignature.png` |
| Email signature template | `Kroni email signatures 1.svg` | `…/logos_v3/Kroni%20email%20signatures%201.svg` |

> Replace `…` with `https://kroni-brandbook-v2.vercel.app`. Filenames with spaces must be URL-encoded (`%20`).

### Isotype geometry

- viewBox `143 × 163` — taller than wide, vertical rocket
- Cohete 4 puntas asimétrico · símbolo = movimiento, dirección, velocidad, precisión
- Real Bézier curves at each vertex (no synthetic fillets) · stroke `0`, always solid fill
- Min size `16px` (favicon) — at that size, solid mono color only, no gradient
- App icon corner radius: `22.5%` (iOS-style rounded square)

---

## 2. Color reference

| Role             | Token              | Hex       |
|------------------|--------------------|-----------|
| Atlas primary    | `--atlas`          | `#7C4DFF` |
| Atlas hover      | `--atlas-light`    | `#9B7AFF` |
| Atlas pressed    | `--atlas-dark`     | `#5A2EE0` |
| Go primary       | `--go`             | `#00E1FF` |
| Go hover         | `--go-light`       | `#6CF2FF` |
| Go pressed       | `--go-dark`        | `#00AFC7` |
| Background       | `--bg`             | `#0A0D1A` |
| Background elev  | `--bg-elev`        | `#101426` |
| Surface          | `--surface`        | `#171D33` |
| Surface strong   | `--surface-strong` | `#242B3A` |
| Text             | `--text`           | `#F5F7FA` |
| Text muted       | `--text-muted`     | `#697386` |
| Border           | `--border`         | `rgba(255,255,255,0.08)` |
| Border strong    | `--border-strong`  | `rgba(255,255,255,0.16)` |
| Success          | `--success`        | `#22C55E` |
| Warning          | `--warning`        | `#F59E0B` |
| Danger           | `--danger`         | `#EF4444` |

**Tokens:** full set in `tokens.css` / `tokens.json` (vault folder `wiki/analysis/kroni-rebrand-v1/`).

---

## 3. Typography scale

| Token     | Use                                           | Size · Weight · Tracking · Line-height        |
|-----------|-----------------------------------------------|-----------------------------------------------|
| display   | Ad hero, landing hero                         | `80–96px` · `900` · `-0.035em` · `1.05`       |
| h1        | Page hero, dashboard hero                     | `40px` · `700` · `-0.02em` · `1.15`           |
| h2        | Section title                                 | `28px` · `700` · `-0.02em` · `1.2`            |
| h3        | Card title                                    | `20px` · `600` · `-0.01em` · `1.3`            |
| body      | Default                                       | `16px` · `400` · `0` · `1.6`                  |
| body-sm   | Caption, helper text                          | `14px` · `400` · `0` · `1.5`                  |
| label     | Form label                                    | `14px` · `500` · `0` · `1.4`                  |
| eyebrow   | Pre-headline mono kicker                      | `11px` · `600` · `+0.16em` · `1` · UPPERCASE  |
| code      | Inline code, IDs                              | `13px` · `500` · `0` · `1.5` · mono           |

**Hard rule:** display + h1 + h2 use `--font-display` (Filson Pro / Satoshi). Body and labels use `--font-body` (Inter). Mono only for eyebrows, tracking IDs, codes, numeric KPIs.

---

## 4. Buttons

- Height: `40px` (md), `32px` (sm), `48px` (lg), `56px` (hero)
- Padding-x: `16px` (sm) / `20px` (md) / `28px` (lg) / `40px` (hero)
- Radius: `12px` (md/lg), `6px` (sm), `9999px` (hero pill)
- Font: body, weight `600`, `14px` (sm/md) or `16px` (lg/hero)

| Variant   | Atlas (Bg / Border / Text)            | Go (Bg / Border / Text)               |
|-----------|----------------------------------------|----------------------------------------|
| Primary   | `#7C4DFF` / — / `#FFFFFF`              | `#00E1FF` / — / `#0A0D1A`              |
| Secondary | `--surface` / `--border-strong` / `--text` | `--surface` / `--border-strong` / `--text` |
| Ghost     | transparent / — / `--atlas`           | transparent / — / `--go`              |
| Outline   | transparent / `--atlas` / `--atlas`   | transparent / `--go` / `--go`         |
| Danger    | `#EF4444` / — / `#FFFFFF`              | `#EF4444` / — / `#FFFFFF`              |

**Hard rule on contrast:** Atlas primary = white text. Go primary = navy text `#0A0D1A` (cyan too light for white — fails WCAG AA otherwise).

---

## 5. Cards

```
background:    #171D33   (--surface)
border:        1px solid rgba(255,255,255,0.08)
border-radius: 20px      (--r-lg)
padding:       24px
box-shadow:    --shadow-sm
```

Variants: Elevated (`--shadow-md`), Interactive (hover lift `translateY(-2px)`), Atlas/Go-accent (`border-left: 3px solid` product color), Glass (`rgba(23,29,51,0.6)` + `backdrop-filter: blur(20px)`).

---

## 6. Badges / pills

| Type    | Background                  | Text             | Radius  |
|---------|------------------------------|------------------|---------|
| Default | `--surface-strong`          | `--text`         | pill    |
| Atlas   | `rgba(124,77,255,0.12)`     | `--atlas-light`  | pill    |
| Go      | `rgba(0,225,255,0.12)`      | `--go`           | pill    |
| Success | `rgba(34,197,94,0.12)`      | success-soft     | pill    |
| Warning | `rgba(245,158,11,0.12)`     | warning-soft     | pill    |
| Danger  | `rgba(239,68,68,0.12)`      | danger-soft      | pill    |

---

## 7. Layout grid

- Container max-width `1280px`, padding-x `24/48/64px` (mobile/tablet/desktop)
- 12-col grid, `24px` gutter (4-col `16px` mobile, 8-col `20px` tablet)
- Section vertical padding `64/96/128px`; hero `+50%`
- Breakpoints: `sm 640` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1536`

---

## 8. Motion

- **No transitions on initial load** — only user-triggered state
- **No `transition: all`** — name specific properties
- Respect `prefers-reduced-motion: reduce` — cut durations, keep opacity, disable transforms
- Atlas tone: `ease-out` + base duration, settles once. Go tone: allow spring on success/CTAs.

---

## 9. Hard rules (the "never"s)

1. **Atlas never cyan, Go never purple.** Product color discipline absolute.
2. **No `transition: all`** — name the properties.
3. **No white text on cyan** — fails contrast. Use navy `#0A0D1A`.
4. **No serif fonts.** Display = Filson Pro / Satoshi · Body = Inter · Mono = JetBrains Mono.
5. **No gradients outside palette.** Allowed: purple-only, cyan-only, purple→cyan (umbrella only), product→navy corner.
6. **No drop-shadow on dark bg** — use brand glows instead.
7. **No radius < 6px** on CTAs / cards / inputs.
8. **No emojis in product UI** (Go casual social ads exempted).
9. **No v1 colors** (pink `#FF4FDB`, orange `#FF7A00`, teal `#3ECFC7`) — deprecated.
10. **No `--shadow-2xl` + `--glow-*` on same element** — pick one.

---

## 10. Brand voice (ancla)

- **Slogan:** *"Tú vende. Nosotros nos encargamos del resto."*
- Voz: founder MX hablándole a founder MX. NO spanglish, NO porcentajes en hooks, NO wellness/sleep.
- Estructura 3 actos: observación universal → costo concreto → "Por eso existe Kroni".

---

## Changelog

- **2026-05-28** · Published to brandbook deploy. Added public logo asset URL tables + agent usage guide. Condensed component spec from full vault reference.
- **2026-05-24** · v2 release — Atlas=purple, Go=cyan (was pink/orange). Full token + component spec.
- **2026-05-13** · v1 initial token set.

> Full component spec (inputs, all button states, shadow/glow/z-index ladders, a11y checklist) lives in the vault: `wiki/analysis/kroni-rebrand-v1/design.md`.