Styleguide

Website-Informationen Farben Typografie Buttons Weitere Einstellungen

Website-Informationen

Name der Website

ChristusBewegung - Lebendige Gemeinde

Logo

Favicon

Globale Farben

Accent

Basis

HEX: #68C8F0

RGB: rgb(104, 200, 240)

Deckkraft: 100% (1.00)

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

Gelb

50%

HEX: #F8A92A80

RGB: rgb(248, 169, 42)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-6428ab8)

Basis

HEX: #F8AA2D

RGB: rgb(248, 170, 45)

Deckkraft: 100% (1.00)

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

Grün

50%

HEX: #3A9C3580

RGB: rgb(58, 156, 53)

Deckkraft: 50% (0.50)

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

Basis

HEX: #3B9C36

RGB: rgb(59, 156, 54)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-1d44b2c)

Lightblue

10%

HEX: #B6DFF626

RGB: rgb(182, 223, 246)

Deckkraft: 15% (0.15)

Variable: var(--e-global-color-83cc524)

25%

HEX: #68C8F07D

RGB: rgb(104, 200, 240)

Deckkraft: 49% (0.49)

Variable: var(--e-global-color-6240d41)

Basis

HEX: #B6DFF6

RGB: rgb(182, 223, 246)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-68a6e4f)

Lighter

Blue

HEX: #B6DFF6

RGB: rgb(182, 223, 246)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-1d2a2a3)

Lightgrey

Basis

HEX: #F0F0F0

RGB: rgb(240, 240, 240)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-54dc9dd)

Darker

HEX: #DFDFDF

RGB: rgb(223, 223, 223)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-01b9552)

Lila

Basis

HEX: #711D81

RGB: rgb(113, 29, 129)

Deckkraft: 100% (1.00)

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

Primary

25%

HEX: #1F2B5140

RGB: rgb(31, 43, 81)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-6da55ca)

50%

HEX: #1F2B5180

RGB: rgb(31, 43, 81)

Deckkraft: 50% (0.50)

Variable: var(--e-global-color-99bede8)

75%

HEX: #1E2A50BF

RGB: rgb(30, 42, 80)

Deckkraft: 75% (0.75)

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

Basis

HEX: #1E2A50

RGB: rgb(30, 42, 80)

Deckkraft: 100% (1.00)

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

Rot

25%

HEX: #B4182540

RGB: rgb(180, 24, 37)

Deckkraft: 25% (0.25)

Variable: var(--e-global-color-36646c0)

50%

HEX: #B4182582

RGB: rgb(180, 24, 37)

Deckkraft: 51% (0.51)

Variable: var(--e-global-color-772501d)

Basis

HEX: #B41826

RGB: rgb(180, 24, 38)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-9cc33c0)

Secondary

Basis

HEX: #68C8F0

RGB: rgb(104, 200, 240)

Deckkraft: 100% (1.00)

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

Text

Basis

HEX: #1E2A50

RGB: rgb(30, 42, 80)

Deckkraft: 100% (1.00)

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

on Dark

HEX: #ABB1C3

RGB: rgb(171, 177, 195)

Deckkraft: 100% (1.00)

Variable: var(--e-global-color-6ffdf2c)

White

15%

HEX: #FFFFFF26

RGB: rgb(255, 255, 255)

Deckkraft: 15% (0.15)

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

25%

HEX: #FFFFFFBF

RGB: rgb(255, 255, 255)

Deckkraft: 75% (0.75)

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

Basis

HEX: #FFFFFF

RGB: rgb(255, 255, 255)

Deckkraft: 100% (1.00)

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

Globale Schriftarten (Live-Beispiele)

Primary — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 69px, Tablet: 38px, Mobil: 38px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Secondary — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 48px, Tablet: 28px, Mobil: 28px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Text — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 15px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Accent — Familie: Roboto · Stärke: 500 · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Body — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 16px · Zeilenh.: 1.3em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Text Small — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 13px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Big Text - Medium — Familie: Geomanist · Stärke: 500 · Größe: Desktop: 23px, Mobil: 18px · Zeilenh.: 1.3em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Big Text Bold (700) — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 23px · Zeilenh.: 1.3em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Huge Text — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 100px, Tablet: 75px, Mobil: 61px · Zeilenh.: 1.3em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Bigger Text — Familie: Geomanist · Stärke: 500 · Größe: Desktop: 36px, Mobil: 24px · Zeilenh.: 1.3em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h1 — Größe: Desktop: 64px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h1 Huge — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 100px, Tablet: 75px, Mobil: 42px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h2 — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 67px, Mobil: 33px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h3 — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 36px, Mobil: 24px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h4 — Stärke: 700 · Größe: Desktop: 28px, Mobil: 22px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h4 - Regular — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 28px, Mobil: 22px · Zeilenh.: 43px

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h5 — Größe: Desktop: 28px, Mobil: 21px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h5 Bold — Stärke: 700 · Größe: Desktop: 28px, Mobil: 21px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

