# TKAWEN Brand System v1

Single source of truth for every visual asset across every TKAWEN product.

## Philosophy

**Endorsed brands with shared visual DNA** (Adobe Creative Cloud model).

Each product keeps its own name and primary color, but every TKAWEN mark shares
the same geometric grammar — so anyone seeing two products side-by-side instantly
recognizes them as members of the same family.

## The geometric grammar (constant)

| Element | Spec |
|---|---|
| Canvas | 40×40 viewBox (designed to scale to 16px / 1024px without redraws) |
| Square size | 22×22 |
| Corner radius | 5.5 |
| Layer offset | front layer = +8x, −10y from back |
| Cast shadow | dy=1.1, blur=0.7, opacity=0.55 (filter on front layer only) |
| Specular highlight | radial gradient cx=20 cy=8 r=13, white 34% → 0% |
| Inner glyph | symbolic icon in overlap zone (NOT a letter), white 96% — represents product function |
| Gradient stops | 3-stop linear (top-left → bottom-right): light / mid / dark |

## Parent vs. product distinction

| | Layers | Inner glyph | Color story |
|---|---|---|---|
| **TKAWEN parent** | **3 stacked** | none (clean) | monochrome blue (navy → blue → light blue) — neutral container |
| Every product | 2 stacked | symbolic icon | duo-tone (back + front gradient) — vivid, distinct |

A 3-layer mark vs. a 2-layer mark is instantly distinguishable at any size.
This is the silent signal that says "I am the parent" without needing a label.

## Product palette + glyph table

| Slug | Product | Back gradient | Front gradient | Glyph (white in overlap) |
|---|---|---|---|---|
| tkawen | TKAWEN (parent) | #3b82f6 → #1d4ed8 → #0c1a3d | #93c5fd → #3b82f6 → #1e40af | — (3-layer geometry instead) |
| mystoq | MyStoq | #3b82f6 → #1d4ed8 → #0c1a3d | #22d3ee → #0ea5b7 → #0e7490 | 3 stacked horizontal bars — inventory |
| liqaa | LIQAA | #a855f7 → #7c3aed → #3b0764 | #f472b6 → #ec4899 → #be185d | filled play triangle — video |
| certify | Algeria Certify | #10b981 → #047857 → #064e3b | #34d399 → #10b981 → #047857 | bold checkmark — verified |
| pharmapro | PharmaPro | #16a34a → #15803d → #14532d | #4ade80 → #22c55e → #15803d | medical cross — pharmacy |
| studio | TKAWEN Studio | #fbbf24 → #d97706 → #78350f | #fde047 → #facc15 → #a16207 | 4-point sparkle — creation/AI |
| voice | TKAWEN Voice | #c026d3 → #86198f → #581c87 | #f0abfc → #e879f9 → #a21caf | audio equalizer bars |
| trust | TKAWEN Trust | #1e293b → #0f172a → #020617 | #38bdf8 → #0284c7 → #0c4a6e | shield — security |
| connect | TKAWEN Connect | #6366f1 → #4338ca → #312e81 | #a5b4fc → #818cf8 → #4338ca | facing chevrons — connection |
| academy | TKAWEN Academy | #0ea5e9 → #0284c7 → #0c4a6e | #7dd3fc → #38bdf8 → #0369a1 | graduation cap — education |
| id | TKAWEN ID | #475569 → #334155 → #0f172a | #cbd5e1 → #94a3b8 → #475569 | person silhouette — identity |

## Why glyphs not letters

Letters create collisions (Certify and Connect both start with C; Studio and Trust both start with T) and read as "academic" rather than "technical."
Function-symbolic glyphs (Stripe / Linear / Apple Cloud convention) are language-agnostic, scale-friendly at 16px, and instantly communicate what the product does without reading.

## Wordmark rules (constant)

