Farbpalette
Die Farbstrategie unterscheidet strikt zwischen Marke (Rot/Grün/Gelb) und Interaktion (Blau). Sekundärfarben dürfen max. 25% der Fläche einnehmen.
Primary Colors (Brand & Surface)
GEFRO Rot
--color-gefro-rotNUR FÜR LOGO - Niemals für UI-Elemente verwenden!
Digital Blue
--color-digital-blueHauptfarbe für Links, Buttons, CTAs & Interaktionen
Anthrazit
--color-anthrazitHaupttextfarbe, Footer, dunkle Flächen
Hellbeige
--color-hellbeigeStandard Seitenhintergrund (statt Reinweiß für Wärme)
Reinweiß
--color-reinweissCards, Content-Container auf Hellbeige
Secondary Colors (Atmosphere & Support)
Dunkelgrün
--color-dunkelgruenIcons, Bio-Auszeichnungen, starke Akzente
Mittelgrün
--color-mittelgruenDekorative Elemente, Illustrationen
Orange
--color-orangeWärme-Akzente, Störer, appetitanregende Elemente
Sonnengelb
--color-sonnengelbHighlights
Feedback Colors (Semantic)
Success
--color-successErfolgs-Meldungen, Bestätigungen
Warning
--color-warningWarnungen, Hinweise
Error
--color-errorFehlermeldungen (Da Marken-Rot verboten ist)
Typografie
Typografie ist funktional, nicht dekorativ. Die Zuteilung ist strikt rollenbasiert.
Font Families
Rolle: Headlines (Display)
Fallback: Rockwell, serif
Kraftvoll und einprägsam für große Überschriften und Hero-Texte.
Rolle: UI / Short Text
Fallback: Helvetica, Arial, sans-serif
Klar und lesbar für Buttons, Labels, Navigation und kurze Beschreibungen.
Rolle: Long Copy (Blog/Artikel)
Fallback: Georgia, serif
Elegante Serifenschrift für längere Fließtexte (>200 Zeichen).
Type Scale (Desktop)
Basisgröße: 16px (1rem)
| Rolle | Beispiel |
|---|---|
Display XL.text-display-xl | 100 Jahre Tradition |
Headline L.text-headline-l | Unsere Produkte |
Headline M.text-headline-m | Rezepte entdecken |
Subline.text-subline | Qualität seit 1924 |
Body Text.text-body | Seit 1924 steht GEFRO für hochwertige Würzmittel und Suppen aus dem Allgäu. Was als kleine Familienmanufaktur begann, ist heute ein Unternehmen mit Tradition und Leidenschaft für guten Geschmack. Unsere Produkte werden mit größter Sorgfalt hergestellt – ohne künstliche Geschmacksverstärker, ohne Palmfett und ohne zugesetzte Farbstoffe. Wir glauben daran, dass gutes Essen nicht kompliziert sein muss. Mit GEFRO gelingt jedes Gericht im Handumdrehen, ob klassische Hausmannskost oder moderne Kreationen. Entdecken Sie die Vielfalt unserer Würzmittel, Suppen und Soßen – für den vollen Geschmack in Ihrer Küche, Tag für Tag. |
Small / UI.text-small | Alle Preise inkl. MwSt. |
Spacing
Das Layout soll "einfach strukturiert" sein mit "spürbaren Negativräumen". Wir nutzen ein 8pt Raster-System.
8pt Grid System
--spacing-xs--spacing-s--spacing-m--spacing-l--spacing-xl--spacing-xxlVerwendung:
- xs / s: Interne Abstände, Icons
- m: Standard Komponentenabstand
- l: Abstand innerhalb von Sektionen
- xl: Abstand zwischen Sektionen
- xxl: Hero-Bereiche
Border Radius
Small
4pxButtons, Inputs
Medium
8pxCards, Container
Large
12pxModals, Große Karten
Komponenten
Basis-Komponenten für das GEFRO Design System.
Links
Dies ist ein Inline-Link im Fließtext.
Default: #0069a1, keine Unterstreichung
Hover: mit text-decoration: underline
Cards
Produktname
Kurze Beschreibung des Produkts...
Background: #ffffff auf #f8f1e8
Shadow: 0 4px 12px rgba(45,59,65,0.08)
Border-Radius: 8px
Accordions
Aufklappbare Sektionen für FAQs und strukturierte Inhalte.
Unsere Produkte werden seit 1924 mit größter Sorgfalt hergestellt – ohne künstliche Geschmacksverstärker, ohne Palmfett und ohne zugesetzte Farbstoffe. Qualität aus dem Allgäu, der man vertrauen kann.
Form Elements
Eingabefelder und Formularelemente im GEFRO Design.
Text Input
Bitte geben Sie eine gültige E-Mail ein.
Select / Dropdown
Checkbox
Radio Buttons
Textarea
Badges & Tags
Status-Badges und Kategorie-Tags für Produkte und Inhalte.
Status Badges
Kategorie Tags
Alerts & Notifications
Hinweismeldungen für verschiedene Zustände.
Erfolgreich!
Ihre Bestellung wurde erfolgreich aufgegeben.
Hinweis
Nur noch 3 Artikel auf Lager.
Fehler
Bitte überprüfen Sie Ihre Eingaben.
Information
Kostenloser Versand ab 50€ Bestellwert.
Tabs
Tab-Navigation für strukturierte Inhalte.
Unsere Klare Suppe ist der perfekte Allrounder für Ihre Küche. Ob als Basis für Eintöpfe, zum Würzen von Gemüsepfannen oder einfach als wärmende Tasse zwischendurch – mit dieser Suppe gelingt alles im Handumdrehen.
Pagination
Seitennummerierung für Listen und Übersichten.
Tooltips
Hilfe-Tooltips für zusätzliche Informationen.
Hinweis: Tooltips erscheinen bei Hover über das Element.
Accessibility
Basierend auf dem Prinzip "Barrierefreiheit ist Grundprinzip".
Kontrast-Warnungen
Weißer Text auf Gelb
✓ Anthrazit Text auf Gelb
Weißer Text kritisch!
✓ Besser: Dunkelgrün für Text
Focus States
Alle interaktiven Elemente müssen sichtbare Focus-States haben.
Focus Ring: 2px solid #0069a1, offset 2px
Wichtige Regeln
- • Informationen nie allein über Farbe vermitteln (Rot/Grün-Schwäche)
- • Immer Icons oder Labels zusätzlich zu Farbkodierung nutzen
- • WCAG AA Kontrast-Verhältnis einhalten (4.5:1 für Text)
- • Focus-States für Tastaturnavigation zwingend erforderlich
CSS Variablen
Alle Design-Tokens als CSS Custom Properties für Copy-Paste.
:root {
/* Primary Colors */
--color-digital-blue: #0069a1;
--color-gefro-rot: #c80b0f; /* NUR LOGO! */
--color-anthrazit: #2d3b41;
--color-hellbeige: #f8f1e8;
--color-reinweiss: #ffffff;
/* Secondary Colors */
--color-dunkelgruen: #086c2e;
--color-mittelgruen: #6fbb79;
--color-orange: #e56f00;
--color-sonnengelb: #ffdd00;
/* Feedback */
--color-success: #086c2e;
--color-warning: #e7a829;
--color-error: #81051d;
/* Typography */
--font-display: 'Alfa Slab One', cursive;
--font-ui: 'Open Sans', sans-serif;
--font-body: 'Lora', serif;
/* Spacing */
--spacing-xs: 4px;
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 32px;
--spacing-xl: 64px;
--spacing-xxl: 128px;
/* Border Radius */
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 12px;
}