Brand Guidelines
Resources and guidelines for using the HackUK brand consistently across all materials.
Logo
HackUKHackUKUsage Rules
- Always maintain the logo's original proportions - do not stretch or distort.
- Ensure adequate clear space around the logo (minimum equal to the height of the "H" in HackUK).
- The logo may be used on light or dark backgrounds as shown above.
- Do not apply effects such as shadows, gradients, or outlines to the logo.
- Do not alter the colours of the logo.
Colour Palette
#1A2744
oklch(0.25 0.08 250)
#3B6DB5
oklch(0.55 0.12 220)
#FCFCFC
oklch(0.99 0 0)
#262626
oklch(0.15 0 0)
#F0F0F0
oklch(0.94 0 0)
Typography
Headings
Poppins Bold
Used for all headings (H1–H6), the logo wordmark, and display text.
H1: 48–56px Bold
H2: 32–40px Bold
H3: 20–24px Bold
Body Text
Inter Regular
Used for body copy, descriptions, captions, and all non-heading text.
Body: 16–18px Regular, 1.6 line height
Small: 14px Regular
Caption: 12px Regular
Voice & Tone
Authentic
Real photos, straightforward copy, no marketing fluff - just what HackUK actually does.
Accessible
Clear hierarchy, readable text, obvious actions - works for young people and institutions alike.
British
Localised content celebrating UK youth tech culture without being over-the-top patriotic.
Buttons
- Primary buttons use Brand Blue background with white text.
- Outline buttons use a border with transparent background, transitioning to filled on hover.
- Hero buttons (used on the image slider) use white background with Brand Blue text.
- All buttons use border-radius: 0.5rem and font-weight: 600.
Spacing & Layout
- Section padding: py-12 md:py-16 (comfortable but not excessive)
- Container max-width: max-w-5xl for content, full width for sponsors
- Grid gaps: gap-4 to gap-6
- Horizontal padding: px-6 consistent across all sections
- Border radius: 0.75rem (cards, containers)
Downloads
For logo files, brand assets, or any queries about brand usage, please contact us.
Contact for Assets