Brand & Design System

QualiBooth brand guide

The living source of truth for our visual identity — logo, color, type, components, icons, and imagery. Everything here renders the real design tokens used across the site.

Logo

Primary mark on light; reversed on dark/navy. Keep clear space of ≥ the “Q” height; never recolor, stretch, or add effects.

Color

Black is the primary action color; the teal→green gradient is reserved for accents and key words; magenta highlights promos and featured links; navy anchors dark sections.

Brand (teal → green accent)

brand-50

#eafaf6

brand-100

#c8f1e6

brand-300

#64f58d

brand-400

#1dd3b0

brand-500

#0fa489

brand-600

#0b7d68

brand-700

#075946

Text & surfaces

ink

#0a0f1c

ink-soft

#3a4757

navy

#19123b

navy-soft

#1f2a3b

cta (black)

#0a0a0a

Magenta accent

magenta

#b41077

magenta-light

#f7e9f2

Signature gradient

#64f58d → #1dd3b0 → #56b3ff · used for accent text, stat numbers, and primary v2 CTAs.

Typography

Headings in Red Hat Display; body in Lexend. Both self-hosted (no Google Fonts). Match the original Webflow site.

Display / H1 · 72px bold

Make the web accessible

H2 · 36px bold

Proven compliance, zero guesswork

H3 · 24px bold

Find every issue

Body · 18px · Lexend

QualiBooth scans, scores, and fixes accessibility across your web and mobile apps — and proves it.

Accent / gradient

accessible

Buttons

Badges & pills

Status pill Highlight Soon WCAG 2.2

Cards

Soft card

Border + subtle shadow. Default content card.

Gradient-border

Bento / feature cards in the v2 system.

Dark card

Used in dark sections and CTAs.

Icons

Inline stroke icons (1.6px), 24px grid, currentColor. Used in nav, features, and industry lists.

gauge

grid

file

eye

sparkles

clipboard

settings

volume

book

target

alert

globe

flag

chart

shield

users

bank

bed

education

cart

heart

Imagery

Two sources: real product screenshots for any UI, and Flux-generated brand art (abstract gradients + authentic, diverse people) for atmosphere. Never use AI to fake UI text. Brand art uses teal/green/indigo on dark navy.

Authentic, diverse people imagery example

Voice & tone

Confident, not hype

Lead with proof and outcomes (“cut WCAG errors by 78%”), not buzzwords.

Plain & human

Accessibility is for real people. Avoid jargon; explain the “so what”.

Action-oriented

Verbs first: Scan, Score, Fix, Prove. Every section earns the next click.