Train5D Current Design Patterns Documentation

Generated from SASS files on November 18, 2025
This document catalogs the existing design system implemented in Train5D’s stylesheets.

Color System
Typography
Spacing System
Layout & Grid
Components
Responsive Breakpoints
Shadows & Effects
Animation & Transitions
Architecture Overview

Color System

Brand Colors

Primary Brand:    #34aadc  // Bright cyan blue
Secondary:        #464659  // Dark slate gray
Accent:           #ffffff  // White

Primary Color Variations (Pricing)

Primary:          #34aadc
Primary Hover:    #2a94c4
Orange Accent:    #ff9f43

Grayscale Palette

Gray 50:          #f8fafb  // Very light gray (backgrounds)
Gray 100:         #f1f5f7  // Light gray (surfaces)
Gray 200:         #e5e7eb  // Border gray
Gray 300:         #d1d5db  // Disabled gray
Gray 500:         #6b7280  // Text secondary
Gray 600:         #4b5563  // Text primary alt
Gray 700:         #464659  // Text primary
Gray 900:         #1a1a1a  // Headings/dark text

Feedback Colors

Success:          #10b981  // Green
Warning:          #f59e0b  // Orange
Error:            #ef4444  // Red

CSS Custom Properties

Currently defined for runtime theming:

--primary:        #34aadc
--primary-light:  #7dd3fc
--primary-dark:   #0284c7
--primary-rgb:    40, 184, 224
--secondary:      #464659
--text-primary:   #1a1a1a
--text-secondary: #4b5563
--text-tertiary:  #6b7280
--background:     #ffffff
--border:         #e5e7eb
--success:        #10b981
--warning:        #f59e0b
--error:          #ef4444

Usage Notes