- Font: **Inter** (or system-ui fallback)
- Weight: **900** (Black)
- Letter-spacing: **−0.045em** (tight)
- Two-tone: lead text = ink (`#0f172a`) or `rgba(255,255,255,0.9)` on dark; tail = product front-gradient mid stop
- Lowercase preferred (`mystoq`, `liqaa`, `certify`, `pharmapro`)

## Output formats per product

Every product gets 4 SVG files (run via `generate.mjs`):

| File | Use |
|---|---|
| `mark.svg` | Premium contexts (apps ≥ 32px, marketing pages) — includes cast shadow filter |
| `mark-flat.svg` | Tiny contexts (favicons, OG icons, app stores at 16-24px) — no filter, sharper |
| `logo.svg` | Lockup with wordmark for **light** surfaces |
| `logo-inverse.svg` | Lockup with wordmark for **dark** surfaces |

## Endorsement strategy (parent → child)

1. **No "by TKAWEN" text on the mark itself.** The shared geometry IS the endorsement.
2. **Every product footer** carries the unified TKAWEN Trust Strip (see Section 6 of master architecture).
3. **Every product `/about` page** carries the JSON-LD `parentOrganization` reference.
4. Optional: small `[product-mark][by tkawen-mark]` lockup in app headers when explicit attribution is required (never on marketing landings — keep those clean).

## File system layout

```
D:/F/tkawen-brand/
├── BRAND.md                    ← this file
├── README.md                   ← quick start for designers/devs
├── products.config.mjs         ← single source of truth for palettes
├── generate.mjs                ← regenerates every SVG from config
├── parent/
│   ├── tkawen-mark.svg
│   ├── tkawen-mark-flat.svg
│   ├── tkawen-logo.svg
│   └── tkawen-logo-inverse.svg
├── products/
│   └── {slug}/                 ← one folder per product
│       ├── mark.svg
│       ├── mark-flat.svg
│       ├── logo.svg
│       └── logo-inverse.svg
└── preview.html                ← visual preview of the entire family
```

## Migration plan (existing products)

| Product | Source code | Action |
|---|---|---|
| MyStoq | `D:/F/mystoq/storefront/app/components/MystoqLogo.vue` + dashboard mirror | Update inline SVG to v2 + favicon swap |
| LIQAA | `D:/F/liqaa-frontend/` (frontend) + Laravel backend | Replace logo files |
| Algeria Certify | Filament + WP plugin | New mark for both |
| PharmaPro | Electron app + landing | Mark + about page |
| Trust / Studio / Voice / Connect | Static HTML landings on VPS40 | Replace inline SVG |
| Academy | tkawen.online subdomain | New mark in WP plugin or theme |
| TKAWEN ID (Authentik) | auth.tkawen.com | Custom branding upload via Authentik admin |

Each migration = `cp products/{slug}/mark.svg → product-repo/.../logo.svg` + commit.

## Adding a new product (1 line)

Open `products.config.mjs` → add an object:

```js
{ slug: 'newproduct', name: 'New Product', wordmark: ['new', 'product'], monogram: 'N',
  back: ['#…', '#…', '#…'], front: ['#…', '#…', '#…'] }
```

Run `node generate.mjs` → 4 new SVG files appear under `products/newproduct/`.

## Logo usage rules

### Clear space

Reserve clear space around the mark equal to the width of one **back layer corner radius (rx)** — that is, **1.4 viewBox units** of breathing room on every side. At 40px rendered, that is 5–6px. At 200px it's ~28px. No other graphic, photo, or text may enter this clear-space zone.

```
┌─────────────────────────────┐
│         clear space         │
│   ┌───────────────────┐     │
│   │                   │     │
│   │      MARK         │     │
│   │                   │     │
│   └───────────────────┘     │
│         clear space         │
└─────────────────────────────┘
```

### Minimum sizes

| Surface | Min mark size | Min lockup width |
|---|---|---|
| Web (favicon) | 16 px | n/a — use mark only |
| Web (header) | 24 px | 96 px |
| Mobile UI | 20 px | 80 px |
| Print (digital export → PDF) | 12 mm | 36 mm |
| App store icon | 1024 × 1024 px | use mark only |
| Social profile photos (LinkedIn/Twitter/etc.) | use 400 × 400 mark — never lockup |

