Brand guidelines

Assets, colours,
and how to use them.

Download official QuantumBench logo files and follow these guidelines when representing the brand in any context.

Logo

The QuantumBench mark is a Bloch sphere cross-section — a circle (the state space boundary), a phase axis at 60°, and a qubit dot at the origin. Always render in a single foreground colour on a solid background.

QuantumBench
Wordmark · Dark
QuantumBench
Wordmark · Light
Symbol · Dark
Symbol · Light
QuantumBench
Academy
Horizontal lock-up · Dark
QuantumBench
Academy
Horizontal lock-up · Light

Typography

Three typefaces, three roles. Never substitute or mix weights outside these conventions.

Space Grotesk

Display / UI

Feel the physics.

Headlines, navigation, buttons, and all interactive labels. Weight: 400–600.

font-family: 'Space Grotesk', sans-serif;

Inter

Body

Every concept built in a browser tool before it appears in an equation.

All running body copy and paragraph text. Weight: 400.

font-family: 'Inter', sans-serif;

JetBrains Mono

Monospace

H · CNOT · T · S†

Code, gate labels, measurement readouts, and all monospace UI elements.

font-family: 'JetBrains Mono', monospace;

Colour palette

QuantumBench is strictly monochromatic. Black, white, and shades of grey. No brand colour exists outside this range.

Black

#0A0A0A

Primary background (dark mode)

Surface

#111111

Card / panel background

Text primary

#F0F0F0

Headings & body in dark mode

Text secondary

#808080

Supporting copy, labels

White

#FFFFFF

Primary background (light mode)

Surface light

#F5F5F5

Cards in light mode

Text dark

#0A0A0A

Headings & body in light mode

Border

rgba(255,255,255,0.12)

Dividers in dark mode

Usage guidelines

These rules exist to keep the brand legible and consistent across every context.

Do

  • Use the white logo on dark backgrounds (#0A0A0A or darker)
  • Use the black logo on white or light backgrounds
  • Maintain a minimum clear space of 16 px on all four sides
  • Use SVG format at all sizes above 24 px
  • Use the full wordmark in editorial and marketing contexts
  • Use the symbol mark alone in compact UI contexts (favicons, app icons)

Don't

  • Don't add colour to the logo — it is always monochrome
  • Don't rotate, skew, or distort the logo mark
  • Don't place the logo on low-contrast backgrounds
  • Don't separate 'Quantum' from 'Bench' in the wordmark
  • Don't use the logo smaller than 20 px in height
  • Don't add drop shadows, glows, or filters to the logo

Clear space & minimum size

Always maintain 16 px of clear space around the logo. Minimum reproduction height: 20 px for the symbol, 32 px for the wordmark.

16 px16 px16 px16 px
Min symbol · 20 px
QuantumBenchMin wordmark · 32 px height