VeritexAI / BidReady — Brand Style Guide

1. Color Palette

The palette follows a Material Design 3 tone structure — dark surfaces with luminous accent colors. All colors are defined as Tailwind tokens for web use; use the hex/RGB values below for slides, print, and design tools.

Surface

#0B1326

rgb(11, 19, 38)

Container Lowest

#060E20

rgb(6, 14, 32)

Container Low

#131B2E

rgb(19, 27, 46)

Container

#171F33

rgb(23, 31, 51)

Container High

#222A3D

rgb(34, 42, 61)

Container Highest

#2D3449

rgb(45, 52, 73)

Surface Bright

#31394D

rgb(49, 57, 77)

Primary

#C0C1FF

rgb(192, 193, 255)

Primary Dark

#6D70FB

rgb(109, 112, 251)

Primary Container

#050060

rgb(5, 0, 96)

On Primary

#1000A9

rgb(16, 0, 169)

Secondary & Tertiary

Secondary

#BEC6E0

rgb(190, 198, 224)

Secondary Container

#3F465C

rgb(63, 70, 92)

Tertiary

#ADC6FF

rgb(173, 198, 255)

Tertiary Container

#00163A

rgb(0, 22, 58)

Text & Outline

On Surface

#DAE2FD

rgb(218, 226, 253)

On Surface Variant

#C6C6CD

rgb(198, 198, 205)

Outline

#909097

rgb(144, 144, 151)

Outline Variant

#45464D

rgb(69, 70, 77)

Error / Status

Error

#FFB4AB

rgb(255, 180, 171)

Error Container

#93000A

rgb(147, 0, 10)

BidReady Green

#16A34A

rgb(22, 163, 74)

BidReady Orange

#EA580C

rgb(234, 88, 12)

2. Gradients & Effects

These treatments create depth and visual interest across the brand. Use them consistently in decks and marketing.

Primary Gradient

