WHOOP

WHOOP's design evokes a sense of precise, data-driven health monitoring. The dominant use of stark black and crisp white, punctuated by a deep indigo (#4a53ff), creates a high-contrast environment, mirroring the clarity of performance data. Softly rounded cards and buttons suggest an approachable interface for complex health metrics, while sharp, geometric typography reinforces the technical precision. Use proxima-nova for all typography, adjusting weights (400, 500, 600, 700) and sizes according to the type scale. Maintain a high-contrast ratio for text: #000000 on light backgrounds (#ffffff, #f3f5f9, #e5e7eb) and #ffffff on dark backgrounds (#000000, #191919). Apply 24px border radius to all informational cards and image containers, maintaining visual softness. Utilize 'Deep Indigo' (#4a53ff) exclusively for interactive states or key emphasis to draw attention. Ensure buttons adhere to either 60px (pill-like), 20px, or 50% (circular) border-radius, differentiating their roles. Use 'Ghost Gray' (#e5e7eb) for subtle borders and dividers to softly define sections without strong lines. Apply negative letter spacing to display text (e.g., -4.8px at 120px) to enhance visual impact and tighten headlines. Do not introduce new color tones; stick to the established achromatic palette with 'Deep Indigo' (#4a53ff) as the sole brand accent. Avoid using drop shadows on cards unless it's for 'Card Elevated Shadowed' to maintain a flat, modern aesthetic. Do not deviate from proxima-nova; all text should remain within this font family to preserve brand consistency. Prevent mixing border radii on interactive elements; buttons should have distinct radii (60px, 20px, 50%) for clear identity. Do not use highly saturated colorful backgrounds for UI elements; maintain the neutral background schema. Avoid excessive use of the vivid semantic colors (#d03433, #fbca46, #a41517) as they are reserved for internal illustration detail.