Brand kit

The official reference for the 3webseiten.de brand: logo, colour, typography, components and tone of voice.

Version 1.03webseiten.de

01 · Logo

The wordmark & brand squares

Three stacked squares, the source of the brand gradient, beside the lowercase “3webseiten” wordmark. Use the white lockup on the dark canvas; reserve the dark lockup for light surfaces only.

Keep clear space around the lockup of at least the square height.

White lockup on the near-black canvas is the default.

Don’t recolour the squares or place the white logo on light backgrounds.

Don’t stretch, rotate or add shadows to the lockup.

02 · Colour

Layered near-black, surgical colour

Everything stays monochrome for restraint. Colour appears only as the brand gradient: on emphasis words, primary CTAs, glows and focus rings.

--gradient-accent · 100deg · #3B82F6 → #8B5CF6 → #F59E0B

Surfaces, never pure black

surface

#09090B

raised

#0F0F13

overlay

#16161B

bright

#1F1F26

Accent hues & primary

blue

#3B82F6

violet

#8B5CF6

orange

#F59E0B

primary

#7C8CFF

secondary

#A78BFA

Semantic status

success

#34D399

warning

#FBBF24

danger

#F87171

03 · Typography

Bricolage · Inter · JetBrains Mono

Bricolage Grotesque carries display headlines (weight 800, tight tracking). Inter handles body copy. JetBrains Mono labels eyebrows and code. Everything is sentence case.

Display / H1 · Bricolage Grotesque 800 · clamp 2.65–5.35remSucceed online

Display / H2 · 800 · clamp 2–3.45remEverything you need

Gradient emphasis · .gradient-textVisibility in AI search

Body large · Inter 400 · 1.12rem / 1.75From first impression to final click, we create websites focused on simplicity, compliance and visibility.

Body · Inter 400 · 1rem / 1.65Websites that truly help you generate more enquiries and sales, built for businesses across Germany, the Netherlands and beyond.

Mono label · JetBrains Mono 600 · uppercase · 0.08emWebsites · SEO · AI Search

04 · Radii & elevation

Soft corners, deep shadow, glass

Buttons are full pills; cards and panels use the large radii. Elevation is a deep, dark, diffuse drop shadow, with an accent glow reserved for featured elements.

Corner radii

8 · sm

12 · md

16 · lg

24 · xl

pill

Elevation

card

panel

glow

05 · Iconography

Lucide line icons

One icon system: Lucide, 24px, stroke 2.15, round caps, no fill. Feature icons sit in a round glass icon-box. No emoji; the only decorative glyph is the ✦ footer star.

arrow-right

pen-tool

shield-check

sparkles

check

chevron-down

chevron-right

layout-grid

globe

rocket

trending-up

mail

star

06 · Components

The building blocks

Buttons, badges, tags, fields and glass cards: the primitives every 3webseiten surface is composed from.

Buttons

Badges & tags

NewActiveLive2026

WebsiteSEOGEOHosting

Field

SEO that compounds

Better Google rankings and qualified visitors. Sustainable growth, not tricks. The workhorse glass feature card with a round icon-box.

SEOGEO

07 · Voice & tone

Reassuring, plain, confident

We speak to busy business owners, not engineers. Direct second person, sentence case, benefits over jargon. The brand sells calm: “carefree”, “we’ve got you covered”.

“Everything you need to succeed online.”

Address the reader as “you”; the brand is “we”.
Sentence case headlines and buttons.
Lead with the outcome: more enquiries, more visibility.
Stay concrete: “99.9% uptime”, “<24h response”.

Don’t

No Title Case, no ALL-CAPS shouting (eyebrows excepted).
No emoji in product copy.
No hype, buzzwords or invented vanity stats.
Don’t flood with colour. Keep accents surgical.