Condis Design System

1. Brand Colors

Primary (Condis Red)

The primary brand colour is a warm red-orange (#E63946), chosen for colorblind accessibility — distinguishable from greens and blues even with deuteranopia/protanopia.

Neutrals

Semantic Colors

Dark Mode

2. Typography

Font Family

Mobile: System default (Roboto on Android, SF Pro on iOS) via Material 3
Web: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Type Scale (Material 3)

Web CSS Tokens

--text-display:   3.5625rem  /* 57px */
--text-headline:  1.5rem     /* 24px — section titles */
--text-title-lg:  1.375rem   /* 22px — card titles */
--text-title:     1rem       /* 16px — subtitles */
--text-body:      1rem       /* 16px — body text */
--text-body-sm:   0.875rem   /* 14px — secondary text */
--text-label:     0.75rem    /* 12px — labels, captions */
--text-label-sm:  0.6875rem  /* 11px — smallest labels */

3. Spacing

Based on a 4px base unit. Canonical values from design_tokens.dart.

CSS Tokens

--space-xs:  4px;   /* 0.25rem — tight gaps, icon padding */
--space-sm:  8px;   /* 0.5rem  — compact spacing, inline gaps */
--space-md:  12px;  /* 0.75rem — default content padding */
--space-lg:  16px;  /* 1rem    — section padding, card padding */
--space-xl:  24px;  /* 1.5rem  — large gaps, section margins */
--space-xxl: 32px;  /* 2rem    — page-level margins */

4. Border Radius

CSS Tokens

--radius-none:   0;
--radius-sm:     4px;   /* chips, small elements */
--radius-md:     8px;   /* buttons, inputs */
--radius-lg:     12px;  /* cards, dialogs */
--radius-xl:     16px;  /* large cards, bottom sheets */
--radius-circle: 999px; /* avatars, circular buttons */

5. Elevation & Shadows

Condis uses a flat design with minimal shadows. Cards are delineated by borders (1px solid) rather than drop shadows.

6. Components

Buttons

Cards

Inputs

7. Icon Sizes

8. Animation & Transitions

Mobile Curves (Flutter)

9. Themes

Condis Default (Active)

Whitelabel Support

The mobile app supports whitelabel theming via BrandConfig. Brands can override primary/secondary/accent colours, logos, splash screens, and welcome messages. Configuration is loaded from assets/config/brand.json.

Example: Whitelabel Themes

brand.json Format

{
  "appName": "FitCoach Pro",
  "appId": "com.fitcoachpro.app",
  "colors": {
    "primaryLight": "#2563EB",
    "primaryDark": "#1D4ED8",
    "secondaryLight": "#64748B",
    "secondaryDark": "#475569",
    "accentLight": "#3B82F6",
    "accentDark": "#1E40AF"
  },
  "assets": {
    "logo": "assets/brands/fitcoachpro/logo.png"
  },
  "messages": {
    "welcomeMessage": "Welcome to FitCoach Pro",
    "tagline": "Train smarter"
  }
}

10. Platform Comparison

11. File Structure

Mobile (Canonical Source)

lib/core/
├── constants/
│   ├── design_tokens.dart    ← Canonical spacing, radius, elevation, animation
│   └── app_colors.dart       ← Canonical colour palette
├── theme/
│   ├── app_theme.dart        ← ThemeData providers (light + dark)
│   └── typography.dart       ← M3 type scale
└── config/
    └── brand_config.dart     ← Whitelabel configuration

Web

src/
├── design-tokens.css         ← CSS custom properties (mirrors design_tokens.dart)
├── condis-home.css           ← Home/landing page styles
└── style.css                 ← Global base styles + status page

style-guide/
├── index.html                ← This page
└── style-guide.css           ← Style guide page styles

12. Rules for Contributors

1. Never hardcode colours. Use AppColors.* (mobile) or var(--color-*) (web).
2. Never hardcode spacing. Use AppSpacing.* (mobile) or var(--space-*) (web).
3. Cards are flat. Use elevation: 0 + 1px border, not box shadows.
4. Radius is 12px for cards, 8px for buttons/inputs, 4px for chips.
5. Primary colour is red (#E63946), not purple or blue.
6. System font only. No custom fonts loaded.
7. Mobile is the source of truth. Web design should follow mobile patterns.
8. Dark mode: Always test both. Use semantic colour tokens, not raw hex values.
9. Accessibility: Primary red is chosen for colorblind safety. Maintain WCAG AA contrast ratios (4.5:1 for text, 3:1 for large text/UI).
10. Use design tokens exclusively. design_tokens.dart is the single source of truth.