# IMPADY Design System

> **For new perspectives.**
> Brand & UI system for **IMPADY** and its new **Online-Programm für Systemintegratoren** —
> a program that makes the sales of the future systematic (value-based selling).

---

## 1 · Company & product context

**IMPADY** (impady.com) helps B2B technology vendors and **system integrators** sell on
*value* rather than price. Its core artifact is the **IMPADY Report** — a quantified
business case that translates a solution's benefits into hard financial outcomes:
**ROI, Net Present Value, Benefits (PV), Payback**, plus quantified impacts (B1–B6),
non-quantified impacts (BX1–BX4) and transparent investments (IO/IS). The "IMPADY-Ball"
visualises quantified vs. non-quantified impact factors.

The brand vibe at events is **AI Value Engineering · "Next generation in value selling."**

**This project's job:** build the design system for a brand-new product — the
**Online-Programm für Systemintegratoren**, which teaches the IMPADY value-selling method
systematically. Deliverables this DS must support: a **landing page**, **one-pager documents**,
**PowerPoints / slides**, and **videos**.

### Design intent (from the brief)
- Stay strictly within **IMPADY colors & design**: predominantly the **orange** world, with
  **dark navy** as the important structural counter-color.
- Borrow the **competence-emphasizing clarity of Gartner social posts** (provided as references):
  bold flanked headlines, crisp hierarchical diagrams, matrices, KPI strips, confident data viz —
  **without copying them**. Translate that "clear line" into IMPADY's orange/navy world.

### Sources provided
- `uploads/IMPADY_report_Part2_selection.pdf` — the IMPADY Report brand sheet + a real LabV→Staedtler
  business case. **Authoritative source** for color values, tone, and the value-engineering vocabulary.
- IMPADY logos: `uploads/IMPADY_Logo_*` (orange / navy / white · horizontal & vertical) → copied to `assets/logos/`.
- `uploads/Team_InnoDay.jpg` — team at InnoDay25 booth → `assets/images/team-innoday.jpg`.
- ~25 Gartner social-media posts (`uploads/17*.jpg|.gif`) — **style references only**, NOT IMPADY assets;
  not copied in (third-party brand).

---

## 2 · Content fundamentals (voice & tone)

- **Language: German.** Formal but momentum-driven. Headlines can drop into punchy fragments
  ("Vertrieb der Zukunft. Systematisch gemacht.").
- **Address:** the program/marketing voice uses informal **"du"** (it's a learning program for
  practitioners); the **Report voice** is formal **"Sie"** and third-person. Match the surface.
- **Tone:** competent, evidence-led, calm. Claims are always **backed by a number**. Avoid hype words;
  let ROI/NPV/payback carry the weight.
- **Casing:** display headlines are sentence case, tight. **Eyebrows / kickers are UPPERCASE, tracked
  out** in mono (the signature IMPADY look) — e.g. `FOR NEW PERSPECTIVES`, `ONLINE-PROGRAMM · SYSTEMINTEGRATOREN`.
- **Vocabulary:** Impact, Mehrwert, Business Case, Value Selling, Quantifizierung, ROI, NPV, Payback,
  Benefits (PV), B1–B6 / BX1–BX4 / IO·IS coding, Roll-Out.
- **Numbers:** German formatting — `€ 1.686k`, `189 %` (space before %), `6.2 months`.
- **No emoji.** Ever. Icons are flat/line, not decorative.
- **Tagline:** *For new perspectives.* (English, even in German contexts.)

Examples (from the source report): "Jeder investierte Euro wird über 3 Jahre 1,96-mal zurückgezahlt."
· "Alle Input-Parameter wurden gemeinschaftlich erarbeitet und verifiziert."

---

## 3 · Visual foundations

**Colors** (`tokens/colors.css`) — exact brand values from the report sheet:
- **Orange `#FF6E42`** (rgb 255 110 66) — primary. Tints/shades `--orange-50…900`.
- **Navy `#1E3C5A`** (rgb 30 60 90) — structural. Scale `--navy-50…950` (50 = pale section tint,
  900/950 = deep backgrounds).
- **Light grey `#E6E6E6`** (Black 10 %) + **white**. Full neutral grey scale `--grey-50…900`.
- **Status** (data viz): success `#1F8A5B`, warning `#E89A1C`, danger `#D6402C`, info = navy.
- Semantic aliases: `--surface-*`, `--text-*`, `--border-*`, `--action-*`, `--accent-bar`.

**Type** (`tokens/typography.css`, `tokens/fonts.css`):
- **Display = Archivo** (900/800, letter-spacing −0.02em, line-height ~1.0) — confident geometric
  grotesque, the nearest Google Font to IMPADY's custom wordmark. *Substitution — see Caveats.*