linear-gradient(135deg, #C0C1FF 0%, #6D70FB 100%)
Use for hero text, accent bars, and CTA buttons on dark backgrounds.

Surface Effects

Glass

rgba(45,52,73,0.6) + blur(12px)
border: rgba(192,193,255,0.1)

Glass Subtle

rgba(23,31,51,0.8) + blur(8px)

Glow Purple

box-shadow: 0 0 40px rgba(109,112,251,0.15)

Glow Purple (Large)

box-shadow: 0 0 80px rgba(109,112,251,0.2)

Divider

linear-gradient(to right, transparent, rgba(192,193,255,0.3), transparent)
Horizontal divider — fades at both edges for a subtle, elegant separator.

3. Typography

Two typefaces create a clear hierarchy: a geometric sans for headlines and a humanist sans for body text. Both are available free from Google Fonts.

Headlines — Space Grotesk

The quick brown fox jumps

Space Grotesk Weights: 400, 500, 600, 700 Use: Headlines, titles, display text

Body & Labels — Manrope

Manrope is a modern, geometric sans-serif designed for optimal readability across screen sizes. Use it for body copy, UI labels, captions, and any running text. It pairs naturally with Space Grotesk thanks to similar geometric DNA but softer, more readable letterforms at small sizes.

Manrope Weights: 300–800 Use: Body, labels, captions, UI

Role	Font	Weight	Size (slides)
Slide Title	Space Grotesk	700	36–44pt
Section Header	Space Grotesk	600	28–32pt
Subtitle	Manrope	600	20–24pt
Body Text	Manrope	400	16–18pt
Caption / Label	Manrope	500	12–14pt
Data / Code	Space Grotesk	400	14–16pt

4. Usage Guidelines

Consistent application of color keeps the brand recognizable across web, decks, and print.

Color Pairing

Use Surface (#0B1326) as the default slide/page background
Set body text in On Surface (#DAE2FD) on dark backgrounds
Use Primary (#C0C1FF) or the gradient for headlines and accents
Use Primary Dark (#6D70FB) for interactive elements and CTAs
Use On Surface Variant (#C6C6CD) for secondary/muted text
Use surface container shades to create layered card depth
Reserve BidReady Green/Orange for status indicators only

Don't

Don't place light text (#DAE2FD) on light backgrounds
Don't use Primary (#C0C1FF) for large blocks of body text
Don't pair Error (#FFB4AB) with BidReady Orange — too similar in tone
Don't use Surface Bright (#31394D) as a text color — too low contrast
Don't mix the primary gradient with a second multi-color gradient
Don't use pure white (#FFFFFF) or pure black (#000000) — stay within the palette

Dark vs. Light Contexts

Dark backgrounds (default)

Background: Surface or any container shade
Text: On Surface / On Surface Variant
Accents: Primary, Primary Dark, Tertiary
Borders: Outline Variant (#45464D) or border-glow

Light backgrounds (print / one-pagers)

Background: White or very light gray (#F8F9FC)
Text: Surface (#0B1326) or Container High (#222A3D)
Accents: Primary Dark (#6D70FB) or On Primary (#1000A9)
Borders: Outline (#909097) at 20–40% opacity

5. Accessibility & Contrast

WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Key pairings are evaluated below.

Foreground	Background	Preview	Ratio	Normal	Large
On Surface (#DAE2FD)	Surface (#0B1326)	Sample	12.6:1	AAA	AAA
Primary (#C0C1FF)	Surface (#0B1326)	Sample	9.5:1	AAA	AAA
On Surface Variant (#C6C6CD)	Surface (#0B1326)	Sample	10.0:1	AAA	AAA
Primary Dark (#6D70FB)	Surface (#0B1326)	Sample	4.5:1	AA	AAA
Outline (#909097)	Surface (#0B1326)	Sample	5.7:1	AA	AAA
Outline Variant (#45464D)	Surface (#0B1326)	Sample	2.0:1	Fail	Fail
Surface (#0B1326)	White (#FFFFFF)	Sample	17.4:1	AAA	AAA
Primary Dark (#6D70FB)	White (#FFFFFF)	Sample	3.9:1	Fail	AA
On Primary (#1000A9)	White (#FFFFFF)	Sample	9.7:1	AAA	AAA

Key Takeaways

Outline Variant (#45464D) is decorative only — never use it for text on dark backgrounds.
Primary Dark (#6D70FB) on white fails normal-text AA. On light backgrounds, use On Primary (#1000A9) instead for body text, or restrict #6D70FB to large/bold text.
All primary pairings on dark surfaces pass AAA — the dark palette is inherently accessible.

6. Quick Reference

Copy-paste values for slides, Figma, Canva, and design tools.

Token	Hex	RGB	Usage
Surface	#0B1326	11, 19, 38	Page/slide background
Container	#171F33	23, 31, 51	Card backgrounds
Container High	#222A3D	34, 42, 61	Elevated cards, hover states
On Surface	#DAE2FD	218, 226, 253	Primary text on dark
On Surface Variant	#C6C6CD	198, 198, 205	Secondary/muted text on dark
Primary	#C0C1FF	192, 193, 255	Headlines, accents on dark
Primary Dark	#6D70FB	109, 112, 251	CTAs, links, interactive
On Primary	#1000A9	16, 0, 169	Text/accents on light backgrounds
Secondary	#BEC6E0	190, 198, 224	Subtle text, labels
Tertiary	#ADC6FF	173, 198, 255	Info accents, links
Outline	#909097	144, 144, 151	Borders, captions
Outline Variant	#45464D	69, 70, 77	Subtle dividers (not text)
Error	#FFB4AB	255, 180, 171	Error states
BidReady Green	#16A34A	22, 163, 74	Success, positive status
BidReady Orange	#EA580C	234, 88, 12	Warning, attention status

VeritexAI