UI reference analysis

These references inform FitGenie’s interaction hierarchy and visual language. They are inspiration, not templates to copy literally.

Reference 1 — treatment plan

Screenshot 2026-08-15 at 11.10.46 PM.png

Strong ideas

• A compact seven-day calendar makes date context obvious without opening another screen.
• Content is grouped by meaningful time periods rather than shown as one undifferentiated list.
• Each row has one clear label, one supporting line, a colored icon tile, and a predictable disclosure action.
• The primary action is visually stable and easy to reach.
• White space does most of the hierarchy work; borders are minimal.

FitGenie adoption

• Today uses a seven-day date strip with one selected day and a subtle activity marker.
• Food logs are grouped into Morning, Mid-day, and Evening.
• Meal rows use concise metadata and semantic food-category icon tiles.
• A persistent Log food action remains reachable with one hand.

Reference 2 — growth/progress screen

Screenshot 2026-08-15 at 11.11.08 PM.png

Strong ideas

• The circular progress object gives one metric a memorable visual anchor.
• A soft area gradient and sparse trajectory communicate direction without dashboard clutter.
• Milestones are placed directly on the trend rather than buried in explanatory text.
• The layout feels calm because it uses large open regions and only a few high-emphasis controls.

FitGenie adoption

• Daily energy uses a true conic progress ring rather than a decorative border.
• The detailed dashboard uses a trajectory with points, area fill, and a concise checkpoint.
• Progress language remains observational: logged days and evidence, not moral scores.
• The photography checkpoint is not copied because body-image tracking is outside the current calorie-tracker scope.

Reference 3 — financial dashboards

Screenshot 2026-08-15 at 11.11.30 PM.png

Strong ideas

• Near-black cards make primary metrics highly legible.
• Mint, yellow, and soft pink distinguish categories inside one coherent interface.
• Donut charts pair a central total with an immediately readable category split.
• Repeated rounded modules make dense information scannable.
• Secondary labels are quiet while values remain strong.

FitGenie adoption

• The detailed dashboard includes a dark nutrition-mix card with a central energy average.
• Protein, carbohydrate, and fat use restrained semantic colors.
• Food icons use category colors for grains, pulses, vegetables, and mixed meals.
• Dashboard cards share consistent radii, spacing, value hierarchy, and supporting labels.
• Financial terminology and transaction-density are not copied; nutrition confidence and missing-data context remain visible.

Consolidated visual direction

FitGenie currently uses one brand system only:

• Deep forest-teal primary action.
• Calm mint support color.
• Near-black metric surfaces.
• Warm white/light neutral surfaces.
• Near-black dark mode.

Additional yellow, lavender, mint, and clay colors are semantic—not selectable themes. They identify food or nutrient categories and are always paired with icons/text so color is never the only signal.

The self-hosted Manrope variable font provides the rounded, polished typography seen across the references while remaining readable at small sizes.