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

Rumba mit Julia und Leivan

Freitags im Zeitraum 5. Juli bis 23. August 2024 in Berlin

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.

social dance snapshot of the dance instructors alexei and emilia

Social Salsa Training

by Alexei & Emilia
Sa 31.08. – So 1.09. 2024

SAve the dates!

Workshopwochenende mit Oliwia, März 2024

Workshop-Wochenende mit OLIWIA "Muevete" SZEWCZAK

23. bis 24. März 2024 in Berlin

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.