Advanced Settings

Global Colors

primary
#978161

primary-variant
#9e5957

secondary
#ffffff

secondary-variant
#1c1c1c

primary-contrast
#282828

primary-contrast-variant
#2d2c2c

secondary-contrast
#a4a4a5

secondary-contrast-variant
#434242

transparent

white

grey

Dark/Light mode relevant colors

Beispiel
Graustufenverteilung (Dark-Mode)

Arbeitsrecht für alle Beteiligten

[Kanzleiname] ist spezialisiert im Fachgebiet Arbeitsrecht. Wir vertreten Arbeitnehmer, Arbeitgeber und Gewerkschaften.

Bankrecht und Kapitalmarktrecht

Bei Rechtsfragen im Bereich Bankrecht und Kapitalmarktrecht steht Ihnen unser spezialisierter Fachanwalt zur Verfügung.

Baurecht und Architektenrecht

Unser Fachanwalt für Baurecht und Architektenrecht berät und vertritt Sie in baurechtlichen und architektenrechtlichen Angelegenheiten.

Border: secondary-contrast-variant (#434242)

Background-Color: primary-contrast-variant (#2d2d2c)


Fonts & Font Colors

Absatztext (Standard)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Font: Inter Regular 400 / 16px / 1.5 LH / 0 Spacing
Color: secondary-contrast


Einführungstext

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Font: Inter Regular 400 / 18px / 1.75 LH / 0 Spacing
Color: secondary-contrast

Kleiner Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Font: Inter Regular 400 / 14px / 1.75 LH / 0 Spacing
Color: secondary-contrast

Zwischenüberschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Font: Inter Semibold 600 / 16px / 1.75 LH / 0 Spacing
Color: secondary-contrast

Tagline

Lorem ipsum

Font: Inter Bold 700 / 12px / 1.25 LH / 0 Spacing / Uppercase
Color: primary-variant

Links

Link Color: secondary-contrast:
Link Hover Color: secondary:


Headlines

H1 Wir stellen uns vor

Font: DM Serif Display 400 / 56px / 1,25 LH / 0 Spacing /
Color: Secondary

H2 Wir stellen uns vor

Font: DM Serif Display 400 / 40px / 1,25 LH / 0 Spacing /
Color: Secondary

H3 Wir stellen uns vor

Font: DM Serif Display 400 / 26px / 1,25 LH / 0 Spacing /
Color: Secondary

H4 Wir stellen uns vor

Font: DM Serif Display 400 / 24px / 1,25 LH / 0 Spacing /
Color: Secondary

H5 Wir stellen uns vor

Font: DM Serif Display 400 / 20px / 1,25 LH / 0 Spacing /
Color: Secondary

H6 Wir stellen uns vor

Font: DM Serif Display 400 / 16px / 1,25 LH / 0 Spacing /
Color: Secondary


Navigation

Level 1

Ebene 1 Textfarbe: Secondary-Contrast
Ebene 1 Aktive/Hover Textfarbe: Secondary
Font Family: Inter Semi Bold 600 / 15px / 1,5 LH / Spacing 1

Level 2

Level 2 Color: Secondary-Variant: #777777
Font Family: Inter Semi Bold 600 / 14px / 1,5 LH / Spacing 1

Level 3

Level 3 Color: Secondary-Variant: #777777
Font Family: Inter Normal 400 / 14px / 1,5 LH / Spacing 1


Buttons

Font: Inter Semi Bold 600 / 12px / 1,5 LH / Spacing 2 / Uppercase
Button Text Color: Inherit: #ffffff


Buttons

Button Background Color: primary: #315ba7
Button Hover Color: primary-variant: #22407
Border radius (px): 3


Navigation

Navigation Layout

Volle Desktop Breite: on
Navigation Height: 80
Hamburger on desktop: off
Navigation sticky: off
Überdeckende Navigation: off
Logo and Navigation presets: logo left, navigation right
Logo size in %: 40

Hamburger Einstellungen

Hamburger-Menü auf Desktop: off
Icon Color: primary
Background Color: transparent
Active/Hover Icon Color: primary-variant
Active/Hover Background Color: transparent

Level 1

Hover Animation: textfarbenänderung
Active/Hover Text Color: secondary
Background Color: transparent
Hamburger Menu Background Color: transparent
Active/Hover Background Color: transparent

Level 2

Ebene 2 Textfarbe: secondary-contrast
Active/Hover Text Color: primary
Hintergrundfarbe: primary-contrast
Hintergrundfarbe: primary-contrast
Aktive/Hover Hintergrundfarbe: primary-variant

] primary-contrast-variant (#f9f9f9)

Level 3

Ebene 3 Textfarbe: primary
Aktive/Hover Textfarbe: primary-contrast
Hintergrundfarbe: primary-contrast
Aktive/Hover Hintergrundfarbe: primary-variant


Footer

Footer visible: off