Brand & CI Guide
Verbindliche Gestaltungsgrundlage für alle Up-Food Medien
Stand: August 2026 · up-food.de / up-food.com
Marke & Haltung
Up-Food ist ein Nährstoff-Coach statt Nahrungsergänzung: über 30 Nährstoffe pro Mahlzeit, KI-Wochenplan, Rezepte aus Resten.
Tonalität
Klar, fundiert, ruhig. Wissenschaftlich belegt, nie belehrend oder alarmierend. Duzen im Deutschen, „you“ im Englischen.
Design-Prinzip
Minimalistisch, viel Weißraum, ein Akzentgrün. Kein Gamification-Look, keine harten Kontraste.
Logo
Wortmarke UP → FOOD mit grünem Aufwärtspfeil. Es dürfen ausschließlich die freigegebenen Dateien verwendet werden.
Links: Wortmarke (Web, Print, Header). Rechts: App-Icon / Social-Avatar, 512 × 512 px.
Markenfarben
Brand Green (Primary)
#608023
HSL 81 57% 32%
Buttons, Links, Aktiv-Zustände, theme-color
Apple Green (Accent)
#98C93C
Marketing-Akzente, Logo-Pfeil, Illustrationen
Deep Green (Text)
#1E3923
Überschriften auf hellen Flächen, Kontrast-Text
Accent Wash
#ECF5DB
Hintergrund aktiver Elemente, sanfte Flächen
Neutrale Farben (UI)
Background
#FFFFFF
HSL 0 0% 100%
Basis-Hintergrund (App ist Light Mode)
Foreground
#2E3338
HSL 210 10% 20%
Standard-Textfarbe
Muted
#F1F3F5
HSL 210 16% 96%
Karten-Hintergrund, Trennflächen
Muted Foreground
#69737D
HSL 210 10% 45%
Sekundärtext, Labels
Border
#DEE2E6
HSL 210 16% 90%
Rahmen, Trennlinien, Inputs
Destructive
#EF4444
HSL 0 84% 60%
Fehler, Löschen — sparsam einsetzen
Grün-Skala
Vollständige Abstufung für Diagramme, Zustände und Flächen.
50
#F6FAEF
100
#ECF5DB
200
#D8E9B9
300
#BED98C
400
#9EC954
500
#86B234
600
#608023
700
#46651B
800
#2C4B16
900
#1C3414
950
#0D1E0B
Typografie
Up-Food nutzt bewusst die System-Schriftfamilie — schnell, vertraut, auf jedem Gerät identisch lesbar.
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
UI-Bausteine
Werte, die im Produkt bereits gesetzt sind und in Designs übernommen werden müssen.
Do's & Don'ts
Bitte so
- ✓Logo immer auf weißem oder sehr hellem Hintergrund platzieren.
- ✓Freiraum um das Logo: mindestens die Höhe des UP-Schriftzugs auf allen Seiten.
- ✓Primärgrün #608023 für alle klickbaren Hauptaktionen.
- ✓Große Radien vermeiden — Standard-Eckenradius ist 8 px (0,5 rem).
- ✓Food-Fotografie: natürliches Licht, echte Zutaten, viel Weißraum.
Bitte nicht
- ✕Logo nicht verzerren, drehen, mit Schatten oder Outline versehen.
- ✕Keine Neon-, Pastell- oder Beeren-Töne als Akzent einführen.
- ✕Kein Dark-Mode-Design gestalten — die App läuft bewusst im Light Mode.
- ✕Grün nicht als vollflächigen Hintergrund für lange Texte nutzen.
- ✕Keine Stock-Fotos mit künstlich gefärbtem oder inszeniertem Essen.
Bei Abweichungen oder neuen Formaten bitte vor Produktion abstimmen. Farbwerte sind verbindlich und dürfen nicht nachjustiert werden.
Wir respektieren Ihre Privatsphäre
Wir verwenden Cookies, um Ihnen die beste Erfahrung auf unserer Website zu bieten. Einige sind notwendig für die Funktionalität, andere helfen uns, die Website zu verbessern.
Mehr Informationen in unserer Datenschutzerklärung und Cookie-Richtlinie