Padel Galis
Style Guide
Padel Galis Auf dieser Seite finden Sie die aktuellen Stile und Standards für die Website.
Farben
Ein Überblick über die Markenfarben dieser Website.
Aktion
Aktion
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Comp
Primäre
Primäre
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Comp
Sekundäres
Sekundäres
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Comp
Akzent
Akzent
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Comp
Basis
Basis
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Comp
Farbton
Farbton
Ultraleicht
Licht
Medium
Dunkelheit
Ultra Dunkel
Aktion
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primäre
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
Gefahr Licht
Gefahr Dunkelheit
Gefahr Schweben
Warnung
Warnung
Warnleuchte
Warnung Dunkelheit
Warnung Schweben
Infos
Info
Info-Licht
Info Dunkel
Schwebe-Infos
Schaltflächen
Einfarbige und konturierte Schaltflächen sind in allen Farbsätzen einschließlich Schwarz und Weiß erhältlich.
SCHALTFLÄCHEN AUF HELLEM HINTERGRUND
AktionAktion GliederungPrimärePrimäre GliederungSekundäresSekundäre GliederungAkzentAkzent GliederungBasisBasis Gliederung
SCHALTFLÄCHEN AUF DUNKLEM HINTERGRUND
AktionAktion GliederungPrimärePrimäre GliederungSekundäresSekundäre GliederungAkzentAkzent GliederungWeißWeißer Umriss
Taste 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
XXL Knopf
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 anhand einer Basisgröße und einer mathematischen Skala berechnet.
Rubriken
H1 (--xxl)
Rubrik 1 Regulär
Überschrift 1 Medium
Überschrift 1 fett
H2 (--xl)
Rubrik 2 Regulär
Überschrift 2 Medium
Überschrift 2 fett
H3 (--l)
Rubrik 3 Regulär
Rubrik 3 Mittel
Überschrift 3 fett
H4 (--m)
Rubrik 4 Regulär
Überschrift 4 Medium
Überschrift 4 fett
H5 (--s)
Rubrik 5 Regulär
Überschrift 5 Medium
Überschrift 5 fett
H6 (--xs)
Rubrik 6 Regulär
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 Regulär
Text s Medium
Text s Fett
XTRA KLEINER TEXT (--xs)
Text xs Regular
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.
Überschrift 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.
Überschrift 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.
Überschrift 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.
Weiten
Es gibt sechs Werte, die Sie zur Steuerung der Elementbreite verwenden können. Sie sind automatisch reaktionsfähig.
Abschnitt Polsterung
Die Polsterung der Abschnitte ist reaktionsschnell und basiert auf einem Multiplikator des Kernabstandssystems.
Abstände
Es gibt sechs Stufen von responsiven Abständen, die anhand einer Basisgröße und einer mathematischen Skala berechnet werden. Dadurch wird sichergestellt, dass Rand, Füllung und Abstände perfekt übereinstimmen.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element Polsterung
Hier sehen Sie die sechs Ebenen der Abstände, die als Füllung dargestellt werden.
Karte
Dies ist eine Karte mit XS-Polsterung. Der Inhalt ist ziemlich nah an den Rändern.
Karte
Dies ist eine Karte mit S-Polsterung. Sie hat eine etwas festere Polsterung.
Karte
Dies ist eine Karte mit M-Polsterung. Sie hat den üblichen Spielraum.
Karte
Dies ist eine Karte mit L-Polsterung. Sie bietet zusätzlichen Spielraum.
Karte
Dies ist eine Karte mit XL-Polsterung. Sie hat viel Spielraum.
Karte
Dies ist eine Karte mit XXL-Polsterung. Vermeiden Sie es, sie in einem engen Raum zu benutzen.
Schatten
Sie haben die Wahl zwischen drei mehrschichtigen Kastenschatten.
Box Schatten M
Box Schatten L
Box Schatten XL
Radius der Grenze
Es gibt sechs Randradiuswerte, die aus einer Basisgröße und einem mathematischen Maßstab berechnet werden.
Abgerundet XS
Abgerundet S
Abgerundet M
Abgerundetes L
Abgerundet XL
Abgerundet XXL