Brand & Color Guidelines

Our visual identity, in one place — colors, functional tokens and typography you can copy and reuse.

These are the building blocks of the RockQ brand. Click any color or token to copy it to your clipboard. The core palette defines who we are; the neutral scale and functional colors keep product and communication consistent across teams.

Logos

The RockQ logo and icon in every approved color combination. Use the transparent versions whenever possible; pick the variant with the strongest contrast against your background. Each asset is available as SVG.

Full 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

Brand colors

The five core colors of RockQ. Foundation Black and Pulse Orange carry the identity; the rest provide calm, neutral support.

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 scale

A warm grayscale ramp derived from Foundation Black through to white — for backgrounds, borders, dividers and text hierarchy.

Functional colors

Status and state colors tuned to sit beside the warm brand palette. Use the strong shade for icons and labels, the soft tint for backgrounds and banners.

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.

Accent & data colors

A harmonized set of categorical hues for charts, tags, labels and multi-series data — all aligned with the warm brand temperature.

Typography

Suisse Int'l is our only typeface. Book and Semibold do most of the work; all weights ship with matching italics.

Suisse Int'l · Book + Semibold

Ag Your digital transformation partner

Light

Book

Regular

Medium

Semibold

Bold

Black

Suisse Int'l is applied automatically across the site via the --font-primary CSS variable. No other typeface should be used.