Brand guidelines.
The visual and verbal system behind Web Vibes. Every color, typeface, and mark is engineered to compound - the same way our marketing does.
The wordmark.
The Web Vibes mark is a typographic wordmark set in Space Grotesk, paired with a pulsing matrix-red dot and the "LET IT GROW" tagline in JetBrains Mono.
On dark / Inksoft
On light / Bone
Clear Space
Maintain clear space equal to the height of the pulsing dot (the x-height of the wordmark) on all sides. No element should intrude on this zone.
Nine tones. One system.
The palette moves from bone to ink, with matrix red as the single accent. Every color has a role - no decorative variants, no seasonal shifts.
Bone
Primary Surface
Light page backgrounds, cards on light sections
Ink
Primary Dark
Dark sections, CMS interface, immersive backgrounds
Inksoft
Secondary Dark
Elevated surfaces on dark, sidebar navigation
Ghost
Text on Light
Body text, headings, and labels on light backgrounds
Matrix
Brand Accent
CTAs, highlights, interactive states, pulsing dot
Terracotta
Secondary Accent
Destructive actions, warnings, decline buttons
Steel
Muted Text
Secondary text and captions on light backgrounds
Mist
Light Muted
Secondary text on dark backgrounds
Haze
Light Text
Primary text on dark backgrounds
Three families.
Space Grotesk for display, Figtree for body, JetBrains Mono for metadata. Each has a single role - they never swap.
Display & Headings
Space Grotesk
'Space Grotesk', ui-sans-serif, system-ui, sans-serif
Growth, engineered.
Used for all display headings, the wordmark, and large-scale typography. Tight letter-spacing (-0.02em) and a line-height of 0.98 for architectural density.
Body Text
Figtree
'Figtree', ui-sans-serif, system-ui, sans-serif
We build marketing systems that compound - content, social, search, and paid working as one engineered system.
Used for all body copy, paragraphs, and form inputs. Optimised for readability across long-form content.
Labels & Metadata
JetBrains Mono
'JetBrains Mono', ui-monospace, monospace
[01] CAPABILITIES / WHAT WE DO
Used for section labels, metadata, navigation links, and system-style tags. Uppercase with wide letter-spacing (0.18em-0.25em).
How we sound.
Engineered, honest, compounding, precise. The voice is the visual system made verbal - structural, confident, and never decorative.
Engineered
Every claim is backed by structure. We talk in systems, not slogans.
Honest
We name the weakness before we claim the strength. No false confidence.
Compounding
We frame everything around accumulation - today's effort, next year's advantage.
Precise
Short sentences. Active voice. No filler. Every word earns its place.
Do. Don't.
The system is strict on purpose. Consistency is what makes the brand compound.
Do
- +
Use the wordmark on dark backgrounds with the matrix-red pulsing dot.
- +
Maintain clear space equal to the height of the dot on all sides of the wordmark.
- +
Use matrix red sparingly - for CTAs, highlights, and interactive states only.
- +
Pair Space Grotesk for headings with Figtree for body in every layout.
- +
Use JetBrains Mono for all labels, metadata, and system-style tags.
Don't
- -
Don't recolour the wordmark outside the defined palette.
- -
Don't use matrix red as a background for large areas.
- -
Don't stretch, rotate, or alter the wordmark proportions.
- -
Don't use decorative fonts outside the three-family system.
- -
Don't add drop shadows, gradients, or glow effects to the wordmark.