Brand
Style guide
Logo usage, color tokens, typography and interaction patterns for The Web3 Academy marketing site.
Download PDF (3 pages)01
Logo
Use the wordmark as the primary logo. Keep it clear, legible and unobstructed.
Clearspace
Keep at least the height of the cube icon clear on all sides of the wordmark.
Minimum width
140 px wide for digital use. Never scale the logo below legibility.
Don't
- Stretch, rotate or recolor the logo.
- Place it over busy photography or low-contrast backgrounds.
- Use the cube mark alone except at favicon or app-icon sizes.
02
Color tokens
Navy Trust palette. Reference tokens in CSS or Tailwind utilities, never hardcode values in components.
Ink
--ink
Primary surfaces, headings, primary buttons
Brand
--brand
Links, accents, focus rings, chart highlights
Brand soft
--brand-soft
Subtle highlights, tags, light accents
Surface
--surface
Section bands, footer, alternating backgrounds
Background
--background
Page canvas, cards, popovers
Foreground
--foreground
Body text, headings on light surfaces
Muted
--muted-foreground
Secondary text, captions, metadata
Border
--border
Dividers, input borders, card outlines
03
Typography
Space Grotesk for display and DM Sans for body. Use the type scale already defined in the design system.
The Web3 Academy
Space Grotesk — page titles, major section heads
The Web3 Academy
Space Grotesk — section H2s
The Web3 Academy
Space Grotesk — uppercase labels, kicker text
The Web3 Academy
DM Sans — intros, lead paragraphs
The Web3 Academy
DM Sans — default body copy
The Web3 Academy
DM Sans — metadata, captions
04
Buttons & links
Two button styles plus text links. All use the existing color tokens and transition utilities.
Primary
bg-ink · text-ink-foreground · hover:opacity-90
Outline
border-input · bg-background · hover:bg-accent
05
Voice notes
Keep the tone credible, specific and partnership-oriented.
Do
- Lead with the business outcome, not the technology.
- Use concrete facts: six W3CB certifications, each four to six courses and a proctored W3CB exam.
- Address enterprises, universities and associations as distinct audiences.
Avoid
- Hype words like "revolutionary" or "disruptive" without proof.
- Generic CTAs like "Learn more" when a specific next step is clearer.
- Assuming all buyers want the same program format.