Peloton

Peloton's design system exudes a premium, focused energy through a dark, high-contrast palette and precise typography. The deep charcoal surfaces with stark white text create an immersive, yet highly legible experience. A vibrant, singular red accent provides crucial points of interaction and brand identity, while large, rounded buttons soften the overall intensity, making the powerful machinery feel approachable. Use Peloton Red (#df1c2f) exclusively for primary CTAs and critical interactive elements to maintain its high impact. Maintain high contrast by pairing Pure White text (#ffffff) with Charcoal Black (#181a1d) backgrounds for maximum legibility. Apply 28px border-radius to all primary buttons for a consistent, soft-edged, pill-like appearance. Use Inter font family for all text elements, leveraging weights (300-700) and specific letter-spacing (-0.008em to 0.025em) to differentiate hierarchy. Employ Charcoal Black (#181a1d) as the primary page and section background to establish a premium, dark aesthetic. Utilize 0px border-radius for product cards, allowing internal elements to contain their own radii for visual interest. Ensure input fields have a 2px border-radius and Concrete Gray (#888b93) border to visually distinguish them from other interactive elements. Do not introduce additional accent colors; Peloton Red is the single chromatic accent. Avoid using box-shadows for elevation; rely on color temperature and surface changes (e.g., translucent fills, gradients) to indicate depth. Do not deviate from Inter font family; achieve variety through weights and letter-spacing instead. Do not use generic, unrounded buttons; all primary interactive buttons should have the signature 28px radius. Avoid excessive spacing between elements; use the base unit of 8px for element gaps to maintain a comfortable density. Do not use highly saturated images; imagery should blend with the dark aesthetic, often appearing desaturated or dark-toned.