Styleguide

Logo von Jülink

Farbpalette

#48267F

Hauptfarbe 

#7C60AF

Haupt­farbe — Hover 

#C55896

Aktions­farbe // But­tons & Links 

#8F305D

Aktions­farbe — Hover 

#95C230

Tertiärfarbe 

#42A136

Ter­tiär­farbe — Hover 

#707070

Grau // Texte 

#5C5C5C

Dun­kles Grau // Texte 

#D0103A

Rot 

#E0BF31

Gelb 

Typografie

Core Sans 

Über­schriften — Font Weight 300 & 600 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + — =

Core Sans 

Text — Font Weight 300 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü ẞ
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9 | @ & % § ! ? € / # + — =

Fließtext mit Absatz und Aufzählung

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et jus­to duo dolores et ea rebum. Stet cli­ta kasd guber­gren, no sea taki­ma­ta sanc­tus est. Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

At vero eos et accusam et jus­to duo dolores et ea rebum.

Skalierung

Desktop 

1.250 — Major Third 

Tablet 

1.200 — Minor Third 

Mobil 

1.125 — Major Second 

Body +4 | H1 — 64px

Body +3 | H2 — 48px

Body +2 | H3 — 35px

Body +1 | H4–H6 — 22px

Body +4 | H1 — 37px

Body +3 | H2 — 31px

Body +2 | H3 — 26px

Body +1 | H4–H6 — 22px

Body +4 | H1 — 29px

Body +3 | H2 — 26px

Body +2 | H3 — 23px

Body +1 | H4–H6 — 20px

Nor­male Textgröße — 18px
Kleine Hin­weis­texte & Co. — 15px
Kle­in­ste Schrift­größe — 12px
Nor­male Textgröße — 18px
Kleine Hin­weis­texte & Co. — 15px
Kle­in­ste Schrift­größe — 12px
Nor­male Textgröße — 18px
Kleine Hin­weis­texte & Co. — 15px
Kle­in­ste Schrift­größe — 12px

Button-Variationen

Primär 

Ausgefüllt 

Sekundär 

Eingerahmt 

Tertiär 

nur Text 

Formular-Design

Deine Dat­en wer­den gemäß unser­er Daten­schutzerk­lärung verarbeitet. 

Icons

Text mit Icon oben 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon oben 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Text mit Icon links 

Lorem ipsum dolor sit amet, con­sete­tur sadip­sc­ing elitr, sed diam non­umy eir­mod tem­por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Border Radius

10px 

für CTA-Blöcke o.Ä.

10px 

für Inhalts-Rah­men z.b. beim Impressum 

Layout System

Stan­dard Padding per CSS im Cus­tomiz­er festgelegt

Abschnitte: 0px oben und unten 

30px oben und unten für Mobile 

Container: 20px links und rechts 

Nicht über­schreib­bar — nur Desk­top & Tablet 

Spalten: 20px rundherum 

Deshalb mobil 20px rechts & links zum Bildschirmrand 

Widgets: 20px dazwischen 

Stan­dard-Ein­stel­lung in Elementor 

Kundenservice

Kontakt zu uns

Rückruf anfordern