Design lab
Color debug — alle Fälle × Flächen
Drei echte Farben: $white, $dark-green, $light-green. Pro Fläche eine Lesefarbe + eine Signalfarbe; Chrome = Signalfarbe in Alpha-Stufen (soft 12 % / line 25 % / mark 45 % / solid 100 %). Keine Tint-Hexes. light-green: weißer Text + dark-green Akzente (entweder/oder). Markup wie kitchen-sink.
Surface · white
Text $dark-green · Signal $light-green · soft/line/mark/solid aus Signal-Alpha
0 · Alpha-Leiter — soft / line / mark / solid (Stufen per Surface; dark-green = Hybrid)
1 · Accordion — Divider, Hover, Chevron (Vorbild)
Strategie Projekte / Objekte
Rechnungswesen, Finanzen und Steuern
Marketing und Kommunikation
2 · Banner — Preline, Marker, CTA (Vorbild)
3 · Typo — Preline, H2 mit Marker, H3
Mission Statement
Wir setzen uns täglich dafür ein, dass das Unterwegssein in Berlin
für alle reibungslos funktioniert.
Noch nichts gefunden? Dann bewerben Sie sich initiativ!
4 · Fließtext — Inline-Link (bold + Underline) vs. Marker (nicht bold)
Ab Januar 2023 übernimmt Katharina Marienhagen die Geschäftsführung von GB infraSignal. Sie ist Ingenieurin für Verkehrssystemtechnik — mehr dazu hier im Artikel und bei der Senatsverwaltung für Mobilität.
em = Textmarker. strong = nur fett (kein Marker). Bold-Links bleiben Links.
5 · Blockquote — Bar mark (heller), Author solid (dunkler / lesbar)
Schon während des Wettbewerbs fanden Bürger*innenveranstaltungen statt. Zum Auftakt wurde zu einer digitalen Veranstaltung eingeladen.
Unser Projektteam ist zuständig für die Sanierung von vier der insgesamt 30 verbliebenen denkmalgeschützten Yorckbrücken. Als Fußgänger- und Radwegeverbindungen erhalten die Brücken 10, 11, 14 & 17 eine wichtige Funktion im Nord-Süd-Grünzug.
Irina de Cuveland, Projektmanagerin Yorckbrücken
6 · Buttons und Text-Link — Hover jeweils einmal, nie gestapelt
7 · Cards mit Hover — Fill ruht auf Text-Hue, Hover eine Stufe heller
8 · Colored Box — nur Brand-Surfaces, nie Neon als Fill
Box light-green auf Fläche white — mit Inline-Link.
Box dark-green auf Fläche white — mit Inline-Link.
9 · Stufen — soft Fill · line Divider · mark Marker · solid Preline/Bar/Author
soft — ruhige Fläche (Card-Ruhe, section--silver, Tag)
line — dieser Divider und Disclosure-Hover. Marker: GB infraSignal. Solid: Preline und Bar.
Mission Statement · solid
Bar = mark (heller). Author = solid (eine Stufe dunkler, lesbar).
Irina de Cuveland · solid
Surface · dark-green
Text $white · Soft/Line = Weiß-Wash · Mark/Solid = $light-green (hybrid — gleiche %-Alphas wären im Dunkeln unsichtbar)
0 · Alpha-Leiter — soft / line / mark / solid (Stufen per Surface; dark-green = Hybrid)
1 · Accordion — Divider, Hover, Chevron (Vorbild)
Strategie Projekte / Objekte
Rechnungswesen, Finanzen und Steuern
Marketing und Kommunikation
2 · Banner — Preline, Marker, CTA (Vorbild)
3 · Typo — Preline, H2 mit Marker, H3
Mission Statement
Wir setzen uns täglich dafür ein, dass das Unterwegssein in Berlin
für alle reibungslos funktioniert.
Noch nichts gefunden? Dann bewerben Sie sich initiativ!
4 · Fließtext — Inline-Link (bold + Underline) vs. Marker (nicht bold)
Ab Januar 2023 übernimmt Katharina Marienhagen die Geschäftsführung von GB infraSignal. Sie ist Ingenieurin für Verkehrssystemtechnik — mehr dazu hier im Artikel und bei der Senatsverwaltung für Mobilität.
em = Textmarker. strong = nur fett (kein Marker). Bold-Links bleiben Links.
5 · Blockquote — Bar mark (heller), Author solid (dunkler / lesbar)
Schon während des Wettbewerbs fanden Bürger*innenveranstaltungen statt. Zum Auftakt wurde zu einer digitalen Veranstaltung eingeladen.
Unser Projektteam ist zuständig für die Sanierung von vier der insgesamt 30 verbliebenen denkmalgeschützten Yorckbrücken. Als Fußgänger- und Radwegeverbindungen erhalten die Brücken 10, 11, 14 & 17 eine wichtige Funktion im Nord-Süd-Grünzug.
Irina de Cuveland, Projektmanagerin Yorckbrücken
6 · Buttons und Text-Link — Hover jeweils einmal, nie gestapelt
7 · Cards mit Hover — Fill ruht auf Text-Hue, Hover eine Stufe heller
8 · Colored Box — nur Brand-Surfaces, nie Neon als Fill
Box light-green auf Fläche dark-green — mit Inline-Link.
Box dark-green auf Fläche dark-green — mit Inline-Link.
9 · Stufen — soft Fill · line Divider · mark Marker · solid Preline/Bar/Author
soft — ruhige Fläche (Card-Ruhe, section--silver, Tag)
line — dieser Divider und Disclosure-Hover. Marker: GB infraSignal. Solid: Preline und Bar.
Mission Statement · solid
Bar = mark (heller). Author = solid (eine Stufe dunkler, lesbar).
Irina de Cuveland · solid
Surface · light-green
Text $white · Signal $dark-green · entweder/oder, nie weißes Chrome
0 · Alpha-Leiter — soft / line / mark / solid (Stufen per Surface; dark-green = Hybrid)
1 · Accordion — Divider, Hover, Chevron (Vorbild)
Strategie Projekte / Objekte
Rechnungswesen, Finanzen und Steuern
Marketing und Kommunikation
2 · Banner — Preline, Marker, CTA (Vorbild)
3 · Typo — Preline, H2 mit Marker, H3
Mission Statement
Wir setzen uns täglich dafür ein, dass das Unterwegssein in Berlin
für alle reibungslos funktioniert.
Noch nichts gefunden? Dann bewerben Sie sich initiativ!
4 · Fließtext — Inline-Link (bold + Underline) vs. Marker (nicht bold)
Ab Januar 2023 übernimmt Katharina Marienhagen die Geschäftsführung von GB infraSignal. Sie ist Ingenieurin für Verkehrssystemtechnik — mehr dazu hier im Artikel und bei der Senatsverwaltung für Mobilität.
em = Textmarker. strong = nur fett (kein Marker). Bold-Links bleiben Links.
5 · Blockquote — Bar mark (heller), Author solid (dunkler / lesbar)
Schon während des Wettbewerbs fanden Bürger*innenveranstaltungen statt. Zum Auftakt wurde zu einer digitalen Veranstaltung eingeladen.
Unser Projektteam ist zuständig für die Sanierung von vier der insgesamt 30 verbliebenen denkmalgeschützten Yorckbrücken. Als Fußgänger- und Radwegeverbindungen erhalten die Brücken 10, 11, 14 & 17 eine wichtige Funktion im Nord-Süd-Grünzug.
Irina de Cuveland, Projektmanagerin Yorckbrücken
6 · Buttons und Text-Link — Hover jeweils einmal, nie gestapelt
7 · Cards mit Hover — Fill ruht auf Text-Hue, Hover eine Stufe heller
8 · Colored Box — nur Brand-Surfaces, nie Neon als Fill
Box light-green auf Fläche light-green — mit Inline-Link.
Box dark-green auf Fläche light-green — mit Inline-Link.
9 · Stufen — soft Fill · line Divider · mark Marker · solid Preline/Bar/Author
soft — ruhige Fläche (Card-Ruhe, section--silver, Tag)
line — dieser Divider und Disclosure-Hover. Marker: GB infraSignal. Solid: Preline und Bar.
Mission Statement · solid
Bar = mark (heller). Author = solid (eine Stufe dunkler, lesbar).
Irina de Cuveland · solid