Below these sizes the mark loses its layered depth and the wordmark becomes illegible.

### DO

- Use the official SVG / PNG / ICO files from `parent/`, `products/{slug}/`, and `exports/{slug}/` — never recreate the mark by hand.
- Pair the mark with the corresponding wordmark from `*/logo.svg` when explicit attribution is required (headers, footers, business cards).
- Use the `-inverse` variants on dark surfaces (#0f172a or darker).
- Use the `-flat` variants for sizes ≤ 32 px (favicons) — the cast-shadow filter blurs at tiny pixel counts.
- Maintain the unified TKAWEN footer block (Section 6 of the master architecture) on every product surface.

### DON'T

- ❌ Don't recolor the mark outside its sanctioned palette. Each product has fixed back/front gradients in `products.config.mjs` — using off-palette colors breaks system unity.
- ❌ Don't rotate, flip, skew, or stretch the mark. The 8/10 offset is calibrated.
- ❌ Don't add drop shadows, glows, strokes, or 3D effects beyond what the mark already includes.
- ❌ Don't place the mark on a busy photographic background without a solid scrim or clear space.
- ❌ Don't use the parent TKAWEN mark as a product mark (or vice versa) — they have different layer counts on purpose.
- ❌ Don't add a letter / glyph / icon inside the layers. The geometry is the mark.
- ❌ Don't put "by TKAWEN" text alongside the mark. The shape is the endorsement; the footer block is the legal attribution.
- ❌ Don't use raster (PNG) when SVG is available — SVG scales perfectly.
- ❌ Don't use third-party fonts for the wordmark. Inter Black 900 with letter-spacing -1.3 is canon.

### Co-branding rules

When a TKAWEN product mark appears next to a partner's logo:

1. **Equal weight.** TKAWEN mark and partner mark must occupy approximately equal optical area.
2. **Vertical divider.** Use a 1-px slate-300 (`#cbd5e1`) vertical rule between them, with `var(--tkw-space-6)` (24 px) of horizontal padding on each side.
3. **No combination marks.** Never lock the TKAWEN mark and a partner mark into a single composite glyph.
4. **Order:** when in TKAWEN-controlled surfaces (our docs, our app), TKAWEN mark goes left (LTR) / right (RTL). When on the partner's surface, follow their convention.

### Color combination rules

| Surface tone | Use mark variant | Wordmark color |
|---|---|---|
| White / light gray (#f8fafc–#fff) | `mark.svg` (or `mark-flat.svg` if ≤ 32 px) | `accentInk` |
| Dark navy (#020617–#0f172a) | `mark.svg` | `accentInverse` |
| Brand blue (#1d4ed8) | `mark.svg` | white #ffffff |
| Photographic | `mark.svg` over a 60% dark scrim, or use `mark-flat.svg` over a clear-space rectangle |
| Single-color print | `mark-flat.svg` rendered via `currentColor` (entire mark as one color) |

### Asset selection cheat sheet

```
Need a favicon?           → exports/{slug}/favicon.ico  (multi-resolution 16/32/48)
Need an Apple touch icon? → exports/{slug}/apple-touch-icon.png  (180 × 180)
Need an Android icon?     → exports/{slug}/android-chrome-{192,512}.png + maskable-{192,512}.png
Need an OG image?         → exports/{slug}/og-default.png  (1200 × 630)
Need an SVG mark?         → products/{slug}/mark.svg  (premium with cast shadow)
Need a tiny SVG?          → products/{slug}/mark-flat.svg  (no filter)
Need wordmark for header? → products/{slug}/logo.svg  (light) or logo-inverse.svg  (dark)
```

## Versioning

This document is **v1**. Any change to the geometric grammar (offset, radius,
shadow, etc.) bumps to v2 and triggers a brand-wide migration. Color palette
additions for new products are NOT version bumps — they're additive.
