How Wavehodl looks, sounds, and behaves. A field guide for anyone building, printing, posting, or partnering with the brand.
01 · Brand essence
Where the biggest waves meet the hardest money.
Positioning: Where the biggest waves on earth meet the hardest money on earth.
Tagline: Ride the wave. Stack the sats.
Voice: Confident, editorial, minimal. Salt-water and hard-money. No hype, no memes-for-memes. Short sentences. Ocean metaphors used sparingly and only when they mean something.
We don't sell the top. We don't sell the bottom. We paddle out.
Do say
"Paddle out."
"HODL through the storm."
"We don't sell the bottom."
Don't say
"To the moon"
"wagmi", "🚀🚀🚀"
Corporate-speak, anything that begs
02 · Logo & wordmark
One word. Lowercase. Always.
wavehodl
Primary lockup
Wordmark: wavehodl — one word, all lowercase, no space.
Structure: wave in foam white, hodl in Bitcoin orange.
Paired with a small square logo mark to the left, sized ~1× cap-height.
Never break the word into two lines. Never capitalize.
Minimum clear space around the wordmark: 1× the height of the "w".
03 · Color system
Deep sea. Foam. A drop of gold.
All colors are semantic tokens using oklch. Never hardcode hex in components.
Deep sea base
--background
#0a1929
oklch(0.18 0.03 250)
Navy surface
--card
#0c2340
oklch(0.23 0.04 255)
Foam white text
--foreground
#e8edf3
oklch(0.96 0.01 240)
Bitcoin gold accent
--primary
#f7931a
oklch(0.76 0.17 55)
Secondary text
--muted-foreground
#b0b8c4
oklch(0.72 0.02 240)
Hairline dividers
--border
#152840
oklch(0.32 0.04 255)
Usage ratio
~70% deep sea
~20% navy
~8% foam
~2% gold
Gold is precious — spend it on one highlighted word, one CTA border, or one status pill per screen. Never fill large areas with orange.
04 · Typography
Syne for the voice. Inter for the work.
Display · Syne
Ride the wave.
Weights 700–800. Editorial, geometric, slightly odd — the brand voice.
Body · Inter
Bitcoin, like Nazaré, was misunderstood for years. Fringe. Dangerous. Impossible. Until it wasn't.
Weights 400–600. Neutral grotesk workhorse.
Level
Size
Weight
Sample
Hero H1
96–128 px
800
Aa
Section H2
48–56 px
700
Aa
Manifesto
40–56 px
700
Aa
Body lg
18–20 px
400
Aa
Body
16 px
400
Aa
Eyebrow
12 px · 0.25em tracking
500
Aa
Headings: letter-spacing: -0.02em, tight leading (0.8–1.05).
Balance long titles with text-wrap: balance.
Never use serif. Never use Poppins, Montserrat, or default system stacks as substitutes.
05 · Layout & grid
Room to breathe. Hairlines over shadows.
Max content width: 1280 px, 24 px horizontal padding.
Section rhythm: 80 px between major sections.
Two-column stories alternate image side (left → right → left).
Corners: 6 px. Nothing more rounded — this is not a fintech app.
Dividers: hairline borders using --border. Shadows are almost never used.
06 · Motion
Restrained. Cinematic. Never cute.
No bounce, no pop, no confetti.
Hero background: seamless crossfade video loop (~1.5s fade) with a slow 20s zoom.
Entrance: fade-up (0.9s ease-out), used once per screen.
Hover: 700 ms scale on product images only.
Respect prefers-reduced-motion — fall back to the poster image.
wavehodl