Langeoog Style Guide

letzter Stand vom 06.05.2025

Logo

Anwendung des Logos
Das Logo der Insel Langeoog wird in der Farbe Schwarz oder Weiß angewendet, je nach Kontrast zum Hintergrund.

Heller Hintergrund

Dunkler Hintergrund

Hinweis: Das Logo darf weder gestaucht, gestreckt, in seiner Anordnung verändert oder mit anderen Farben versehen werden.

Freiflächen
Um die Lesbarkeit und Wirkung des Logos zu gewährleisten, ist darauf zu achten, dass um das Logo herum ein freier Raum bleibt.

Typografie

Für die Inselgemeinde Langeoog setzen wir auf die Schrift Case der Berliner Font-Boutique Fontwerk, eine moderne, vielseitige Schriftfamilie, die Tradition und Zukunft, Klarheit und Ausdrucksstärke miteinander vereint.

Case überzeugt durch ihr zeitgemäßes, gut lesbares Design und ihre hohe Flexibilität in verschiedenen Gewichten und Stilen.
Sie wirkt freundlich und zugänglich, ohne an Präzision und Seriosität zu verlieren – genau wie Langeoog selbst: offen, strukturiert, entschleunigt und gleichzeitig lebendig.

Die organische Formsprache der Schrift greift die Naturverbundenheit der Insel auf, während ihr durchdachter Aufbau und die funktionale Klarheit ideal für digitale Anwendungen geeignet sind – von responsiven Weblayouts bis hin zu Printmedien.

HTML Headline Tags
HTML-Tags definieren Standard-Überschriftenstile.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Headline Klassen
Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

heading-style-h4

Heading-style-h4

heading-style-h5

Heading-style-h5

heading-style-h6

Heading-style-h6

Andere HTML Tags
HTML-Tags definieren Standardtextstile.

All Paragraphs

All Links

All Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

Textgrößen
Textgrößenklassen, wenn die Größe der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Schriftstärken
Schriftstärke, wenn die Stärke der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Text Styles
Text Styles, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-style-muted

text-style-tagline

Text Ausrichtung
Textausrichtungsklassen, wenn die Ausrichtung der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-align-left

text-align-center

text-align-right

Rich Text

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Farben

Farbpalette
Primär- und Sekundärfarben der Insel Langeoog.

Nordsee

CMYK

C: 97% M: 67% Y: 29% K: 14%

RGB

R: 14 G: 76 B: 120

HEX

#0e4c78

Abendsonne

CMYK

C: 9% M: 52% Y: 99% K: 1%

RGB

R: 226 G: 137 B: 6

HEX

#f49100

Himmelblau

CMYK

C: 77% M: 21% Y: 32% K: 4%

RGB

R: 39 G: 150 B: 166

HEX

#2796a6

Inselhimmel

CMYK

C: 60% M: 0% Y: 20% K: 0%

RGB

R: 99 G: 195 B: 209

HEX

#63c3d1

Dünengras

CMYK

C: 71% M: 4% Y: 86% K: 0%

RGB

R: 79 G: 170 B: 79

HEX

#4faa4f

Strandhafer

CMYK

C: 63% M: 12% Y: 65% K: 0%

RGB

R: 107 G: 170 B: 117

HEX

#6baa75

Küstennebel

CMYK

C: 9% M: 0% Y: 7% K: 0%

RGB

R: 237 G: 247 B: 242

HEX

#edf7f2

Strand

CMYK

C: 0% M: 25% Y: 65% K: 0%

RGB

R: 252 G: 200 B: 108

HEX

#fcc86c

Strandweiß

CMYK

C: 2% M: 2% Y: 4% K: 0%

RGB

R: 250 G: 249 B: 246

HEX

#faf9f6

Neutral Darkest

CMYK

C: 81% M: 71% Y: 62% K: 90%

RGB

R: 15 G: 15 B: 15

HEX

#0f0f0f

Neutral Darker

CMYK

C: 75% M: 65% Y: 60% K: 80%

RGB

R: 30 G: 30 B: 30

HEX

#1e1e1e

Neutral Dark

CMYK

C: 65% M: 55% Y: 58% K: 61%

RGB

R: 61 G: 61 B: 57

HEX

#3d3d39

Neutral

CMYK

C: 56% M: 45% Y: 48% K: 36%

RGB

R: 99 G: 99 B: 95

HEX

#63635f

Neutral Light

CMYK

C: 36% M: 27% Y: 28% K: 7%

RGB

R: 170 G: 170 B: 170

HEX

#aaaaaa

Neutral Lighter

CMYK

C: 23% M: 17% Y: 18% K: 1%

RGB

R: 204 G: 204 B: 204

HEX

#cccccc

Neutral Lightest

CMYK

C: 8% M: 5% Y: 7% K: 0%

RGB

R: 238 G: 238 B: 238

HEX

#eeeeee

UI Elemente

Buttons

button