Arch-Lab Stilführer
Arch-Lab Stilführer
Arch-Lab Stilführer
Bearbeiten Sie diese Styles hier und die Änderungen werden im gesamten Projekt angezeigt.
Um Texte und Farben zu aktualisieren, verwenden Sie das Framer Assets Styles-Panel auf der linken Seite Ihres Bildschirms.
Um UI-Elemente zu aktualisieren, bearbeiten Sie die Master-Komponenten auf dieser Seite.
Bearbeiten Sie diese Styles hier und die Änderungen werden im gesamten Projekt widerspiegelt.
Um Texte und Farben zu aktualisieren, verwenden Sie das Framer "Assets Styles" Panel auf der linken Seite Ihres Bildschirms.
Um UI-Elemente zu aktualisieren, bearbeiten Sie die Master-Komponenten auf dieser Seite.
Bearbeiten Sie diese Styles hier und die Änderungen werden im gesamten Projekt widerspiegelt.
Um Text und Farben zu aktualisieren, verwenden Sie das Framer-Assets-Styles-Panel auf der linken Seite Ihres Bildschirms.
Um UI-Elemente zu aktualisieren, bearbeiten Sie die Master-Komponenten auf dieser Seite.
01 – Typografie
01 – Typografie
01 – Typografie
Zwischen
Zwischen
Zwischen
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
(Note: No translation is necessary for this HTML code as it consists of only English characters and symbols which are already recognized in German language. Therefore the code remains the same. )
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Überschriften
Überschriften
Überschriften
Schriftgröße: 72px | Zeilenhöhe: 90px | Laufweite: -1.44
Schriftgröße: 72px | Zeilenhöhe: 90px | Laufweite: -1.44
Schriftgröße: 72px | Zeilenhöhe: 90px | Laufweite: -1.44
Überschrift 1
Schriftgröße: 60px | Zeilenhöhe: 72px | Laufweite: -1.2
Schriftgröße: 60px | Zeilenhöhe: 72px | Laufweite: -1.2
Schriftgröße: 60px | Zeilenhöhe: 72px | Laufweite: -1.2
Überschrift 2
Schriftgröße: 48px | Zeilenhöhe: 60px | Laufweite: -0,96
Schriftgröße: 48px | Zeilenhöhe: 60px | Laufweite: -0,96
Schriftgröße: 48px | Zeilenhöhe: 60px | Laufweite: -0,96
Überschrift 3
Schriftgrössi: 36px | Zeilehöchi: 44px | Tracking: -2%
Schriftgrössi: 36px | Zeilehöchi: 44px | Tracking: -2%
Schriftgrössi: 36px | Zeilehöchi: 44px | Tracking: -2%
Überschrift 4
Überschrift 4
Überschrift 4
Schriftgröße: 30px | Zeilenhöhe: 38px
Schriftgröße: 30px | Zeilenhöhe: 38px
Schriftgröße: 30px | Zeilenhöhe: 38px
Überschrift 5
Überschrift 5
Überschrift 5
Schriftgröße: 24px | Zeilenhöhe: 32px
Schriftgröße: 24px | Zeilenhöhe: 32px
Schriftgröße: 24px | Zeilenhöhe: 32px
Überschrift 6
Überschrift 6
Überschrift 6
Schriftgröße: 20px | Zeilenhöhe: 30px
Schriftgröße: 20px | Zeilenhöhe: 30px
Schriftgröße: 20px | Zeilenhöhe: 30px
Absatz x-groß
Absatz x-groß
Absatz x-groß
Schriftgröße: 18px | Zeilenhöhe: 28px
Schriftgröße: 18px | Zeilenhöhe: 28px
Schriftgröße: 18px | Zeilenhöhe: 28px
Absatz groß
Absatz groß
Absatz groß
Schriftgröße: 16px | Zeilenabstand: 24px
Schriftgröße: 16px | Zeilenabstand: 24px
Schriftgröße: 16px | Zeilenabstand: 24px
Absatz mittel
Absatz mittel
Absatz mittel
Schriftgröße: 14px | Zeilenhöhe: 20px
Schriftgröße: 14px | Zeilenhöhe: 20px
Schriftgröße: 14px | Zeilenhöhe: 20px
Absatz klein
Absatz klein
Absatz klein
Schriftgröße: 12px | Zeilenhöhe: 18px
Schriftgröße: 12px | Zeilenhöhe: 18px
Schriftgröße: 12px | Zeilenhöhe: 18px
Absatz x-klein
Absatz x-klein
Absatz x-klein
Schriftgröße: 18px | Zeilenhöhe: 22px
Schriftgröße: 18px | Zeilenhöhe: 22px
Schriftgröße: 18px | Zeilenhöhe: 22px
Eigenschaften klein
Eigenschaften klein
Eigenschaften klein
Schriftgröße: 14px | Zeilenhöhe: 20px
Schriftgröße: 14px | Zeilenhöhe: 20px
Schriftgröße: 14px | Zeilenhöhe: 20px
Eigenschaften x-klein
Eigenschaften x-klein
02 - Farben
02 - Farben
02 - Farben
Grundfarben
Grundfarben
Grundfarben
Dies sind die Hauptfarben, die den Großteil der Farben ausmachen, die im Design-System verwendet werden.
Dies sind die Hauptfarben, die den Großteil der Farben ausmachen, die im Design-System verwendet werden.
Dies sind die Hauptfarben, die den Großteil der Farben ausmachen, die im Design-System verwendet werden.
AAA
AAA
AAA
Schwarz
Schwarz
schwarz
schwarz
schwarz
AAA
AAA
AAA
Weiß
Weiß
#FFFFFF
#FFFFFF
#FFFFFF
Primärfarben
Primärfarben
Primärfarben
Die primäre Farbe ist Ihre "Marken"-Farbe und wird für alle Elemente wie Schaltflächen, Links, Eingabeaufforderungen usw. verwendet.
Die primäre Farbe ist Ihre "Marken"-Farbe und wird für alle Elemente wie Schaltflächen, Links, Eingabeaufforderungen usw. verwendet.
Die primäre Farbe ist Ihre "Marken"-Farbe und wird für alle Elemente wie Schaltflächen, Links, Eingabeaufforderungen usw. verwendet.
AAA
AAA
AAA
gelb 50
gelb 50
Diese Farbe entspricht dem Code #F2F1EE.
Diese Farbe entspricht dem Code #F2F1EE.
Diese Farbe entspricht dem Code #F2F1EE.
AAA
AAA
AAA
Schwarz 900
Schwarz 900
#0E0E0E
#0E0E0E
#0E0E0E
Graue Farben
Graue Farben
Graue Farben
Grau ist eine neutrale Farbe und bildet die Grundlage des Farbsystems.
Grau ist eine neutrale Farbe und bildet die Grundlage des Farbsystems.
Grau ist eine neutrale Farbe und bildet die Grundlage des Farbsystems.
AAA
AAA
AAA
Schwarz 50
Schwarz 50
#393939
#393939
#393939
AAA
AAA
AAA
Schwarz 100
Schwarz 100
Grau
Grau
Grau
AAA
AAA
AAA
Schwarz 200
Schwarz 200
#0E0E0E
#0E0E0E
#0E0E0E
AA
AA
AA
Schwarz 300
Schwarz 300
#7D7D7D
#7D7D7D
#7D7D7D
AAA
AAA
AAA
Schwarz 400
Schwarz 400
#606060
#606060
#606060
AAA
AAA
AAA
Schwarz 500
Schwarz 500
#545454
#545454
#545454
AAA
AAA
AAA
Schwarz 600
Schwarz 600
#454545
#454545
#454545
AAA
AAA
AAA
Schwarz 700
Schwarz 700
Schwarzgrau
Schwarzgrau
Schwarzgrau
AAA
AAA
AAA
Schwarz 800
Schwarz 800
#1A1A1A
#1A1A1A
#1A1A1A
03 – Schatten
03 – Schatten
03 – Schatten
xxklein
xxklein
kleinste
kleinste
klein
klein
mittlere
mittlere
groß
groß
sehr groß
sehr groß
XX-groß
XX-groß
04 - Symbole
04 - Symbole
04 - Symbole
05 - Tasten
05 - Tasten
05 - Tasten
Beispiel für eine Schaltfläche
Beispiel Taste
Beispiel für einen Button
Beispielknopf