Brand Book
Design
Fundamentals
The visual language behind THNDR.
A sharp, editorial design system built on high contrast, precise typography, and zero noise. Grab the logos, fonts, sound logo, and animated mark below — everything you need to put THNDR in the world, downloadable one file at a time.
01
Logo
The beeldmerk and wordmark in every variant. Use the vector for print and large formats, the PNGs for screen. Give the mark room to breathe — keep clear space of at least its own height on every side.
02
Sound Logo
The THNDR sonic signature — the audible counterpart to the mark. Three seconds, instantly recognisable.
THNDR Sound Logo
03
Motion
The animated mark — the logo shard in motion. Use it for intros, stings, and loaders. Two sizes, in MP4 (web) and MOV (editing).
04
Typography
Four levels. No exceptions. Every text element on the site maps to one of these classes.
.type-h1
Display / Hero
Futura Bold
Font
Futura LT Bold
Size
clamp(3rem, 10vw, 12rem)
Leading
0.85
Tracking
-0.04em
.type-h2
Heading / Pull Quote
Futura Bold Uppercase
Font
Futura LT Bold
Size
clamp(1.5rem, 4vw, 4.5rem)
Leading
1.05
Tracking
-0.02em
.type-label
All-caps Micro
IBM Plex Mono — Metadata & Navigation
Font
IBM Plex Mono
Size
11px fixed
Case
Uppercase
Tracking
0.2em
.type-body
Paragraph
IBM Plex Sans is used for all reading-length text. Relaxed leading keeps paragraphs breathable. Responsive sizing scales from base to text-lg on larger screens.
Font
IBM Plex Sans
Size
text-base / text-lg
Leading
1.8
Case
Normal
05
Typefaces
Three font families power the entire system. Futura for impact, IBM Plex Mono for structure, IBM Plex Sans for readability.
Primary
Headlines
Futura LT
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Aa
Book
400
Aa
Bold
700
Aa
ExtraBold
800
Aa
Heavy
900
Secondary
Labels & Metadata
IBM Plex Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*(){}[]
Tertiary
Body Text
IBM Plex Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*(){}[]
06
Color Palette
A restrained palette. Black and white do the heavy lifting. Orange appears sparingly for accents.
Primary Accent
thndr-primary
#FF7A00
Click to copy
Used sparingly — accents, service labels, hover states, active filters, section numbers.
Neutrals
#000000
Black
Copy
#1C1C1C
thndr-dark
Copy
#F5F5F5
thndr-light
Copy
#FFFFFF
White
Copy
Opacity Scale
Instead of dozens of grey values, the system uses a single color at different opacities to create hierarchy.
On Light Background
/10
Ghost — background labels, ghost borders
/25
Whisper — secondary labels, muted meta
/40
Muted — campaign names, secondary info
/50
Body — paragraph text, descriptions
/100
Full — headlines, primary elements
On Dark Background
/10
Ghost — background labels, ghost borders
/25
Whisper — secondary labels, muted meta
/40
Muted — campaign names, secondary info
/50
Body — paragraph text, descriptions
/100
Full — headlines, primary elements
07
Design Principles
Rules that keep the system coherent. Every component and page follows these constraints.
01
Sharp Edges
No rounded corners anywhere. rounded-none on every element. Exception: status indicator dots and circular play buttons.
Example
02
No Glass Morphism
No backdrop-filter blur on containers. No shadow-xl or shadow-2xl. Shadows are near-zero. Clarity over decoration.
03
High Contrast
Dark sections use bg-black or bg-[#0e0e0e]. Light sections use bg-white. Text hierarchy is controlled through opacity, not grey values.
04
Full-Bleed Media
Videos and images go edge-to-edge with no max-width containers. Content sections use px-3 md:px-6 for horizontal padding, but media breaks free.
08
Spacing & Layout
Consistent spacing creates rhythm. A 12-column grid provides structure without constraint.
Page Padding
px-3 md:px-6
12px on mobile, 24px on desktop. Tight to the edges for editorial feel.
Section Padding
py-20 md:py-32
80px on mobile, 128px on desktop. Generous vertical breathing room between sections.
Grid Gap
gap-6 md:gap-10
24px on mobile, 40px on desktop. Consistent spacing between grid columns.
Transitions (UI)
duration-300
300ms for interactive elements — hovers, button presses, opacity changes.
Transitions (Layout)
duration-700
700ms for structural animations — page transitions, scroll-driven reveals.
12-Column Grid
09
Component Patterns
Recurring patterns used across the site. Borders for separation, ghost buttons, opacity-based hierarchy.
Borders
Thin 6% opacity borders are the primary tool for separating content. No backgrounds, no shadows.
Content row one
border-white/[0.06]
Content row two
border-white/[0.06]
Content row three
border-white/[0.06]
Buttons
Ghost style only. Border with label text, no fill. Hover increases opacity or shifts to primary color.
Info Boxes
Bordered containers with padding for callouts and key insights. No background fill.
Key Insight
Sound shapes how people feel about your brand, even without seeing it.
Transitions & Animation
UI Interactions
duration-300
Hovers, button states, opacity changes
Layout / Scroll
duration-700
Page transitions, scroll-driven reveals
CSS Easing
cubic-bezier(0.16, 1, 0.3, 1)
Drawer, layout animations
GSAP Easing
power4.out
Scroll reveal, text animations
