# ZABA & ZINGO — Design System

> How ZZ surfaces are built: shape, space, elevation, motion, components, do/don't.
> Cinematic-dark, editorial, warm, **rounded**, **flat**. Never angular, never noisy.

---

## Shape language

- **Rounded** everywhere. Radius scale (from the keychain lineage):

| Token | Value | Use |
|-------|-------|-----|
| `--zz-r-xs` | 6px | inputs, chips, small controls |
| `--zz-r-sm` | 8px | buttons, tags |
| `--zz-r-md` | 10px | inline cards, media thumbs |
| `--zz-r-lg` | 14px | cards, panels (**card default**) |
| `--zz-r-xl` | 18px | hero panels, modals |
| `--zz-r-pill` | 999px | pills, toggles, avatars-as-pill |

- **Forbidden: cut-corner / `clip-path` polygons.** That is the **sign.it** language — never ZZ.
- Avatars stay 50% round.
- **Exception (documented):** the PreOwned storefront runs a flat editorial **5px** radius,
  and its dense multi-grid is **0px / edge-to-edge**. That is a per-product override, not the house default.

## Elevation

**Flat system — `box-shadow: none` everywhere.** Separation comes from a **1px `--zz-line`**
hairline and surface-tone steps (`--zz-bg` → `--zz-panel` → `--zz-panel-2`), never a drop shadow.
Focus/hover glows are allowed only as an accent ring, not a shadow.

## Spacing scale (4px base)

`4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96` → `--zz-s-1 … --zz-s-9`.

## Layout

- Container max **1200px**, gutter **24px**.
- Editorial rhythm: generous whitespace, large serif heroes, single accent per view.
- Grid densities 1 / 2 / 3 / 4 columns (hub lineage) — the 3-col grid is the reference density.
- **Slide/section symmetry**, 2-line headlines (hard-break, no orphan word).

## Motion

| Token | Value |
|-------|-------|
| `--zz-t-fast` | 160ms |
| `--zz-t-base` | 220ms |
| `--zz-t-slow` | 420ms |
| `--zz-ease` | `cubic-bezier(.22,.61,.36,1)` |

Ken-Burns drift on hero mosaics; 220ms intent-delay on hover-reveal previews; respect
`prefers-reduced-motion`.

## Iconography

- **Premium SVG only.** No emoji, no icon-font glyphs standing in for UI.
- Stroke ~1.5px, rounded joins, currentColor so icons inherit ink/accent.

---

## Components (canonical anatomy)

### Button

```html
<button class="zz-btn zz-btn--primary">reserve</button>
<button class="zz-btn zz-btn--ghost">view pieces</button>
```
- Primary: Terra bg, creme ink, `--zz-r-sm`, PP Semibold 600, `padding:12px 20px`, no shadow.
- Ghost: transparent, 1px `--zz-line`, ink text; hover → border `--zz-accent`.
- Min touch target 44×44px.

### Card (hub/collection anatomy, fixed order)

`preview → title (+ live badge) → description → host/meta → dates → CTA`

- Surface `--zz-panel`, 1px `--zz-line`, radius `--zz-r-lg`, `padding:18px`.
- Equal card height per grid (`grid-auto-rows:1fr`); title single line (ellipsis);
  description reserves its line even when empty. `.actions` separated by a `border-top`.
- Live badge = Terra dot + `LIVE` caption label (SVG dot, never emoji).

### Input / control

- `--zz-r-xs`, 1px `--zz-line`, `--zz-panel-2` fill; focus → `--zz-accent` ring (2px), no glow-shadow.
- **Never a native `select`/`alert`/`confirm`** — CI dropdown + CI modal only.

### Modal

- Backdrop `rgba(0,0,0,.55)`, panel `--zz-panel`, radius `--zz-r-xl`, 1px `--zz-line`, no shadow.
- Close on Esc / backdrop / ×. Trap focus.

### Header (every ZZ frontend)

- Wordmark (lockup 01) left; right: **language DE/EN** + **theme dark/creme** toggles.
- i18n + persistent (localStorage), EN default for a new visitor.

---

## Do / Don't

**Do** — dark-first with a creme twin · one Terra accent per view · serif heroes, sans body ·
rounded + flat · SVG icons · 2-line headlines · track interactions (accordions/chips, not static text).

**Don't** — cut-corner polygons · drop shadows · emojis · native controls · logo serif in body text ·
two-colour wordmark · a second accent competing with Terra · system/HUD/version read-outs ·
delete content without an explicit order.

---

## Tracking (BBE-STD-TRACK)

Every page + outbound link carries UTM + click-id by default; apps track location/IP/device.
Interactive elements (accordions, chips, toggles) are trackable, not static info blocks.