---
version: alpha
name: wger-design-analysis
description: "An open-source fitness and workout tracker on Material 3: a navy seed (#2a4c7d) with a vivid red secondary (#e63946) and a green tertiary (#6ca450), Roboto Condensed display type in semi-bold and heavy weights, underlined inputs and a red floating action button. The same UI runs on iOS and Android."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#2a4c7d"
  primary-button: "#266dd3"
  primary-light: "#94b2db"
  secondary: "#e63946"
  secondary-light: "#f6b4ba"
  tertiary: "#6ca450"
  surplus: "#e74747"
  on-primary: "#ffffff"
  ink: "#1c1b1f"
  paper: "#ffffff"
  canvas: "#f4f6fa"
  web-bg-dark: "#1d2021"
  web-text-cream: "#f9f5d7"
  web-link: "#b16286"
  web-selection: "#d3869b"

typography:
  display-heavy:
    fontFamily: "RobotoCondensed, sans-serif"
    fontSize: 45px
    fontWeight: 800
    lineHeight: 52px
  headline-bold:
    fontFamily: "RobotoCondensed, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 36px
  title-bold:
    fontFamily: "RobotoCondensed, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  body:
    fontFamily: "Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label:
    fontFamily: "Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  fab: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary-button}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 40px
  fab:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.fab}"
    height: 56px
  app-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title-bold}"
    height: 56px
  navigation-bar:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    height: 56px
---

## Overview

wger is a utilitarian fitness app dressed in Material 3. A single deep navy seed color generates the whole scheme, a vivid red secondary is reserved for the floating action button, and a green tertiary supports positive states. Headlines are set in a condensed, heavy sans that gives the app a gym-poster feel on top of otherwise standard Material screens. [Measured]

Three decisions define the look:

1. **Seed-generated Material 3 scheme.** The app builds its colors from three seeds (navy `#2a4c7d`, red `#e63946`, green `#6ca450`) using a "vivid" tone set, with light, dark, and high-contrast variants, and supports dynamic colors from the system. [Measured]
2. **Condensed display type.** Display styles use Roboto Condensed at weight 800 and headline and title styles at weight 600. Body text stays on the default Material 3 type. [Measured]
3. **Red means act.** The floating action button takes the secondary red, so the primary action is the one red element on a navy and white screen. [Measured]

Source for this file: the public app source, read on 2026-10-06. The wger.de site returned a bot-check page, so the web layer is only partly measured. No on-device capture was done. See Known Gaps.

## Core

### Colors

| Role | Value |
|------|-------|
| Primary seed (navy) | `#2a4c7d` |
| Primary button | `#266dd3` |
| Primary light | `#94b2db` |
| Secondary (red) | `#e63946` |
| Secondary light | `#f6b4ba` |
| Tertiary (green) | `#6ca450` |
| Surplus (over target) | `#e74747` |

All other colors come from the generated scheme at runtime, using the vivid tone set for standard contrast and an ultra-contrast set for the high-contrast themes. Chart colors are generated by taking the primary hue and spacing the hues evenly around the color wheel at a fixed chroma, with tone ranges 32 to 75 on light and 58 to 80 on dark, and picking black or white labels by contrast. [Measured]

### Typography

- **Display and headline:** Roboto Condensed as a variable font, weight 800 for display styles and 600 for headline and title styles. [Measured]
- **Body and labels:** the Material 3 default type scale (Roboto). [Inferred]

### Shape and spacing

Material 3 defaults, with underline-style text inputs (not filled boxes), app bar elevation of 4 when scrolled under, a navigation bar height of 56, and a navigation indicator at 24 percent opacity. [Measured] Corner radii and spacing otherwise follow Material 3 defaults. [Inferred]

### Iconography and motion

Material icons plus the Cupertino icon package for some iOS-style glyphs. [Measured] Motion follows Material defaults. [Inferred]

### Themes

Light, dark, and a high-contrast version of each, plus user-chosen seed colors and system dynamic colors. In light mode the app bar is filled with the primary color. [Measured]

## Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

### Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

