CD Toolbox

Webdesign

Hydra Designsystem

Das Hydra Design System ist das zentrale Herzstück der digitalen Identität von Nürnberg. Es fungiert als "Single Source of Truth" direkt in Figma und stellt sicher, dass alle digitalen Touchpoints der Stadt – allen voran das Portal nuernberg.de – ein einheitliches, barrierefreies und nutzerzentriertes Erscheinungsbild aufweisen.

Für wen kann es relavant sein?

  • Das Hydra Design System bietet Redakteuren eine Art „Menükarte“ um sich einen breiten Überblick über verfügbare Komponenten zu verschaffen. Für Agenturen kann es helfen um bei der Entwicklung neuer digitaler Produkte oder Erweiterungen nahtlos an die bestehende Weboberfläche anzuknüpfen.
Grafik aus Figma Überblick über Seiten "Organismen". © StN

Strukturell basiert Hydra konsequent auf dem Atomic Design Prinzip nach Brad Frost. Von den kleinsten funktionalen Bausteinen (Atomen wie Buttons, Icons oder Typografie) über Moleküle (Suchfelder, Teaser-Elemente) bis hin zu komplexen Organismen (Header, Footer, Seitenraster) ist alles modular aufgebaut. Dieser systematische Ansatz ermöglicht es, neue Seiten auf nuernberg.de nicht nur schneller, sondern auch in höchster Qualität und mit optimaler Wiederverwendbarkeit zu gestalten.

Marken-Icon (Social Media / Favicon) für Digitalangebote

Das Marken-Icon der Stadt Nürnberg ist eine spezielle Erweiterung der Bildmarke (Burg-Silhouette). Wenn in sehr kleinen Bildformaten der Absender als Icon gezeigt werden muss, kommt dieses zum Einsatz: beispielsweise als Social-Media-Icon, Favicon, App-Icon, Avatar, usw. Mit der ikonischen Silhouette der Kaiserburg schafft dieser ein unverwechselbares Identitätsmerkmal für alle digitalen Touchpoints.

  • Im Bereich Social Media darf das Marken-Icon nur für die offiziellen städtischen Kanäle nuernberg_de verwendet werden.
  • Es sind keine anderen Verwendungszwecke für diese Sonderform erlaubt!
  • Downloadseite Logo<https://www.nuernberg.de/internet/cdtoolbox/cd_downloads.html#Anker_down_02>
Definition der Social Media Icons der Stadt Nürnberg., Bild © Stadtgrafik Nürnberg

Ausblick: Sebald Designsystem

Seit Mitte 2025 in der Entwicklung, markiert das neue Designsystem den entscheidenden Schritt hin zu einem modernen, minimalistischen Portalauftritt, der Redakteuren durch erweiterte Freiheitsgrade im Editmode eine deutlich präzisere, inhaltlich fokussierte Gestaltung ihrer Seiten ermöglicht.

  • Sebald Designsystem Figma<https://www.figma.com/design/Ne8UwrkHsyeCJW1eR3BGKX/Stadt-Portal?node-id=2653-9877&t=BioOTJn4sCT7mjKf-1>
Ein Tablet wird gehalten und zeigt eine Beispielseite aus dem Sebald UI., Bild © StN