Apex pro gaming

Stil-Leitfaden

Diese Seite gibt einen Überblick über die aktuellen Stile und Standards für die Apex pro gaming Website.

Farben

Ein Überblick über die Markenfarben dieser Website.

Farben & Schattierungen

Transparentfolien

primär

Primäre

Ultraleicht

Licht

Mittel

Dunkelheit

Ultra dunkel

Comp

sekundär

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

primär

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

sekundär

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

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 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

Überschrift Medium

Überschrift 3 Fettdruck

H4 (--m)

Rubrik 4 Regelmäßig

Rubrik 4 Mittel

Überschrift 4 fett

H5 (--s)

Rubrik 5 Regelmäßig

Überschrift Medium

Ü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.

Buttons

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

TASTEN AUF HELLEM HINTERGRUND

Primäre
Primäre Gliederung
Sekundäres Sekundäre Gliederung
Akzent
Akzent Gliederung Basis
Umriss der Basis

SCHALTFLÄCHEN AUF DUNKLEM HINTERGRUND

Primäre
Primäre Gliederung
Sekundäres Sekundäre Gliederung
Akzent
Akzent Gliederung Weiß
Weißer Umriss

BUTTON SCALE

btn--primär / btn--xs

btn--primär / btn--s

btn--primär / btn--m

btn--primär / btn--l

btn--primär / btn--xl

btn--primär / btn--xxl

Breiten

Es gibt sechs Werte, die Sie zur Steuerung der Elementbreite verwenden können. Sie sind automatisch reaktionsfähig.

--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 responsiven Abständen, die anhand 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 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 Raum zum Atmen.

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

Es stehen drei mehrschichtige Kastenschatten zur Auswahl.

Kastenschatten M

Kastenschatten L

Schattenbox XL

Radius der Umrandung

Es gibt sechs Grenzradien, die aus einer Basisgröße und einem mathematischen Maßstab berechnet werden.

Abgerundet XS

Abgerundet S

Abgerundet M

Abgerundetes L

Abgerundet XL

Abgerundet XXL