Design System

Alle Farben, Schriften, Abstände, Logos und Icons von bonn.biz an einem Ort. Die Werte werden direkt aus common/design/tokens.css gelesen.

Logo

Das Löwenkopf-Motiv ist das Wappen der Stadt Bonn und wird unverändert verwendet. Lizenz und Nutzungsbedingungen des Wappens sind vor dem Start noch zu klären.

Farbe, auf Papier, Sand und Weiß

Weiß, auf Marine oder Rhein

Bildmarke, mind. 24 px

Einfarbig, für Stempel und Druck

Nicht umfärben, strecken, drehen oder mit Schatten versehen. Freiraum mindestens so hoch wie das „b“; Volllogo nie schmaler als 140 px.

Farben

Etwa 65 % Papier, Sand und Weiß, 28 % Rhein und Marine, 7 % Akzente. Pro Abschnitt höchstens eine Akzentfarbe. Bedeutung wird nie nur durch Farbe vermittelt.

Palette

--rhein #1D5FA6
--rhein-deep #123F73
--marine #0B2545
--rhein-tint #E6F0FA
--kirsch #B8386B
--kirsch-deep #9B2A55
--kirsch-tint #FBE3EC
--honig #F2B33D
--honig-deep #7A4B00
--honig-tint #FDF0D2
--aue #2A7F62
--aue-deep #1F6B50
--aue-tint #DFF1E9
--paper #FBF8F3
--sand #F1EADF
--white #FFFFFF
--line #E3DACB
--ink #14263B
--slate #4A5A6B

Datenfarben

Die Stufen unterscheiden sich in der Helligkeit, nicht im Farbton.

Stufe 1 #E6F0FA
Stufe 2 #B7D3EE
Stufe 3 #6FA3D6
Stufe 4 #2F70B5
Stufe 5 #0B2545

Semantische Rollen

Semantische Farbrollen und ihre Palettenfarbe
Rolle	Palette	Verwendung
`--text-heading`	`--marine`	headlines and the page title. Navy gives them authority.
`--bg-dark`	`--marine`	utility bar, footer and CTA bands. White text.
`--bg-page`	`--paper`	page background.
`--bg-section`	`--sand`	alternating section background.
`--bg-card`	`--white`	card and input background.
`--bg-info`	`--rhein-tint`	informational band or chip.
`--text-primary`	`--ink`	default text.
`--text-secondary`	`--slate`	supporting text and captions.
`--text-link`	`--rhein`	links on light grounds.
`--text-on-dark`	`--white`	text on rhein, rhein-deep, kirsch, aue.
`--action-primary`	`--rhein`	primary button fill. White label.
`--action-highlight`	`--honig`	highlighted call-to-action on dark bands. Ink label.
`--border-control`	`--slate`	borders of inputs and outlined buttons (3:1 or more).
`--focus-ring`	`--marine`	3px focus outline with 2px offset.
`--status-success`	`--aue-deep`	success text. Always with an icon or label, never colour alone.
`--status-notice`	`--honig-deep`	notice text. Always with an icon or label, never colour alone.

Schrift

Playfair Display Bold ab 32 px für Überschriften, Atkinson Hyperlegible für alles andere. Fließtext nie unter 18 px, Quellen nie unter 15 px.

--font-display Playfair Display Bold "Playfair Display", Georgia, serif
--font-sans Atkinson Hyperlegible "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif

--text-display 700 56px/60px

Bonn verstehen. Mitreden. Mitgestalten.
--text-h2 700 38px/44px

Bonn verstehen. Mitreden. Mitgestalten.
--text-h3 700 24px/30px

Bonn verstehen. Mitreden. Mitgestalten.
--text-body-lg 400 21px/32px

Bonn verstehen. Mitreden. Mitgestalten.
--text-body 400 18px/28px

Bonn verstehen. Mitreden. Mitgestalten.
--text-label 700 18px/24px

Bonn verstehen. Mitreden. Mitgestalten.
--text-small 400 16px/24px

Bonn verstehen. Mitreden. Mitgestalten.
--text-caption 400 15px/22px

Bonn verstehen. Mitreden. Mitgestalten.

Abstände & Radien

Abstand

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
--space-7 48px
--space-8 72px

Radius

--radius-sm 10px
--radius-md 12px
--radius-lg 16px
--radius-pill 999px

Schatten

Karten sind flach, mit 1 px Linie. Der erhabene Schatten gehört nur auf Hover und Fokus klickbarer Karten und auf die Kopfzeile beim Scrollen, der Overlay-Schatten nur auf Menüs und Dialoge.

--shadow-none none Default for cards, tiles, inputs, buttons and the header. Use the 1px line border instead.
--shadow-raised 0 2px 6px rgba(11, 37, 69, 0.10) Hover and keyboard-focus lift of clickable cards, and the sticky header once the page scrolls. Pair with a rhein border on hover.
--shadow-overlay 0 12px 32px rgba(11, 37, 69, 0.18) Things that float over the page: dropdown menus, dialogs, date pickers, toasts. Dialogs also get a marine scrim at 40% opacity.

Klickbare Karte Fahren Sie mit der Maus darüber oder fokussieren Sie sie mit der Tab-Taste.

Icons

Lucide, 24 px, 2 px Strichstärke, in Marine. Dekorative Icons werden für Screenreader ausgeblendet; es gibt 34 Starter-Icons.

a-large-small
accessibility
arrow-right
bike
building-2
bus
calendar
chart-pie
chevron-right
circle-check
clock
download
external-link
file-text
globe
heart-handshake
info
landmark
languages
leaf
mail
map-pin
menu
phone
scale
school
search
siren
theater
train-front
triangle-alert
users
vote
x