PAFFS UI Architecture Logo PAFFS UI ARCHITECTURE

Design System & Component Showcase

1. UI Primitives (Atoms & Base Controls)

Buttons

Badges

Info Success Warning Danger

Icon Action Triggers

Linear Progress Bar

Toast Notifications

Info: New training program loaded.
Success: Lift record saved!
Warning: Rest timer incomplete.
Danger: Failed to connect to server.

2. Composite Components (Molecules & Organisms)

Pill Segmented Mode Toggle

Tab Navigation Bar & Panels

Showing workout history log entries...

Monthly aggregation overview...

Personal record lift library...

Action Input Field Group

Dynamic Dropdown with Custom Input

3-Column Compact Field Row

Timer Hero Display Panel & Rest Controller

Rest Phase
02:30
Next: Set 3 of Back Squat (100kg)

4-Cell Metadata Overview Grid

Total Volume 12,450 kg
Sets Completed 18 Sets
Avg Intensity 84% 1RM
Duration 54 mins

Session / History Cards

Leg Day Heavy Lower Score: 92
Sept 19, 2026 • 14,200 kg Vol • 62 mins
Upper Body Push Score: 88
Sept 17, 2026 • 9,800 kg Vol • 45 mins

Callout / Insight Box

🤖 AI Coach Recommendation
Great progress on your back squat! Consider increasing your working weight by 2.5kg for your next training block.
💡 Recovery Tip
Hydration target hit for today! High volume lower body sessions require post-workout carbohydrate replenishment within 60 minutes.

3. Swiss Macro-Modular Spatial Field Matrix (Textbook Layout System)

Authentic 4×4 Macro Spatial Field Matrix with spacious rectangular fields (~268px wide × 144px high) and horizontal flowline gutters (based on Josef Müller-Brockmann's Grid Systems in Graphic Design). Press Aspect Grid Mode ⚖️ or toggle overlay keys (Ctrl+G for Spatial Grid, Ctrl+Shift+G for 8px Baseline Rhythm, Ctrl+Alt+G for 12-Column Subgrid).

4×4 Spatial Field Matrix Showcase

Field [1, 1-4] • Dynamic Aspect 4:1
Header Module (Span 4 Spatial Fields Wide x 1 Field High)
Primary top-level page header & navigation container
4x1 Spatial Field
Field [2-3, 1-2] • Dynamic Aspect 1:1 Block
Timer Hero / Workspace (Span 2x2 Spatial Fields Block)
Substantial spatial block for main telemetry controls and live timer workspace.
2x2 Spatial Block
Field [2, 3] • Dynamic Aspect 1:1
Stat Module A
14,200 kg
1x1 Field
Field [2, 4] • Dynamic Aspect 1:1
Stat Module B
62 mins
1x1 Field
Field [3, 3-4] • Dynamic Aspect 2:1
Session / History Log Card (Span 2 Spatial Fields Wide x 1 Field High)
Fits compact card metrics, category tags, and action triggers.
2x1 Spatial Field
Field [4, 1] • Dynamic Aspect 1:1
Stat Module C
84% 1RM
1x1 Field
Field [4, 2] • Dynamic Aspect 1:1
Stat Module D
18 Sets
1x1 Field