/

Styleguide

Styleguide

Website-Informationen Farben Typografie Buttons Weitere Einstellungen

Website-Informationen

Name der Website

Wirtschaftsförderung Nordschwarzwald

Logo

Favicon

Globale Farben

Accent

25%

HEX: #079E4E40

RGB: rgb(7, 158, 78)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-b977983)

75%

HEX: #079E4EBF

RGB: rgb(7, 158, 78)

Deckkraft: 75% (0.75)

Variable: var(--e-global-color-bf2c5b7)

Basis

HEX: #079E4E

RGB: rgb(7, 158, 78)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-accent)

Black

50%

HEX: #00000080

RGB: rgb(0, 0, 0)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-21e5c54)

75%

HEX: #000000BF

RGB: rgb(0, 0, 0)

Deckkraft: 75% (0.75)

Variable: var(--e-global-color-742d88c)

Basis

HEX: #000000

RGB: rgb(0, 0, 0)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-46248e2)

Dark

10%

HEX: #2025231A

RGB: rgb(32, 37, 35)

Deckkraft: 10% (0.10)

Variable: var(--e-global-color-2e74613)

25%

HEX: #20252340

RGB: rgb(32, 37, 35)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-cb94f0e)

50%

HEX: #20252380

RGB: rgb(32, 37, 35)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-d8f3c6b)

75%

HEX: #202523BF

RGB: rgb(32, 37, 35)

Deckkraft: 75% (0.75)

Variable: var(--e-global-color-2042fc2)

Basis

HEX: #202523

RGB: rgb(32, 37, 35)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-1576284)

Primary

10%

HEX: #C3F5531C

RGB: rgb(195, 245, 83)

Deckkraft: 11% (0.11)

Variable: var(--e-global-color-8d95c81)

25%

HEX: #C3F55340

RGB: rgb(195, 245, 83)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-d5e485b)

50%

HEX: #C3F55380

RGB: rgb(195, 245, 83)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-53ff840)

75%

HEX: #C3F553BF

RGB: rgb(195, 245, 83)

Deckkraft: 75% (0.75)

Variable: var(--e-global-color-59bcde5)

Darker

HEX: #B0DB4F

RGB: rgb(176, 219, 79)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-cb60136)

Primär

Basis

HEX: #A2E450

RGB: rgb(162, 228, 80)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-primary)

Secondary

50%

HEX: #E1EEE580

RGB: rgb(225, 238, 229)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-3c16ba3)

Darker

HEX: #D3E6D1

RGB: rgb(211, 230, 209)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-8651dc4)

Sekundäre

Basis

HEX: #E1EEE5

RGB: rgb(225, 238, 229)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-secondary)

Text

Basis

HEX: #202523

RGB: rgb(32, 37, 35)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-text)

White

25%

HEX: #FFFFFF40

RGB: rgb(255, 255, 255)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-9578cf4)

50%

HEX: #FFFFFF7B

RGB: rgb(255, 255, 255)

Deckkraft: 48% (0.48)

Variable: var(--e-global-color-0bd152a)

75%

HEX: #FFFFFFBF

RGB: rgb(255, 255, 255)

Deckkraft: 75% (0.75)

Variable: var(--e-global-color-a538f25)

Basis

HEX: #FFFFFF

RGB: rgb(255, 255, 255)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-7b34a63)

Globale Schriftarten (Live-Beispiele)

