SCB Web design system

inhalt

  1. Typografie
  2. Farben
  3. Buttons
  4. Wiederverwendbare Blöcke
  5. Testbereich

1. Typografie

1.1 headings Font-Family: "Oswald"

name / HTML-Tag

Nutzung

schnitt

Größen

hero

Nur für das Bienvenidos auf der Startseite.

Semibold 600, Versalien

Desktop: 7,5rem/123.2px
Tablet: 6rem/96px,
Mobile: 5.6rem/89.6px

h1 beisp.

Titel für Seiten oder Kurse/Events (nur einmal je Seite)

Semibold 600, Versalien

Desktop: 4rem/64px
Tablet: 3.4rem/54.4px
Mobile: 3rem/48px

 

h2 Beispiel

Titel für Sektionen auf den Seiten

Semibold 600, Versalien

Desktop: 3rem/48px
Tablet: 2.7rem/43.2px
Mobile: 2.4rem/38.4px

h3 Beispiel

Titel für Unter-Sektionen auf den Seiten / Namen Lehrende /

Semibold 600, Versalien

Desktop: 3rem/48px
Tablet: 2rem/32px
Mobile: 1.8rem/28.8px

h4 beispiel

Footer Titel / Untertitel für H3 z.B. Vorstand / Labels für Info Zeit, Ort, usw.

Semibold 600, Versalien

Desktop: 1.375rem/22px
Tablet: 1.285rem/20.56px
Mobile: 1.25rem/20px

H5 Beispiel

Subtitel / Große Beschreibungen, die weder Body-Text noch in Versalien sein sollen

Semibold 600, Normale Groß- u. Kleinschreibung

Desktop: 1.8rem/28.8px
Tablet: 1.7rem/27.2px
Mobile: 1.6rem/25.6px

H6 Beispiel

Button Text

Semibold 600, Versalien

Desktop, Tablet, Mobile:  1rem/16px

1.2 Body Text font-Family: "Poppins"

name / HTML-Tag

Nutzung

schnitt

Größen

p (paragraph) "Body" Beispiel

Texte in Deutsch (Und: Alle Beschreibungen in dieser Tabelle)

Medium 500, Normale Groß- u. Kleinschreibung

Desktop, Tablet, Mobile:  1rem/16px

p (paragraph) "Body EN" Beispiel

Texte in Englisch

Normal 400, Normale Groß- u. Kleinschreibung

Desktop, Tablet, Mobile:  1rem/16px

p (paragraph) "Body L" Beispiel

Aktuell nur: Zitate zu “Warum SCB…?”

Medium 500, Normale Groß- u. Kleinschreibung

Desktop, Tablet, Mobile:  1.25rem/20px

p (paragraph) "Body EN L" Beispiel

Aktuell nicht in Nutzung (ansonsten große Texte in Englisch)

Normal 400, Normale Groß- u. Kleinschreibung

Desktop, Tablet, Mobile:  1.25rem/20px

p (paragraph) "Text S" Beispiel

Aktuell nicht in Nutzung (ansonsten z.B. Bildunterschrift)

Medium 500, Normale Groß- u. Kleinschreibung

Desktop, Tablet, Mobile:  0.875rem/14px

2. Farben

Primary/Text

Black 95%, Hex #0C0C0C

Textfarbe und Hover-Farbe von z.B. Buttons

Secondary

Black 55%, Hex #737373

Textfarbe Menü, Labels, BG sekundäre Buttons z.B. “Back to Top”, Kennfarbe für Workshops im Kalender

Accent

SCB-Blau, Hex #1FC3F3

BG von Buttons, Menu Anzeige aktiv, Kennfarbe für Workshopwochenenden im Kalender

Gray Light BG

Black 13%, Hex #DDDDDD

BG von Sektionen z.B. Footer, Newsletter Banner, Timetables bei Workshopwochenenden

3. Buttons

primary

Text: H6
Padding Desktop: 20px 60px
Padding <Tablet: 20px 44px
Hover state: Primary (Black)

sEcondary

Text: H6
Padding: 0px
Hover + active state: Accent (SCB-Blue)

Read More

Text: H6
Padding: 0px
Hover + active state: Accent (SCB-Blue)

Alternative

Zum Beispiel “Back to top” Button im Footer

4. Wiederverwendbare Blöcke

Banner: Workshop-Wochenende Bailes Cubanos Dezember 2023

nächstes workshop-wochenende

Workshopwochenende mit Oliwia, März 2024

SAve the date!

Workshop-Wochenende mit OLIWIA "Muevete" SZEWCZAK

Am 23. bis 24. März 2024 in Berlin
… weitere Infos folgen.

5. Testbereich

Titelfoto Kurs: Academia de Rumba Percussion

Kurs Heading - Lange VErsion und so weiter!

DAtum

4–5 Dezember 2023

Zeit

14:00–17:45 Uhr

Ort

Tanzraum Wedding
Oudenarder Str. 16-20, 13347 Berlin,
Carree Seestraße (ehemalige „Osramhöfe“)
Aufgang A 8, 2. OG und dann nach links

Preis

Bis 24.11.
Tagespass: 35€ / 55€
Fullpass (incl. Party Pa’Ti) 65 / 95€

Ab 25.11.
Tagespass 45€ / 65€
Fullpass (incl. Party Pa’Ti) 75 / 105€

(Preis für: Vereinsmitglied / Nicht-Mitglied)

Beschreibung

German version (English below):

Wie überlebe ich in anspruchvollen Ruedas? Die Antwort ist ganz einfach: Gute Technik. In diesem 4wöchigen Kurs zeigen wir euch eine effektive Casino-Technik mit der ihr nie wieder das Gefühl haben werdet, orientierungslos oder zu spät zu sein. Selbst komplexe Figuren und Elemente werden damit zum Kinderspiel.