Lokal und konkret
Orte, Menschen und nächste Schritte benennen. Keine austauschbaren Versprechen oder erfundenen Kennzahlen.
01 · Haltung
Nicht schick tun. Klar sein.
Tugässer wirkt lokal, gemeinschaftlich und direkt. Die Gestaltung trägt diese Haltung – ohne Folklore und ohne Konzernlack.
Raum für Charakter
Große Schrift, offene Kompositionen und ein wechselnder Rhythmus. Linien ordnen, Flächen setzen Schwerpunkte.
Gemeinsam statt exklusiv
Sprache bleibt locker, fair und einladend. Handlungen erklären, was Menschen beitragen können.
Bewegung mit Grund
Motion zeigt Zustand und Hierarchie. Parallax bleibt dezent und fällt bei reduzierter Bewegung vollständig weg.
02 · Grundlage
Farbe kommt aus der Marke.
Logo-Blau trägt große Flächen. Das matte Ziegelrot markiert Handlung und Status. Weiß und kühle Neutraltöne halten alles lesbar.
Logo-Blau#013565 · primary
Ziegelrot#8F3B32 · accent
Weiß#FFFFFF · background
Oberfläche#F5F7FA · surface
Gedämpft#8CA3C2 · muted
Linie#DBE2EC · border
03 · Stimme
Public Sans, mit Nachdruck.
Eine Familie reicht. Gewicht, Größe und Rhythmus erzeugen die Hierarchie – nicht wechselnde Schriften.
Tugässer.
Was fehlt, bringst du mit.
Ein Bier aus Heilbronn, für Heilbronn. Nicht einer baut es auf – viele bringen zusammen, was sie können.
04 · Mitmachen
04 · Rhythmus
Acht Pixel geben den Takt.
Abstände wachsen in klaren Stufen. Freiraum trennt Kapitel; kleine Abstände halten zusammen, was zusammengehört.
space-18 pxspace-216 pxspace-324 pxspace-432 pxspace-648 pxspace-864 pxspace-1296 px05 · Komponenten
Eine Handlung, ein klares Signal.
Pro Ansicht führt eine primäre Aktion. Varianten zeigen Hierarchie, nicht verschiedene Geschmäcker.
Auf hellen Flächen
Auf Markenflächen
Einbindung
<a class="tg-button tg-button--accent" href="…">
Mach mit <span class="tg-button__arrow" aria-hidden="true">→</span>
</a>06 · Redaktion
Kapitel brauchen Haltung.
Labels ordnen, Überschriften setzen den Ton, Zitate verdichten die Aussage. Dekoration bleibt nachrangig.
01Traumphase
Heilbronn hat Durst.
Zwischenruf
Kein Bier ohne Leute.
07 · Eingabe
Fragen, die man beantworten kann.
Labels bleiben sichtbar, Hinweise sind konkret, Fehler erklären Ursache und Lösung. Validierung erfolgt nach dem Verlassen eines Feldes.
08 · Rückmeldung
Jede Aktion bekommt eine Antwort.
Status wird mit Text, Form und Farbe vermittelt. So bleibt die Bedeutung auch ohne Farbwahrnehmung eindeutig.
Erfolg · BeispielEine erfolgreiche Aktion bekommt eine eindeutige Rückmeldung.
Fehler · BeispielBitte prüfe die markierte E-Mail-Adresse.
09 · Marke
Das Siegel bleibt rund.
Das Logo wird immer unverzerrt, auf ruhiger Fläche und mit seiner optischen Zentrierung dargestellt.
Logo-Regeln
- Optional einen runden Schutzraum mit
.tg-seal-frameverwenden. - Das Bildverhältnis 896:876 mit
height: autoundobject-fit: containerhalten. - Nur auf Weiß oder einer klar abgegrenzten weißen Fläche einsetzen.
- Nicht einfärben, beschneiden, drehen oder mit Effekten überlagern.