Awwwards
404media is now part of Awwwards. Find our studio profile and work there.
(Announcement)
W.
Brand guide: how 404media looks and speaks.
Version 1.0 · October 2026
Logo
The wordmark is the logo. The “4” stands alone where space is short.
On light
On dark
Symbol
Clear space
Keep clear all round: x = height of the wordmark.
Minimum size
96 px · 25 mm
16 px
Below that, use the symbol only.
Don’t
Don’t distort
Don’t recolour
No busy ground
Colour
Cool lavender, deep ink, a black stage. Colour comes from the projects, not the brand.
Lavender#F0F1FA · RGB 240 241 250
Page ground. Always the base.
Ink#14161F · RGB 20 22 31
Text, logo, lines.
Stage#111111 · RGB 17 17 17
Dark surfaces for key moments.
Lavender 2#E4E6F1 · RGB 228 230 241
Surfaces, hover.
Grey#63677B · RGB 99 103 123
Secondary text.
Line#D3D6E6 · RGB 211 214 230
Rules, borders.
Gradient
Ice#A9C9E0 · RGB 169 201 224
Light in the gradient.
Steel#4D5D73 · RGB 77 93 115
Middle of the gradient.
Depth#010204 · RGB 1 2 4
Ground it fades into.
Moving gradient on dark stages: About, AI advisor and Insights covers.
Proportion
Lavender carries, the stage sets accents.
Type
One family, two weights. Headings in medium, set tight. Never bold.
Aa
Geist · Regular 400 · Medium 500ABCDEFGHIJKLMNOPQRSTUVWXYZ ÄÖÜ abcdefghijklmnopqrstuvwxyz äöüß 0123456789 € % & @ ( ) –
Hero70 / 0.96 / −5 %
Websites that sell.
Title48 / 1.05 / −3.5 %
100+ companies trust us
Subheading28 / 1.15 / −3 %
Strategy, design and development
Heading22 / 1.2 / −2 %
Website relaunch for Aumaerk
Body16 / 1.5
We design and build everything ourselves, from strategy to launch. Every website is its own design.
LabelGeist Mono 12 / +6 %
(Results)
Grid & shape
Lots of air between sections, little between cards. Corners slightly rounded, buttons fully.
Spacing
Cards14 px
Section top24 px
Title → content36–72 px
Section bottom80–120 px
Radius
2
6
10
12
16
Pill
Components
Few building blocks, used the same way everywhere.
Buttons & tags
Web designSEOShopify
Stage with key figures
100+Websites launched
8+Years of experience
5.0Google rating
+219 %Best result
Labels in brackets
(Problems)
Most websites look like every other one and bring in few enquiries.
(Solutions)
Strategy, design, development and launch from one team.
Voice
We write the way we talk in a meeting: direct and concrete.
Concrete
Numbers and names instead of superlatives.
Short
One thought per sentence. No jargon.
Calm
No exclamation marks, no capitals in running text.
Do
Websites that are found on Google and bring in enquiries.
Don’t
Innovative, holistic digital solutions for your success!
Book a free call
Enquire now with no obligation!!