# KI Company — Design Systems Zentrale, maschinenlesbare Quelle für die Design-Systeme der KI Company. Alles unter dieser Domain ist frei abrufbar und für LLMs gedacht. **So benutzt du diese Seite:** Lies zuerst diesen Index. Lade dann gezielt die Dateien nach, die du für die Aufgabe brauchst. Bilder und Schriften kannst du direkt per URL einbinden oder herunterladen. Basis-URL: `https://design-systems.ki-company.ai/` --- ## 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. --- # dark — Website Theme Tiefes Violett-Schwarz, atmosphärische Blur-Dots, Headlines mit Weiß-Verlauf. Nichts ist flach, alles schwebt. ## Regeln & Code - [/dark/README.md](/dark/README.md) — **Startpunkt.** Vollständige Regeln: Farben, Typo, Spacing, Komponenten, Tonalität - [/dark/SKILL.md](/dark/SKILL.md) — Kurzanweisung, wie das System zu benutzen ist - [/dark/colors_and_type.css](/dark/colors_and_type.css) — alle CSS Custom Properties, direkt kopierbar - [/dark/_ds_manifest.json](/dark/_ds_manifest.json) — Komponenten-Index maschinenlesbar - [/dark/_adherence.oxlintrc.json](/dark/_adherence.oxlintrc.json) — Lint-Regeln gegen Verstöße - [/dark/preview/](/dark/preview/) — 15 HTML-Seiten, die jede Regel visuell zeigen - [/dark/ui_kits/website/](/dark/ui_kits/website/) — fertige React-Komponenten (Hero, Services, Stats, Workshops, Contact) ## Logos dark — weiß, für dunklen Untergrund **Für Web bevorzugt SVG verwenden** (skaliert verlustfrei, wenige KB): | Datei | URL | Einsatz | |---|---|---| | Logo horizontal (SVG) | `/dark/assets/logo_horizontal_svg.svg` | **Standard** — Header, Navigation | | Logo vertikal (SVG) | `/dark/assets/logo_vertical.svg` | Footer, zentrierte Layouts | | Notenlogo / Signet (SVG) | `/dark/assets/ki_note_logo.svg` | Favicon, kleine Flächen | | Logo horizontal (PNG) | `/dark/assets/Logo_horizontal.png` | wenn SVG nicht geht | | Logo quadratisch (PNG) | `/dark/assets/Logo_square.png` | Social, Avatare | | App-Icon (PNG, groß) | `/dark/assets/Logo_appicon.png` | App-Icon, hohe Auflösung | Dekor-Elemente: `/dark/assets/blur-dot-blue.svg`, `/dark/assets/blur-dot-purple.svg` ## Kundenlogos, Icons und Presse (alle SVG) **21 Kundenlogos** unter `/dark/assets/clients/.svg` — für Referenz- und Trust-Sektionen: `bfi` `conrad` `elisabthinen` `erste_bank` `eww` `gemeos` `gfoellner` `liwest` `lxmedia` `mediashop` `messezentrum` `ooe_gemeindebund` `ooe_nachrichten` `petco` `primetals` `silhouette` `siwa` `spitz` `voestalpine` `wifi` `wko` Beispiel: `/dark/assets/clients/voestalpine.svg` **10 UI-Icons** unter `/dark/assets/icons/icon-.svg`: `cart` `chat` `community` `education` `gpt-building` `pencil` `search` `user` `users` `video` Beispiel: `/dark/assets/icons/icon-chat.svg` **3 Presse-/Medienlogos** unter `/dark/assets/media/.svg`: `dispo` `tedx` `tv1` ## Schriften Satoshi, Variable TTF + statische OTFs: [/dark/fonts/](/dark/fonts/) Direkt einbindbar, z. B. `/dark/fonts/Satoshi-Variable.ttf` ## Referenz-Screenshots der echten Website Wie das System in der Praxis aussieht — als visuelle Vorlage: - `/dark/uploads/www.ki-company.ai_.png` — Startseite, vollständig (10 MB) - `/dark/uploads/www.ki-company.ai_leistungen_ki-workshops.png` — Leistungsseite (9 MB) ## 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 --- # light — Canva / Slides Theme Heller Präsentationsstil, Blau-Akzente, 3D-Icons. Das einzige dunkle Element ist das Empfehlungs-Badge. ## Regeln & Code - [/light/README.md](/light/README.md) — **Startpunkt.** Vollständige Regeln für Slides und helle Layouts - [/light/SKILL.md](/light/SKILL.md) — Kurzanweisung inkl. Schnellreferenz - [/light/colors_and_type.css](/light/colors_and_type.css) — alle CSS Custom Properties - [/light/_ds_manifest.json](/light/_ds_manifest.json) — Komponenten-Index maschinenlesbar - [/light/_adherence.oxlintrc.json](/light/_adherence.oxlintrc.json) — Lint-Regeln - [/light/preview/](/light/preview/) — 15 HTML-Seiten (Farben, Typo, Badges, Cards, Checkmarks, Pricing-Card, 3D-Icons) ## Logos light — für hellen Untergrund | Datei | URL | Einsatz | |---|---|---| | Logo horizontal | `/light/assets/logo-horizontal.png` | **Standard** — Slide-Kopf, Titelzeile | | Logo quadratisch | `/light/assets/logo-square.png` | Social, Avatare | | Logo-Icon (groß) | `/light/assets/logo-icon.png` | App-Icon, hohe Auflösung | ## Schriften Satoshi: [/light/fonts/](/light/fonts/) ## 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, SVG-Muster in `/light/preview/brand-icons.html` - Slide-Format: 1920×1080px, 16:9 --- ## Hinweise - Alle `.md`-Dateien werden als `text/plain` ausgeliefert und sind direkt lesbar. - Verzeichnisse lassen sich auflisten, z. B. `/dark/assets/` oder `/dark/uploads/`. - Bilder und Schriften sind per URL direkt einbindbar **und** herunterladbar. - Die Satoshi-Schriftdateien dürfen in Deliverables der KI Company eingebettet werden. - `/dark/uploads/` und `/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.