Styleguide
Farben, Schrift, Buttons und die Boxes, aus denen die Seiten entstehen.
Farben
Primary bleibt gelb, der Text darauf schwarz. Auf Secondary und Black Rock ist der Text weiß.
-
Primary
#eeff00 · Hauptaktion
-
Black Rock
#060323 · dunkle Fläche
-
Secondary
#0030cf
-
Schwarz
#000000
-
Hell
#e6e6e6
-
Rot
#ff073a · Hinweis
Schrift
Websites, die sich wie die Marke anfühlen.
H1 · 36–72px · Space Grotesk
Zuerst das System, dann die Seiten.
H2 · 26–48px
Eine Stimme, groß gesetzt.
H3 · 22–32px
Die große Zeile der Marke.
Eyebrow · Space Grotesk
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Ein Link bleibt eine Pill.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.
- Nullam quis risus eget urna mollis ornare
- Etiam porta sem malesuada magna mollis euismod
- Vestibulum id ligula porta felis euismod semper
Tabellen und Code nutzen Space Mono.
Boxes
Dieselben Bausteine wie auf der Startseite. Hintergrund und Abstand setzt die Box, nicht die Seite.
Fließtext hält das Maß.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec ullamcorper nulla non metus auctor fringilla. Code bleibt Space Mono.
- Cras mattis consectetur purus sit amet fermentum
- Nullam quis risus eget urna mollis ornare
- Etiam porta sem malesuada magna mollis euismod
Karten für echte Inhalte.
-
Landingpage
Wenige Seiten, ein Auftritt, kein Shop. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Page-Builder
Flächen, die das Projekt selbst setzt. Integer posuere erat a ante venenatis dapibus.
-
Shop
Dieselbe Marke, wenn der Verkauf dazukommt. Aenean lacinia bibendum nulla sed consectetur.
Merkmale ohne Kartenrahmen.
-
Tokens
Farben kommen aus der Auswahl, nicht als Hex im Inhalt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lokal
Schriften und Icons liegen im Build, nicht bei einem Dienst. Praesent commodo cursus magna, vel scelerisque nisl.
-
Erweiterbar
Neue Boxes setzen auf dieselben Mixins. Donec sed odio dui, consequat vitae auctor eget.
Fragen, die sich aufklappen.
Tastatur
Der Eintrag ist ein natives Details-Element. Enter und Leertaste öffnen ihn.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Mehrere offen
Ein Eintrag schließt die anderen nicht. Der Leser behält den Zusammenhang.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.
Eine Stimme, groß gesetzt.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Der Satz zeigt, wie ein Zitat über zwei Zeilen im Raster sitzt.
Beispiel
Platzhalter, keine Kundinnenstimme
Und dann die eigene Seite.
Tokens tauschen, Boxes erweitern, Inhalte im CMS pflegen.