The iOS back swipe works on page routes by default, but the app bar uses Material styling with an arrow, not the iOS chevron with title. [Inferred]

### Primary navigation

Expected on iOS: bottom tab bar, about five items.

A Material navigation bar at the bottom, 56 high, with an indicator. [Measured]

### Main action

Expected on iOS: nav bar or bottom bar button.

A floating action button, which is an Android pattern and not an iOS one. [Measured]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Material dialogs and bottom sheets rather than Cupertino ones. [Inferred]

### Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Material controls, with underline text fields. [Measured]

### Text sizing

Expected on iOS: Dynamic Type.

Text follows the system text scale. [Inferred]

### Touch and pointer targets

Expected on iOS: 44pt minimum.

Material minimum targets of 48. [Inferred]

### Insets and system bars

Expected on iOS: safe areas, status bar.

Safe areas are handled by the page layout. [Inferred]

### Icons

Expected on iOS: SF Symbols or custom.

Material icons with some Cupertino icons. [Measured]

### Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Sign-in is to a wger server account. No third-party social login was found. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on iOS: system components and Dynamic Type.

Low fidelity: Material 3 on iOS, with a floating action button and Material navigation bar. This is a typical single-design trade-off. [Measured]

## Platform: Android

How the Android app looks and behaves. Items come from public source files.

### Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back and an app bar with an up arrow. [Inferred]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

A Material 3 navigation bar, 56 high. [Measured]

### Main action

Expected on Android: floating action button.

A floating action button in the secondary red. [Measured]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Standard Material 3 dialogs, bottom sheets and snackbars. [Inferred]

### Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls. Text inputs use an underline border and are not filled. [Measured]

### Text sizing

Expected on Android: font scale.

Text follows the system font scale. [Inferred]

### Touch and pointer targets

Expected on Android: 48dp minimum.

Material 3 defaults. [Inferred]

### Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

### Icons

Expected on Android: Material Symbols or custom.

Material icons. [Measured]

### Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

wger server account. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on Android: Material 3 components and roles.

High fidelity. A real Material 3 color scheme, navigation bar, floating action button and dynamic color support. [Measured]

## Platform: Web

The wger web application (Django) and the wger.de site. The site returned a bot-check page, so these values are not measured.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back. [Inferred]

### Primary navigation

Expected on Web: top nav or sidebar.

Top navigation. [Inferred]

### Main action

Expected on Web: page-level button.

Page-level buttons. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

Modals and alerts. [Inferred]

### Controls

Expected on Web: native or custom.

Standard web forms. [Inferred]

### Text sizing

Expected on Web: browser zoom.

Not verified. [Inferred]

### Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

### Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive. [Inferred]

### Icons

Expected on Web: any.

Not verified. [Inferred]

### Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Account-based, with registration. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

Not measured. The bot-check page served instead uses a dark `#1d2021` background, cream text `#f9f5d7`, and Geist, Podkova and Iosevka fonts, which are not wger's own styling. [Measured]

## Cross-platform consistency

The two mobile apps are nearly identical, differing only where the platform adapts. The web application was not measured, so consistency with the apps is unknown. [Measured]

## Do's and Don'ts

### Do

- Generate the whole color scheme from seed colors, with light, dark and high-contrast variants.
- Use Roboto Condensed at heavy weights for display and bold weights for headlines.
- Keep the floating action button as the single red element.
- Support dynamic system colors and user-chosen seeds.
- Use underline-style text inputs.

### Don't

- Don't hand-pick colors that the scheme can generate.
- Don't use the red secondary for anything except the main action and negative states.
- Don't use filled input boxes.

## Known Gaps

- No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
- The wger.de site returned an anti-bot page, and the Django web application was not read, so the Web layer is not measured.
- Most colors are generated at runtime from seeds, so only the seed values are recorded.
- Corner radii, spacing and the exact type scale follow Material 3 defaults and were not individually verified.
- Navigation structure beyond the navigation bar is inferred.
- Account deletion and store policy rules were not verified.
- Contrast: white text on the red floating action button (`#e63946`) measures about 4.2 to 1, below the 4.5 to 1 target for normal text.