Design Style Guide

Logo von fresch-webdesign

Color Palette

  • Grundfarbe=fbX
  • 8 Schattierungen von dunkel zu hell fbX1 - fbX8
  • Ziel: drei Farbgruppen basierend auf fbX ... einmal ganz dunkel, einmal ganz hell und ein passender Zwischenwert; dazu kommen jeweils ein etwas hellerer und dunklerer Farbton --> für Shadows, subtile Farbverläufe etc.
  • fbX sortiert sich in die Reihenfolge ein und hat jeweils einen subtil helleren und dunkleren Farbton

 

fbPrim1

fbPrim2

fbPrim3

fbPrim4

fbPrim

fbPrim5

fbPrim6

fbPrim7

fbPrim8

fbGray1

fbGray2

fbGray3

fbGray​4

fbGray

fbGray5

fbGray6

fbGray7

fbGray8

Typografie

Textmodul Standard

H1: Mit Design Haltung zeigen

Gutes Design ist mehr als reine Optik – es schafft Erlebnisse, die Nutzer nachhaltig mit deiner Marke verbinden.

H2: Visuelle Hierarchie schaffen

Gezielte typografische Entscheidungen lenken die Aufmerksamkeit und führen Besucher intuitiv durch die Inhalte.

H3: Schrift bestimmt den Charakter

Typografie vermittelt Stimmung und Werte deiner Marke. Jede Entscheidung wirkt sich auf das Nutzererlebnis aus.

H4: Warum Typografie wichtig ist:

Gutes Design ist mehr als reine Optik – es schafft Erlebnisse, die Nutzer nachhaltig mit deiner Marke verbinden.

  • Verleiht deiner Website eine emotionale Note
  • Verbessert Lesbarkeit und Nutzererfahrung
  • Sorgt für Konsistenz auf allen Seiten
H5: Liebe zum Detail

Kleine Feinheiten machen aus guter Gestaltung erst großartige Gestaltung. Schon kleine Anpassungen können die Wirkung deutlich verbessern.

H6: Feinjustierung für optimale Wirkung

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

„Typografie ist die Kunst, gesprochene Sprache in eine dauerhafte, visuelle Form zu bringen.“ — Robert Bringhurst

Bereit für den nächsten Schritt? Entdecke unsere Design-Leistungen und erfahre, wie strategische Gestaltung deine Marke nach vorne bringt.

  • Verleiht deiner Website eine emotionale Note
    dsajfl asldkj
  • Verbessert Lesbarkeit und Nutzererfahrung
  • Sorgt für Konsistenz auf allen Seiten

Größen für Body-Texte

Large Body Text

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

Standard Body Text

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

Small Body Text

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

Spezielle Body-Texte

Display Text

optisch wie Überschrift - für SEO wie Text

Label

für Labels / Meta

XL Display Text --> Text oder Heading

Text

Claim Text

Heading

Claim Text

Farben: Hintergründe und Text

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

BG: BG-Base-Strong
Text: Text-OnBase

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

BG: BG-EmphasisMain
Text: Text-OnEmphasisMain

Gutes Design ist mehr als Optik – es schafft Erlebnisse, die im Gedächtnis bleiben. Durch klare Hierarchie und sorgfältige Typografie wird der Inhalt effektiv vermittelt.

BG: BG-EmphasisAlt
Text: Text-OnEmphasisAlt

Headings

Dies ist Heading Level 1

Dies ist Heading Level 2

Dies ist Heading Level 3

Dies ist Heading Level 4

Dies ist Heading Level 5
Dies ist Heading Level 6