Gemeinsamer Kern
Navy, Primary Blue, Erfolg/Fehler, Radius- und Spacing-Stufen sowie Fokus-Ringe sind abgestimmt – wiedererkennbar in CRM und Website.
Brand · Produkt · Website
Zwei Systeme.
Zwei Systeme.
Eine Marke.
AgenticUltimate nutzt ein gemeinsames Markenfundament – und zwei darauf aufbauende Designsysteme: eines für die Produkt-Oberfläche im Addon, eines für AgenticUltimate.
Warum zwei Designsysteme?
Produkt und Marketing haben unterschiedliche Aufgaben. Ein gemeinsames Fundament hält die Marke erkennbar – getrennte Token-Schichten verhindern, dass das CRM wie eine Landingpage wirkt oder die Website wie ein Admin-Panel.
Getrennte Rollen
Das Addon optimiert Dichte und Bedienung. Die Website optimiert Klarheit, Conversion und Premium-Wirkung – mit dosierten Accents.
Skalierbar
Neue Module und Seiten greifen auf dokumentierte Tokens und Komponenten zurück – weniger visuelle Sonderwege, schnellere Umsetzung.
AgenticUltimate UI 1.0
Produkt-Designsystem (Addon)
Für die Oberfläche in SuiteCRM: Formulare, Tabellen, Dialoge, Wizards und dichte Arbeitsflächen. Funktional, klar, enterprise-tauglich.
| Bereich | Inhalt |
|---|---|
| Farben | Navy (#001631), Primary (#165DCC), semantische Statusfarben, Surfaces für Light-Arbeitskontexte |
| Typografie | Kompakte UI-Skala für Labels, Tabellen und Formulartexte – Lesbarkeit bei hoher Informationsdichte |
| Spacing & Radius | 4/8/12/16/24/32-Basis; Radius sm–lg für Inputs, Cards und Dialoge |
| Komponenten | Buttons, Inputs, Selects, Dialoge, Tabs, Tables, Wizard-Schritte, Status-Badges |
| Dichte | Optional kompakte Darstellung für Admin- und Listenansichten |
Zielgruppe sind Administratoren und Power-User im CRM. Jede Entscheidung folgt der Frage: Hilft es, Daten schneller und sicherer zu bearbeiten?
AgenticUltimate Web 1.0
Website-Designsystem (Marketing)
Für AgenticUltimate: Hero, Feature-Cards, Trust, Megamenü, Dark Mode. Premium, technisch, mit kontrolliertem Cyan und Violet.
Prinzipien
Klarheit vor Effekt – max. 1–2 Gradients pro Viewport.
Eine dominante Farbe – Primary führt, Cyan/Violet unterstützen.
Karten erzählen Nutzen – weiche Shadows, feine Borders, dezenter Hover.
Bausteine
Display-Typografie, Eyebrow-Badges, Feature Cards, Trust-Bars, Product Visuals, Closing-CTAs, Megamenü. Light und Dark aus einer Token-Quelle.
| Token-Familie | Beispiele |
|---|---|
| Brand Core | --su-navy, --su-primary, --su-ink |
| Accents | --su-cyan, --su-violet (dosiert) |
| Surfaces | Flat · Raised · Elevated · Hero |
| Shadows | --su-shadow-sm bis --su-shadow-lg, Hover ohne Neon-Ring |
| Motion | kurze Transitions, respektiert prefers-reduced-motion |
Produkt-Bridge
Was sich teilt – und was bewusst getrennt bleibt.
Shared
Navy und Primary Blue · Success/Danger · Radius sm–lg · Spacing-Basis · Fokus-Ring in Primary · Markenname und Icon-Sprache
Nur Website
Cyan/Violet-Accents und Gradients · Aurora-Hintergründe · Display-Headlines · Marquee und Marketing-Shadows · Glas nur dosiert (Header)
Für Teams & Umsetzung
So nutzen Sie die Systeme im Alltag.
Produkt entwickeln
AgenticUltimate UI 1.0 als Referenz für neue Addon-Screens. Bestehende Komponenten bevorzugen, bevor Varianten entstehen.
Website erweitern
AgenticUltimate Web 1.0 und die Token in site.css. Neue Sections an Patterns (Hero → Trust → Features → CTA) ausrichten.
Qualität sichern
Kontrast, Tastaturbedienung und reduzierte Bewegung prüfen. PageSpeed und Accessibility bleiben Teil des Lieferstandards.
Designsysteme live erkunden
Das interaktive Website-Designsystem zeigt Tokens, Komponenten und Dark Mode. Die Produkt-UI bleibt die Leitplanke für das Addon in SuiteCRM.