Vielklang

Stil-Leitfaden

Auf dieser Seite werden die aktuellen Stile und Standards für die Website Vielklang beschrieben.

Farben

Ein Überblick über die Markenfarben dieser Website.

Aktion

Aktion

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

Primäre Seite

Primäre Seite

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

Sekundäres

Sekundäres

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

Akzent

Akzent

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

Basis

Basis

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

Farbton

Farbton

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Aktion

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primäre Seite

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Sekundäres

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Akzent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Basis

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Farbton

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Erfolg

Erfolg

Erfolg Licht

Erfolg Dunkel

Erfolg Hover

Gefahr

Gefahr

Gefährliches Licht

Gefahr im Dunkeln

Gefahr Schweben

Warnung

Warnung

Warnleuchte

Warnung Dunkelheit

Warnung Schweben

Infos

Infos

Info-Licht

Info Dunkelheit

Info-Hover

Buttons

Einfarbige und konturierte Schaltflächen sind in allen Farbsätzen einschließlich Schwarz und Weiß erhältlich.

TASTEN AUF HELLEM HINTERGRUND

AktionAktion GliederungPrimäre SeitePrimäre GliederungSekundäresSekundäre GliederungAkzentAkzent GliederungBasisUmriss der Basis

SCHALTFLÄCHEN AUF DUNKLEM HINTERGRUND

AktionAktion GliederungPrimäre SeitePrimäre GliederungSekundäresSekundäre GliederungAkzentAkzent GliederungWeißWeißer Umriss
Knopf-Skala
Taste XS
btn--primär / btn--xs
Taste S
btn--primär / btn--s
Taste M
btn--primär / btn--m
Taste L
btn--primär / btn--l
Taste XL
btn--primär / btn--xl
Knopf XXL
btn--primär / btn--xxl

Typografie

Im Folgenden finden Sie eine Übersicht über die Größen und Gewichte der responsiven Typografie für diese Website. Diese werden aus einer Basisgröße und einem mathematischen Maßstab berechnet.
Rubriken
H1 (--xxl)

Rubrik 1 Regelmäßig

Rubrik 1 Mittel

Überschrift 1 Fettdruck

H2 (--xl)

Rubrik 2 Regelmäßig

Rubrik 2 Mittel

Überschrift 2 Fettdruck

H3 (--l)

Rubrik 3 Regelmäßig

Rubrik 3 Mittel

Überschrift 3 Fettdruck

H4 (--m)

Rubrik 4 Regelmäßig

Rubrik 4 Mittel

Überschrift 4 fett

H5 (--s)
Rubrik 5 Regelmäßig
Rubrik 5 Mittel
Überschrift 5 fett
H6 (--xs)
Rubrik 6 Regelmäßig
Rubrik 6 Mittel
Überschrift 6 fett
Haupttext
BODY TEXT (--m)
Text m Regelmäßig
Text m Medium
Text m fett
KLEINER TEXT (--s)
Text s Regelmäßig
Text s Medium
Text s fett
XTRA KLEINER TEXT (--xs)
Text xs Regulär
Text xs Medium
Text xs Bold
Beispiele

Überschrift 1 (H1)

Dies ist ein großer Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Überschrift 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Überschrift 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrik 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Rubrik 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Rubrik 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Breiten

Es gibt sechs Werte, die Sie zur Steuerung der Elementbreite verwenden können. Sie sind automatisch ansprechbar.
--width-xs
--Breite-s
--Breite-m
--breite-l
--breite-xl
--Breite-xxl

Abschnitt Polsterung

Die Polsterung der Abschnitte ist reaktionsschnell und basiert auf einem Multiplikator des Kernabstands-Systems.
Keine
XS
S
M
L
XL
XXL

Abstände

Es gibt sechs Stufen von reaktionsfähigen Abständen, die aus einer Basisgröße und einer mathematischen Skala berechnet werden. Dadurch wird sichergestellt, dass Rand, Füllung und Lücken perfekt übereinstimmen.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Polsterung

Hier sind die sechs Stufen der Abstände in Form von Auffüllungen dargestellt.

Karte

Dies ist eine Karte mit XS-Polsterung. Der Inhalt ist ziemlich knapp bemessen.

Karte

Dies ist eine Karte mit S-Polsterung. Er ist etwas fester gepolstert.

Karte

Dies ist eine Karte mit M-Polsterung. Er hat den üblichen Spielraum.

Karte

Dies ist eine Karte mit L-Polsterung. Er bietet zusätzlichen Spielraum.

Karte

Dies ist eine Karte mit XL-Polsterung. Sie hat einen erheblichen Spielraum.

Karte

Dies ist eine Karte mit XXL-Polsterung. Vermeiden Sie die Verwendung auf engem Raum.

Schatten

Es stehen drei mehrschichtige Kastenschatten zur Auswahl.
Kastenschatten M
Kastenschatten L
Schattenbox XL

Radius der Umrandung

Es gibt sechs Werte für den Randradius, die anhand einer Basisgröße und eines mathematischen Maßstabs berechnet werden.
Abgerundet XS
Abgerundet S
Abgerundet M
Abgerundetes L
Abgerundet XL
Abgerundet XXL