h6 — Größe: Desktop: 22px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Link — Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Button Small — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 16px, Tablet: 14px · Transform.: Capitalize · Stil: Normal · Zeilenh.: 1em · Buchstabenab.: 0px

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Navigation — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 20px, Tablet: 14px · Zeilenh.: 1em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Navigation Small — Familie: Geomanist · Stärke: 700 · Größe: Desktop: 16px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Big Text Medium - Link — Familie: Geomanist · Stärke: 500 · Größe: Desktop: 23px, Mobil: 18px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

H6 Bold — Stärke: 700 · Größe: Desktop: 22px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Text Tiny — Familie: Geomanist · Stärke: 400 · Größe: Desktop: 10px · Zeilenh.: 1.2em

Desktop → Lorem ipsum dolor

Tablet → Lorem ipsum dolor

Mobil → Lorem ipsum dolor

Buttons

Button-Stil (aus Site Kit)

Typografie

• Zeilenhöhe: 1.2em

Normalzustand

• Innenabstand: Top: 1em, Right: 2em, Bottom: 1em, Left: 2em

• Rahmenbreite: Top: 2px, Right: 2px, Bottom: 2px, Left: 2px (verknüpft)

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

Weitere globale Einstellungen

Bilder & Lightbox

• Global Image Lightbox: yes

• Lightbox Enable Counter: yes

• Lightbox Enable Fullscreen: yes

• Lightbox Enable Zoom: yes

• Lightbox Enable Share: yes

• 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

• H2 Color: #1E2A50

• H2 Typography Typography: custom

• H2 Typography Font Family: Geomanist

• H2 Typography Font Size: 67px

• H2 Typography Font Weight: 700

• H2 Typography Line Height: 1.2em

• H3 Color: #68C8F0

• H3 Typography Typography: custom

• H3 Typography Font Family: Geomanist

• H3 Typography Font Size: 48px

• H3 Typography Font Weight: 700

• H3 Typography Line Height: 1.2em

• H2 Typography Font Size Mobile: 33px

• H3 Typography Font Size Mobile: 28px

• Color: #1E2A50

• Typography Typography: custom

• Typography Font Family: Geomanist

• Typography Font Size: 16px

• Typography Font Weight: 400

• Typography Line Height: 1.2em

• Link Normal Color: #68C8F0

• H1 Color: #1E2A50

• H1 Typography Typography: custom

• H4 Color: #1E2A50

• H4 Typography Typography: custom

• H5 Color: #1E2A50

• H5 Typography Typography: custom

• H6 Color: #1E2A50

• H6 Typography Typography: custom

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

• Space Between Widgets: 1em

• Link Normal Typography Typography: custom

• Link Normal Typography Line Height: 1.2em

• H1 Typography Font Size: 64px

• H1 Typography Line Height: 1.2em

• H4 Typography Font Size: 32px

• H4 Typography Font Weight: 700

• H4 Typography Line Height: 1.2em

• H5 Typography Font Size: 28px

• H5 Typography Line Height: 1.2em

• H6 Typography Font Size: 22px

• H6 Typography Line Height: 1.2em

• Mobile Browser Background: #1E2A50

• H5 Typography Font Size Mobile: 21px

Pressemitteilung zur Kirchenwahl 2025 zur Korrektur des Wahlergebnisses

Synode Aktuell Herbstsynode 2025

Silvesterkonferenz

Jahrestreffen 2026

Styleguide

Website-Informationen

Globale Farben

Globale Schriftarten (Live-Beispiele)

Buttons

Weitere globale Einstellungen

Social Media

Startseite

Über uns

Aktuelles

Alle Events

Wahlkreise