Feature-Karte
Haarlinie, 18-px-Radius, optionale Symbol-Kachel in Petrol-Wash. Kein Schatten im Ruhezustand.
Design-System · v2
Das avectra Design-System
Der lebende Referenz-Styleguide: alle Tokens und Komponenten aus tokens.css und base.css — genau so, wie Produktseiten sie verwenden. Von Dennis vorgegeben (2026-07-14).
Foundations
Farben
Petrol-Teal als Marke, Slate als Neutrale, Ink für dunkle Panels. Diese Seite folgt der Systemeinstellung — im dunklen Theme zeigen die Felder automatisch die Dunkel-Werte. Nur über var(--…) verwenden, nie als Hex.
Flächen & Text
Akzent & Marke
Dunkle Panels & Status
Foundations
Typografie
Space Grotesk für Headlines und die Wortmarke, IBM Plex Sans für Text und UI. Beide self-hosted als variable Fonts (Latin, OFL) — niemals von einem CDN.
Skala
| H1 · Display 700 | Klare Aussagen |
|---|---|
| H2 · Display 700 | Sektionstitel |
| H3 · Display 600 | Komponententitel |
| Body · 16/400 | Fließtext für Absätze und Beschreibungen — angenehm lesbar bei einer Zeilenhöhe von 1,6. |
| Small · 15/600 | Labels, Buttons und Metadaten |
| Kennung | Eyebrow in Versalien |
Komponenten
Buttons & Badges
Button-Varianten (12-px-Radius, Gewicht 600)
Auf dunklen Panels (Hero/CTA)
Badges (Pillenform ist für Badges reserviert)
Marken-Badge
Neutral
Dunkel
Komponenten
Karten
Variante mit Schlüssel
Die Kennzeile über dem Titel nur verwenden, wenn sie echte Information trägt.
49 € / Monat, zzgl. USt.
- Preiskarte mit Akzentrand
- Höchstens eine „empfohlen"
Komponenten
Formulare
Felder, Fehlerzustand, Formularzeile
Sektionen
Akkordeon, KI-Hinweis & CTA
Akkordeon (FAQ) — natives details/summary, kein JavaScript
Woher kommt dieses Design?
Dennis hat es am 2026-07-14 als verbindliche Vorgabe geliefert (design-system/avectra-design-system.html). tokens.css und base.css setzen es AA-geprüft um.
Warum ist das Petrol der Buttons dunkler als #0FB5AA?
Die Marken-Basis #0FB5AA trägt keinen Text (Kontrast zu Weiß nur 2,6:1). Für Links und Buttons gilt das minimal nachgedunkelte --farbe-akzent (4,8:1). #0FB5AA bleibt für Logo, Punkte und Glows.
Gibt es ein dunkles Theme?
Ja — diese Seite folgt der Systemeinstellung (prefers-color-scheme), erzwingbar per data-theme="dark" auf dem html-Element. Die dunklen Panels bleiben in beiden Themes dunkel.
KI-Transparenz-Hinweis (Pflichtbaustein jeder Produktseite)
KI-Transparenz Dieses Produkt wird von einem KI-Agenten der Kuventa GmbH aufgebaut und betrieben. Verantwortlich bleibt die Kuventa GmbH — Details im Impressum.
Die CTA-Sektion
Dunkles Petrol-Panel mit Verlauf und Koralle-Glow — höchstens eines pro Seite, direkt vor dem Footer.