Blueforce Digital Solutions — Brand Style Guide

01 Markenkern

Claim

Weniger Agentur.
Mehr Mensch.

Positionierung

WordPress-Websites für KMU in der Deutschschweiz — persönlich, verlässlich und ohne Agentur-Overhead.

Markenwerte

Kompetenz Verlässlichkeit Klarheit Nähe

02 Farbpalette

Blueforce Blue

#1678C8

Primärfarbe · Logo · CTAs

Navy

#1C2B4A

Sekundärfarbe · Headlines · Footer

Steel Blue

#6A8AAA

Sublines · Digital Solutions

Steel Blue Light

#7AAED4

Subline auf dunkel

Light Blue

#E8F0F8

Badges · Highlights

Off-White

#F4F7FA

Seitenhintergrund

Border

#D0DCE8

Trennlinien · Rahmen

03 Typografie

Schriftfamilie

Inter

Google Fonts · SIL Open Font License · kostenlos & gewerblich nutzbar

WordPress: fonts.googleapis.com/css2?family=Inter:wght@400;600;700

Lokal hosten (DSGVO-konform): google-webfonts-helper.herokuapp.com

H1 Deine Website 36px · Bold 700 · −0.02em

H2 Meine Leistungen 26px · Bold 700

H3 WordPress & Design 20px · SemiBold 600

Body Ich plane, baue und betreue deine Website persönlich — von der Idee bis zum Launch. 16px · Regular 400 · 1.65 leading

Small Birkenring 21, 3422 Kirchberg BE · +41 78 603 37 77 13px · Regular 400

Label Digital Solutions 11px · SemiBold 600 · 0.1em · uppercase

Claim Weniger Agentur. Mehr Mensch. 18px · SemiBold 600 · Italic

04 Logo-System

Standard · hell

Dark · dunkel

Mit Claim · hell

Mit Claim · dunkel

Favicon & Icon

64px

48px

32px

20px

16px

WordPress: Einstellungen → Allgemein → Website-Icon → favicon.ico hochladen
iOS Homescreen: apple_touch_icon.png im Theme-Root ablegen
PWA/Android: favicon_192.png + favicon_512.png im Manifest referenzieren

Dateien im Set

blueforce_logo.svg / .png — Standard hell

blueforce_logo_dark.svg / .png — Standard dunkel

blueforce_logo_claim.svg / .png — Mit Claim hell

blueforce_logo_claim_dark.svg / .png — Mit Claim dunkel

blueforce_icon.svg — Icon solo

blueforce_favicon.ico — Browser (16/32/48px)

blueforce_apple_touch_icon.png — iOS 180px

blueforce_favicon_192/512.png — PWA/Android

Erlaubt

Logo auf weissem oder hellem Hintergrund
Dark-Version auf Navy/dunklem Hintergrund
Icon allein als Favicon / App-Icon
Mindestbreite: 120px (Logo), 16px (Icon)
Proportionale Skalierung (SVG bevorzugt)

Verboten

Logo strecken oder verzerren
Farbe des Logos oder Icons ändern
Logo auf buntem Foto ohne Schutzzone
Schatten, Effekte oder Glow hinzufügen
Logobestandteile einzeln verwenden

05 Abstände & Grössen

Spacing-Raster (Basis: 4px)

4

8

12

16

24

32

48

64

80

Eckenradien

4px

8px

12px

14px
Icon

Pill

Rahmen

1px
border

2px
featured

1px
blue

06 UI-Komponenten

Buttons

Kontakt aufnehmen Mehr erfahren Zurück

Primary · #1678C8 · white Outline · transparent · blue Ghost · transparent · border

Badges

WordPress SEO Wartung Beliebt Abgeschlossen In Bearbeitung

Angebotskarte — Einsatzbeispiel

Nr. 2026-014

WordPress & Design

Website-Relaunch Muster AG

Konzeption, Design, Entwicklung und Launch Ihrer neuen Unternehmenswebsite — inklusive CMS-Schulung und 1 Jahr Wartungspaket.

Angebot ansehen

07 Sprache & Tonalität

So klingt Blueforce

Ich-Perspektive: "Ich baue...", "Ich begleite..."
Konkrete Aussagen: "5 Wochen bis live"
Kurze, klare Sätze
Hochdeutsch, leicht dialogisch
Ehrlich und direkt — keine Übertreibungen

So klingt Blueforce nicht

Agentur-Floskeln: "ganzheitlich", "synergistisch"
Wir-Form (Einzelfirma!)
Leere Buzzwords ohne Inhalt
Überschwängliche Superlative
Anglizismen ohne Notwendigkeit