# KI Company — Design Systems (vollständig, eine Seite)

Zentrale, maschinenlesbare Quelle für die Design-Systeme der KI Company.
Alles unter dieser Domain ist frei abrufbar und für LLMs gedacht.

**Diese Seite enthält den vollständigen Inhalt beider Design-Systeme** (dark
und light) — Regeln, Tonalität, CSS-Tokens und Komponenten-Manifest — in
einem einzigen Dokument. Kein Nachladen weiterer Seiten nötig, um die Regeln
zu kennen. Nur Bilder, Schriftdateien und interaktive HTML-Previews bleiben
als separate, binäre Dateien verlinkt (die kann man nicht sinnvoll in Text
einbetten).

**Maschinelles Parsen:** Jeder Originaldatei-Abschnitt ist mit HTML-Kommentaren
eingerahmt: `<!-- ===== FILE: <pfad> ===== -->` … `<!-- ===== END FILE: <pfad> ===== -->`.
Damit lässt sich dieses eine Dokument programmatisch wieder in die einzelnen
virtuellen Dateien zerlegen, falls gewünscht — ein Fetch genügt trotzdem für
den kompletten Inhalt.

**Wichtig beim Abrufen dieser Seite:** Fordere den Rohinhalt wörtlich an
("gib den vollständigen Dateiinhalt unverändert aus, keine Zusammenfassung").
Manche Fetch-Tools liefern sonst nur eine Zusammenfassung statt des exakten
Inhalts.

Basis-URL: `https://design-systems.ki-company.ai/`

---

## Anleitung für KI-Agenten — zuerst lesen

Diese Seite wird ausschließlich maschinell genutzt. Wenn du ein Projekt
(Präsentation, Website, PDF, Grafik) im KI-Company-Design bauen sollst:

1. **System wählen** — siehe "Welches System wann?" direkt darunter.
2. **Regeln lesen** — README, SKILL und CSS des gewählten Systems stehen
   vollständig in diesem Dokument.
3. **Dateien beschaffen (Schriften, Logos, Icons)** — eine Variante wählen:
   - **Deine Ausführungsumgebung hat Internet** (curl/wget/requests
     funktionieren): lade das Kit-ZIP, es enthält alles inkl. dieser Datei.
     - Light: `https://design-systems.ki-company.ai/downloads/ki-company-light-kit.zip`
     - Dark: `https://design-systems.ki-company.ai/downloads/ki-company-dark-kit.zip`
   - **Deine Sandbox hat kein Internet** (z. B. ChatGPT Datenanalyse /
     Code Interpreter): Dein Browsing-Tool kann keine Binärdateien in die
     Sandbox übergeben. Bitte den Nutzer **vor dem Bauen**, das passende
     Kit-ZIP herunterzuladen und im Chat hochzuladen, und entpacke es dann.
   - **Ausgabe ist HTML, das im Browser des Nutzers läuft:** Schriften,
     Logos und Icons direkt per absoluter URL einbinden (CORS offen,
     korrekte Font-MIME-Types).
4. **Nie ersetzen:** Logo nicht nachzeichnen oder durch eine Form ersetzen,
   Satoshi nicht stillschweigend durch eine andere Schrift tauschen, keine
   eigenen Icons in anderem Stil erfinden. Fehlt eine Datei, frag den Nutzer.

### Ausgabe als PowerPoint (.pptx) im light-System

Die Pixelwerte des Systems beziehen sich auf eine Folie von 1920×1080 px.
PowerPoint 16:9 = 13,333 × 7,5 in = 960 × 540 pt → **1 px = 0,5 pt**.
Die Werte unten sind die CSS-Tokens aus `light/colors_and_type.css`,
ausgewertet bei 1920 px Breite und umgerechnet:

| Token / Klasse | px @1920 | pt | Gewicht / Stil | Farbe |
|---|---|---|---|---|
| `.t-mega` | 130 | 65 | Bold 700 | `#0a0118` |
| `.t-section` | 90 | 45 | Bold 700 | `#0a0118` |
| `.t-slide-title` | 75 | 37,5 | Bold 700 | `#0a0118` |
| `.t-stat` (große Zahlen) | 130 | 65 | Bold 700 | `#0888d0` |
| `.t-card-title` | 36 | 18 | Bold 700 | `#0a0118` |
| `.t-pricing` | 34 | 17 | Bold 700 | `#0a0118` |
| `.t-quote` | 34 | 17 | Bold Italic 700 | `#0a0118` |
| `.t-subtitle` | 32 | 16 | Italic 400 | `#0a0118` |
| `.t-body` | 22 | 11 | Regular 400 | `#0a0118` mit 30 % Transparenz (= `rgba(10,1,24,0.70)`) |
| `.t-eyebrow` | 20 | 10 | Regular 400, GROSSBUCHSTABEN, Zeichenabstand +1,5 pt (0,15em) | `#0888d0` |
| `.badge-recommendation` | 16 | 8 | Regular 400 | weiß auf `#0a0118` |
| `.t-fine-print` | 16 | 8 | Regular 400 | `#0a0118` mit 30 % Transparenz |

- **Schrift:** Schriftname exakt `Satoshi` setzen (Fallback laut System:
  Verdana). Ein .pptx bettet die Schrift nicht automatisch ein — Satoshi muss
  auf dem Rechner, der die Datei öffnet, installiert sein (OTF-Dateien im
  Kit unter `fonts/`). Weise den Nutzer am Ende kurz darauf hin.
- **Folienhintergrund:** linearer Verlauf von oben links nach unten rechts
  (CSS 135°): `#f7f8f9` 0 % → `#eff3f9` 50 % → `#e5eff7` 100 %. Nie reines Weiß.
- **Folienränder:** oben/unten 80 px = 40 pt (0,556 in), links/rechts
  96 px = 48 pt (0,667 in).
- **Card:** Füllung `#ffffff`, keine Linie, abgerundetes Rechteck mit Radius
  18 px = 9 pt, Innenabstand 40 px = 20 pt. Schatten außen: Farbe `#0a0118`,
  Transparenz 94 %, Weichzeichnen 12 pt, Abstand 2 pt, nach unten (90°).
- **Text-Pill:** Füllung `#f4f4f6`, Radius 12 px = 6 pt.
- **Checkmark:** Kreis 28 px = 14 pt, Füllung `#0070b8`, weißer Haken — oder
  `light/assets/icons-3d/checkmark.png`.
- **Logo:** `light/assets/logo-horizontal.png` (1542×420 px, transparent,
  Seitenverhältnis nie verzerren).
- **Icons:** PNGs aus `light/assets/icons-3d/` (siehe unten).

### Bekannte Lücken — nicht danach suchen

- **`light/slides/` existiert nicht.** README, SKILL und Manifest des
  light-Systems erwähnen Folienvorlagen (`slides/index.html`,
  `CoverSlide.jsx` usw.), diese wurden nie mitgeliefert. Folienlayouts aus
  den README-Regeln und den Preview-Karten unter `light/preview/` ableiten.
- **Es gibt keine gerenderten 3D-Icon-Dateien.** Verbindliche Referenz für den
  Icon-Stil sind die 6 SVG-Muster aus `light/preview/brand-icons.html`. Sie
  liegen 1:1 extrahiert als einzelne Dateien unter
  `https://design-systems.ki-company.ai/light/assets/icons-3d/` —
  `bloom` `burst` `target` `layers` `checkmark` `flow`, jeweils `.svg` und
  `.png` (512×512, transparent). Neue Icons nur in exakt diesem Stil
  (Farbrampe `#b0cae2` → `#5f79a6` → `#213863`, Licht von oben links).
- **Die SVG-Logos in `dark/assets/` sind defekt** (`logo_horizontal_svg.svg`,
  `logo_vertical.svg`, `ki_note_logo.svg`): Verlaufsbilder und Stile fehlen,
  sie rendern als schwarze Schrift ohne KI-Zeichen. **Nicht verwenden** —
  immer die PNG-Logos nehmen.
- **Das light-Logo (schwarzer Schriftzug) nie auf dunklem Grund.** Die
  Preview-Karte `light/preview/brand-logos.html` zeigt es auch auf `#0a0118`
  — dort ist der Schriftzug unsichtbar. Für dunklen Grund gibt es
  `dark/assets/Logo_horizontal.png` (weißer Schriftzug).

---

## Welches System wann?

| Aufgabe | System |
|---|---|
| Website, Landingpage, Web-App, Produkt-UI | **dark** |
| Präsentation, Slides, Canva, PDF, Angebot | **light** |

Die beiden Systeme sind **nicht** mischbar. Ein Deck im Dark-Theme ist genauso
falsch wie eine Website im Light-Theme. Das gilt auch für die Logos: dunkles
System = weiße Logos, helles System = dunkle Logos.

---

## Marke in einem Absatz

KI Company ist ein österreichisches Unternehmen für KI-Beratung und -Umsetzung.
Sprache primär Deutsch (österreichischer Markt), Englisch sekundär. Tonfall
professionell und warm, direkt, ohne Füllwörter. Selbstbewusst, nicht arrogant.
Firmenstimme in der dritten Person, Ansprache in der zweiten ("Ihr Unternehmen",
"für Sie") — nie "ich". **Keine Emojis.** Schrift ist in beiden Systemen
Satoshi.

---

## Inhaltsverzeichnis dieses Dokuments

0. Anleitung für KI-Agenten, PowerPoint-Werte, bekannte Lücken (ganz oben)
1. `dark/README.md` — vollständige Regeln, Tonalität, Komponenten (dark)
2. `dark/SKILL.md` — Kurzanweisung (dark)
3. `dark/colors_and_type.css` — alle CSS Custom Properties + Base Styles (dark)
4. `dark/_ds_manifest.json` — Komponenten-Index, Tokens maschinenlesbar (dark)
5. `light/README.md` — vollständige Regeln, Tonalität, Komponenten (light)
6. `light/SKILL.md` — Kurzanweisung (light)
7. `light/colors_and_type.css` — alle CSS Custom Properties + Base Styles (light)
8. `light/_ds_manifest.json` — Komponenten-Index, Tokens maschinenlesbar (light)
9. Logos, Icons, Schriften, Screenshots, Kit-ZIPs (Asset-Links, binär — separat)

---

# TEIL 1 — dark (Website Theme)

Tiefes Violett-Schwarz, atmosphärische Blur-Dots, Headlines mit Weiß-Verlauf.
Nichts ist flach, alles schwebt.

<!-- ===== FILE: dark/README.md ===== -->

# KI Company Design System

