# Design System Documentation ## quiXzoom & Landvex > Last updated: 2026-06-24 > Status: Production-ready v1.0 --- ## Table of Contents 1. [Token System Architecture](#1-token-system-architecture) 2. [quiXzoom Brand Rules](#2-quixzoom-brand-rules) 3. [Landvex Brand Rules](#3-landvex-brand-rules) 4. [Shared Constraints](#4-shared-constraints) 5. [Typography Deep-Dive](#5-typography-deep-dive) 6. [Spacing & Grid](#6-spacing--grid) 7. [PR Audit Checklist](#7-pr-audit-checklist) 8. [Do / Don't Reference](#8-do--dont-reference) --- ## 1. Token System Architecture ### How It Works Each brand ships a single CSS custom properties file (`:root { ... }`). All component CSS references these tokens — **never raw values**. ``` design/ ├── quixzoom-tokens.css ← Import first, sets all --qx-* vars ├── landvex-tokens.css ← Import first, sets all --lv-* vars ├── quixzoom-hero.html ← Self-contained, inline tokens └── landvex-hero.html ← Self-contained, inline tokens ``` ### Token Naming Convention | Prefix | Brand | |--------|-------| | `--qx-` | quiXzoom | | `--lv-` | Landvex | ### Token Categories Every token file provides these exact categories in this order: 1. **Grayscale** — 4 stops from white → deep carbon 2. **Accent colors** — primary + secondary + alpha variants 3. **Semantic aliases** — bg, text-primary, border, etc. (reference grayscale/accents) 4. **Spacing** — 8px-grid-aligned steps 5. **Typography** — font stacks, locked type scale, weights, line-heights, tracking 6. **Easing** — named timing functions + duration values 7. **Border radius** — 5-step scale 8. **Shadow system** — layered shadows appropriate to each theme 9. **Z-index scale** — consistent stacking context 10. **Transition helpers** — shorthand transition values ### Why Semantic Aliases? ```css /* ✅ Correct — uses semantic alias */ color: var(--qx-text-primary); /* ❌ Wrong — hardcodes the raw color */ color: #FFFFFF; /* ❌ Also wrong — bypasses semantic layer */ color: var(--qx-white); ``` Semantic aliases (`--qx-text-primary`, `--lv-bg-surface`) let you reskin a component for dark/light variants by swapping token values — not rewriting component CSS. --- ## 2. quiXzoom Brand Rules ### Philosophy **Sport-Tech / Nike-vibes.** Energy, kinetic motion, dark precision. quiXzoom never feels corporate. It feels like it was built by athletes, for athletes. ### Theme - **Always dark-first.** Default background: `--qx-deep-carbon` (`#0D0D0D`) - **Light theme is only permitted** for marketing landing pages with explicit design approval ### Colors | Token | Value | Use | |-------|-------|-----| | `--qx-neon-primary` | `#00FF87` | CTAs, highlights, focus rings, glow effects | | `--qx-neon-secondary` | `#00D1FF` | Links, hover states, secondary actions | | `--qx-deep-carbon` | `#0D0D0D` | Page background | | `--qx-gray-700` | `#2A2A2A` | Surface / card backgrounds | **Accent usage rules:** - Neon green (`--qx-neon-primary`) is the **only** primary CTA color - Never use neon on a light background — contrast degrades to unusable - Glow effects (box-shadow with neon alpha) are **permitted** on CTAs only - Never use neon as body text color — always gray-400 or white for prose ### Typography - **Font:** Inter (900 Black for display, 700 Bold for headings, 400 Regular for body) - **Display sizes:** `--qx-text-xl` (64px) desktop, `--qx-text-lg` (48px) minimum - **Locked scale:** 12 / 16 / 24 / 48 / 64px — no values between these - **Letter spacing on display:** always `-0.03em` - **Line height on display:** always `1.0` — never more ### Animation - **Signature easing:** `--qx-ease-snap` = `cubic-bezier(0.16, 1, 0.3, 1)` - **All hero animations** use `ease-enter` = `cubic-bezier(0.22, 1, 0.36, 1)` - **Stagger hero elements:** 0.1s increments (eyebrow → headline → sub → CTA) - **Respect prefers-reduced-motion** — wrap animations in media query ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ### Forbidden in quiXzoom - ❌ Light backgrounds (without explicit approval) - ❌ Serif fonts - ❌ Rounded corners above `--qx-radius-md` (8px) on interactive elements - ❌ Easing other than the defined set - ❌ More than 2 accent colors in a single view - ❌ Drop shadows without neon tinting in dark context --- ## 3. Landvex Brand Rules ### Philosophy **German Enterprise / Siemens-vibes.** Precision, system, authority. Landvex never feels playful. It feels like the most reliable tool in the room. ### Theme - **Always light-first.** Default background: `--lv-white` (`#FFFFFF`) - **Dark theme is not supported** — Landvex has no dark mode in v1 ### Colors | Token | Value | Use | |-------|-------|-----| | `--lv-enterprise-blue` | `#1B4FBF` | CTAs, links, active states, accent rules | | `--lv-enterprise-dark` | `#0F2E6E` | Hover/pressed on blue elements | | `--lv-gray-200` | `#DEDEDE` | Separator lines, dividers | | `--lv-gray-800` | `#222222` | Primary body text | **Accent usage rules:** - Enterprise blue is reserved for **interactive** elements only (buttons, links, focus) - Never use enterprise blue as a background color for large areas - Never use more than one accent color per screen - Decorative use of blue (icon fills, rule lines) is permitted at reduced opacity ### Typography - **Sans:** IBM Plex Sans — headings, labels, body, UI - **Serif:** IBM Plex Serif — long-form editorial content, quotes, executive reports only - **Mono:** IBM Plex Mono — code, API keys, data tables - **Body line-height:** always `1.55` (`--lv-leading-base`) — non-negotiable - **Display sizes:** `--lv-text-lg` (48px) max, `--lv-text-md` (24px) for sections - **Tracking on overlines/labels:** `0.08–0.10em` with uppercase ### Separator Lines Thin horizontal rules are core to Landvex's visual language. Use `border-top: 1px solid var(--lv-border)` to: - Divide major content sections - Separate items in lists - Create structural grouping without whitespace alone **Never use decorative thick rules** — `border-top` should always be `1px`. The only permitted `2px` rule is `--lv-separator-accent` used to highlight the active tab/section. ### Grid - **Base unit:** 8px (`--lv-grid-base`) - **All spacing values must be multiples of 8px** - **Exception:** 4px (`--lv-space-xs`) permitted only for internal component padding (badges, labels) - **Content max-width:** `--lv-container-lg` (1200px) for standard pages ### Forbidden in Landvex - ❌ Dark backgrounds - ❌ Neon or high-saturation accent colors - ❌ Rounded corners above `--lv-radius-md` (4px) on structural elements - ❌ Animation durations above `--lv-dur-slow` (350ms) - ❌ Drop shadows with colored glow - ❌ Text ALL-CAPS for body copy (labels/overlines only) - ❌ Font weights below 400 for body text - ❌ Decorative illustrations or icons — data visualization only --- ## 4. Shared Constraints These rules apply to **both brands** without exception. ### Currency - ✅ Always use **EUR (€)** or **USD ($)** - ❌ Never use SEK or any other currency in UI copy or examples ### Responsiveness - **iPhone-first** — design for 390px viewport, scale up - Test breakpoints: `390px` / `640px` / `1024px` / `1440px` - No horizontal scroll at any breakpoint above 320px ### Performance - No external CSS frameworks (Bootstrap, Tailwind, etc.) - No JavaScript required for hero sections — pure HTML/CSS - Google Fonts loaded with `display=swap` — always - Images must have `width` and `height` attributes — prevent CLS ### Accessibility - Semantic HTML: `