Brand Kit

Die offizielle Referenz für die Marke 3webseiten.de: Logo, Farben, Typografie, Komponenten und Tonalität.

Version 1.03webseiten.de

01 · Logo

Wortmarke & Marken-Quadrate

Drei gestapelte Quadrate, der Ursprung des Marken-Verlaufs, neben der kleingeschriebenen Wortmarke „3webseiten“. Nutze das weiße Logo auf der dunklen Fläche; das dunkle Logo bleibt hellen Flächen vorbehalten.

Halte rund um das Logo mindestens die Höhe eines Quadrats als Freiraum frei.

Das weiße Logo auf der fast schwarzen Fläche ist der Standard.

Färbe die Quadrate nicht um und platziere das weiße Logo nicht auf hellen Hintergründen.

Verzerre, drehe oder beschatte das Logo nicht.

02 · Farbe

Mehrschichtiges Fast-Schwarz, gezielte Farbe

Alles bleibt zurückhaltend monochrom. Farbe erscheint nur als Marken-Verlauf: auf betonten Wörtern, primären CTAs, Glows und Fokus-Rahmen.

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

Flächen, nie reines Schwarz

surface

#09090B

raised

#0F0F13

overlay

#16161B

bright

#1F1F26

Akzentfarben & Primärfarbe

blue

#3B82F6

violet

#8B5CF6

orange

#F59E0B

primary

#7C8CFF

secondary

#A78BFA

Semantischer Status

success

#34D399

warning

#FBBF24

danger

#F87171

03 · Typografie

Bricolage · Inter · JetBrains Mono

Bricolage Grotesque trägt die Display-Überschriften (Schnitt 800, enge Laufweite). Inter übernimmt den Fließtext. JetBrains Mono beschriftet Eyebrows und Code. Wortanfänge werden nicht künstlich großgeschrieben (kein Title Case).

Display / H1 · Bricolage Grotesque 800 · clamp 2.65–5.35remOnline erfolgreich sein

Display / H2 · 800 · clamp 2–3.45remAlles, was du brauchst

Gradient emphasis · .gradient-textSichtbarkeit in der KI-Suche

Body large · Inter 400 · 1.12rem / 1.75Vom ersten Eindruck bis zum letzten Klick gestalten wir Websites mit Fokus auf Einfachheit, Rechtssicherheit und Sichtbarkeit.

Body · Inter 400 · 1rem / 1.65Websites, die dir wirklich mehr Anfragen und Verkäufe bringen, für Unternehmen in Deutschland, den Niederlanden und darüber hinaus.

Mono label · JetBrains Mono 600 · uppercase · 0.08emWebsites · SEO · KI-Suche

04 · Radien & Tiefe

Weiche Ecken, tiefer Schatten, Glas

Buttons sind volle Pillen; Karten und Panels nutzen die großen Radien. Tiefe entsteht durch einen tiefen, dunklen, diffusen Schlagschatten. Ein Akzent-Glow bleibt hervorgehobenen Elementen vorbehalten.

Eck-Radien

8 · sm

12 · md

16 · lg

24 · xl

pill

Tiefe

card

panel

glow

05 · Ikonografie

Lucide Linien-Icons

Ein Icon-System: Lucide, 24px, Strichstärke 2.15, runde Enden, keine Füllung. Feature-Icons sitzen in einer runden Glas-Icon-Box. Keine Emojis; das einzige dekorative Zeichen ist der ✦ Stern im Footer.

arrow-right

pen-tool

shield-check

sparkles

check

chevron-down

chevron-right

layout-grid

globe

rocket

trending-up

mail

star

06 · Komponenten

Die Bausteine

Buttons, Badges, Tags, Felder und Glas-Karten: die Grundbausteine, aus denen jede 3webseiten-Oberfläche besteht.

Buttons

Badges & Tags

NeuAktivLive2026

WebsiteSEOGEOHosting

Feld

SEO, das nachhaltig wächst

Bessere Google-Rankings und qualifizierte Besucher: nachhaltiges Wachstum statt Tricks. Die robuste Glas-Feature-Karte mit runder Icon-Box.

SEOGEO

07 · Stimme & Tonalität

Beruhigend, klar, selbstbewusst

Wir sprechen mit vielbeschäftigten Unternehmer:innen, nicht mit Entwicklern. Direkte Ansprache per „du“, normale Schreibweise, Nutzen statt Fachjargon. Die Marke verkauft Ruhe: „rundum sorglos“, „wir kümmern uns“.

“Alles, was du brauchst, um online erfolgreich zu sein.”

Sprich die Leser:innen mit „du“ an; die Marke ist „wir“.
Überschriften und Buttons in normaler Schreibweise.
Beginne mit dem Ergebnis: mehr Anfragen, mehr Sichtbarkeit.
Bleib konkret: „99,9 % Verfügbarkeit“, „Antwort < 24 h“.

Don’t

Kein Title Case, kein Geschrei in GROSSBUCHSTABEN (außer Eyebrows).
Keine Emojis in Produkttexten.
Kein Hype, keine Buzzwords, keine erfundenen Schmuck-Statistiken.
Überflute nichts mit Farbe, halte Akzente gezielt.