Primär — Familie: Heebo · Stärke: 600 · Zeilenh.: 1.3em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Sekundäre — Familie: Heebo · Stärke: 400 · Zeilenh.: 1.6px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Text — Familie: Heebo · Stärke: 500 · Größe: Desktop: 15px, Mobil: 13px · Zeilenh.: 1.6em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Accent — Familie: Roboto · Stärke: 500

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H1 Big — Familie: Heebo · Stärke: 900 · Größe: Desktop: 75px, Tablet: 60px, Mobil: 45px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H1 — Familie: Heebo · Stärke: 900 · Größe: Desktop: 60px, Tablet: 50px, Mobil: 42px · Zeilenh.: 1.3em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H2 Bold — Stärke: 900 · Größe: Desktop: 50px, Tablet: 36px, Mobil: 30px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H2 — Familie: Heebo · Stärke: 900 · Größe: Desktop: 50px, Tablet: 36px, Mobil: 30px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H3 Bold — Familie: Heebo · Stärke: 900 · Größe: Desktop: 40px, Tablet: 34px, Mobil: 26px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H3 — Familie: Heebo · Stärke: 800 · Größe: Desktop: 40px, Tablet: 34px, Mobil: 26px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H4 Bold — Stärke: 900 · Größe: Desktop: 30px, Tablet: 25px, Mobil: 20px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H4 — Stärke: 500 · Größe: Desktop: 30px, Tablet: 25px, Mobil: 20px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H5 Bold — Familie: Heebo · Stärke: 800 · Größe: Desktop: 27px, Tablet: 22px, Mobil: 18px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H5 Bold - Smaller — Familie: Heebo · Stärke: 800 · Größe: Desktop: 22px, Tablet: 18px, Mobil: 14px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H5 — Familie: Heebo · Stärke: 800 · Größe: Desktop: 20px · Zeilenh.: 1.2em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H6 Bold — Familie: Heebo · Stärke: 700 · Größe: Desktop: 16px, Tablet: 14px, Mobil: 12px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H6 Bold Uppercase Tiny — Familie: Heebo · Stärke: 700 · Größe: Desktop: 12px, Tablet: 11px, Mobil: 10px · Transform.: Uppercase

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H6 Uppercase — Familie: Heebo · Stärke: 700 · Größe: Desktop: 16px, Tablet: 14px, Mobil: 12px · Transform.: Uppercase

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

H6 — Familie: Heebo · Stärke: 500 · Größe: Desktop: 16px, Tablet: 14px, Mobil: 12px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Text Big — Familie: Heebo · Stärke: 500 · Größe: Desktop: 22px, Tablet: 19px, Mobil: 16px · Zeilenh.: 1.3em

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Text Bigger — Familie: Heebo · Stärke: 500 · Größe: Desktop: 25px, Tablet: 22px, Mobil: 19px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Text Small — Familie: Heebo · Größe: Desktop: 14px, Tablet: 12px, Mobil: 11px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Text Tiny — Familie: Heebo · Stärke: 500 · Größe: Desktop: 12px, Tablet: 10px, Mobil: 9px

Desktop → Wirtschaftsförderung

Tablet → Wirtschaftsförderung

Mobil → Wirtschaftsförderung

Buttons

Button-Stil (aus Site Kit)

Normalzustand

• Eckenradius: Top: 10px, Right: 10px, Bottom: 10px, Left: 10px (verknüpft)

Weitere globale Einstellungen

Formular-Stile

• Form Field Border Radius: Top: 5px, Right: 5px, Bottom: 5px, Left: 5px (verknüpft)

• Form Field Focus Border Radius: Top: 6px, Right: 6px, Bottom: 6px, Left: 6px (verknüpft)

• Form Field Padding Mobile: Top: 1em, Right: 1em, Bottom: 1em, Left: 1em (verknüpft)

Bilder & Lightbox

• Image Border Radius: Top: 5px, Right: 5px, Bottom: 5px, Left: 5px (verknüpft)

• Lightbox Title Src: title

• Lightbox Description Src: description

Layout & Abstände

• Template: default

• Default Generic Fonts: Sans-serif

• Page Title Selector: h1.entry-title

• ActiveItemIndex: 1

• Viewport Md: 768

• Viewport Lg: 1025

• Container Width: 100%

• Container Padding: Top: 1em, Right: 1em, Bottom: 1em, Left: 1em (verknüpft)

• Space Between Widgets: 1em