Agentic Operating Systems

Overview

Agentic Operating Systems (AOS) ist ein deutsches Beratungs- und Systemhaus, das kontrollierbare operative KI für den Mittelstand konzipiert. Die Aufgabe ist nicht ein einzelner Chatbot, sondern eine gemeinsame Steuerungsschicht, die KI-Agenten, Workflows, Daten und bestehende Unternehmenssoftware verbindet. Die visuelle Sprache folgt einem Swiss-Modernist- bzw. Architectural-Minimalism-Ansatz: warmes Papierweiß (#F4F3EF) als Leinwand, tief graphitfarbene Typografie (#101114) und ein einziges Signalorange (#F25A1D) als Akzent. Der emotionale Effekt ist Ruhe, Präzision und Verlässlichkeit, also das Gegenteil des Hype-Designs, das KI oft umgibt.

Die Tonalität ist sachlich, direkt und ohne Übertreibung; Begriffe wie Kontrolle, Freigabe, Protokollierung und Human-above-the-Loop tragen die Argumentation. Hero-Headlines sind kurz und pointiert gesetzt, zweizeilig, mit Punkt am Ende. Beispielsatz: "Ein Chatbot ist noch keine Transformation."

Colors

Die Oberfläche basiert auf Papierweiß #F4F3EF (CSS-Variable --aosh-bg) mit weißen Flächen (#FFFFFF) für Karten und Formulare. Die Typografie nutzt Graphit #101114 (--aosh-ink) für Überschriften und Fließtext; sekundärer Text erscheint als rgba(16,17,20,.62), Linien als rgba(16,17,20,.16). Primary ist das Signalorange #F25A1D (--aosh-accent) und ist ausschließlich für den Akzent verwendet: kleine 9×9px-Quadrate vor Buttons, Fokusringe (2px solid), Snake-Trail und Statusindikatoren. Die CTA-Fläche selbst ist Graphit #101114 mit Text #F4F3EF, nicht Orange. Secondary #101114 dient als Struktur-Ink; die Dunkelstufe #0A0A0A/#080808 erscheint in der Konsent- und Footer-Ebene. Hover-Orange für Dark-Kontexte ist #FF7A1A. Der Hero arbeitet mit einem Raster aus Punkten und Quadraten; Orange wird nur

Typography

Die Schrift ist die systemeigene Sans-Stapel (ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial), kombiniert mit ui-monospace für Eyebrow-Labels. Die Display-Stufe läuft bei 63.3px / 620 mit -0.04em Laufweite, Headlines bei 74.24px / 600 mit deutlich engerem Tracking, das fast eng gesetzt wirkt. Body bleibt bei 16px / 24px Gewicht 400; Lead-Text bei 21px / 1.45 mit -0.006em. Eyebrow-Labels nutzen 11px / 600 monospace mit 0.18em Laufweite in Orange (#FF7A1A auf dunklem Grund). Für kleine Labels über unruhigem Hintergrund gilt: keine Textschatten, sondern Flächenkontrast über den Hintergrund-Container (z.B. Hintergrund #F4F3EF als Deckfläche).

Layout

Das Layout ist fluid mit einer fixen Container-Obergrenze von 1280px und 12 Spalten; Hero-Inhalte werden auf max. 980px begrenzt. Der Seitenrand ist fluid über clamp(22px, 4.2vw, 64px). Der Abstand zwischen Abschnitten folgt dem 2xl-Schritt 68px, Karten-Innenabstand xl 32px, Gutter 32px. Der Rhythmus ist großzügig: lg (28px) trennt Textblöcke, md (24px) Button-Padding, xs (12px) Icon-Lücken. Der Weißraum ist bewusst groß, damit die Headline die Fläche dominiert.

Elevation & Depth

Tiefe entsteht über Flächenkontrast und Rahmen, nicht über schwere Schatten. Level 1 (Basis): Papierweiß #F4F3EF mit Punktraster. Level 2 (Karten, Hinweisfelder): #FFFFFF mit 1px solid rgba(16,17,20,.16). Level 3 (Overlays wie der Consent-Layer): #0A0A0A mit box-shadow 0 22px 60px rgba(10,10,10,.08) und Kontur-Halo 0 0 0 14px #F4F3EF, damit der Layer sich vom Hero absetzt. Die Hero-Hinweisbox nutzt dieselbe 14px-Halo-Technik.

Shapes

Die Formsprache heißt Architectural Sharpness: fast rechtwinklig. Buttons sind 2px Radius, Inputs und Tags 3px, Karten 3px bis 4px. Nur Status-Pills und Kreisausschnitte erhalten 9999px. Der Radius ist klein gewählt, damit die Quadratmotive des Logos (Rasterkacheln) mit der UI harmonieren.

Components

Action Elements Der Primär-Button ist 56px hoch, Padding 0 28px, Schrift 15.5px / 600, Hintergrund Graphit #101114, Text #F4F3EF, Radius 2px. Vor dem Label steht ein 9×9px-Orangequadrat. Hover verschiebt mit transform: translateY(-1px) in 200ms. Der Sekundär-Link ("Gespräch anfragen") hat keine Fläche, 15.5px / 560 und einen Pfeil, der bei Hover um 4px nach rechts gleitet (200ms). Fokus: outline 2px solid #F25A1D mit 4px Offset.

Containers & Surfaces Karten sind weiß (#FFFFFF) mit 1px-Kontur rgba(16,17,20,.16), Radius 3px und Innenabstand 32px. Die Hover-Stufe wechselt auf #ECEBE6 in 200ms ease-out. Der Consent-Overlay ist die einzige dunkle Fläche (#0A0A0A) mit weißer Schrift.

Inputs & Interaction Formularfelder: Hintergrund #FFFFFF, Kontur 1px rgba(16,17,20,.16), Radius 2px

Do's and Don'ts

**Do**

• Verwende Signalorange #F25A1D ausschließlich als Akzent (Fokus, Statusquadrat, Trail), nie als Flächenfarbe für Text-CTAs.
• Setze Headlines mit negativem Tracking (-0.04em bis -0.064em) und Gewicht 600 bis 620.
• Halte Karten auf #FFFFFF mit 1px rgba(16,17,20,.16) Kontur statt mit Schatten.
• Nutze den 68px-Abschnittsabstand, damit der Weißraum die Aussage trägt.

**Don't**

• Don't use orange as a button background for primary CTAs; the CTA surface is graphite #101114.
• Don't add gradients, glassmorphism or glow; the system is flat and architectural.
• Don't exceed 3px radius on cards and inputs; rounded pills are reserved for status badges.
• Don't use marketing superlatives in copy; keep claims concrete and controllable.