| name | Crimson Fury | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
The design system is engineered to evoke the raw adrenaline and peak physiological stress of high-intensity interval training (HIIT) and powerlifting. It targets athletes who view fitness as a battle, demanding a UI that feels as industrial and unyielding as a weight room floor.
The aesthetic is a fusion of High-Contrast Bold and Brutalism. It avoids the softness of modern consumer apps in favor of a "no-nonsense" visual language. Every element is designed to feel heavy, fast, and high-impact, utilizing high-density layouts and aggressive visual cues to motivate users toward their next personal record.
This design system operates exclusively in a dark mode environment to minimize visual fatigue and maximize the vibrance of accent colors. The foundation is built on Pure Black for depth and Charcoal Grey for structural layering.
The accent palette is "high-heat." Crimson Red serves as the primary action color, signifying power and urgency. Orange-Red is used for secondary highlights and "warning" states, such as heart rate zones or timers. Text is kept at pure white or high-brightness grey to ensure maximum legibility against the dark void of the background.
The typography utilizes Lexend for its athletic, geometric clarity. To achieve a sense of speed and forward momentum, all headlines and labels must be italicized.
Headlines use "Black" or "ExtraBold" weights with tight letter spacing and reduced line height to create a wall of text that feels imposing. Display sizes should be used aggressively to dwarf other UI elements. Body text remains upright and standard-weight to maintain readability, while utility labels are always uppercase and italicized to resemble the markings found on heavy machinery or athletic gear.
The layout follows a fixed grid model with a 12-column structure for desktop and a 4-column structure for mobile. The spacing rhythm is strictly based on an 8px base unit.
Negative space is used strategically—not to provide "breathing room," but to create tension. Elements are often grouped tightly in "stacks" to imply density and strength. Large, oversized margins are used only to separate major content sections, creating a cinematic, high-impact scroll experience.
In this design system, depth is not conveyed through shadows, but through Tonal Layering and Bold Borders.
- Surface Tiers: Pure black (#000000) is the lowest level. Charcoal (#1A1A1A) represents raised surfaces like cards or containers.
- Hard Outlines: Instead of ambient shadows, use 2px solid borders in Charcoal or Primary Crimson to define boundaries.
- Inner Glows: For active states or high-intensity metrics (like an active timer), use a subtle inner crimson glow to make the element appear as if it is "heating up."
The shape language is strictly Sharp (0px). Rounded corners are intentionally avoided to maintain a raw, industrial feel.
Rectangular forms dominate the UI, echoing the shape of weight plates, benches, and shipping containers. This geometric rigidity reinforces the brand's focus on discipline and structure. When a "circular" element is required (such as a progress ring), it should be rendered with a thick stroke and no soft edges.
Primary buttons are solid Crimson Red with Black, Heavy Italicized text. They have 0px corner radius and no gradients. Secondary buttons use a 2px Crimson border with transparent backgrounds. On hover, buttons should "flash" to Orange-Red.
Cards are Charcoal Grey (#1A1A1A) with a 2px Pure Black border. For featured workouts, the card may feature a top-border accent in Crimson.
Text fields are Black with a bottom-only 2px border in Charcoal. Upon focus, the border transforms into a Crimson-to-Orange gradient, and the label shifts to an uppercase, italicized "active" state.
Used for muscle groups (e.g., "CHEST", "LEGS"). These are small, sharp-edged blocks with a Crimson background and Black text.
Progress is tracked using segmented bars rather than smooth fills, creating a mechanical, "loading" aesthetic. Use Orange-Red for the active fill to suggest heat and effort.
A custom component for this design system, using a vertical or semi-circular bar with sharp segments that light up from Crimson to Orange-Red as the user's heart rate or weight volume increases.