Component Library — the building blocks for all Stronger You products.
v2.0 · 20 Categories
01
Hero Components
Full-bleed image, headline, single CTA. 256–384px height. Soft gradient overlay.
Hero Fullscreen
Willkommen
Dein Raum für Transformation
Jeder Tag ein Schritt näher zu dir selbst.
Hero Small
21 Tage Zuckerfrei
02
Button Library
Radius 24px. Hover 300ms ease. Glow on primary. Min height 44px.
Variants
Sizes
States
03
Card Library
Radius 24px. No borders. Shadow elevation. Cards float — they do not cling.
Program Card
12 Wochen Transformation
Nachhaltige Veränderung — Schritt für Schritt.
Expert Card
Nadine
Founder & Coach
Recipe Card
Bowl mit Quinoa
Progress Card
Woche 4 von 12
4/12
Community Card
Maria K.
Heute zum ersten Mal die 10 Minuten geschafft — ich bin so stolz! 🌸
Empty State Card
Noch keine Programme
Sobald du ein Programm startest, erscheint es hier.
Loading Card
04
Progress Components
Circular and linear progress, statistics, streak counters.
Circular Progress
Heute
Woche
Fertig
Linear Progress
Statistics
12
Tage
4.2
Mood
87%
Ziel
Streak Counter
05
Navigation
Minimal. Translucent. Roségold active state. 44px touch targets.
Tab Navigation
Back Button & Breadcrumb
06
List Components
Editorial spacing. Clear hierarchy. No heavy dividers.
Editorial List
07
Input Components
Rounded 24px. Subtle focus ring. Clean, generous padding.
Text Field
Wie sollen wir dich nennen?
Ungültige E-Mail-Adresse
Search
Toggle & Checkbox
Mood Picker
08
Community
Authentic, warm, human. Author identity clear. Engagement subtle.
Post Card with Interactions
Sarah M.
Tag 14 geschafft! Ich fühle mich klarer und leichter als noch nie. Danke an alle, die mitmachen!
09
Experts
Personal, trustworthy, professional. Avatar + name + role.
Expert Card
Dr. Anna Berg
Ernährungsmedizin
Thomas Klein
Bewegung & Mindset
10
Journal
Reflection, mood, gratitude. Quiet, private, personal.
Daily Reflection
Heute
Was hat dir heute Energie gegeben?
11
Recipes
Appetizing imagery. Clear metadata. No clutter.
Recipe Grid
Quinoa Bowl
Overnight Oats
Linsensuppe
12
Challenges
Countdown, tasks, rewards, badges. Motivating without pressure.
Challenge Card
Heute: Kein Zucker
Eine Tag ohne Süßigkeiten — du schaffst das.
Achievement Badge
13
Modals
Centered, blurred backdrop. Rounded 24px. Clear hierarchy.
Modal Types
14
Empty States
No data is an opportunity to guide. Calm, helpful, never frustrating.
Keine Programme
Starte dein erstes Programm.
Keine Community
Teile deinen ersten Beitrag.
Keine Favoriten
Speichere deine Lieblingsrezepte.
15
Charts
Data visualization with restraint. Roségold accents. No gridlines.
Weight Trend
16
Profile
Avatar, stats, membership. Personal but private.
Maria Schmidt
Mitglied seit 2024
42
Tage
7
Programme
3
Challenges
18
Loading
Skeletons, spinners. Smooth, never jarring.
Skeleton Card
Skeleton List
19
Microinteractions
Like, save, success. Subtle, meaningful, delightful.
20
Design Tokens
Centralized. The single source of truth for all visual values.
Color Palette
Soft Black
#111111
Anthrazit
#1F1F1F
White
#FFFFFF
Roségold
#D8A7A0
Champagner
#E7D4C8
Warm Beige
#F5F1EC
Taupe
#B7AAA1
Spacing Scale (8px base)
Radius
8px
12px
16px
24px
Shadows
sm
md
lg
glow
Component Library · v2.0
No component outside this library may be created.