Badoo

Overview

Badoo is a global dating and social discovery platform that empowers users to connect authentically with confidence. The design system embraces a "Bold Warmth" aesthetic—combining striking typography with a carefully calibrated color palette of deep reds, soft purples, and clean whites. The brand personality is direct, inclusive, and optimistic: it speaks to users as equals, celebrates diversity, and removes friction from the connection process. The UI conveys energy and approachability through generous use of the primary red (#c8001a) on CTAs, paired with soft lavender accents (#e9d8ff) that soften the overall impression and create visual breathing room. Voice example: "Chat before you match—get to know the real person behind the profile."

Colors

The color system is anchored by a bold, confident primary red (#c8001a) used exclusively on high-priority CTAs (Sign up, Continue buttons) and key interactive elements. This red is never used for body text or backgrounds—it exists to command attention and signal action. The secondary palette features a warm lavender (#b492de) and its lighter container (#e9d8ff), which appear in hero sections, card backgrounds, and accent highlights to create visual hierarchy without competing with the primary. The surface stack progresses from pure white (#ffffff) for the main canvas through increasingly warm off-whites (#f9f6f2, #ebe8f2) for container layers, ensuring subtle depth without darkness. On-surface text is always #121212 (near-black) for maximum legibility. Accent colors include a vibrant purpl

Typography

The type system pairs Beausite Classic (a custom brand serif) for all display and headline levels, creating distinctive visual impact and brand recognition. Beausite is reserved for h1–h3 scales (76px down to 24px) and always rendered in bold weight (700). Body copy and UI labels use SF Pro Text, the system font stack, at 16px–18px for readability and performance. The hierarchy is strict: display (76px, -0.04em letter-spacing) commands hero sections; headline-lg (32px) anchors feature sections; body-md (16px, 24px line-height) ensures comfortable reading at arm's length. Labels use 14px with 0.01em letter-spacing to maintain crispness on interactive elements. All type scales include explicit line-height values (measured in pixels or unitless ratios) to ensure consistent vertical rhythm. On

Layout

The page uses a fluid 12-column grid with a max-width of 1226px, centered on desktop and full-width on mobile. Horizontal padding is 32px on desktop, reducing to 16px on tablet and 12px on mobile. The spacing scale is semantic: lg (40px) separates major sections (hero from features), md (24px) creates breathing room within cards and between related elements, and sm (12px) is used for internal component padding. The hero section spans full-width with a soft lavender background (#e9d8ff) and includes a 50vw image on the right (desktop). Feature cards are arranged in a 2–3 column grid depending on viewport, each with md padding and md border-radius. White-space is generous: section margins are always lg or xl, never cramped. The container max-width of 1226px ensures text remains readable at a

Elevation & Depth

Depth is achieved through subtle shadows and layered backgrounds rather than dramatic drop-shadows. Level 1 (Base): the white surface (#ffffff) with no shadow. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border-radius: 16px, background: #ffffff or #f9f6f2. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), border-radius: 22px, background: #ffffff with a subtle 1px border at rgba(0, 0, 0, 0.05). Hover states on cards transition to a slightly darker background (#e5e5e5) and a stronger shadow (0 8px 24px rgba(0, 0, 0, 0.12)) over 200ms. Interactive ele

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are used consistently to soften the interface and signal friendliness, but never so much that the design feels childish or imprecise. Buttons use 22px border-radius (lg), creating a pill-like shape that feels inviting and modern. Cards and containers use 16px (md) for a balanced, professional appearance. Input fields use 12px (DEFAULT) to maintain visual distinction from larger containers. The full-radius (9999px) is reserved for badges and small accent elements (e.g., user name tags, like buttons). This hierarchy ensures that th

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses a solid #c8001a background with white text, 22px border-radius, and 12px vertical / 24px horizontal padding (44px total height). On hover, the background darkens to #a80016 over 200ms. The button-secondary variant uses a transparent background with a 2px primary-red border and on-surface text; on hover, it fills with the primary-container color (#ffbbd0). Both variants use label-md typography (14px, 600 weight). Focus states add a 3px outline in primary red with 2px offset, ensuring keyboard accessibility.

Containers & Surfaces Cards use a white background (#ffffff) with 16px border-radius and 24px padding. The default shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background tra

Do's and Don'ts

**Do**

• Do use the primary red (#c8001a) exclusively on CTAs and high-priority interactive elements—never on body text or backgrounds.
• Do pair Beausite Classic headlines with SF Pro Text body copy to create clear visual hierarchy and maintain brand distinctiveness.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) within component groups to ensure visual breathing room.
• Do apply 22px border-radius to buttons and 16px to cards to signal approachability without sacrificing professionalism.
• Do use the lavender accent palette (#e9d8ff, #b492de) in hero and feature sections to create warmth and visual interest without overwhelming the primary red.
• Do test all interactive elements with keyboard navigation and ensure focus states use the 3px primary-red outline with 2px offset for accessibility.

**Don't**

• Don't use the primary red (#c8001a) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and high-priority actions.
• Don't mix Beausite Classic with body copy; use it only for display and headline levels (h1–h3) at 24px or larger.
• Don't reduce spacing below 12px (sm) between components or below 24px (md) between sections; the design relies on generous white-space for clarity.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12) or use shadows on buttons and inputs—keep elevation subtle and reserved for cards and modals.
• Don't use border-radius smaller than 12px for interactive elements or larger than 26px for containers; maintain the established hierarchy.
• Don't override the focus outline (3px primary-red with 2px offset) for keyboard navigation—it is critical for accessibility and brand consistency.