Styleguide · v1

BNE Kreis Olpe

Single source of truth. Alle Screens nutzen ausschließlich diese Komponenten — gleiche Paddings, Radien, Schatten, Hover-States.

Nuxt UI · Tailwind7 Screens
01

Farbpalette

Wald-Grün als Leitfarbe, Sonne als Akzent, warmes Off-White als Bühne. SDG-Hues für Themen-Tags.

oklch(0.45 0.09 165)
Primary
Wald-Grün · CTA, Links
oklch(0.95 0.025 165)
Primary Soft
Hover/Soft BG
oklch(0.78 0.135 78)
Accent
Sonne · Highlights
#FAF7F1
Background
Warm Off-White
#FFFFFF
Surface
Cards
#1F1C16
Ink
Text
SDG-Themen-Hues
SDG 01
Keine Armut
SDG 02
Kein Hunger
SDG 03
Gesundheit und Wohlergehen
SDG 04
Hochwertige Bildung
SDG 05
Geschlechtergleichheit
SDG 06
Sauberes Wasser und Sanitäreinrichtungen
SDG 07
Bezahlbare und saubere Energie
SDG 08
Menschenwürdige Arbeit und Wirtschaftswachstum
SDG 09
Industrie, Innovation und Infrastruktur
SDG 10
Weniger Ungleichheiten
SDG 11
Nachhaltige Städte und Gemeinden
SDG 12
Nachhaltiger Konsum und Produktion
SDG 13
Maßnahmen zum Klimaschutz
SDG 14
Leben unter Wasser
SDG 15
Leben an Land
SDG 16
Frieden, Gerechtigkeit und starke Institutionen
SDG 17
Partnerschaften zur Erreichung der Ziele
Die 17 SDG-Icons · offiziell

Einheitliche Darstellung über <BneSdgIcon :goal="N" /> — offizielle Farbe, Nummer und Symbol pro Ziel. Immer aus dieser einen Quelle (public/images/sdg/NN.svg), damit Farben, Titel und Symbole überall identisch sind.

Ziel 1: Keine Armut
Ziel 2: Kein Hunger
Ziel 3: Gesundheit und Wohlergehen
Ziel 4: Hochwertige Bildung
Ziel 5: Geschlechtergleichheit
Ziel 6: Sauberes Wasser und Sanitäreinrichtungen
Ziel 7: Bezahlbare und saubere Energie
Ziel 8: Menschenwürdige Arbeit und Wirtschaftswachstum
Ziel 9: Industrie, Innovation und Infrastruktur
Ziel 10: Weniger Ungleichheiten
Ziel 11: Nachhaltige Städte und Gemeinden
Ziel 12: Nachhaltiger Konsum und Produktion
Ziel 13: Maßnahmen zum Klimaschutz
Ziel 14: Leben unter Wasser
Ziel 15: Leben an Land
Ziel 16: Frieden, Gerechtigkeit und starke Institutionen
Ziel 17: Partnerschaften zur Erreichung der Ziele
02

Typografie

Bricolage Grotesque (Display) + Geist Sans (UI/Text). Mono für Meta.

Bildung,
die bleibt.
Display · Bricolage Grotesque 80 / 600
H1 · Section
40 / 600 · −0.022em
H2 · Subhead
28 / 600
Lead · Workshops für Grundschulen rund um Wald, Wiesen und Wasser.
Geist 18 / 400
Body — Texte sind freundlich, konkret und „Sie"-Form. Keine Floskeln.
Geist 14 / 400
Eyebrow · Meta
Geist Mono 11 / +0.08em
03

Spacing & Radius

4-px-Basis. Standard-Card: 24 px Padding, 12 px Radius, soft shadow.

Spacing Scale
4
8
12
16
24
32
48
64
Radius / Shadow
pill · 999
Tag
surface · 12
Card
control · 8
Button · Input
chip · 6
Badge
stripe · 4
Color stripe
04

Buttons

Primary für CTA, Secondary für Akzente, Ghost für untergeordnete Aktionen.

Variants
Sizes
With Icons
05

Tag-Pills · SDG-Themen

Pro Thema eine Farbe nach offizieller SDG-Palette.

Keine ArmutKein HungerGesundheit und WohlergehenHochwertige BildungGeschlechtergleichheitSauberes Wasser und SanitäreinrichtungenBezahlbare und saubere EnergieMenschenwürdige Arbeit und WirtschaftswachstumIndustrie, Innovation und InfrastrukturWeniger UngleichheitenNachhaltige Städte und GemeindenNachhaltiger Konsum und ProduktionMaßnahmen zum KlimaschutzLeben unter WasserLeben an LandFrieden, Gerechtigkeit und starke InstitutionenPartnerschaften zur Erreichung der Ziele
NeutralPrimaryVeröffentlichtIn PrüfungEntwurfKostenpflichtig
06

Cards

Einheitliche Cards mit Hover-Lift. Verwendung auf Startseite, Suche, Detail.

GALILEO-PARK
Lennestadt

GALILEO-PARK

Wissens- und Rätselpark im Herzen des Sauerlandes – Lernen, Staunen und Erleben für die ganze Familie. Interaktive Ausstellungen im Wechsel!

Hochwertige BildungBezahlbare und saubere Energie
Kita · Grundschule …kostenpflichtig
Klassenzimmer im Gewächshaus
Attendorn

Hof Belke gUG

Unsere Themen: Nachhaltige Land- und Forstwirtschaft, Nachhaltige Ernährung, Ressourcen und Konsum, Biodiversität, Demokratiebildung

Hochwertige BildungLeben an Land+1
Kita · Grundschule …kostenpflichtig
MataLab in der InfoTastic Academy
Attendorn

InfoTastic Academy

Ziel der InfoTastic Academy ist es, Menschen jeder Altersgruppe den Umgang mit Technik und digitalen Medien in einer von Digitalität geprägten Welt näherzubringen. Dabei steht Faszination stets im Mittelpunkt.

Maßnahmen zum Klimaschutz
Kita · Grundschule …kostenlos