- **Body = Hanken Grotesk** (400–700, line-height 1.5–1.65).
- **Mono = IBM Plex Mono** — figures, codes, and the tracked-out eyebrow (`--ls-eyebrow: 0.18em`).

**Layout & shape** (`tokens/spacing.css`):
- 4px spacing base. Container 1200px. **Crisp, geometric corners** — radii 3–18px (no big pills on cards).
- Border-driven structure; the signature **6px orange accent bar** flanks headlines (`--accent-bar-w`).
- **Shadows are soft & navy-tinted**, restrained (`--shadow-sm…xl`). Cards = white, 12px radius,
  1px `--grey-200` border + `--shadow-sm`, optional orange top rail.

**Backgrounds:**
- Two modes only: **light** (white / `--navy-50` pale tint) and **dark** (`--navy-900`).
- Dark surfaces carry a subtle **orange radial glow (top-right) + faint diagonal hairlines** texture.
  No photographic backgrounds, no purple gradients, no mesh blobs.
- **Photography** (e.g. the automation / robotics imagery in `assets/images/`) is always placed
  through `MediaBand`: full-bleed image + a **navy gradient scrim** so headline text stays legible,
  with the orange subject kept visible past the scrim. Never set type on a raw photo.

**Motion & states:**
- Calm, functional. `--dur-base 200ms`, standard easing. Fades & 1px press-nudges; no bounces, no loops.
- **Hover:** primary button → `--orange-600`; outline/ghost → soft tint fill. **Press:** `translateY(1px)`
  + one shade darker. Focus ring = orange.

**Signature devices (the IMPADY "clear line"):**
1. **AccentHeading** — orange bar(s) + mono eyebrow over a bold display title.
2. **InfluenceTag matrices/trees** — filled navy/orange boxes, 3 fill levels = a competence legend.
3. **StatBlock strips** — big mono KPIs (ROI/NPV/Payback) with thin colored top-rules.
4. **Callout** — left orange rail emphasis (not the AI-slop rounded-left-border card).

---

## 4 · Iconography

- IMPADY did **not** ship an icon set, so UI kits use **Lucide** (CDN, `lucide@0.453.0`) — a clean,
  consistent **line** set. The brand reference (Gartner) leans flat/filled; Lucide's even 2px stroke
  reads as competent and enterprise-appropriate. **Flagged substitution — replace with IMPADY's own
  icon set when available** (see Caveats).
- Usage: small, monochrome, currentColor; module tiles use an orange icon in an `--orange-50` chip.
- **No emoji. No hand-drawn SVG icons.** Logos are real PNG assets in `assets/logos/`.

---

## 5 · Index / manifest

**Root**
- `styles.css` — entry point (only `@import`s). `tokens/` → `colors.css`, `typography.css`, `spacing.css`, `fonts.css`.
- `assets/logos/` — IMPADY logos (orange/navy/white, horiz/vertical). `assets/images/` — team photo.

**Foundation cards** (`guidelines/*.card.html`) — Design System tab: Colors (4), Type (3), Spacing (2), Brand (2).

**Components** (`window.IMPADYDesignSystem_72f030`)
- `components/core/` — **Button, Badge, Eyebrow, AccentHeading, Card**
- `components/data/` — **StatBlock, InfluenceTag, Callout**
- `components/forms/` — **Input**
- `components/media/` — **MediaBand** (full-bleed photo band with navy scrim)

**UI kits**
- `ui_kits/landing/` — Online-Programm marketing landing page (`index.html` + `sections.jsx`).
  Includes an `AutomationBand` (robotics imagery) section.
- `ui_kits/onepager/` — A4 impact-report one-pager (`index.html`).
- `ui_kits/slides/` — 6 slide types (`title · section · stats · matrix · quote · automation`) + shared `slides.jsx`.

**Assets**
- `assets/logos/` — IMPADY logos. `assets/images/team-innoday.jpg`,
  `assets/images/robots-automation.png` (automation / robotics hero photo, 2880×1800).

**Other**
- `SKILL.md` — Agent-Skills-compatible entry for downloaded use.

---

## 6 · Caveats

- **Font substitution:** Archivo / Hanken Grotesk / IBM Plex Mono are Google-Font stand-ins for IMPADY's
  custom wordmark + brand fonts. Served via Google Fonts `@import` (so the compiler reports 0 self-hosted
  `@font-face`). **Please confirm the real IMPADY typefaces / supply font files.**
- **Icons:** Lucide substitute — supply IMPADY's icon set if one exists.
- **Imagery:** logos, one team photo, and the automation/robotics photo (`robots-automation.png`)
  are in place. Additional photography is welcome — supply more on-brand shots (automation, teams,
  industry) and I'll route them through `MediaBand`.