**Brand:** KI Company — an AI consulting and solutions company based in Austria  
**Theme:** Dark Mode only — atmospheric, moody, technologically warm  
**Sources provided:** Satoshi font files (all weights), 3 logo assets, comprehensive brand spec document

---

## Company & Product Context

The KI Company helps businesses identify and implement AI use cases — from strategy to execution. Their brand communicates trustworthiness, technical sophistication, and approachability. The website is their primary product surface (marketing site), showcasing services, success stories, team, industries, and pricing.

**Visual Identity Summary:** A deep violet-black canvas (#0a0118) with atmospheric blur-dot lighting in pink, cyan, blue, and teal. Headlines fade from pure white to 50% transparent white via radial gradient — the single most distinctive typographic mark of the brand. Everything floats; nothing is flat.

---

## Content Fundamentals

**Language:** German primary (Austrian market), English secondary  
**Tone:** Professional but warm. Confident, not arrogant. Direct. No filler words.  
**Casing:** Sentence case for body; uppercase only for `.tag` category pills (e.g. "MEDIEN UND KOMMUNIKATION")  
**Voice:** Third-person brand, second-person address ("Ihr Unternehmen", "für Sie"). No "I" — company voice only.  
**Emoji:** Never used. Brand communicates through typography and color, not pictographs.  
**Numbers:** Used emphatically as stat features ("40%", "74%", "90%") — these are hero moments, not footnotes.  
**CTAs:** Action-oriented German ("Kostenloses Erstgespräch", "Jetzt anfragen", "Zur KI-Potenzialanalyse"). Short and clear.  
**Copy length:** Headlines are tight (3–8 words). Body paragraphs are concise and scannable. No walls of text.

---

## Visual Foundations

### Color System
- **Page background:** `#0a0118` — not pure black. The faint purple undertone is intentional brand identity.
- **Surfaces:** Semi-transparent white overlays: `rgba(255,255,255,0.03)` (card), `rgba(255,255,255,0.05)` (hover)
- **Text:** `#ffffff` for headlines; `opacity: 0.7` on paragraphs (never a separate gray hex)
- **Accents:** Pink `#f78fff` / `#eb9af7`, Cyan `#3ae1ea`, Blue `#0d8fd6`, Teal `#5fc1ce`, Purple `#7c23c9` — used ONLY as blur decorations and background radial gradients, never as button fills or large UI fills

### Typography
- **Single font:** Satoshi (400, 500, 700, 900) — Verdana is fallback only
- **Headline signature:** `radial-gradient(circle at 0 0, #fff, #ffffff80)` as `background-clip: text` — grades from pure white (top-left) to 50% white (bottom-right). Applied to almost every heading.
- **Body:** `opacity: 0.7` — not a gray color, transparency over white
- **Tags/pills:** Uppercase, `letter-spacing: 0.1rem`, white fill on dark background

### Backgrounds & Atmosphere
- Section separators: Radial gradient overlays (purple, blue, cyan) shot from corners, not flat color changes
- Blur dots: `filter: blur(10vw)` — very generous. Creates soft studio-light feel. Pink bottom, Cyan top/left, Blue/Purple sides.
- No photography, no illustrations, no textures — pure CSS atmosphere

### Animation & Interactions
- **Hover:** `opacity: 0.8` on buttons; `transform: scale(1.015)` + white glow on zoom cards
- **Transitions:** `all 0.4s` on buttons, `all 0.3s` on cards/accordions
- **No bounce/spring** — everything is smooth linear or ease transitions
- **No entrance animations documented** — content is static on load

### Borders & Elevation
- Cards: `1px solid rgba(255,255,255,0.10)` — hairline, 10% white opacity
- Depth via background lightening, not shadows (shadows near-invisible in dark mode)
- Navigation uses `backdrop-filter: blur(60px)` — strongest glass effect on the page

### Corner Radii
- `8px` — small items (FAQ, stat badges)
- `16px` — standard cards
- `24px` — modals, dropdowns
- `32px` — section containers
- `100px` / `1000px` — pills (buttons, nav, tags)

### Layout
- Max content width: `80rem` (1280px)
- Global padding: `8%` sides on desktop, `5%` on mobile
- Section spacing: `9rem` large, `5rem` medium, `3rem` small — collapses proportionally on mobile
- Grid gaps: 1rem / 1.5rem / 2rem / 3rem — no in-between values

### Imagery
- Logo mark: Gradient "KI" letterform (cyan → blue → purple/magenta), rounded rectangular forms
- Client logos: `opacity: 0.4` — always dimmed
- No illustrations; no custom icon set beyond utility SVGs (chevrons, hamburger lines)
- No background images — atmosphere is purely CSS

---

## Iconography

The KI Company does **not** use an icon library. Icons are minimal utility SVGs only:
- Hamburger menu lines (3× white rectangles, 24×2px)
- Dropdown chevrons (1rem × 1rem)
- Rotate-90 arrow for expanded accordions
- No icon font, no Lucide, no Heroicons, no emoji as icons

**Logo assets (see `dark/assets/`):**
- `Logo_appicon.png` — square gradient "KI" mark, transparent background, use on dark surfaces
- `Logo_horizontal.png` — horizontal lockup with "KI Company" wordmark in white + gradient mark
- `Logo_square.png` — square version of horizontal lockup (mark + wordmark stacked)

---

## File Index

> **Hinweis für Fetch-Tools:** Pfade unten sind relativ zu `dark/`. `README.md`
> (diese Datei) und `colors_and_type.css` sind bereits vollständig weiter oben
> in diesem Dokument eingebettet — dafür ist **kein separater Fetch nötig**.
> Nur `fonts/`, `assets/`, `preview/` und `ui_kits/website/` sind binäre bzw.
> interaktive Inhalte, die zwingend separat abgerufen werden müssen.

| Path | Description |
|------|-------------|
| `dark/README.md` | This file — design system overview — **bereits oben eingebettet** |
| `dark/SKILL.md` | Agent skill definition — **bereits oben eingebettet** |
| `dark/colors_and_type.css` | Full CSS vars, font-faces, base styles, all components — **bereits oben eingebettet** |
| `dark/fonts/` | All Satoshi weights (OTF + Variable TTF) — separat abrufen |
| `dark/assets/` | Logo files (PNG) — separat abrufen |
| `dark/preview/` | Design System tab cards (HTML) — separat abrufen |
| `dark/ui_kits/website/` | KI Company website UI kit — separat abrufen |

---

## UI Kits

| Kit | Path | Description |
|-----|------|-------------|
| Website | `ui_kits/website/index.html` | Interactive marketing site prototype — hero, nav, services, stats, FAQ |

<!-- ===== END FILE: dark/README.md ===== -->

<!-- ===== FILE: dark/SKILL.md ===== -->

---
name: ki-company-design
description: Use this skill to generate well-branded interfaces and assets for KI Company, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

<!-- ===== END FILE: dark/SKILL.md ===== -->

<!-- ===== FILE: dark/colors_and_type.css ===== -->

```css
/* ============================================================
   KI Company Design System — Colors & Typography
   Dark Mode | Satoshi | #0a0118 base
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Light.otf') format('opentype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Black.otf') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; }

/* ── Base Color Tokens ──────────────────────────────────────── */
:root {
  /* Brand Core */
  --color-brand-black:        #0a0118;
  --color-brand-white:        #ffffff;
  --color-neutral-darkest:    #0e0122;
  --color-neutral-darker:     #222222;
  --color-neutral-dark:       #444444;
  --color-neutral:            #666666;
  --color-neutral-light:      #aaaaaa;
  --color-neutral-lighter:    #cccccc;
  --color-neutral-lightest:   #eeeeee;

  /* Accent Colors */
  --color-accent-pink:        #f78fff;
  --color-accent-pink-light:  #eb9af7;
  --color-accent-purple:      #7c23c9;
  --color-accent-cyan:        #3ae1ea;
  --color-accent-blue:        #0d8fd6;
  --color-accent-teal:        #5fc1ce;

  /* Surfaces (semi-transparent) */
  --surface-primary:          #0a0118;
  --surface-secondary:        rgba(255, 255, 255, 0.03);   /* #ffffff08 */
  --surface-tertiary:         rgba(255, 255, 255, 0.05);   /* #ffffff0d */
  --surface-dropdown:         #1a0d2d;
  --surface-card-dark:        #160829;
  --surface-container:        #0e0122;

  /* Borders */
  --border-primary:           rgba(255, 255, 255, 0.10);   /* #ffffff1a */
  --border-secondary:         rgba(255, 255, 255, 0.60);   /* #fff9 */
  --border-input:             rgba(255, 255, 255, 0.60);

  /* Text */
  --text-primary:             #ffffff;
  --text-body:                rgba(255, 255, 255, 0.70);
  --text-muted:               rgba(255, 255, 255, 0.48);
  --text-placeholder:         rgba(255, 255, 255, 0.70);   /* #ffffffb3 */
  --text-pink:                #f78fff;
  --text-cyan:                #3ae1ea;

  /* Buttons */
  --btn-primary-bg:           #ffffff;
  --btn-primary-text:         #0a0118;
  --btn-black-bg:             #0a0118;
  --btn-black-text:           #ffffff;
  --btn-blue-bg:              #0d8fd6;

  /* Feedback */
  --color-success:            #027a48;
  --color-success-bg:         #ecfdf3;
  --color-error:              #b42318;
  --color-error-text:         #e23939;
  --color-error-bg:           #fef3f2;

  /* Background Gradients */
  --gradient-purple:          radial-gradient(circle farthest-corner at 100% 0%, #7c23c9, #0a0118 39%);
  --gradient-blue:            radial-gradient(circle farthest-side at 0% 0%, #0d8fd6, #0a0118 40%);
  --gradient-cyan:            radial-gradient(circle farthest-corner at 0% 100%, #5fc1ce, #0a0118 39%);
  --gradient-purple-bottom:   radial-gradient(circle farthest-corner at 0% 100%, #7c23c9, #0a0118 39%);
  --gradient-blue-top:        radial-gradient(circle farthest-side at 100% 0%, #0d8fd6, #0a0118 40%);

  /* Headline Gradient Text */
  --gradient-headline:        radial-gradient(circle at 0 0, #fff, #ffffff80);
  --gradient-headline-soft:   radial-gradient(circle at 0 0, #fff, #fff 0%, #ffffff80);

  /* Shadows */
  --shadow-xxsmall:           0 1px 2px rgba(0,0,0,0.05);
  --shadow-xsmall:            0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-small:             0 4px 8px -2px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-medium:            0 12px 16px -4px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
  --shadow-large:             0 20px 24px -4px rgba(0,0,0,0.08), 0 8px 8px -4px rgba(0,0,0,0.03);
  --shadow-xlarge:            0 24px 48px -12px rgba(0,0,0,0.18);
  --shadow-xxlarge:           0 32px 64px -12px rgba(0,0,0,0.14);
  --shadow-hover-glow:        0 0 1rem 0.1rem rgba(255,255,255,0.20);
  --shadow-card-hover:        0 12px 24px rgba(255,255,255,0.08);

  /* Border Radius */
  --radius-xsmall:            8px;
  --radius-small:             16px;
  --radius-medium:            24px;
  --radius-large:             32px;
  --radius-pill:              100px;
  --radius-full-pill:         1000px;
  --radius-circle:            100%;

  /* Spacing Scale */
  --space-tiny:               0.25rem;   /* 4px */
  --space-xxsmall:            0.5rem;    /* 8px */
  --space-xsmall:             1rem;      /* 16px */
  --space-small:              1.5rem;    /* 24px */
  --space-medium:             2rem;      /* 32px */
  --space-large:              3rem;      /* 48px */
  --space-xlarge:             4rem;      /* 64px */
  --space-xxlarge:            5rem;      /* 80px */
  --space-huge:               6rem;      /* 96px */
  --space-xhuge:              7rem;      /* 112px */
  --space-xxhuge:             10rem;     /* 160px */

  /* Section Padding */
  --section-pad-small:        3rem;
  --section-pad-medium:       5rem;
  --section-pad-large:        9rem;

  /* Container Widths */
  --container-large:          80rem;     /* 1280px */
  --container-medium:         64rem;     /* 1024px */
  --container-small:          48rem;     /* 768px */
}

/* ── Global Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Satoshi', Verdana, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--color-brand-black);
  color: var(--color-brand-white);
  -webkit-font-smoothing: antialiased;
}

p { opacity: 0.7; }

a { color: var(--color-brand-white); text-decoration: none; }
a:hover { opacity: 0.8; }

/* ── Heading Gradient Mixin ─────────────────────────────────── */
.heading-gradient {
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ── Typography Scale ────────────────────────────────────────── */
h1, .h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  background: radial-gradient(circle at 0 0, #fff 19%, #fff6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2, .h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  background: radial-gradient(circle at 0 0, #fff, #fff 0%, #ffffff80);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3, .h3 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  background: radial-gradient(circle at 0 0, #fff, #ffffffb3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h4, .h4 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

h5, .h5 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Heading Style Classes */
.heading-style-h1 { font-size: 4rem; font-weight: 700; line-height: 1; }
.heading-style-h2 { font-size: 3rem; font-weight: 700; line-height: 1.2; }
.heading-style-h3 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.heading-style-h4 {
  font-size: 2rem; font-weight: 700; line-height: 1.3;
  background: radial-gradient(circle, #fff, #fff9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.heading-style-h5 {
  font-size: 1.35rem; font-weight: 700; line-height: 1.4;
  background: radial-gradient(circle at 0 0, #fff, #ffffff80);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.heading-style-h6 {
  font-size: 1rem; font-weight: 700; line-height: 1.4;
  background: radial-gradient(circle at 0 0, #fff, #ffffff80);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.heading-style-price { font-size: 4.5rem; font-weight: 500; line-height: 1.2; }
.stats-number { font-size: 3rem; font-weight: 700; line-height: 1.3; }
.blow-up-stat {
  font-size: 30rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.05);
  -webkit-text-stroke: 1px #ffffff1a;
}

/* Text Sizes */
.text-size-large   { font-size: 1.25rem; font-weight: 400; line-height: 1.5; }
.text-size-medium  { font-size: 1.125rem; font-weight: 400; line-height: 1.5; }
.text-size-regular { font-size: 1rem; font-weight: 400; line-height: 1.5; }
.text-size-small   { font-size: 0.875rem; font-weight: 400; line-height: 1.5; }
.text-size-tiny    { font-size: 0.75rem; font-weight: 400; line-height: 1.5; }

/* Color Utilities */
.text-color-pink  { color: #f78fff; }
.text-color-blue  { color: #3ae1ea; } /* visually cyan */
.text-style-allcaps { text-transform: uppercase; letter-spacing: 0.1rem; }

blockquote {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  border-left: 3px solid #ffffff;
  padding-left: 1rem;
  opacity: 0.7;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Satoshi', Verdana, sans-serif;
  font-size: 1rem; font-weight: 500; line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #0a0118;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.4s;
  -webkit-text-fill-color: initial;
}
.button:hover { opacity: 0.8; }

.button.is-secondary {
  background: transparent;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.button.is-link {
  background: transparent; border: none;
  color: #ffffff; -webkit-text-fill-color: #ffffff;
  padding: 0.25rem 0;
}
.button.is-blue { background: #0d8fd6; border-color: #0d8fd6; color: #ffffff; -webkit-text-fill-color: #ffffff; }
.button.is-small { padding: 0.5rem 1.25rem; }
.button.is-smaller { padding: 0.25rem 0.75rem; }
.button.is-navbar { align-self: center; padding: 0.5rem 1.25rem; }
.button.is-icon-only { padding: 0.75rem; }
.button_black {
  background: #0a0118; color: #ffffff; -webkit-text-fill-color: #ffffff;
  border: 1px solid #ffffff; border-radius: var(--radius-pill);
  padding: 0.75rem 1.5rem; font-weight: 500;
}
.button_black:hover { opacity: 0.8; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-small);
  padding: 2rem;
}
.card:hover {
  background: var(--surface-tertiary);
  box-shadow: var(--shadow-card-hover);
}
.card.is-dark { background: var(--surface-card-dark); }
.card.is-modal { border-radius: var(--radius-medium); padding: 4rem 2.5rem; }

/* ── Tags & Badges ───────────────────────────────────────────── */
.tag {
  display: inline-block;
  background: #ffffff; color: #0a0118;
  border-radius: var(--radius-full-pill);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1rem; text-transform: uppercase;
  white-space: nowrap;
}

/* ── Navigation ──────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 2rem; left: 5%; right: 5%;
  z-index: 19; max-width: 85rem; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.03);
  backdrop-filter: saturate(180%) blur(60px);
  -webkit-backdrop-filter: saturate(180%) blur(60px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-full-pill);
  padding: 0 0.5rem 0 1.5rem;
  height: 3.5rem;
  color: #ffffff;
}

/* ── Form Inputs ─────────────────────────────────────────────── */
.form-input {
  background: transparent;
  color: #ffffff;
  border: none;
  border-top: 1px solid #0a0118;
  border-right: 1px solid #0a0118;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  border-radius: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  font-family: 'Satoshi', Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
}
.form-input::placeholder { color: rgba(255,255,255,0.7); }
.form-input:focus { outline: none; border-bottom-color: #ffffff; }

/* ── Blur Decorations ───────────────────────────────────────── */
.blur-dot {
  position: absolute;
  border-radius: 10000px;
  pointer-events: none;
  filter: blur(10vw);
}
.blur-dot-pink  { background: #eb9af7; }
.blur-dot-purple { background: #f78fff; }
.blur-dot-cyan  { background: #3ae1ea; }
.blur-dot-blue  { background: #4e92a0; }

/* ── Section Utilities ───────────────────────────────────────── */
.section-pad-small  { padding-top: var(--section-pad-small); padding-bottom: var(--section-pad-small); }
.section-pad-medium { padding-top: var(--section-pad-medium); padding-bottom: var(--section-pad-medium); }
.section-pad-large  { padding-top: var(--section-pad-large); padding-bottom: var(--section-pad-large); }
.container-large    { max-width: var(--container-large); margin-left: auto; margin-right: auto; }
.container-medium   { max-width: var(--container-medium); margin-left: auto; margin-right: auto; }
.padding-global     { padding-left: 8%; padding-right: 8%; }
.border-radius-large {
  border-radius: var(--radius-large);
  background: var(--surface-container);
  overflow: hidden;
}

/* ── FAQ Accordion ───────────────────────────────────────────── */
.faq-item {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xsmall);
  transition: all 0.3s;
}
.faq-item:hover { background: var(--surface-tertiary); }
.faq-question {
  padding: 1.25rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-weight: 500; font-size: 1.125rem;
}
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  opacity: 0.7;
}

/* ── Responsive Breakpoints ─────────────────────────────────── */
@media (max-width: 991px) {
  h1, .h1 { font-size: 2.5rem; }
  h2, .h2 { font-size: 2.5rem; }
  h3, .h3 { font-size: 2rem; }
  .heading-style-h1 { font-size: 3.25rem; }
  .section-pad-large  { padding-top: 6rem; padding-bottom: 6rem; }
  .section-pad-medium { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-global { padding-left: 5%; padding-right: 5%; }
}
@media (max-width: 767px) {
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 2.25rem; }
  h3, .h3 { font-size: 1.75rem; }
  .heading-style-h1 { font-size: 2.5rem; }
  .section-pad-large  { padding-top: 4rem; padding-bottom: 4rem; }
  .section-pad-medium { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (max-width: 479px) {
  h1, .h1 { font-size: 2rem; }
  .heading-style-h1 { font-size: 2rem; }
}
```

<!-- ===== END FILE: dark/colors_and_type.css ===== -->

<!-- ===== FILE: dark/_ds_manifest.json ===== -->

```json
{
    "namespace": "DARKKICompanyWebsiteTheme_4833cd",
    "components": [],
    "startingPoints": [],
    "cards": [
        {
            "path": "preview/brand-logos.html",
            "group": "Brand",
            "viewport": "700x480",
            "subtitle": "All logo variants, opacity rules, atmospheric blur dot swatches",
            "name": "Logos & Blur Dots"
        },
        {
            "path": "preview/colors-brand.html",
            "group": "Colors",
            "viewport": "700x340",
            "subtitle": "Brand black, white, and all six accent colors",
            "name": "Brand & Accent Colors"
        },
        {
            "path": "preview/colors-gradients.html",
            "group": "Colors",
            "viewport": "700x360",
            "subtitle": "Background section gradients, blur dot preview, headline gradient text",
            "name": "Gradients & Atmosphere"
        },
        {
            "path": "preview/colors-surfaces.html",
            "group": "Colors",
            "viewport": "700x380",
            "subtitle": "Transparent surfaces, borders, text opacities, feedback",
            "name": "Surfaces & Semantic Colors"
        },
        {
            "path": "preview/component-badges-faq.html",
            "group": "Components",
            "viewport": "700x420",
            "subtitle": "Category tags, badges, badge-links, accent text, FAQ accordion",
            "name": "Badges, Tags & FAQ"
        },
        {
            "path": "preview/component-buttons.html",
            "group": "Components",
            "viewport": "700x280",
            "subtitle": "All button variants: primary, secondary, black, blue, link, sizes",
            "name": "Buttons"
        },
        {
            "path": "preview/component-cards.html",
            "group": "Components",
            "viewport": "700x340",
            "subtitle": "Standard, dark, container, stats, hover, modal variants",
            "name": "Cards"
        },
        {
            "path": "preview/component-forms.html",
            "group": "Components",
            "viewport": "700x480",
            "subtitle": "Underline inputs, textarea, checkbox, error, success states",
            "name": "Form Inputs"
        },
        {
            "path": "preview/component-nav.html",
            "group": "Components",
            "viewport": "700x280",
            "subtitle": "Floating pill nav + dropdown menu",
            "name": "Navigation"
        },
        {
            "path": "preview/spacing-elevation.html",
            "group": "Spacing",
            "viewport": "700x500",
            "subtitle": "7 depth levels + full shadow scale",
            "name": "Elevation & Shadows"
        },
        {
            "path": "preview/spacing-radii.html",
            "group": "Spacing",
            "viewport": "700x340",
            "subtitle": "8px \u2192 circle, with usage guide",
            "name": "Border Radius Scale"
        },
        {
            "path": "preview/spacing-scale.html",
            "group": "Spacing",
            "viewport": "700x320",
            "subtitle": "Tiny \u2192 XXHuge: 11 steps, rem + px values",
            "name": "Spacing Scale"
        },
        {
            "path": "preview/type-body.html",
            "group": "Type",
            "viewport": "700x400",
            "subtitle": "Large/Medium/Body/Small/Tiny, buttons, tags, blockquote",
            "name": "Body & UI Text"
        },
        {
            "path": "preview/type-headings.html",
            "group": "Type",
            "viewport": "700x480",
            "subtitle": "H1\u2013Price: sizes, weights, gradient text-fill specimens",
            "name": "Heading Scale"
        },
        {
            "path": "preview/type-weights.html",
            "group": "Type",
            "viewport": "700x320",
            "subtitle": "All 7 weights + character set specimen",
            "name": "Satoshi Weights"
        },
        {
            "path": "ui_kits/website/index.html",
            "group": "UI Kit \u2014 Website",
            "viewport": "1280x860",
            "subtitle": "5-screen interactive prototype \u2014 Hero with particle sphere, Workshops, Referenzen with charts, Kontakt + Footer",
            "name": "KI Company Website UI Kit"
        }
    ],
    "templates": [],
    "hasThumbnailHtml": false,
    "globalCssPaths": [
        "colors_and_type.css"
    ],
    "tokens": [
        {
            "name": "--color-brand-black",
            "value": "#0a0118",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-brand-white",
            "value": "#ffffff",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-darkest",
            "value": "#0e0122",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-darker",
            "value": "#222222",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-dark",
            "value": "#444444",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral",
            "value": "#666666",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-light",
            "value": "#aaaaaa",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-lighter",
            "value": "#cccccc",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-neutral-lightest",
            "value": "#eeeeee",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-pink",
            "value": "#f78fff",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-pink-light",
            "value": "#eb9af7",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-purple",
            "value": "#7c23c9",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-cyan",
            "value": "#3ae1ea",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-blue",
            "value": "#0d8fd6",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-accent-teal",
            "value": "#5fc1ce",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-primary",
            "value": "#0a0118",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-secondary",
            "value": "rgba(255, 255, 255, 0.03)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-tertiary",
            "value": "rgba(255, 255, 255, 0.05)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-dropdown",
            "value": "#1a0d2d",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-card-dark",
            "value": "#160829",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--surface-container",
            "value": "#0e0122",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--border-primary",
            "value": "rgba(255, 255, 255, 0.10)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--border-secondary",
            "value": "rgba(255, 255, 255, 0.60)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--border-input",
            "value": "rgba(255, 255, 255, 0.60)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-primary",
            "value": "#ffffff",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-body",
            "value": "rgba(255, 255, 255, 0.70)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-muted",
            "value": "rgba(255, 255, 255, 0.48)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-placeholder",
            "value": "rgba(255, 255, 255, 0.70)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-pink",
            "value": "#f78fff",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-cyan",
            "value": "#3ae1ea",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--btn-primary-bg",
            "value": "#ffffff",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--btn-primary-text",
            "value": "#0a0118",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--btn-black-bg",
            "value": "#0a0118",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--btn-black-text",
            "value": "#ffffff",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--btn-blue-bg",
            "value": "#0d8fd6",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-success",
            "value": "#027a48",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-success-bg",
            "value": "#ecfdf3",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-error",
            "value": "#b42318",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-error-text",
            "value": "#e23939",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-error-bg",
            "value": "#fef3f2",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-purple",
            "value": "radial-gradient(circle farthest-corner at 100% 0%, #7c23c9, #0a0118 39%)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-blue",
            "value": "radial-gradient(circle farthest-side at 0% 0%, #0d8fd6, #0a0118 40%)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-cyan",
            "value": "radial-gradient(circle farthest-corner at 0% 100%, #5fc1ce, #0a0118 39%)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-purple-bottom",
            "value": "radial-gradient(circle farthest-corner at 0% 100%, #7c23c9, #0a0118 39%)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-blue-top",
            "value": "radial-gradient(circle farthest-side at 100% 0%, #0d8fd6, #0a0118 40%)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-headline",
            "value": "radial-gradient(circle at 0 0, #fff, #ffffff80)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--gradient-headline-soft",
            "value": "radial-gradient(circle at 0 0, #fff, #fff 0%, #ffffff80)",
            "kind": "other",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-xxsmall",
            "value": "0 1px 2px rgba(0,0,0,0.05)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-xsmall",
            "value": "0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-small",
            "value": "0 4px 8px -2px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-medium",
            "value": "0 12px 16px -4px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-large",
            "value": "0 20px 24px -4px rgba(0,0,0,0.08), 0 8px 8px -4px rgba(0,0,0,0.03)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-xlarge",
            "value": "0 24px 48px -12px rgba(0,0,0,0.18)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-xxlarge",
            "value": "0 32px 64px -12px rgba(0,0,0,0.14)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-hover-glow",
            "value": "0 0 1rem 0.1rem rgba(255,255,255,0.20)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-card-hover",
            "value": "0 12px 24px rgba(255,255,255,0.08)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-xsmall",
            "value": "8px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-small",
            "value": "16px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-medium",
            "value": "24px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-large",
            "value": "32px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-pill",
            "value": "100px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-full-pill",
            "value": "1000px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-circle",
            "value": "100%",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-tiny",
            "value": "0.25rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xxsmall",
            "value": "0.5rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xsmall",
            "value": "1rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-small",
            "value": "1.5rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-medium",
            "value": "2rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-large",
            "value": "3rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xlarge",
            "value": "4rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xxlarge",
            "value": "5rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-huge",
            "value": "6rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xhuge",
            "value": "7rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-xxhuge",
            "value": "10rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--section-pad-small",
            "value": "3rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--section-pad-medium",
            "value": "5rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--section-pad-large",
            "value": "9rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--container-large",
            "value": "80rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--container-medium",
            "value": "64rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--container-small",
            "value": "48rem",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        }
    ],
    "themes": [],
    "fonts": [
        {
            "family": "Satoshi",
            "weight": "100 900",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Variable.ttf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "300",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Light.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "300",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-LightItalic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "400",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Regular.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "400",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Italic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "500",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Medium.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "500",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-MediumItalic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "700",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Bold.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "700",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-BoldItalic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "900",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Black.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "900",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-BlackItalic.otf"
            ]
        }
    ],
    "brandFonts": [
        {
            "family": "Satoshi",
            "status": "unreferenced",
            "tokens": [],
            "path": "colors_and_type.css"
        }
    ],
    "source": "spa"
}
```

<!-- ===== END FILE: dark/_ds_manifest.json ===== -->

## Logos dark — weiß, für dunklen Untergrund

**Immer die PNG-Logos verwenden** (transparent, hochauflösend):

| Datei | URL | Einsatz |
|---|---|---|
| Logo horizontal (PNG) | `https://design-systems.ki-company.ai/dark/assets/Logo_horizontal.png` | **Standard** — Header, Navigation |
| Logo quadratisch (PNG) | `https://design-systems.ki-company.ai/dark/assets/Logo_square.png` | Social, Avatare, zentrierte Layouts |
| App-Icon (PNG, groß) | `https://design-systems.ki-company.ai/dark/assets/Logo_appicon.png` | App-Icon, Favicon, hohe Auflösung |

**Defekt — nicht verwenden:** `dark/assets/logo_horizontal_svg.svg`,
`dark/assets/logo_vertical.svg`, `dark/assets/ki_note_logo.svg`. Beim Export
gingen Verlaufsbilder und Stile verloren; sie rendern als schwarze Schrift
ohne KI-Zeichen.

Dekor-Elemente: `https://design-systems.ki-company.ai/dark/assets/blur-dot-blue.svg`, `https://design-systems.ki-company.ai/dark/assets/blur-dot-purple.svg`

## Kundenlogos, Icons und Presse (alle SVG)

**Wichtig:** Alle diese SVGs haben keine Farbangabe und rendern **schwarz**.
Auf dem dunklen Hintergrund immer weiß einfärben:
`filter: invert(1)` (so macht es auch das UI-Kit), dazu `opacity: 0.4` bei
Kundenlogos (laut README immer gedimmt).

**Kundenlogos** unter `https://design-systems.ki-company.ai/dark/assets/clients/<name>.svg` — für Referenz- und
Trust-Sektionen. Verwendbar (16):

`bfi` `conrad` `elisabthinen` `erste_bank` `eww` `gemeos` `gfoellner` `liwest`
`lxmedia` `messezentrum` `ooe_gemeindebund` `ooe_nachrichten` `petco`
`silhouette` `siwa` `voestalpine`

**Defekt — nicht verwenden:** `mediashop` `primetals` `spitz` `wifi` `wko`
(rendern nur als gefüllte Fläche, weil beim Export die Farbunterschiede der
Logo-Teile verloren gingen).

Beispiel: `https://design-systems.ki-company.ai/dark/assets/clients/voestalpine.svg`

**10 UI-Icons** unter `https://design-systems.ki-company.ai/dark/assets/icons/icon-<name>.svg`:

`cart` `chat` `community` `education` `gpt-building` `pencil` `search` `user`
`users` `video`

Beispiel: `https://design-systems.ki-company.ai/dark/assets/icons/icon-chat.svg`

**3 Presse-/Medienlogos** unter `https://design-systems.ki-company.ai/dark/assets/media/<name>.svg`:
`dispo` `tedx` `tv1`

## Schriften dark

Satoshi, Variable TTF + statische OTFs: `https://design-systems.ki-company.ai/dark/fonts/`
Direkt einbindbar, z. B. `https://design-systems.ki-company.ai/dark/fonts/Satoshi-Variable.ttf`

## Kit-ZIP dark (alles in einer Datei)

`https://design-systems.ki-company.ai/downloads/ki-company-dark-kit.zip` —
README, SKILL, CSS, Manifest, Schriften, Logos, Icons, Kundenlogos, UI-Kit,
Previews und diese Datei (`KI-COMPANY-DESIGN-SYSTEM.md`). Die großen
Website-Screenshots (~19 MB) sind nicht im ZIP, sondern nur per URL (siehe unten).

## Referenz-Screenshots der echten Website

Wie das System in der Praxis aussieht — als visuelle Vorlage:

- `https://design-systems.ki-company.ai/dark/uploads/www.ki-company.ai_.png` — Startseite, vollständig (10 MB)
- `https://design-systems.ki-company.ai/dark/uploads/www.ki-company.ai_leistungen_ki-workshops.png` — Leistungsseite (9 MB)

## Weiterführend dark (interaktiv, nicht Text — separat)

- `https://design-systems.ki-company.ai/dark/preview/` — 15 HTML-Seiten, die jede Regel visuell zeigen
- `https://design-systems.ki-company.ai/dark/ui_kits/website/` — fertige React-Komponenten (Hero, Services, Stats, Workshops, Contact)
- `https://design-systems.ki-company.ai/dark/_adherence.oxlintrc.json` — Lint-Regeln gegen Verstöße

## Schnellreferenz dark

- Hintergrund `#0a0118` (kein reines Schwarz — der Violettstich ist Absicht)
- Flächen: `rgba(255,255,255,0.03)` Card, `rgba(255,255,255,0.05)` Hover
- Text: `#ffffff` für Headlines, `opacity: 0.7` für Fließtext (nie ein graues Hex)
- Headline-Signatur: `radial-gradient(circle at 0 0, #fff, #ffffff80)` als `background-clip: text`
- Akzente Pink `#f78fff`, Cyan `#3ae1ea`, Blau `#0d8fd6`, Teal `#5fc1ce`, Violett `#7c23c9` — **nur** als Blur-Deko und Hintergrund-Gradients, nie als Button-Füllung
- Ränder: `1px solid rgba(255,255,255,0.10)`, Tiefe über Aufhellung statt Schatten
- Keine Fotos, keine Illustrationen, keine Texturen — reine CSS-Atmosphäre

---

# TEIL 2 — light (Canva / Slides Theme)

Heller Präsentationsstil, Blau-Akzente, 3D-Icons. Das einzige dunkle Element
ist das Empfehlungs-Badge.

<!-- ===== FILE: light/README.md ===== -->

# KI Company Design System — Light Mode (Presentations)

## Overview
The **KI Company** is a German AI consulting and implementation firm helping businesses integrate artificial intelligence into their operations. Their tagline is *"Ganzheitliche Integration von künstlicher Intelligenz in Ihrem Unternehmen."*

This design system covers the **Light Mode / Presentation** surface — a bright, professional counterpart to the dark website (`#0a0118` base). It is used for:
- Client pitch decks and proposals (16:9, 1920×1080)
- PDF deliverables and printed flyers
- Meeting-room projector presentations
- Digital sharing / email attachments

### Sources Provided
- Logo files (PNG): `uploads/Logo_horizontal_rechteckig.png`, `uploads/Logo_appicon.png`, `uploads/Logo_Transparent_quadratisch.png`
- Font files: Satoshi Variable + all static weights (OTF/TTF) in `uploads/`
- Detailed written design specification (provided as prompt text)

No codebase or Figma link was provided. This system was built entirely from the written spec + logo assets.

---

## Content Fundamentals

### Language & Tone
- **Language:** German (primary). All slide copy, labels, and CTAs are in German.
- **Formality:** Professional-formal, using the polite "Sie" form (never "du"). E.g., *"Führen Sie KI effizient ein."*
- **Directness:** Headlines are short and declarative. No fluff. E.g., *"KI-Strategie"*, *"Vorgehensweise"*, *"Warum die KI Company?"*
- **Numbers as anchors:** Statistics and prices are bold and prominent. *"+300 abgehaltene Schulungen"*, *"4.900€"* — numbers are always visual focal points.
- **Italic as editorial layer:** Subtitles and quotes are consistently in Satoshi Italic, giving a book-editorial quality. E.g., *"Ganzheitliche Integration von künstlicher Intelligenz in Ihrem Unternehmen."*
- **Eyebrow labels as navigation:** All section labels are uppercase German nouns: AKTUELLE SITUATION, LÖSUNG, ABLAUF, ÜBERSICHT, UNSERE EXPERTISE, AUSBLICK. These orient the viewer.
- **Bold-Regular mix in body:** Feature bullets mix bold lead terms with regular text. E.g., **"Klare** KI-Entscheidungsgrundlage." — the first word or concept is bold, the rest regular.
- **No emoji.** None. Ever.
- **No exclamation marks** in headlines. Confident, not excited.
- **Casing:** Sentence case for body; Title Case for package names; ALL CAPS only for eyebrow labels.

### Copy Patterns
| Context | Example |
|---|---|
| Mega Headline | "KI-Strategie" / "Vorgehensweise" / "Welches Paket" |
| Italic Subtitle | "Ganzheitliche Integration von KI in Ihrem Unternehmen." |
| Eyebrow Label | "AKTUELLE SITUATION" / "LÖSUNG" / "ABLAUF" |
| Feature Pill | "**Kick-off** mit IT für Systemabstimmung (1x 60min)" |
| CTA / Badge | "Unsere Empfehlung" |
| Attribution | "Alexander Schurr, Geschäftsführer" |

---

## Visual Foundations

### Colors
- **Brand Black `#0a0118`** — the typographic anchor. Identical to the dark website. All headlines, body text, badges.
- **Page Background `#eff3f9`** — very light off-white with a perceptible blue tint. Never pure white or neutral grey as a slide base.
- **Card White `#ffffff`** — reserved exclusively for card/container backgrounds.
- **Blue Eyebrow `#0888d0`** — mid-blue for eyebrow labels, step circle numbers, large stats.
- **Blue Bold `#0070b8`** — checkmark circles, solid icon fills.
- **Blue Light `#38a0d8`** — icon gradient highlights.
- **Light Surface `#cfdff1`** — atmospheric background accents behind card groups. Never used as card background.

### Typography
Single font: **Satoshi** (variable + static weights). Fallback: Verdana, sans-serif.
- Roman 400 + Bold 700 are primary weights
- Italic (400 + 700) are first-class hierarchy levels, not just emphasis
- No gradient text fills in light mode (contrast/print safety)
- Eyebrow labels: UPPERCASE + letter-spacing 0.15em — the only tracked text in the system

### Backgrounds & Atmosphere
- Slide backgrounds use a subtle diagonal gradient: lighter top-left (`#f7f8f9`) → slightly more blue bottom-right (`#e5eff7`)
- Corner light accents: very faint hellblau gradient overlays at slide edges — atmospheric, never explicit
- No strong blur-dot glows (those belong to the dark website)
- Hero images and large frames use `border-radius: 20px` and a soft shadow `0 12px 40px rgba(10,1,24,0.10)`

### Cards
- Background: pure `#ffffff`
- Border: none (or `1px rgba(10,1,24,0.04)` — barely visible)
- Border-radius: `16–20px`
- Shadow: `0 4px 24px rgba(10,1,24,0.06)` — soft, diffuse, purple-tinted
- Padding: `32–40px` internal
- No hard borders, no colored left-border accents

### Shadows
All shadows use `rgba(10, 1, 24, ...)` — slightly purple-black, matching brand black. Never pure grey/black shadows.
- Card: `0 4px 24px rgba(10,1,24,0.06)`
- Elevated: `0 8px 32px rgba(10,1,24,0.08)`
- Icon tile: `0 16px 32px rgba(10,1,24,0.08)`
- Hero frame: `0 12px 40px rgba(10,1,24,0.10)`

### Icons
The most distinctive visual element. 3D volumetric gradient icons — NOT line icons.
- Style: abstract geometric shapes (blooms, bursts, asterisks, layered circles)
- Colors: strictly blue palette (`#b0cae2` → `#5f79a6` → `#213863`)
- Light source: top-left consistently
- Checkmark circles: `#0070b8` filled circle, white `✓`
- No SVG line icons, no emoji, no flat symbols

### Animations
Presentation context — no animations. Static, print-safe.

### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `--radius-hero` | 20px | Hero image frames |
| `--radius-card` | 18px | Content cards |
| `--radius-pill` | 12px | Text pills, list items |
| `--radius-badge` | 10px | Recommendation badge |
| `--radius-circle` | 9999px | Checkmarks, step numbers |

### Hover & Interaction
Not applicable to print/presentation. In digital contexts: subtle `opacity: 0.85` on cards; no heavy transforms.

---

## Iconography
- **No icon font or CDN icon library is used.** Icons are custom 3D-rendered/gradient SVG compositions.
- Style: volumetric, glassy, blue-gradient abstract shapes
- All icons share: blue color ramp (`#b0cae2` light → `#213863` dark), top-left light source
- Checkmark icons: filled `#0070b8` circle, white ✓ — 28–32px diameter
- Package icons: abstract 3D form inside a `72×72px` white rounded-square tile
- No emoji used anywhere in the system
- See `light/assets/` for all logo files

---

## File Index

> **Hinweis für Fetch-Tools:** Pfade unten sind relativ zu `light/`. `README.md`
> (diese Datei) und `colors_and_type.css` sind bereits vollständig weiter oben
> in diesem Dokument eingebettet — dafür ist **kein separater Fetch nötig**.
> Nur `fonts/`, `assets/`, `preview/` und `slides/` sind binäre bzw.
> interaktive Inhalte, die zwingend separat abgerufen werden müssen.

| File / Folder | Description |
|---|---|
| `light/README.md` | This file — full system documentation — **bereits oben eingebettet** |
| `light/colors_and_type.css` | CSS custom properties: all color, type, shadow, radius, spacing tokens — **bereits oben eingebettet** |
| `light/SKILL.md` | Agent skill definition for AI design agents — **bereits oben eingebettet** |
| `light/assets/` | Logo files (PNG) — separat abrufen |
| `light/fonts/` | Satoshi font files (OTF + Variable TTF) — separat abrufen |
| `light/preview/` | Design system preview cards (registered in Design System tab) — separat abrufen |
| `light/slides/` | Sample slide templates (16:9, 1920×1080) — separat abrufen |

### Preview Cards
| Card | Group | Description |
|---|---|---|
| `preview/colors-backgrounds.html` | Colors | Background palette |
| `preview/colors-text.html` | Colors | Text & foreground colors |
| `preview/colors-blues.html` | Colors | Accent blue scale |
| `preview/colors-shadows.html` | Spacing | Shadow + elevation system |
| `preview/type-scale.html` | Type | Full typographic scale |
| `preview/type-eyebrow.html` | Type | Eyebrow + subtitle pattern |
| `preview/type-weights.html` | Type | Font weight specimens |
| `preview/spacing-radius.html` | Spacing | Border radius scale |
| `preview/spacing-tokens.html` | Spacing | Spacing token scale |
| `preview/components-cards.html` | Components | Content card variants |
| `preview/components-badges.html` | Components | Badges, pills, labels |
| `preview/components-checkmarks.html` | Components | Checkmarks & step circles |
| `preview/components-pricing-card.html` | Components | Full pricing card |
| `preview/brand-logos.html` | Brand | Logo variants |
| `preview/brand-icons.html` | Brand | 3D icon style specimens |

### Slide Templates
| File | Description |
|---|---|
| `slides/index.html` | Slide kit overview — all templates |
| `slides/CoverSlide.jsx` | Cover / title slide |
| `slides/FeatureGridSlide.jsx` | 3-column feature grid |
| `slides/ProcessSlide.jsx` | 4-step process timeline |
| `slides/PricingSlide.jsx` | 3-package pricing slide |
| `slides/QuoteSlide.jsx` | Full-bleed quote / testimonial |

<!-- ===== END FILE: light/README.md ===== -->

<!-- ===== FILE: light/SKILL.md ===== -->

---
name: ki-company-design
description: Use this skill to generate well-branded interfaces and assets for KI Company — a German AI consulting firm. Contains essential design guidelines, colors, type (Satoshi), fonts, assets, and slide/UI kit components for the Light Mode presentation system.
user-invocable: true
---

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

Key quick-reference:
- Font: Satoshi (fonts/ folder — Variable TTF + static OTFs). Regular 400, Bold 700, Italic, BoldItalic are the primary styles.
- Page background: #eff3f9 (never pure white). Card background: #ffffff.
- Brand black: #0a0118 — used for ALL primary text and headlines (no gradient text fills in light mode).
- Accent blues: #0070b8 (checkmarks/icons), #0888d0 (eyebrows/stats), #38a0d8 (icon highlights).
- Eyebrow labels: UPPERCASE, letter-spacing 0.15em, color #0888d0, Satoshi 400.
- Italic (400 + 700) is a first-class hierarchy level — used for subtitles and quotes.
- Cards: #ffffff, border-radius 16–20px, box-shadow 0 4px 24px rgba(10,1,24,0.06).
- Recommendation badge: background #0a0118, white text — the only dark UI element in light mode.
- Icons: 3D volumetric blue-gradient style (see preview/brand-icons.html for SVG patterns).
- Slide format: 1920×1080px, 16:9.
- See slides/index.html for working slide templates (Cover, Feature Grid, Process, Pricing, Quote).
- See colors_and_type.css for all CSS custom properties.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

<!-- ===== END FILE: light/SKILL.md ===== -->

<!-- ===== FILE: light/colors_and_type.css ===== -->

```css
/* ============================================================
   KI Company Design System — Light Mode (Presentations)
   colors_and_type.css
   ============================================================ */

/* ---------- Font Face Definitions ---------- */
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/* ---------- Base Color Tokens ---------- */
:root {
  /* Brand Core */
  --color-brand-black:       #0a0118;   /* Primary text, headings — shared with dark website */
  --color-brand-black-70:    rgba(10, 1, 24, 0.70);  /* Secondary text */
  --color-brand-black-65:    rgba(10, 1, 24, 0.65);  /* Tertiary text */
  --color-brand-black-60:    rgba(10, 1, 24, 0.60);  /* Phase labels, muted */

  /* Backgrounds */
  --color-bg-primary:        #eff3f9;   /* Main slide background — off-white with blue tint */
  --color-bg-warm:           #f7f8f9;   /* Lighter neutral variation */
  --color-bg-saturated:      #e5eff7;   /* Slightly more saturated corner accent */
  --color-bg-card:           #ffffff;   /* Card / content container background */
  --color-bg-pill:           #f4f4f6;   /* Text pill / list item background */
  --color-bg-light-surface:  #cfdff1;   /* Atmospheric blue surface behind card groups */
  --color-bg-light-surface2: #d3dcea;   /* Lighter variation of surface */

  /* Blue Accent Scale */
  --color-blue-primary:      #0070b8;   /* Bold blue — checkmarks, solid icons */
  --color-blue-eyebrow:      #0888d0;   /* Eyebrow labels, stat numbers, step circles */
  --color-blue-light:        #38a0d8;   /* Light accent — icon gradient highlights */
  --color-blue-lighter:      #78b0d8;   /* Softer icon gradient layer */

  /* Icon Gradient Darks */
  --color-icon-dark:         #213863;   /* Deep icon shadow */
  --color-icon-mid:          #405b89;   /* Mid icon shadow */
  --color-icon-highlight:    #b0cae2;   /* Icon light refraction */

  /* Recommendation Badge */
  --color-badge-bg:          #0a0118;   /* Same as brand-black */
  --color-badge-text:        #ffffff;

  /* ---------- Semantic Color Roles ---------- */
  --fg-primary:              var(--color-brand-black);
  --fg-secondary:            var(--color-brand-black-70);
  --fg-muted:                var(--color-brand-black-60);
  --fg-eyebrow:              var(--color-blue-eyebrow);
  --fg-on-badge:             var(--color-badge-text);

  --bg-slide:                var(--color-bg-primary);
  --bg-card:                 var(--color-bg-card);
  --bg-pill:                 var(--color-bg-pill);
  --bg-surface-accent:       var(--color-bg-light-surface);
  --bg-badge:                var(--color-badge-bg);

  --accent-primary:          var(--color-blue-primary);
  --accent-eyebrow:          var(--color-blue-eyebrow);
  --accent-light:            var(--color-blue-light);

  /* ---------- Shadow Tokens ---------- */
  --shadow-card:             0 4px 24px rgba(10, 1, 24, 0.06);
  --shadow-card-elevated:    0 8px 32px rgba(10, 1, 24, 0.08);
  --shadow-icon-tile:        0 16px 32px rgba(10, 1, 24, 0.08);
  --shadow-hero-frame:       0 12px 40px rgba(10, 1, 24, 0.10);

  /* ---------- Border Radius Scale ---------- */
  --radius-hero:             20px;   /* Hero image frames, cover image */
  --radius-card:             18px;   /* Standard content cards */
  --radius-card-sm:          16px;   /* Smaller cards */
  --radius-pill:             12px;   /* Text pills, list items */
  --radius-badge:            10px;   /* Recommendation badge */
  --radius-tag:              8px;    /* Small tags */
  --radius-circle:           9999px; /* Checkmarks, step circles */

  /* ---------- Spacing Scale ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;   /* Slide safe-margin horizontal */
  --space-32:  128px;

  /* ---------- Typography Tokens ---------- */
  --font-family:             'Satoshi', Verdana, sans-serif;

  /* Slide type scale (at 1920×1080 base) */
  --text-mega:               clamp(64px, 6.8vw, 130px);   /* Cover / section mega headline */
  --text-section:            clamp(48px, 4.7vw, 90px);    /* Section headline */
  --text-slide-title:        clamp(40px, 3.9vw, 75px);    /* Slide title */
  --text-card-title:         clamp(22px, 1.875vw, 36px);  /* Card heading */
  --text-subtitle:           clamp(18px, 1.67vw, 32px);   /* Italic subtitle */
  --text-body:               clamp(14px, 1.15vw, 22px);   /* Body / description */
  --text-eyebrow:            clamp(12px, 1.05vw, 20px);   /* Blue uppercase eyebrow */
  --text-stat:               clamp(60px, 6.8vw, 130px);   /* Big stat numbers */
  --text-pricing:            clamp(20px, 1.77vw, 34px);   /* Pricing values */
  --text-fine-print:         clamp(11px, 0.83vw, 16px);   /* Footnotes */

  /* Weights */
  --weight-regular:          400;
  --weight-medium:           500;
  --weight-bold:             700;
  --weight-black:            900;

  /* Line Heights */
  --leading-tight:           1.0;
  --leading-snug:            1.1;
  --leading-normal:          1.2;
  --leading-relaxed:         1.4;
  --leading-loose:           1.5;

  /* Letter Spacing */
  --tracking-normal:         normal;
  --tracking-eyebrow:        0.15em;  /* Uppercase eyebrow labels only */
}

/* ---------- Semantic Typography Classes ---------- */
.t-mega {
  font-family: var(--font-family);
  font-size: var(--text-mega);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-normal);
  text-wrap: pretty;
}

.t-section {
  font-family: var(--font-family);
  font-size: var(--text-section);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.t-slide-title {
  font-family: var(--font-family);
  font-size: var(--text-slide-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.t-card-title {
  font-family: var(--font-family);
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.t-subtitle {
  font-family: var(--font-family);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.t-eyebrow {
  font-family: var(--font-family);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.t-body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--fg-secondary);
}

.t-body-italic {
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: var(--leading-loose);
  color: var(--fg-secondary);
}

.t-stat {
  font-family: var(--font-family);
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-eyebrow);
}

.t-pricing {
  font-family: var(--font-family);
  font-size: var(--text-pricing);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.t-quote {
  font-family: var(--font-family);
  font-size: clamp(20px, 1.77vw, 34px);
  font-weight: var(--weight-bold);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.t-fine-print {
  font-family: var(--font-family);
  font-size: var(--text-fine-print);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* ---------- Slide Base ---------- */
.slide {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(135deg, var(--color-bg-warm) 0%, var(--color-bg-primary) 50%, var(--color-bg-saturated) 100%);
  font-family: var(--font-family);
  position: relative;
  overflow: hidden;
  padding: 80px 96px;
  box-sizing: border-box;
}

/* ---------- Card Components ---------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-10);
}

.card-elevated {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-elevated);
  padding: var(--space-10);
}

.pill {
  background: var(--bg-pill);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family);
  font-size: var(--text-body);
}

.badge-recommendation {
  background: var(--bg-badge);
  color: var(--fg-on-badge);
  border-radius: var(--radius-badge);
  padding: 6px 20px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--weight-regular);
  display: inline-block;
}

.checkmark-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-number-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: #ffffff;
  border: 1px solid var(--color-blue-eyebrow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: var(--weight-regular);
  color: var(--color-blue-eyebrow);
}

/* ---------- Icon Gradient (SVG helper classes) ---------- */
.icon-gradient-light { stop-color: #b0cae2; }
.icon-gradient-mid   { stop-color: #5f79a6; }
.icon-gradient-dark  { stop-color: #213863; }
```

<!-- ===== END FILE: light/colors_and_type.css ===== -->

<!-- ===== FILE: light/_ds_manifest.json ===== -->

```json
{
    "namespace": "LIGHTKICompanyCanvaSlidesTheme_3f0c21",
    "components": [],
    "startingPoints": [],
    "cards": [
        {
            "path": "preview/brand-icons.html",
            "group": "Brand",
            "viewport": "700x150",
            "subtitle": "Volumetric blue-gradient icon specimens: Bloom, Burst, Target, Layers, Checkmark, Flow",
            "name": "Brand \u2014 3D Icon Style"
        },
        {
            "path": "preview/brand-logos.html",
            "group": "Brand",
            "viewport": "700x130",
            "subtitle": "Horizontal, icon, and square logo variants on all backgrounds",
            "name": "Brand \u2014 Logos"
        },
        {
            "path": "preview/colors-backgrounds.html",
            "group": "Colors",
            "viewport": "700x160",
            "subtitle": "Page, card, pill, and surface background palette",
            "name": "Color \u2014 Backgrounds"
        },
        {
            "path": "preview/colors-blues.html",
            "group": "Colors",
            "viewport": "700x155",
            "subtitle": "Three-stop blue accent scale + icon gradient range",
            "name": "Color \u2014 Accent Blues"
        },
        {
            "path": "preview/colors-text.html",
            "group": "Colors",
            "viewport": "700x140",
            "subtitle": "Primary, secondary, muted, and on-badge text colors",
            "name": "Color \u2014 Text & Foreground"
        },
        {
            "path": "preview/components-badges.html",
            "group": "Components",
            "viewport": "700x120",
            "subtitle": "Recommendation badge, eyebrow, step circle, phase label, pill",
            "name": "Components \u2014 Badges & Labels"
        },
        {
            "path": "preview/components-cards.html",
            "group": "Components",
            "viewport": "700x220",
            "subtitle": "Content card, feature card, and pill list item variants",
            "name": "Components \u2014 Cards"
        },
        {
            "path": "preview/components-checkmarks.html",
            "group": "Components",
            "viewport": "700x160",
            "subtitle": "Feature checkmark circles, step number circles, process timeline",
            "name": "Components \u2014 Checkmarks & Steps"
        },
        {
            "path": "preview/components-pricing-card.html",
            "group": "Components",
            "viewport": "700x360",
            "subtitle": "Full 3-card pricing layout with recommendation badge",
            "name": "Components \u2014 Pricing Card"
        },
        {
            "path": "slides/index-standalone.html",
            "group": "Slides",
            "viewport": "1280x720",
            "subtitle": "5 slide templates: Cover, Feature Grid, Process, Pricing, Quote \u2014 navigable deck",
            "name": "Slides \u2014 Presentation Templates"
        },
        {
            "path": "slides/index.html",
            "group": "Slides",
            "viewport": "1280x720",
            "subtitle": "5 slide templates: Cover, Feature Grid, Process, Pricing, Quote \u2014 navigable deck",
            "name": "Slides \u2014 Presentation Templates"
        },
        {
            "path": "preview/colors-shadows.html",
            "group": "Spacing",
            "viewport": "700x140",
            "subtitle": "Four elevation levels \u2014 all rgba(10,1,24,\u2026) purple-black tint",
            "name": "Color \u2014 Shadow System"
        },
        {
            "path": "preview/spacing-radius.html",
            "group": "Spacing",
            "viewport": "700x135",
            "subtitle": "Full radius scale from 8px tag to 9999px circle",
            "name": "Spacing \u2014 Border Radius"
        },
        {
            "path": "preview/spacing-tokens.html",
            "group": "Spacing",
            "viewport": "700x80",
            "subtitle": "4\u201396px spacing tokens",
            "name": "Spacing \u2014 Token Scale"
        },
        {
            "path": "preview/type-eyebrow.html",
            "group": "Type",
            "viewport": "700x180",
            "subtitle": "Eyebrow \u2192 Headline \u2192 Italic Subtitle \u2014 the core slide stack",
            "name": "Type \u2014 Eyebrow + Subtitle Pattern"
        },
        {
            "path": "preview/type-scale.html",
            "group": "Type",
            "viewport": "700x500",
            "subtitle": "Full typographic hierarchy from Mega Headline to Fine Print",
            "name": "Type \u2014 Scale"
        },
        {
            "path": "preview/type-weights.html",
            "group": "Type",
            "viewport": "700x155",
            "subtitle": "Satoshi Light 300 through Black 900 \u2014 all available weights",
            "name": "Type \u2014 Font Weights"
        }
    ],
    "templates": [],
    "hasThumbnailHtml": false,
    "globalCssPaths": [
        "colors_and_type.css",
        "styles.css"
    ],
    "tokens": [
        {
            "name": "--color-brand-black",
            "value": "#0a0118",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-brand-black-70",
            "value": "rgba(10, 1, 24, 0.70)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-brand-black-65",
            "value": "rgba(10, 1, 24, 0.65)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-brand-black-60",
            "value": "rgba(10, 1, 24, 0.60)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-primary",
            "value": "#eff3f9",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-warm",
            "value": "#f7f8f9",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-saturated",
            "value": "#e5eff7",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-card",
            "value": "#ffffff",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-pill",
            "value": "#f4f4f6",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-light-surface",
            "value": "#cfdff1",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-bg-light-surface2",
            "value": "#d3dcea",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-blue-primary",
            "value": "#0070b8",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-blue-eyebrow",
            "value": "#0888d0",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-blue-light",
            "value": "#38a0d8",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-blue-lighter",
            "value": "#78b0d8",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-icon-dark",
            "value": "#213863",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-icon-mid",
            "value": "#405b89",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-icon-highlight",
            "value": "#b0cae2",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-badge-bg",
            "value": "#0a0118",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--color-badge-text",
            "value": "#ffffff",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--fg-primary",
            "value": "var(--color-brand-black)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--fg-secondary",
            "value": "var(--color-brand-black-70)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--fg-muted",
            "value": "var(--color-brand-black-60)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--fg-eyebrow",
            "value": "var(--color-blue-eyebrow)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--fg-on-badge",
            "value": "var(--color-badge-text)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--bg-slide",
            "value": "var(--color-bg-primary)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--bg-card",
            "value": "var(--color-bg-card)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--bg-pill",
            "value": "var(--color-bg-pill)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--bg-surface-accent",
            "value": "var(--color-bg-light-surface)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--bg-badge",
            "value": "var(--color-badge-bg)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--accent-primary",
            "value": "var(--color-blue-primary)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--accent-eyebrow",
            "value": "var(--color-blue-eyebrow)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--accent-light",
            "value": "var(--color-blue-light)",
            "kind": "color",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-card",
            "value": "0 4px 24px rgba(10, 1, 24, 0.06)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-card-elevated",
            "value": "0 8px 32px rgba(10, 1, 24, 0.08)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-icon-tile",
            "value": "0 16px 32px rgba(10, 1, 24, 0.08)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--shadow-hero-frame",
            "value": "0 12px 40px rgba(10, 1, 24, 0.10)",
            "kind": "shadow",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-hero",
            "value": "20px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-card",
            "value": "18px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-card-sm",
            "value": "16px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-pill",
            "value": "12px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-badge",
            "value": "10px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-tag",
            "value": "8px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--radius-circle",
            "value": "9999px",
            "kind": "radius",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-1",
            "value": "4px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-2",
            "value": "8px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-3",
            "value": "12px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-4",
            "value": "16px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-5",
            "value": "20px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-6",
            "value": "24px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-7",
            "value": "28px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-8",
            "value": "32px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-10",
            "value": "40px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-12",
            "value": "48px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-16",
            "value": "64px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-20",
            "value": "80px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-24",
            "value": "96px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--space-32",
            "value": "128px",
            "kind": "spacing",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--font-family",
            "value": "'Satoshi', Verdana, sans-serif",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-mega",
            "value": "clamp(64px, 6.8vw, 130px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-section",
            "value": "clamp(48px, 4.7vw, 90px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-slide-title",
            "value": "clamp(40px, 3.9vw, 75px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-card-title",
            "value": "clamp(22px, 1.875vw, 36px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-subtitle",
            "value": "clamp(18px, 1.67vw, 32px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-body",
            "value": "clamp(14px, 1.15vw, 22px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-eyebrow",
            "value": "clamp(12px, 1.05vw, 20px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-stat",
            "value": "clamp(60px, 6.8vw, 130px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-pricing",
            "value": "clamp(20px, 1.77vw, 34px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--text-fine-print",
            "value": "clamp(11px, 0.83vw, 16px)",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--weight-regular",
            "value": "400",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--weight-medium",
            "value": "500",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--weight-bold",
            "value": "700",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--weight-black",
            "value": "900",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--leading-tight",
            "value": "1.0",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--leading-snug",
            "value": "1.1",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--leading-normal",
            "value": "1.2",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--leading-relaxed",
            "value": "1.4",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--leading-loose",
            "value": "1.5",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--tracking-normal",
            "value": "normal",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        },
        {
            "name": "--tracking-eyebrow",
            "value": "0.15em",
            "kind": "font",
            "definedIn": "colors_and_type.css"
        }
    ],
    "themes": [],
    "fonts": [
        {
            "family": "Satoshi",
            "weight": "100 900",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Variable.ttf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "300",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Light.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "400",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Regular.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "400",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Italic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "500",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Medium.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "700",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Bold.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "700",
            "style": "italic",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-BoldItalic.otf"
            ]
        },
        {
            "family": "Satoshi",
            "weight": "900",
            "style": "normal",
            "cssPath": "colors_and_type.css",
            "files": [
                "fonts/Satoshi-Black.otf"
            ]
        }
    ],
    "brandFonts": [
        {
            "family": "Satoshi",
            "status": "ok",
            "tokens": [
                "--font-family"
            ],
            "path": "colors_and_type.css"
        }
    ],
    "source": "spa"
}
```

<!-- ===== END FILE: light/_ds_manifest.json ===== -->

## Logos light — für hellen Untergrund

| Datei | URL | Einsatz |
|---|---|---|
| Logo horizontal | `https://design-systems.ki-company.ai/light/assets/logo-horizontal.png` | **Standard** — Slide-Kopf, Titelzeile |
| Logo quadratisch | `https://design-systems.ki-company.ai/light/assets/logo-square.png` | Social, Avatare |
| Logo-Icon (groß) | `https://design-systems.ki-company.ai/light/assets/logo-icon.png` | App-Icon, hohe Auflösung |

Dunkler Hintergrund ist im light-System nicht vorgesehen. Das light-Logo
(schwarzer Schriftzug) nie auf dunklem Grund einsetzen.

## 3D-Icons light — SVG + PNG

Die 6 verbindlichen Icon-Muster, 1:1 aus `light/preview/brand-icons.html`
extrahiert. Für .pptx die PNGs nehmen (512×512, transparent). Ohne
Internet in der Sandbox: den SVG-Code unten in eine Datei schreiben.

| Icon | SVG | PNG |
|---|---|---|
| bloom | `https://design-systems.ki-company.ai/light/assets/icons-3d/bloom.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/bloom.png` |
| burst | `https://design-systems.ki-company.ai/light/assets/icons-3d/burst.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/burst.png` |
| target | `https://design-systems.ki-company.ai/light/assets/icons-3d/target.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/target.png` |
| layers | `https://design-systems.ki-company.ai/light/assets/icons-3d/layers.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/layers.png` |
| checkmark | `https://design-systems.ki-company.ai/light/assets/icons-3d/checkmark.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/checkmark.png` |
| flow | `https://design-systems.ki-company.ai/light/assets/icons-3d/flow.svg` | `https://design-systems.ki-company.ai/light/assets/icons-3d/flow.png` |

`bloom.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <defs>
    <radialGradient id="g1" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#b0cae2"/>
      <stop offset="50%" stop-color="#5f79a6"/>
      <stop offset="100%" stop-color="#213863"/>
    </radialGradient>
    <radialGradient id="g1b" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#c6d5e3"/>
      <stop offset="50%" stop-color="#78b0d8"/>
      <stop offset="100%" stop-color="#405b89"/>
    </radialGradient>
  </defs>
  <ellipse cx="32" cy="18" rx="10" ry="16" fill="url(#g1b)" opacity="0.85"/>
  <ellipse cx="32" cy="32" rx="13" ry="18" fill="url(#g1)"/>
  <ellipse cx="32" cy="47" rx="10" ry="15" fill="url(#g1b)" opacity="0.75"/>
  <ellipse cx="32" cy="30" rx="5" ry="6" fill="#ffffff" fill-opacity="0.25"/>
</svg>
```

`burst.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <defs>
    <radialGradient id="g2" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#78b0d8"/>
      <stop offset="55%" stop-color="#0888d0"/>
      <stop offset="100%" stop-color="#213863"/>
    </radialGradient>
  </defs>
  <g transform="translate(32,32)">
    <ellipse rx="7" ry="22" fill="url(#g2)" opacity="0.9"/>
    <ellipse rx="7" ry="22" fill="url(#g2)" opacity="0.9" transform="rotate(45)"/>
    <ellipse rx="7" ry="22" fill="url(#g2)" opacity="0.9" transform="rotate(90)"/>
    <ellipse rx="7" ry="22" fill="url(#g2)" opacity="0.9" transform="rotate(135)"/>
  </g>
  <circle cx="32" cy="32" r="7" fill="#ffffff" fill-opacity="0.30"/>
</svg>
```

`target.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <defs>
    <radialGradient id="g3" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#b0cae2"/>
      <stop offset="55%" stop-color="#5f79a6"/>
      <stop offset="100%" stop-color="#213863"/>
    </radialGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g3)"/>
  <circle cx="32" cy="32" r="18" fill="#ffffff" fill-opacity="0.18"/>
  <circle cx="32" cy="32" r="9" fill="#ffffff" fill-opacity="0.30"/>
  <circle cx="26" cy="24" r="4" fill="#ffffff" fill-opacity="0.35"/>
</svg>
```

`layers.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <defs>
    <linearGradient id="g4" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#b0cae2"/>
      <stop offset="100%" stop-color="#213863"/>
    </linearGradient>
    <linearGradient id="g4b" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#78b0d8"/>
      <stop offset="100%" stop-color="#405b89"/>
    </linearGradient>
  </defs>
  <rect x="10" y="40" width="44" height="10" rx="5" fill="url(#g4)" opacity="0.70"/>
  <rect x="10" y="27" width="44" height="10" rx="5" fill="url(#g4b)" opacity="0.85"/>
  <rect x="10" y="14" width="44" height="10" rx="5" fill="url(#g4)"/>
  <rect x="14" y="16" width="16" height="5" rx="2.5" fill="#ffffff" fill-opacity="0.30"/>
</svg>
```

`checkmark.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <circle cx="32" cy="32" r="28" fill="#0070b8"/>
  <circle cx="26" cy="24" r="6" fill="#ffffff" fill-opacity="0.20"/>
  <polyline points="18,32 28,42 46,20" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

`flow.svg`:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
  <defs>
    <linearGradient id="g5" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#78b0d8"/>
      <stop offset="100%" stop-color="#213863"/>
    </linearGradient>
  </defs>
  <path d="M8 20 Q20 10 32 20 Q44 30 56 20" stroke="url(#g5)" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.60"/>
  <path d="M8 32 Q20 22 32 32 Q44 42 56 32" stroke="url(#g5)" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.80"/>
  <path d="M8 44 Q20 34 32 44 Q44 54 56 44" stroke="url(#g5)" stroke-width="7" stroke-linecap="round" fill="none"/>
</svg>
```

## Schriften light

Satoshi, Ordner `https://design-systems.ki-company.ai/light/fonts/`:

| Datei | Gewicht / Stil |
|---|---|
| `Satoshi-Light.otf` | 300 |
| `Satoshi-Regular.otf` | 400 |
| `Satoshi-Italic.otf` | 400 kursiv |
| `Satoshi-Medium.otf` | 500 |
| `Satoshi-Bold.otf` | 700 |
| `Satoshi-BoldItalic.otf` | 700 kursiv |
| `Satoshi-Black.otf` | 900 |
| `Satoshi-Variable.ttf` | 300–900 (nur aufrecht) |

Weitere Kursivschnitte (Light, Medium, Black Italic) liegen unter
`https://design-systems.ki-company.ai/light/uploads/` (`Satoshi-LightItalic.otf`,
`Satoshi-MediumItalic.otf`, `Satoshi-BlackItalic.otf`) und sind im Kit-ZIP unter `fonts/`.

## Kit-ZIP light (alles in einer Datei)

`https://design-systems.ki-company.ai/downloads/ki-company-light-kit.zip` —
README, SKILL, CSS, Manifest, Schriften, Logos, 3D-Icons, Previews und diese
Datei (`KI-COMPANY-DESIGN-SYSTEM.md`).

## Weiterführend light (interaktiv, nicht Text — separat)

- `https://design-systems.ki-company.ai/light/preview/` — 15 HTML-Seiten (Farben, Typo, Badges, Cards, Checkmarks, Pricing-Card, 3D-Icons)
- `https://design-systems.ki-company.ai/light/_adherence.oxlintrc.json` — Lint-Regeln

## Schnellreferenz light

- Seitenhintergrund `#eff3f9` (**nie** reines Weiß), Card `#ffffff`
- Markenschwarz `#0a0118` für **allen** Primärtext und alle Headlines — keine Verlaufstexte im Light Mode
- Akzentblau `#0070b8` (Checkmarks/Icons), `#0888d0` (Eyebrows/Stats), `#38a0d8` (Icon-Highlights)
- Eyebrow-Labels: GROSSBUCHSTABEN, `letter-spacing: 0.15em`, `#0888d0`, Satoshi 400
- Kursiv (400 + 700) ist eine eigene Hierarchiestufe — für Untertitel und Zitate
- Cards: `#ffffff`, Radius 16–20px, `box-shadow: 0 4px 24px rgba(10,1,24,0.06)`
- Empfehlungs-Badge: Hintergrund `#0a0118`, weißer Text — das einzige dunkle UI-Element
- Icons: 3D-volumetrisch mit Blau-Verlauf — Dateien unter `https://design-systems.ki-company.ai/light/assets/icons-3d/` (SVG + PNG)
- Slide-Format: 1920×1080px, 16:9

---

## Hinweise

- Alle `.md`-Dateien werden als `text/plain` ausgeliefert und sind direkt lesbar.
- Diese Seite (`index.md`) enthält den kompletten Text- und CSS-Inhalt beider
  Systeme — für Regeln, Farben, Typo und Tokens ist **kein weiterer Fetch
  nötig**. Die Einzeldateien (`dark/README.md`, `light/colors_and_type.css`
  usw.) bleiben zusätzlich unter ihren eigenen URLs abrufbar. Sie sind
  inhaltlich identisch mit den Abschnitten hier — einzige Ausnahme: die
  "File Index"-Tabellen in den beiden README-Abschnitten wurden für den
  Ein-Seiten-Kontext mit vollständigen `dark/`/`light/`-Pfaden und Hinweisen
  ergänzt ("bereits oben eingebettet"), damit kein Fetch-Tool versucht, hier
  falsch relative Pfade nachzuladen.
- Verzeichnisse lassen sich auflisten, z. B. `https://design-systems.ki-company.ai/dark/assets/` oder `https://design-systems.ki-company.ai/dark/uploads/`.
- Bilder und Schriften sind per URL direkt einbindbar **und** herunterladbar.
- Die Satoshi-Schriftdateien dürfen in Deliverables der KI Company eingebettet werden.
- `https://design-systems.ki-company.ai/dark/uploads/` und `https://design-systems.ki-company.ai/light/uploads/` enthalten das Rohmaterial. Die Logos und
  Schriften darin sind identisch mit denen in `assets/` bzw. `fonts/` — nimm für
  URLs immer die Versionen aus `assets/`, die haben saubere Dateinamen.