Design System
Designsystem Version 2026.3
Vertrauen wird sichtbar, wenn Gestaltung und Nachweis zusammenpassen.
Das System übersetzt die Haltung des Österreichischen E-Commerce-Gütezeichens in verbindliche Regeln für TYPO3, Web, Redaktion, Print und PDF.
01 · Kontrastentscheidung
Markenfarbe schützen, Funktion absichern
Das Siegelgrün bleibt unverändert, wird aber nicht für normalen Text auf Weiß eingesetzt. Aktionsblau übernimmt Links, Buttons und den TYPO3-Login.
Siegelgrün auf Weiß
#96BD79 auf #FFFFFF verfehlt 4,5:1. Zulässig für das geschützte Zeichen, große Flächen und dekorative Bestätigung – nicht für normalen Text.
Aktionsblau auf Weiß
#2F5C88 auf #FFFFFF besteht 4,5:1. Es ist die funktionale Farbe für Links, Beschriftungen und Schaltflächen.
02 · Farbe
Semantische Rollen vor Rohwerten
Jede Farbe hat eine Aufgabe. Status, Auswahl und Fehler werden zusätzlich durch Text, Form oder Symbol vermittelt.
- Marke
#96BD79 - Aktion / Link
#2F5C88 - Ink / Hover
#17324D - Text
#33475B - Weiche Fläche
#F1F4F8 - Trennung
#DFE7EE - Erfolg
#3A833A - Warnung
#A4660E - Fehler
#D4403A
Dieser Verlauf ordnet bereits implementierte Projektfarben nach Helligkeit. Er ist kein neu erfundener Einfarbverlauf.
03 · Typografie
Eine Familie, klar abgestufte Rollen
Nunito Sans trägt Marke, Inhalt und UI. Unterschiedliche Gewichte und Zeilenhöhen schaffen Hierarchie ohne Schriftwechsel.
Vertrauen beginnt mit Klarheit.
Geprüfte Angebote werden nachvollziehbar erklärt. Nutzen, Verfahren und Nachweis stehen in einer lesbaren Reihenfolge.
700 für klare Betonung. 300 bleibt großen, kontrastreichen Passagen vorbehalten.
Selbst gehostet · SIL Open Font License 1.1 · Web, Print und PDF-Einbettung erlaubt · Fallback: Helvetica Neue, Helvetica, Arial, sans-serif
04 · Bildwelt
Zeigen, wie Vertrauen entsteht
Die Bildwelt orientiert sich an der bestehenden Website: helle, glaubwürdige Fotografie aus realen Situationen des Online-Handels. Sie gilt verbindlich für Blog und Startseiten-Teaser.
01 · Startseiten-Teaser
Eine verständliche Alltagssituation
Teaser zeigen den Nutzen oder die Zielgruppe auf den ersten Blick. Menschen agieren natürlich; Laptop, Paket oder Arbeitsumgebung geben genug Kontext, ohne wie Werbestock zu wirken.
- Format
- 16:9
02 · Blog
Das Thema konkret verankern
Blogbilder verbinden den Inhalt mit einer realen Handlung oder einem konkreten Gegenstand. Das Motiv muss auch ohne Überschrift eine plausible thematische Richtung erkennen lassen.
- Format
- 16:9
- Quelle
- Ella Olsson / Unsplash
03 · Regeln und Warnungen
Konkretes Detail statt Symbolkulisse
Rechtliche, technische und sicherheitsbezogene Beiträge zeigen ein reales Detail: Etikett, Verpackung, Gerät oder Einkaufssituation. Generierte 3D- und Papiermetaphern werden für Blog und Teaser nicht eingesetzt.
- Format
- 16:9
Zweck und Platzierung
Jedes Bild beantwortet eine konkrete Frage des Beitrags. Startseiten-Teaser priorisieren schnelle Erkennbarkeit, Blogbilder thematische Genauigkeit.
Komposition und Licht
Ein klarer Fokus, natürliche Augenhöhe oder ruhige Draufsicht und genug Kontext. Helles, weiches Licht und neutrale Farben verbinden die Auswahl mit der bestehenden Website; harte Filter und dekorative Overlays entfallen.
Format und Beschnitt
Blog und Startseiten-Teaser verwenden 16:9. Das Hauptmotiv bleibt auch im mobilen Beschnitt verständlich; Gesichter, Hände, Etiketten und sinntragende Gegenstände liegen nicht knapp am Rand.
Credit und Auslieferung
FAL führt Alternativtext, Titel, Fotograf:in, Unsplash-Quell-URL und Copyright. Die sichtbare Caption lautet „Foto: Name / Unsplash (@profil)“. TYPO3 liefert feste 16:9-Abmessungen und lädt Bilder unterhalb des sichtbaren Bereichs verzögert.
Verbindlich
- eine reale Handlung oder ein konkretes Detail pro Bild
- Menschen vielfältig, kompetent und natürlich
- helle, neutrale Farbigkeit wie auf guetezeichen.at
- Alternativtext und Unsplash-Credit in FAL
Nicht verwenden
- generische Handschläge, Einkaufswagen und gestellte Jubelposen
- generierte 3D-, Papier- oder Icon-Dioramen für Blog und Teaser
- Cyber-Neon, starke Filter und künstliche Farbverläufe
- nachträglich gesetzte Headlines, Logos oder erfundene UI
Referenzrahmen: aktuelle Website, Unsplash-Lizenz, Home Office Images, W3C Images Tutorial und web.dev Responsive Images.
05 · Grundlagen und Komponenten
Funktionale Maße werden sichtbar
Ein 8-px-Raster, 30-px-Gutter, ruhige Flächen und klare Fokuszustände verbinden Inhalt und Bedienung.
- 8 px
- Grundraster
- 44 px
- Aktionshöhe
- 3 px
- Fokuslinie
- 6 / 10 px
- Radien
- 1200 px
- Inhaltsbreite
| Element | Mindestanforderung | Status |
|---|---|---|
| Button | 44 px hoch | Geprüft |
| Fokus | 3 px sichtbar | Geprüft |
06 · Das System im Überblick
Acht Regeln für konsistente Entscheidungen
Markenhaltung
Klar, ruhig, hilfreich und belegbar. Zahlen brauchen Zeitraum und Kontext; Absolutismen und Angstkommunikation bleiben draußen.
Logo
Das SVG bleibt unverändert, erhält mindestens ein Sechstel Zeichenhöhe Freiraum und wird digital nicht kleiner als 88 px gesetzt.
Farbe
Siegelgrün ist geschützte Marke; Dunkelblau ist die zugängliche Funktionsfarbe. Rollen und Kontrast gehen vor dekorativer Variation.
Typografie
Nunito Sans steuert Display, Text und UI in 300, 400 und 700. Die OFL 1.1 erlaubt Selbsthosting, Druck und PDF-Einbettung.
Bildwelt
Blog und Startseiten-Teaser verwenden helle redaktionelle Fotografie in 16:9. Reale Handlungen und konkrete Gegenstände ersetzen generierte Symbolwelten; Credits sind in FAL und als Caption hinterlegt.
Layout und Signatur
8-px-Raster, 30-px-Gutter, helle Flächen und viel Weißraum. Kreis oder Ring erscheint höchstens einmal als starkes Signaturmotiv.
Komponenten
Aktionen sind mindestens 44 px hoch, Links klar erkennbar und Fokus 3 px breit. Content Blocks trennen redaktionellen Inhalt von Designlogik.
Barrierefreiheit und Medien
WCAG 2.2 AA, Tastatur, Zoom, Alternativen und reduzierte Bewegung sind Pflicht. Das Übersichts-PDF ist bis zur PDF/UA-Tagging-Runde nicht digital barrierefrei.
07 · Quellen
Direkte Downloads und lesbare Originale
Alle Artefakte tragen Version 2026.3. Markdown ist die menschliche, JSON die maschinelle Quelle.
- Einseitige ÜbersichtPDF · A4 quer · nicht PDF/UA-getaggt
- DesignrichtlinieMarkdown · design.md
- Design TokensJSON · validiert
Designrichtlinie ansehen
Designsystem 2026.3
Hauptbotschaft: Vertrauen und Sicherheit für Ihr Online-Angebot.
Die Richtlinie verbindet Markenhaltung, Logo, Farbe, Typografie, Grundlagen, Komponenten, Bildwelt, Barrierefreiheit sowie den Änderungsprozess. Die acht Regeln oben sind ihre verbindliche Kurzfassung.
Ohne JavaScript bleibt das Original über den direkten Link lesbar.
Original wird geladen …Design Tokens ansehen
- Version
- 2026.3
- Aktion
#2F5C88- Text
#33475B- Schrift
- Nunito Sans
- Raster
- 8 px
- Aktionshöhe
- 44 px
- Bildanwendungen
- Blog · Startseiten-Teaser
- Bildformat
- 16:9
Ohne JavaScript bleibt das Original über den direkten Link lesbar.
Original wird geladen …