Style
guide

Use this style guide to access and edit styles that are used throughout the homepage.

Spacing

Breakpoints for the responsive Design are:
  • Desktop: All device widths
  • Tablet Landscape: 1119px and below
  • Tablet Portrait: 1023px and below
  • Phone Landscape: 767px and below
  • Phone Portrait: 479px and below
  • Section Margin: 4% Left and Right
  • Section Padding: 6%Top and Bottom
  • Wrapper Div Padding:  30px Top and Bottom
  • Modul Margin: Horizontal: 40px
  • Element Padding: 16px-40px
  • Column Gap: 40px

System Colors

Text
#1A1C21
Positive
#FFF
Negative
#737884
Gray
Link
#737884
Default
#FF2C54
Hover
Navigation
#737884
Default
#1A1C21
Positive
Background
#737884
Default
#1A1C21
Dark
#FF2C54
Canvas
#FFF
Canvas
Button
#1A1C21
Default
#FF2C54
Hover
Accent
#FF2C54
Graphics

Typography

The Typo has responsive sizes for Desktop and Mobile. 

H1 Big

Desktop: 128pt, Mobile: 75pt / Line-Height: 140% / Font-Weight: 700

H2 Medium

Desktop: 90pt, Mobile: 46pt / Line-Height: 110% / Font-Weight: 600

H3 Small

Desktop: 64pt, Mobile: 32pt / Line-Height: 110% / Font-Weight: 600

H4 Subhead

Desktop: 46pt, Mobile: 24pt / Line-Height: 110% / Font-Weight: 600
H5 Subhead
Desktop: 32pt, Mobile: 20pt / Line-Height: 135% / Font-Weight: 500
H6 Subhead
Desktop: 22pt, Mobile: 16pt / Line-Height: 135% / Font-Weight: 400
Text Big / In meinen Workshops und Trainings fördere ich
diese Dinge beim Individuum und im Team, mit dem Ziel…
Desktop: 22pt, Mobile: 18pt / Line-Height: 130% / Font-Weight: 400
Text Copy - In meinen Workshops und Trainings fördere
ich diese Dinge beim Individuum und im Team, mit dem Ziel…
Desktop: 18pt, Mobile: 16pt / Line-Height: 130% / Regular
12+
Desktop: 180pt, Mobile: 64pt / Line-Height: 100% / Regular
Button/Link
Desktop: 16pt, Mobile: 12pt / Line-Height: 140% / Medium
Nav-Item Big
Desktop: 40pt, Mobile: 30pt / Line-Height: 140% / Regular
Nav-Item Small
Desktop: 16pt, Mobile: 16pt / Line-Height: 140% / Regular
Footer
Desktop: 180pt, Mobile: 130pt / Line-Height: 100% / Regular

Inline Link

Text / In meinen Workshops und Trainings fördere ich
diese Dinge beim Individuum und im Team, mit dem Ziel…

List

  • First Point

  • Second Point

  • Third Point

Typeface

Strategy & Prototyping

Wir analysieren, entwickeln
und synchronisieren Marken.

Themen und Herausforderungen

In der CX-Strategie verbinden wir Empathie, Technologie und Identität zu einer übergreifenden kundenzentrierten Wertschöpfung. Durch die Verankerung in der gesamten Organisation können Unternehmen ein hervorragendes Kundenerlebnis bieten und nachhaltigen Erfolg sichern.
3
So sehen große Zahlen aus mit einem kurzen Text
33
So sehen große Zahlen aus mit einem kurzen Text
90
So sehen große Zahlen aus mit einem kurzen Text

Centricity-Prozess

In unserem CX/UX-Ansatz kombinieren wir Kundenzentrierung mit Markenstrategie. Die gemeinsame Entwicklung der Experience mit Führungskräften aus unterschiedlichen Geschäftsbereichen ist die Grundlage übergreifender Wertschöpfung. Dabei schlagen wir die Brücke von den strategischen Ansätzen zur Produktvision.
This is a heading.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
This is a heading.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
This is a heading.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

„Die intensive Auseinandersetzung mit den Menschen, die ein Produkt letztendlich verwenden, setzt viel Kreativität frei. Es ist eine Freude zu sehen, wie ein Team dabei zusammen wächst, weil es auch gleichzeitig eine intensive Auseinandersetzung mit ihrer Marke ist – daraus entsteht echte Innovationen.“
Karolina Orawski
Partner

Buttons

Primary Button
Primary Button
WestCoastStudios
Weilheimer Str. 9
86911 Diessen am Ammersee
 +49 8807 947 60 32
 hello@westcoaststudios.de
 westcoaststudios.de
Studiomiete Mentoring About Datenschutz Impressum
© 2023 WestCoastStudios. All rights reserved.