Zum Inhalt springen
Website · suiteultimate.com
Marketing Design System

Premium, technisch,
dark-fähig.

Tokens und Komponenten für suiteultimate.com. Cyan und Violet bleiben als kontrollierte Akzente – ohne Neon, mit klarer Hierarchie und Soft-Surfaces.

00

Website-Vorschau

So wirken Hero, Cards und CTAs im aktuellen Theme. Oben rechts zwischen Hell und Dunkel wechseln.

Die Enterprise-Erweiterung für SuiteCRM 8

Warum Dutzende Add-ons,
wenn ein Upgrade reicht?

SuiteUltimate vereint essentielle Enterprise-Module in einem einzigen, update-sicheren Workspace für SuiteCRM 8.

Workflow Engine

Prozesse modellieren und Abläufe nachvollziehbar steuern.

Health Center

Systemzustände sichtbar machen – mit klaren nächsten Schritten.

SuiteSMTP

Zuverlässiger E-Mail-Versand, steuerbar und nachvollziehbar.

01

Prinzipien

Drei Regeln, die den Look von „gut“ zu „premium“ ziehen.

1. Klarheit vor Effekt

Jedes Glow, jeder Gradient braucht eine Hierarchie-Aufgabe. Max. 1–2 Gradients pro Viewport.

2. Eine dominante Farbe

Primary Blue führt. Cyan und Violet unterstützen – nie gleich laut wie der CTA.

3. Karten erzählen Nutzen

Weiche Shadows, feine Borders, Hover = leichte Hebung. Keine Glow-Explosion auf jeder Card.

Do Subtile Aurora im Hintergrund, ein Text-Gradient in der Hero-H1, ein CTA-Gradient auf dem Primary-Button.
Don’t Cyan-Glow auf allen Feature-Cards, starke Glass-Overlays überall, bunte Multi-Stop-Verläufe im Body-Text.
02

Farbe

Brand Core teilt sich mit dem Produkt-DS. Marketing ergänzt gedämpfte Accents und Surfaces.

Brand Core

Navy--su-navy · #001631
Primary--su-primary · #165DCC
Ink--su-ink · #0F172A
Primary Soft--su-primary-soft

Marketing Accents (kontrolliert)

Cyan--su-cyan · #0A7A8C
Cyan Bright--su-cyan-bright
Violet--su-violet · #7C5CF0
Success--su-green · #0D815E

Gradients

Text Gradient--su-gradient-text
CTA Gradient--su-gradient-cta
03

Typografie

Plus Jakarta Sans. Display eng, Body luftig. Markant, aber nicht laut.

display
Warum ein Upgrade reicht
title
Ein CRM. Mehr Möglichkeiten.
subtitle
Workflow Engine
body
SuiteUltimate vereint essentielle Enterprise-Module in einem update-sicheren Workspace.
label
Die Enterprise-Erweiterung
04

Spacing & Radius

4px-Basis wie im Produkt-DS, plus Marketing-Stufen für Sections.

4 · --su-space-1
8 · --su-space-2
12 · --su-space-3
16 · --su-space-4
24 · --su-space-6
32 · --su-space-8
48 · --su-space-12
64 · --su-space-16
96 · --su-space-24 · Section

Radius

sm 6 · md 10 · lg 16 · xl 20 · pill 9999

05

Shadow & Surface

Vier Surface-Stufen. Shadows weich und kurz – Personio-nah, nicht glassmorph überall.

Flat

Page background

Raised

Feature cards

Elevated

Hero visual

Hero

Primary mockups

06

Komponenten

Kernbausteine der Marketing-Site – live und tokenbasiert.

Buttons

Live-Demo buchen Funktionsübersicht

Eyebrow / Badge

Die Enterprise-Erweiterung für SuiteCRM 8

Feature Cards

Workflow Engine

Prozesse modellieren, Bedingungen setzen und Abläufe nachvollziehbar steuern.

Health Center

Scheduler, Speicher und Versand im Blick – mit klaren nächsten Schritten.

SuiteSMTP

Zuverlässiger E-Mail-Versand für SuiteCRM 8 – steuerbar und nachvollziehbar.

Trust Bar

Betrieb in Ihrer Infrastruktur Für SuiteCRM 8 entwickelt Update-sicherer Workspace

Product Visual

SuiteUltimateCONTROL CENTER
System & Admin
Workflows
Analytics
Integrationen
07

Patterns

Wiederkehrende Seitenabschnitte – Reihenfolge und Inhalt.

  1. Hero — Eyebrow · H1 · Lead · CTAs · Visual
  2. Trust — 3 kurze Claims
  3. Marquee — Branchen-Logos, zentriert, max. Inhaltsbreite
  4. Feature Grid — Section Head + Cards
  5. Architecture / Proof — optional tiefere Erklärung
  6. FAQ — Accordion
  7. Closing CTA — eine klare Handlung
  8. Footer — Navigation + Legal
08

Dark Mode

Premium Night – tiefes Navy, desaturierte Accents, weniger Glow.

  • Hintergrund #0B1120, Surfaces leicht aufgehellt
  • Borders: Weiß bei ~9–14 % Opacity
  • Text-Gradient heller (Sky → Soft Violet), nie überstrahlt
  • CTA-Gradient bleibt lesbar und kontrastreich
  • Aurora-Opacity niedriger als im Light Mode
  • Theme-Toggle: System → Light → Dark

Oben rechts Theme umschalten, um Tokens live zu prüfen.

09

Produkt-Bridge

Was Website und Addon teilen – und was getrennt bleibt.

Shared
  • Navy, Primary Blue, Success/Danger
  • Radius-Stufen sm–lg
  • Spacing-Basis 4/8/12/16/24/32/48
  • Fokus-Ring Primary
Nur Website
  • Cyan / Violet Accents & Gradients
  • Aurora, Marketing-Shadows
  • Display-Typografie, Hero, Marquee
  • Glass nur dosiert (Header)
10

Export

Token-Block als CSS oder JSON – für Implementierung in site.css.

Buttons oben rechts laden suiteultimate-web-tokens.css bzw. .json herunter. Der Style-Block #web-tokens ist die Single Source of Truth.

CSS-Variablen anzeigen 
Lade…