Corporate Identity
Brand & Style Guidelines
This document defines Varsitywell's visual language and brand voice. Follow these guidelines whenever you represent Varsitywell in any medium — digital, print, or social.
Last updated: June 2026
Our Mission
Connecting South African graduates
with the employers who need them.
Varsitywell is a graduate talent platform built in South Africa, for South Africa. We believe every university graduate deserves to be seen — regardless of connections, prestige, or geography. Our brand reflects that ambition: bold, direct, warm, and proudly local.
Identity Mark
Logo
The Varsitywell logo is a GraduationCap icon paired with the wordmark set in Plus Jakarta Sans Bold. The two elements must always appear together at the same optical weight and never be separated in primary usage.
On white — preferred
On Primary Blue — approved
On dark — approved
On yellow — never use
✓Do
- •Use the full wordmark "Varsitywell" on a white or dark blue background.
- •Pair the GraduationCap icon with the wordmark at the same height.
- •Use Yellow 400 only as an accent — never as a primary background.
- •Maintain at least 16px clear space around the logo on all sides.
- •Use blue-to-indigo gradient only on hero/feature sections.
- •Write "Varsitywell" as one word, capital V only.
✕Don't
- •Don't stretch, skew, or rotate the logo.
- •Don't use the logo on a cluttered photographic background.
- •Don't recolour the logo in any colour outside the primary palette.
- •Don't use "Varsity Well" (two words) or abbreviate to "VW".
- •Don't apply yellow as the primary CTA on a white background — it lacks contrast.
- •Don't mix gradient backgrounds with the yellow accent in the same section.
Colour System
Colour Palette
Our colours are derived from Tailwind's default scale. Always reference the Tailwind class name when applying colours in code — never hardcode hex values directly in components.
Primary
Blue 700
#1d4ed8
blue-700
Primary brand, CTA buttons, links
Blue 800
#1e40af
blue-800
Hover states, gradient mid
Indigo 900
#312e81
indigo-900
Gradient end, deep backgrounds
Accent
Yellow 400
#facc15
yellow-400
Accent CTA, highlight, emphasis
Yellow 300
#fde047
yellow-300
Yellow hover state
Neutrals
Gray 900
#111827
gray-900
Body text, headings
Gray 600
#4b5563
gray-600
Secondary text, nav links
Gray 400
#9ca3af
gray-400
Placeholder, meta text
Gray 200
#e5e7eb
gray-200
Borders, dividers
Gray 50
#f9fafb
gray-50
Section backgrounds
White
#ffffff
white
Card, page backgrounds
Hero Gradient
from-blue-700 via-blue-800 to-indigo-900
Used exclusively on hero sections and full-bleed feature panels.
Typography
Type System
Plus Jakarta Sans is our sole typeface across all platforms. It is loaded via next/font/google and exposed as --font-sans.
Loaded weights: 400, 500, 600, 700, 800. Never synthesise weights — always declare the specific weight class.
| Role |
|---|
Display / Hero |
Heading 1 |
Heading 2 |
Heading 3 |
Body |
Small / Meta |
Caption |
UI Components
Buttons & Controls
All interactive elements use rounded-lg corners and transition-colors for hover animation. Never use shadow-based depth on buttons — rely on colour shift alone.
Primary CTA
Accent CTA (Hero only)
Only use on dark gradient backgrounds — never yellow on white.
Ghost / Secondary
Destructive
Layout
Spacing & Grid
Max content width
max-w-7xl mx-auto with px-4 sm:px-6 lg:px-8 horizontal padding. Narrower content pages use max-w-3xl or max-w-4xl.
Section spacing
Sections use py-20 on marketing pages and py-14 on content pages. Card grids use gap-8.
Border radius
Cards and buttons use rounded-lg (8 px). Larger hero cards use rounded-2xl (16 px). Pills use rounded-full.
Elevation
We rely on border and background contrast for depth — not shadows. Use border border-gray-200 on cards on white backgrounds and bg-gray-50 alternating sections.
Copywriting
Brand Voice & Tone
Varsitywell speaks with four consistent traits. Every piece of copy — whether a button label, an email subject, or a social caption — should reflect all four.
Do write
"Employers come to you."
Don't write
"Maybe some employers might consider looking at your profile."
Do write
"Built for South African university students — all industries, all degrees."
Don't write
"For elite graduates who meet our criteria."
Do write
"Create your profile. Get discovered. Get paid."
Don't write
"Upon completion of the registration process, candidates may be discovered by prospective employers."
Do write
Use ZAR (R), local universities, "graduates" not "students" in employer copy.
Don't write
"USD pricing", generic "college" language, US-centric references.
Questions?
Need assets or approval?
For media kits, high-resolution logo files, co-branding requests, or approval of third-party use of the Varsitywell name or mark, reach out to the team.
hello@varsitywell.co.za