Every color, typeface, component, and rule — unified into one authoritative source of truth for the VOXO brand.
Version
2.0 — 2026
Primary Typeface
Eina 01
Brand Color
#F92120
Audience
Independent Pharmacy
01 — Logo
Logo System
The VOXO mark is a wide W-form built from four tapered arms with rounded tips. It pairs with the geometric VOXO wordmark in multiple configurations — horizontal, vertical, color, mono, and reversed — for use across every surface.
Horizontal Lockup — Color
Primary — Light Background
Primary — Dark Background
Vertical Lockup — Color
Vertical — Light Background
Vertical — Dark Background
Horizontal Lockup — Monochrome Dark
Dark — Light Background
White — Dark Background
Vertical Lockup — Monochrome Dark
Dark — Light Background
White — Dark Background
Grayscale
For grayscale applications where shades of a single color are available, the logo must be used with dark shades on light backgrounds or light shades on dark backgrounds. The symbol outline must be clearly distinguishable from the background color.
Grayscale — Light Background
Grayscale — Dark Background
Grayscale Vertical — Light Background
Grayscale Vertical — Dark Background
Mark Only — All Variants
Compressed mark used for small-scale contexts — favicon, app tile, social avatar, and website footer.
Color
Dark
Dark Grad
White
White Grad
Thumbnail Mark — Favicon & App Icon Sizes
120×120
80×80
48×48
32×32
Dark BG
Do
Use the full horizontal lockup as the primary logo across all digital and print touchpoints.
Do
Use the vertical lockup for square formats — social avatars, app icons, signage, and merch.
Do
Maintain clear space equal to the cap-height of "O" in VOXO around all sides of the lockup.
Don't
Never stretch, rotate, skew, recolor individual arms, or add drop shadows to the mark.
Don't
Never place the logo where contrast falls below WCAG AA (4.5:1) against the background.
Don't
Never retype "VOXO" in another typeface or use the wordmark without the mark as a brand introduction.
02 — Color
Color Palette
VOXO Red is the primary signal — urgent, confident, unmistakable. Blue Charcoal grounds the system with authority. Every other color serves a specific, functional role.
Brand Color
VOXO Red
#F92120
Primary brand color. CTA buttons, logo mark, key accents.
Blue Charcoal
#001520
Dark backgrounds, body text, navbar.
Primary Colors
Dodger Blue
#268BFF
Links, info states
Blue Ribbon
#FF8827
Secondary highlights
Heliotrope
#8459FF
Special callouts
Athens Gray
#ECEEF4
Page backgrounds
Secondary Colors
Electric Yellow
#FFD600
Warnings, highlights
Emerald
#48CA63
Success, positive states
Orange
#0D5257
Pharmacy UI accents
CSS Token
Color
Hex
Primary Use
Accessible On
--voxo-red
VOXO Red
#F92120
CTAs, logo, primary brand moments
White, Athens Gray
--blue-charcoal
Blue Charcoal
#001520
Headings, body text, nav
White, Light tones
--dodger-blue
Dodger Blue
#268BFF
Links, info states
White, Dark tones
--emerald
Emerald
#48CA63
Success, confirmations
White, Navy
--electric-yellow
Electric Yellow
#FFD600
Warnings, caution states
Navy, Dark text
--athens-gray
Athens Gray
#ECEEF4
Page backgrounds, input fields
Navy, Dark text
03 — Typography
Typography
Eina 01 is VOXO's sole typeface — a corporate geometric sans-serif designed at EINA, University Centre of Design and Art. Clean, confident, and highly legible at every scale. It embodies an educational concept that transcends simple typographical use.
Primary — Display & Body
Eina 01
Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*?/()
Eina Free Font Family was designed as a corporate typeface for the design school "EINA, University Centre of Design and Art." It's not just a font to be used — Eina embodies an educational concept that transcends simple typographical use. Eina is a typeface to be explained and used to teach typography.
Type Scale
StyleSampleSizeWeightLine Height
Display XL
VOXO
64px
700
1.0
Display LG
Pharmacy AI
44px
700
1.05
Heading 1
Built for Scale
32px
700
1.1
Heading 2
Smarter Communications
24px
600
1.2
Heading 3
Prescription Refills
18px
600
1.3
Body LG
VOXO gives patients faster answers.
17px
400
1.7
Body MD
Connect every patient touchpoint in one place.
14px
400
1.65
Caption
Last updated March 2026 · v2.0 · Built in Mississippi
12px
400
1.6
Label
API · TOKEN · VERSION
11px
700
1.5
04 — Spacing
Spacing & Grid
An 8px base unit governs all spacing decisions, creating consistent rhythm across every layout at every breakpoint.
--s1
4px
Icon gaps, micro spacing within components
--s2
8px
Badge padding, tight label gaps
--s4
16px
Default component padding, form elements
--s6
24px
Card padding, between form groups
--s8
32px
Section internal spacing, between major components
--s12
48px
Between page sections
--s16
64px
Page horizontal margins, major section gaps
--s20
80px
Hero vertical padding, major section padding
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
4 col
4 col
4 col
8 col
4 col
3 col
6 col
3 col
05 — Components
Buttons
VOXO Red drives the primary CTA everywhere — never diluted, always deliberate. Button hierarchy is strict: one primary action per view.
Large — 14px / 700
Hero CTAs and primary conversion moments. Padding: 14px 28px.
Medium — 12px / 700
Standard CTAs and form submissions.
Small — 11px / 700
Inline actions, table rows, compact UI.
Dark Background Variants
For use on Blue Charcoal (#001520) backgrounds.
06 — Labels
Badges & Tags
Compact labels communicate status at a glance. Colors map directly to the VOXO semantic palette — never decorative.
