Strava

This design system projects an active, performance-oriented energy with its high-contrast typography and prominent use of a single, vibrant orange. The stark black text against white or near-white backgrounds, combined with structured, rectangular forms defines its modern utility. The orange acts as a constant visual cue, highlighting interactive elements and brand presence without relying on subtle gradations or complex color palettes, focusing instead on direct and clear communication. Prioritize Strava Orange (#fc5200) for all primary calls to action and active states. Maintain high contrast by using Midnight Ink (#000000) or Ash Charcoal (#21211f) text on Whisper White (#ffffff) or Summit Cream (#f9f8f5) backgrounds. Apply a consistent 4px border-radius to all interactive elements like buttons and input fields. Use Boathouse (or Inter) weight 600 for all main headings (32px), ensuring clear hierarchy. Separate content sections with distinct background colors, such as Whisper White (#ffffff) for main content and Summit Cream (#f9f8f5) for footers. Do not introduce new primary accent colors other than Strava Orange (#fc5200) or Link Blue (#0060d0). Avoid using soft, low-contrast text-on-background combinations; maintain AAA or AA contrast ratios. Do not deviate from the 4px border-radius on buttons and input fields to maintain visual consistency. Do not use generic system fonts; leverage Boathouse (or Inter) for all text elements. Do not use box-shadow for elevation; rely on background color changes and borders to define hierarchy and separation.