Bumble

Bumble's visual system evokes a playful confidence through its dominant bright yellow canvas and bold, heavy typography. Interaction is signaled by a shift from the signature brand yellow to crisp white and deep charcoal for actionable elements. Surfaces generally remain flat or minimally elevated with rounded corners, maintaining a light and open aesthetic that allows photographic content to take center stage. Use Bumble Yellow (#ffdb5b) as the dominant background color for sections or cards to immediately establish brand identity. Apply Charcoal Ink (#202020) for all primary body text and headlines to ensure high contrast and readability. Prefer large type sizes (e.g., 68px, 49px) and heavier weights (500, 600, 700) for headlines with the BumbleSans typeface. Utilize 16px and 24px border radii for buttons and cards respectively, creating a soft, approachable feel. Ensure generous internal padding for interactive elements; buttons typically use 14px vertical and 24px horizontal padding. Maintain minimal elevation; shadows should be subtle, such as rgba(32, 32, 32, 0.12) 0px 1px 8px 0px, predominantly for cards. Avoid using highly saturated colors other than Bumble Yellow or Amber Glow for major interface elements. Do not introduce strong, complex shadows, as the system favors a flatter, lighter aesthetic. Refrain from using thin body text weights that would visually conflict with the bold headline style. Do not deviate from the established rounded border radii for components; sharp corners are not part of this system. Avoid tight spacing around content; allow generous element and section gaps (e.g., 24px, 40px) to maintain an open feel. Do not use dark backgrounds for full sections unless a specific pattern (like the hero) dictates it, and even then, ensure a vibrant yellow accent or white text provides strong contrast.