For Internal & Agency Designers
Everything you need to build on-brand assets for the NXTLVL. brand family. Color palette, typography, logo usage, the dot rules, and accessibility guidance — all in one place.
01 — Brand Color Palette
VZN. — Teal Family
Teal #0E8A8A
VZN. brand — dot on light bg
Teal Light #13ACAC
VZN. on dark backgrounds
Teal X-Light #5ECFCF
Gradient highlight, hero accents
Teal Tint #E6F5F5
Section backgrounds, tags
NXTLVL. & DNTL.VZN — Gold Family
Gold #C8970A
NXTLVL. accent · dot on light
Gold Light #F0C040
NXTLVL. on dark backgrounds
Gold X-Light #F8DD8A
Subtle gold on dark, gradients
Gold Tint #FEF9EC
DNTL.VZN section backgrounds
DNTL. — Indigo Family
Indigo #3D30C4
DNTL. brand — dot on light
Indigo Light #6259E8
DNTL. on dark backgrounds
Indigo Tint #EEEDFB
DNTL section backgrounds, tags
Shared Neutrals
Navy #0D1B2A
All brands — dark bg, primary wordmark on light
Gray 800 #1F2937
Primary body text on white
Gray 500 #6B7280
Secondary body text, captions
Gray 200 #E5E7EB
Borders, dividers, rules
02 — Brand Color Assignments
Each brand in the family owns a specific color. Colors are never swapped between brands. This table shows which colors belong to which brand and when to use them.
| Brand | Primary Color | Dot Color (Light BG) | Dot Color (Dark BG) | Section Tint |
|---|---|---|---|---|
| NXTLVL. | Gold #C8970A | Gold #C8970A | Gold Light #F0C040 | Gold Tint #FEF9EC |
| VZN. | Teal #0E8A8A | Teal #0E8A8A | Teal Light #13ACAC | Teal Tint #E6F5F5 |
| DNTL. | Indigo #3D30C4 | Indigo #3D30C4 | Indigo Light #6259E8 | Indigo Tint #EEEDFB |
| DNTL.VZN | Gold (primary) | Gold mid-dot separator | Gold Light mid-dot | Gold Tint #FEF9EC |
03 — Typography
Primary Typeface
Inter is an open-source variable font designed by Rasmus Andersson specifically for screen readability. A single file covers the entire weight range (100–900) and optical size range (14–32), replacing 9+ separate font files.
Load from Google Fonts: ital,opsz,wght@0,14..32,100..900
Variable Axes in Use
wght 100 → 900 opsz 14 → 32 ital 0 → 1 In logos: wght 900 (Black) + letter-spacing −0.04em. Optical size set to auto.
Type Scale
Logo / Wordmark
wght 900 · −0.04em · lh 1.0
Display / Hero
56–72px · wght 900 · −0.03em · lh 1.04
H1 — Page Title
40–44px · wght 800 · −0.025em · lh 1.1
H2 — Section Heading
28–32px · wght 800 · −0.02em · lh 1.15
H3 — Card / Pillar
20–24px · wght 700 · −0.015em · lh 1.25
Subtitle / Lead
17–18px · wght 400–500 · 0 · lh 1.65
Body
14–15px · wght 400 · 0 · lh 1.65
Caption / Note
12–13px · wght 400 · 0 · lh 1.5
Label / Kicker
10–11px · wght 700 · +0.12–0.16em · UPPERCASE
04 — Quick Reference
Letter Spacing Reference
−0.04em −0.03em −0.02em to −0.025em 0 (normal) +0.12em to +0.16em Font Weight Reference
05 — The Dot Rules
The Period · Brand Signature
The period (dot) is the signature element across the entire brand family. It always carries a brand-specific accent color. This single rule makes every brand immediately identifiable and connects them as a family.
Gold dot
Teal dot
Indigo dot
Gold mid-dot (separator)
The dot is required
Every brand name ends with a period. It is not optional. "NXTLVL" without the dot is not the brand — "NXTLVL." is. The dot is as much a part of the wordmark as the letters.
The dot carries the brand color
On any background, the dot uses that brand's designated color. Gold for NXTLVL., teal for VZN., indigo for DNTL. Never swap these colors. In DNTL.VZN, the mid-dot is always gold.
The dot cannot be resized independently
The period inherits its size from the wordmark typeface. Don't enlarge, shrink, or reposition it relative to the letters. It sits where a period naturally sits in Inter at weight 900.
The dot is the family connector
The consistent colored-dot treatment is what makes four distinct brands read as one family. Remove it from any brand and the family connection breaks. The dot unifies everything.
06 — Wordmark Construction
All NXTLVL. family wordmarks follow the same construction rules. No exceptions. If you're building a wordmark in any medium — web, print, signage, merchandise — use these exact specs.
Typeface
Inter
Weight
900 (Black)
Letter Spacing
−0.04em
Case
ALL CAPS
On Light Background
On Dark Background
07 — Logo Usage Rules
Clear Space
Maintain at minimum the height of the dot on all sides of the wordmark. This ensures the logo reads clearly regardless of surrounding content.
Minimum Size
The period must remain legible. On screen, do not render the logo below 14px font-size. In print, do not render below 8pt. Below these sizes the dot becomes invisible, and the brand loses its signature.
14px — minimum ✓
20px ✓
32px ✓
10px — too small ✗
Do's & Don'ts
✓ Do
✗ Don't
08 — Spacing & Corners
4px Base Grid
All spacing values are multiples of 4px. This creates visual consistency and predictable rhythm across all layouts.
Border Radius Scale
4px
Tag, code
8px
Button, input
10px
Pillar card
12px
Logo tile
16px
Section card
20px
Hero block
999px
Pill / badge
09 — Dark & Light Background Rules
The wordmark inverts between light and dark contexts. The rules are simple but non-negotiable.
On White / Light Backgrounds
Letters: Navy #0D1B2A
NXTLVL. dot: Gold #C8970A
VZN. dot: Teal #0E8A8A
DNTL. dot: Indigo #3D30C4
DNTL.VZN: Indigo + Gold + Teal
On Navy / Dark Backgrounds
Letters: White #FFFFFF
NXTLVL. dot: Gold Light #F0C040
VZN. dot: Teal Light #13ACAC
DNTL. dot: Indigo Light #6259E8
DNTL.VZN: Indigo Lt + Gold Lt + Teal Lt
Acceptable dark backgrounds: Navy (#0D1B2A), dark grays that pass 4.5:1 contrast with white text. Avoid placing the wordmark on branded-color backgrounds (teal, gold, indigo) — these should only be used for tint sections and tags, not as logo backgrounds.
10 — Accessibility
Brand colors were selected with accessibility in mind. These guidelines ensure our palette meets WCAG 2.1 AA contrast requirements.
Text on White (#FFFFFF)
Text on Navy (#0D1B2A)
Color-blind Safe
Teal, gold, and indigo are distinguishable across all three major color vision deficiency types (deuteranopia, protanopia, tritanopia). The hue separation is intentionally wide.
Gold Caveat
Gold #C8970A falls slightly below 4.5:1 on white. Use it only for large text (18px+ or 14px+ bold), decorative elements, or interactive states — never for small body copy on white.
Minimum Body Contrast
All body text should use Gray 800 (#1F2937) or Navy on light backgrounds, white on dark backgrounds. These pairings exceed 7:1 contrast for AAA compliance.
11 — Asset Downloads
Coming Soon
SVG and AI versions of all wordmarks, logo tiles, and color palette files will be available for download here once finalized. Check back or ask the brand team for interim files.