Marken- & Farbrichtlinien

Unsere visuelle Identität an einem Ort — Farben, funktionale Tokens und Typografie zum Kopieren und Wiederverwenden.

Dies sind die Bausteine der RockQ-Marke. Klicken Sie auf eine beliebige Farbe oder ein Token, um es in die Zwischenablage zu kopieren. Die Kernpalette definiert, wer wir sind; die Neutral-Skala und die funktionalen Farben sorgen für Konsistenz über alle Teams hinweg.

Logos

Das RockQ-Logo und -Icon in allen freigegebenen Farbkombinationen. Verwenden Sie nach Möglichkeit die transparenten Versionen und wählen Sie die Variante mit dem stärksten Kontrast zum Hintergrund. Jedes Asset steht als SVG zur Verfügung.

Logo

Black · transparentSVG

White · transparentSVG

Orange · transparentSVG

Icon

White on OrangeSVG

Black on OrangeSVG

White on BlackSVG

Black on WhiteSVG

Orange on BlackSVG

Orange on WhiteSVG

Black · transparentSVG

Orange · transparentSVG

White · transparentSVG

Markenfarben

Die fünf Kernfarben von RockQ. Foundation Black und Pulse Orange tragen die Identität; der Rest sorgt für ruhige, neutrale Unterstützung.

Foundation Black

Primary text, headings, core UI surfaces.

Pulse Orange

CTAs, highlights, the single brand accent.

Alabaster

Page backgrounds and subtle borders.

Ash

Secondary text and muted elements.

White

Cards, light surfaces and inverted text.

Neutral-Skala

Eine warme Graustufen-Skala von Foundation Black bis Weiß — für Hintergründe, Rahmen, Trennlinien und Texthierarchie.

Funktionale Farben

Status- und Zustandsfarben, abgestimmt auf die warme Markenpalette. Verwenden Sie den kräftigen Ton für Icons und Labels, den weichen Ton für Hintergründe und Banner.

Success

· Verdant

Confirmations, valid states, positive deltas.

Warning

· Amber

Caution, pending review, non-blocking issues.

Error

· Signal Red

Failures, destructive actions, invalid input.

Info

· Steel Blue

Neutral hints, tips and system messages.

Neutral

· Stone

Disabled, inactive and placeholder states.

Discovery

· Plum

New, beta and AI-powered features.

Highlight

· Pulse Orange

Featured items and brand-accent callouts.

Accent Teal

· Teal

Links, secondary actions and data accents.

Akzent- & Datenfarben

Ein harmonisiertes Set kategorialer Farbtöne für Diagramme, Tags, Labels und mehrreihige Daten — alle abgestimmt auf die warme Markentemperatur.

Typografie

Suisse Int'l ist unsere einzige Schrift. Book und Semibold übernehmen den Großteil; alle Schnitte gibt es mit passenden Kursiven.

Suisse Int'l · Book + Semibold

Ag Your digital transformation partner

Light

Book

Regular

Medium

Semibold

Bold

Black

Suisse Int'l wird über die CSS-Variable --font-primary automatisch auf der gesamten Website angewendet. Es sollte keine andere Schrift verwendet werden.