Primary blue (#34aadc) used for:
- Call-to-action buttons
- Links
- Active states
- Focus indicators
- Hover accents
Gray 700 (#464659) used for:
- Body text
- Secondary buttons
- Dark UI elements
White backgrounds are consistent across all pages

Typography

Font Families

Primary:          'Poppins', sans-serif
Secondary:        'inter' (if defined)

Font Sizes

XS:               0.75rem    (12px)
SM:               0.875rem   (14px)
Base:             1rem       (16px)  // Body text default
LG:               1.125rem   (18px)
XL:               1.25rem    (20px)
2XL:              1.5rem     (24px)
3XL:              1.875rem   (30px)
4XL:              2.25rem    (36px)

Font Weights

Light:            300
Normal:           400
Medium:           500
Semibold:         600
Bold:             700

Heading Hierarchy (Responsive)

H1

Mobile: 24px (font-2xl), Bold
Tablet: 30px (font-3xl), Bold
Desktop: 36px (font-4xl), Bold
Line height: 1.2
Color: Gray 900

H2

Mobile: 20px (font-xl), Semibold
Tablet: 24px (font-2xl), Semibold
Desktop: 30px (font-3xl), Semibold
Line height: 1.3
Color: Gray 900

H3

Mobile: 18px (font-lg), Semibold
Tablet: 20px (font-xl), Semibold
Desktop: 24px (font-2xl), Semibold
Line height: 1.3
Color: Gray 900

H4

Mobile: 16px (font-base), Semibold
Tablet: 18px (font-lg), Semibold
Desktop: 20px (font-xl), Semibold
Line height: 1.4
Color: Gray 900

H5 & H6

Mobile: 14px/12px, Medium
Tablet+: 16px/14px, Medium
Line height: 1.4
Color: Gray 700

Body Text

Font size:        1rem (16px)
Line height:      1.6
Color:            #464659 (Gray 700)
Font family:      Poppins

Paragraph Spacing

Margin bottom:    16px (space-md)

Spacing System

Base Unit

Space unit:       8px

Spacing Scale

XS:               4px    (space-unit * 0.5)
SM:               8px    (space-unit * 1)
MD:               16px   (space-unit * 2)
LG:               24px   (space-unit * 3)
XL:               32px   (space-unit * 4)
2XL:              48px   (space-unit * 6)
3XL:              64px   (space-unit * 8)
4XL:              96px   (space-unit * 12)

Section Padding (Responsive)

Mobile:           32px (space-xl)
Tablet:           48px (space-2xl)
Desktop:          64px (space-3xl)

Common Usage

Component gaps: 8px (sm) to 16px (md)
Card padding: 24px (lg) to 48px (2xl)
Form field margins: 24px (lg)
Button padding: 12-16px vertical, 16-32px horizontal

Layout & Grid

Container Widths

SM:               640px
MD:               768px
LG:               1024px
XL:               1280px

Form Grid

Mobile:           1 column
Tablet+:          2 columns
Gap:              24px (mobile), 32px (tablet+)

Usage Patterns

Full-width on mobile (< 640px)
Two-column grid on tablet+ (≥ 640px)
Max-width containers for content areas
Centered layouts with auto margins

Components

Buttons

Base Button Styles

Display:          inline-flex
Align items:      center
Font weight:      600 (semibold)
Border:           2px solid
Border radius:    12px (radius-md)
Min height:       44px (touch target)
Transition:       all 0.3s ease

Button Variants

Primary Button

Background:       #34aadc (primary)
Color:            white
Border color:     #34aadc
Hover:            Darker blue + translateY(-2px) + shadow

Secondary Button

Background:       #464659 (secondary)
Color:            white
Border color:     #464659
Hover:            Darker gray + translateY(-2px) + shadow

Outline Button

Background:       transparent
Color:            #34aadc
Border:           2px solid #34aadc
Hover:            Filled with primary + white text

Ghost Button

Background:       transparent
Color:            #34aadc
Border:           transparent
Hover:            Light blue background (10% opacity)

Button Sizes

Small

Font size:        14px
Padding:          8px 16px (mobile), 8px 24px (desktop)
Min height:       36px

Medium (Default)

Font size:        16px
Padding:          16px 24px (mobile), 16px 32px (desktop)
Min height:       44px

Large

Font size:        18px (mobile), 20px (desktop)
Padding:          24px 32px (mobile), 24px 48px (desktop)
Min height:       56px (mobile), 60px (desktop)

Button States

Focus: Box shadow with primary color (3px outline)
Disabled: 60% opacity, no pointer events
Loading: Spinning animation, transparent text
Icon buttons: 8px gap between icon and text

Button Groups

Display:          flex
Gap:              8px (sm mobile), 16px (md desktop)
Stack:            Column on mobile, row on desktop (optional)

Cards

Base Card Styles

Background:       white
Border radius:    16px (radius-lg)
Border:           2px solid transparent
Shadow:           0 4px 15px rgba(0, 0, 0, 0.05)
Transition:       all 0.3s ease

Hover State

Transform:        translateY(-5px)
Shadow:           0 8px 25px rgba(0, 0, 0, 0.1)
Border color:     #34aadc (primary)

Card Variants

Default Card

Padding:          32px (mobile), 48px (desktop)

Compact Card

Padding:          24px (mobile), 32px (desktop)

Featured Card

Border:           Primary color
Top accent:       4px gradient bar
Hover shadow:     Enhanced with primary color

Dark Card

Background:       #1a1a1a (gray-900)
Color:            white
Border:           Primary on hover

Card Elements

Card Header

Margin bottom:    24px (space-lg)

Card Title

Font size:        20px (mobile), 24px (desktop)
Font weight:      700 (bold)
Color:            Gray 900 (or white for dark)
Margin bottom:    8px

Card Subtitle

Font size:        16px
Color:            Gray 500
Margin bottom:    16px

Card Content

Margin bottom:    24px
Paragraph color:  Gray 500
Line height:      1.6

Card Footer

Margin top:       24px
Padding top:      24px
Border top:       1px solid gray-200

Card Actions

Display:          flex
Gap:              8px (mobile), 16px (desktop)

Card with Image

Image height:     200px (mobile), 240px (desktop)
Image fit:        cover
Body padding:     32px (mobile), 48px (desktop)

Horizontal Card

Desktop layout:   Flex row
Image width:      40%
Body width:       60%
Image height:     Auto (min 200px)

Forms

Form Container

Width:            100%

Form Grid

Display:          grid
Gap:              24px (mobile), 32px (tablet+)
Columns:          1 (mobile), 2 (tablet+)

Form Group

Margin bottom:    24px (space-lg)

Form Labels

Display:          block
Font weight:      500 (medium)
Color:            #464659 (gray-700)
Margin bottom:    8px
Font size:        16px
Required marker:  Red asterisk (*) after label

Form Inputs/Selects/Textareas

Width:            100%
Padding:          16px 24px
Border:           2px solid #e5e7eb (gray-200)
Border radius:    12px (radius-md)
Font size:        16px
Font family:      Poppins
Background:       white
Transition:       all 0.3s ease

Focus State

Border color:     #34aadc (primary)
Box shadow:       0 0 0 3px rgba(40, 184, 224, 0.1)

Disabled State

Background:       #f1f5f7 (gray-100)
Color:            #6b7280 (gray-500)
Cursor:           not-allowed

Placeholder

Color:            #6b7280 (gray-500)

Textarea Specific

Resize:           vertical
Min height:       120px
Line height:      1.5

Select Specific

Appearance:       none (custom dropdown arrow)
Cursor:           pointer
Arrow:            SVG icon (right aligned, 16px)
Padding right:    48px (space for arrow)

Modals

Overlay:          Fixed position, full viewport
Background:       rgba(0, 0, 0, 0.5)
Backdrop filter:  blur(4px)
Z-index:          High value

Background:       white
Border radius:    20px (radius-xl)
Max width:        600px (or responsive)
Max height:       90vh
Shadow:           Heavy shadow
Padding:          32-48px

Entry:            Fade in + scale up
Exit:             Fade out + scale down
Duration:         0.3s

Responsive Breakpoints

Defined Breakpoints

SM (Tablet):      640px
MD (Desktop):     1024px
LG (Large):       1280px

Mixins Available

@include sm-up    // >= 640px
@include md-up    // >= 1024px
@include lg-up    // >= 1280px

@include sm-down  // < 640px
@include md-down  // < 1024px
@include lg-down  // < 1280px

Mobile-First Approach

Base styles target mobile (< 640px)
Use sm-up, md-up, lg-up to add tablet/desktop styles
Touch targets minimum 44px on mobile
Full-width buttons on mobile, auto-width on tablet+
Stacked layouts on mobile, grid/flex on tablet+

Shadows & Effects

Shadow Scale

SM:               0 1px 2px rgba(0, 0, 0, 0.05)
MD:               0 4px 6px rgba(0, 0, 0, 0.07)
LG:               0 10px 15px rgba(0, 0, 0, 0.1)

// Pricing page shadows
Light:            0 4px 15px rgba(0, 0, 0, 0.05)
Medium:           0 8px 25px rgba(0, 0, 0, 0.1)
Heavy:            0 8px 25px rgba(70, 70, 89, 0.2)

Border Radius

SM:               8px
MD:               12px
LG:               16px
XL:               20px
Full:             9999px (pills/circles)

// Pricing page
Default:          20px
Button:           50px (fully rounded)

Common Shadow Usage

Cards: Light shadow default, medium on hover
Buttons: Medium shadow on hover
Modals: Heavy shadow
Inputs: Light inset shadow + focus ring

Animation & Transitions

Standard Timing

Duration:         0.3s (300ms)
Easing:           ease (default)

Common Transitions

All properties:   all 0.3s ease
Transform:        transform 0.3s ease
Colors:           background-color 0.3s ease, color 0.3s ease
Shadows:          box-shadow 0.3s ease

Hover Effects

Cards

Transform:        translateY(-5px)
Shadow:           Enhanced shadow
Border:           Primary color

Buttons

Transform:        translateY(-2px)
Shadow:           Colored shadow (primary/secondary)
Background:       Darker shade

Links/Ghost Buttons

Transform:        translateY(-1px)
Background:       Light tint (10% opacity)

Active States

Transform:        translateY(0) or slight inward
Shadow:           Reduced shadow

Loading Animation

Spinner:          Border rotation animation
Duration:         1s linear infinite
Size:             16px
Color:            White border with transparent section

Architecture Overview

File Structure

styles/
├── abstracts/
│   ├── _variables.scss      # All design tokens
│   ├── _mixins.scss          # Responsive mixins
│   └── _functions.scss       # SASS functions
│
├── base/
│   ├── _reset.scss           # CSS reset
│   ├── _typography.scss      # Font styles
│   └── _layout.scss          # Base layout
│
├── components/
│   ├── _buttons.scss         # Button variants
│   ├── _cards.scss           # Card styles
│   ├── _forms.scss           # Form inputs
│   ├── _modals.scss          # Modal dialogs
│   ├── _navigation.scss      # Navigation bars
│   └── _sessions.scss        # Session components
│
├── layout/
│   ├── _auth-layout.scss     # Auth pages
│   ├── _header.scss          # Site header
│   ├── _public-header.scss   # Public header
│   ├── _main.scss            # Main content
│   └── _footer.scss          # Site footer
│
├── exercise-library/
│   ├── _exercise-library.scss
│   ├── exercises/
│   ├── equipment/
│   ├── muscle-groups/
│   ├── categories/
│   ├── checkpoints/
│   └── progressions/
│
├── assessments/
│   ├── _assessments-library.scss
│   ├── _take-assessment.scss
│   └── _question-builder.scss
│
├── dashboard/
│   └── header/
│       ├── _dashboard-header.scss
│       └── _dashboard-content.scss
│
├── login/
│   ├── _login-form.scss
│   ├── _register-form.scss
│   └── _forgot-password-form.scss
│
├── _coming-soon.scss
├── _pricing.scss
├── nutrition-library.scss
└── main.scss                 # Import manifest

Import Order

Abstracts (variables, mixins, functions)
Base (reset, typography, layout)
Components (buttons, cards, forms, etc.)
Layout (headers, footers, main)
Feature-specific (exercise-library, assessments, etc.)
Page-specific (coming-soon, pricing, etc.)

Naming Convention

// BEM-inspired naming
.component                    // Block
.component__element           // Element
.component--modifier          // Modifier

// Examples
.button                       // Base button
.button--primary              // Primary variant
.button--sm                   // Small size
.card__title                  // Card title element
.form__input                  // Form input element

Design System Strengths

What’s Working Well

Consistent Spacing: 8px base unit with clear scale
Responsive Typography: Mobile-first with clear breakpoints
Color Palette: Well-defined with feedback colors
Component Variants: Multiple button and card styles
Accessibility: Focus states, touch targets, color contrast
Modularity: Well-organized SASS architecture
CSS Custom Properties: Runtime theming support

Areas for Improvement

Consistency Opportunities

Color Usage:
- Two slightly different primary blues (#34aadc vs #34aadc)
- Consolidate to single primary color
Border Radius:
- Mix of values (8px, 12px, 16px, 20px, 50px)
- Consider reducing to 2-3 standard sizes
Shadow Definitions:
- Multiple shadow scales (component vs pricing)
- Standardize to one shadow system
Typography:
- Some components use rem, others use px
- Convert all to rem for scalability
Spacing:
- Generally consistent, but some hardcoded values
- Use spacing variables everywhere

Missing Patterns

Alerts/Notifications: No defined style
Badges/Tags: Not documented
Tooltips: No standard pattern
Loading States: Only button loading defined
Empty States: No standard pattern
Error States: Forms have errors, but not standardized
Tables: No documented table styles
Tabs: Pattern exists but not in base components

Recommended Next Steps

Quick Wins (1-2 hours)

Consolidate primary blue to single value
Reduce border radius scale to 3 values
Standardize shadow system
Document missing component patterns

Short Term (1 week)

Create style guide page in app
Add missing component variants
Standardize spacing usage
Update color custom properties

Medium Term (2-4 weeks)

Audit all pages for consistency
Create component library in Storybook/similar
Add dark mode support
Implement accessibility improvements

Usage Guidelines

When Adding New Styles

Check existing patterns first - Don’t create duplicates
Use variables - Never hardcode colors, spacing, etc.
Follow BEM naming - Maintain consistency
Use mixins - Leverage responsive mixins
Document - Add new patterns to this document

Best Practices

Mobile-first: Start with mobile, enhance for desktop
Accessibility: Include focus states, ARIA labels
Performance: Minimize CSS specificity
Maintainability: Keep components modular
Consistency: Follow existing patterns

Last Updated: November 18, 2025
Source: SASS files in /app/styles/

Train5D Current Design Patterns Documentation

Table of Contents

Color System

Brand Colors

Primary Color Variations (Pricing)

Grayscale Palette

Feedback Colors

CSS Custom Properties

Usage Notes

Typography

Font Families

Font Sizes

Font Weights

Heading Hierarchy (Responsive)

H1

H2

H3

H4

H5 & H6

Body Text

Paragraph Spacing

Spacing System

Base Unit

Spacing Scale

Section Padding (Responsive)

Common Usage

Layout & Grid

Container Widths

Form Grid

Usage Patterns

Components

Buttons

Base Button Styles

Button Variants

Button Sizes

Button States

Button Groups

Cards

Base Card Styles

Hover State

Card Variants

Card Elements

Card with Image

Horizontal Card

Forms

Form Container

Form Grid

Form Group

Form Labels

Form Inputs/Selects/Textareas

Textarea Specific

Select Specific

Modals

Modal Structure

Modal Container

Modal Animation

Responsive Breakpoints

Defined Breakpoints

Mixins Available

Mobile-First Approach

Shadows & Effects

Shadow Scale

Border Radius

Common Shadow Usage

Animation & Transitions

Standard Timing

Common Transitions

Hover Effects

Active States

Loading Animation

Architecture Overview

File Structure

Import Order

Naming Convention

Design System Strengths

What’s Working Well

Areas for Improvement

Consistency Opportunities

Missing Patterns

Recommended Next Steps