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.