Waterdrop

Overview

Waterdrop is a direct-to-consumer water filtration brand that transforms technical product complexity into confident, accessible e-commerce design. The aesthetic is 'Product-Centric Minimalism'—a bright, high-contrast interface that prioritizes clarity and conversion without sacrificing sophistication. The UI evokes trust through clean typography, decisive color choices, and purposeful whitespace, making complex water purification systems feel approachable and premium. The brand personality is knowledgeable yet conversational, avoiding jargon while celebrating engineering rigor. Tone: direct, benefit-focused, never condescending. Example: 'Save 70% undersink space and enjoy pure water with a fast, 30-minute installation.'

Colors

The color system is anchored by a vivid, action-oriented primary blue (#036aff) used exclusively for CTAs, links, and interactive focus states—this is the signature accent that drives conversion. The secondary orange (#ffa443) appears sparingly on promotional badges and sale callouts, paired with its light container (#fff4e6) for emphasis without overwhelming. Surfaces are pure white (#ffffff) with a carefully calibrated hierarchy: surface-container-low (#f8f8f8) for subtle section breaks, surface-container (#f3f8ff) for card backgrounds and light accents, and surface-container-highest (#e9f2fe) for hover states and elevated content. Text follows a three-tier system: primary black (#000000) for headlines and body copy, secondary gray (#555555) for supporting text and metadata, and tertiary

Typography

The type system uses Montserrat exclusively across all weights (300–800), creating visual consistency and reinforcing the brand's modern, engineered aesthetic. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 700 weight) leads major sections; headline-md (32px, 700 weight) structures subsections; title-lg (20px, 600 weight) marks card titles and feature callouts. Body text lives at two scales: body-lg (18px, 400 weight, 28px line-height) for introductory copy and body-md (16px, 400 weight, 24px line-height) for product descriptions and form labels. Labels use 14px (label-md, 600 weight, 0.01em tracking) for buttons and interactive elements, with a smaller 12px variant (label-sm, 500 weight, 0.02em tracking) for metadata a

Layout

The layout follows a 12-column grid system with a fixed max-width of 1280px, centered on desktop and expanding to full-bleed on mobile. Section spacing uses semantic tokens: lg (40px) for vertical rhythm between major sections, md (24px) for internal card padding and component spacing, and sm (12px) for tight groupings within cards. The gutter (24px) defines horizontal margins on desktop, reducing to 16px on tablet and 12px on mobile. Hero sections occupy 75vh with a clip-path ellipse(95% 100% at 50% 0%) to create a curved bottom edge, adding visual interest without complexity. Product cards use a 3-column grid on desktop, 2 on tablet, 1 on mobile, each with 24px gap. The announcement bar (48px height) sits above the header with a 14px font-size and 130% line-height, ensuring readability a

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of background color shifts rather than heavy drop shadows. Level 1 (Base): pure white (#ffffff) background with no shadow, establishing the neutral canvas. Level 2 (Cards & Inputs): 1px solid border in #dddddd with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating subtle lift. Level 3 (Modals & Elevated Content): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) paired with a 1px border in #dddddd and a background shift to surface-container-highest (#e9f2fe). Hover states on cards transition to surface-container-high (#eeeeee) w

Shapes

The shape philosophy is 'Engineered Precision'—rounded corners are minimal and purposeful, reflecting the technical nature of water filtration products. Buttons use 4px radius (rounded.sm / 0.25rem), creating a modern, slightly softened rectangle that feels contemporary without being playful. Cards and modals use 10px radius (rounded.lg / 1rem), balancing approachability with sophistication. Input fields match buttons at 4px for visual consistency in form layouts. Badges and pills use 9999px (rounded.full) to create perfect circles or fully rounded capsules, reserved for promotional elements a

Components

Action Elements Buttons are the primary conversion driver and use two states: filled (primary) and outlined (secondary). The filled button uses background: #036aff, color: #ffffff, padding: 12px 32px, border-radius: 4px, font-size: 14px, font-weight: 600, with a 44px height. On hover, the background shifts to #003eb3 with a 200ms transition. The outlined button mirrors the filled button's dimensions but uses background: transparent, border: 2px solid #036aff, color: #036aff, and on hover fills with the primary color. Disabled buttons use background: #999999, color: #ffffff, opacity: 0.6, and cursor: not-allowed. All buttons include a 200ms ease-in-out transition on background-color and border-color to signal interactivity.

Containers & Surfaces Cards are the primary content contai

Do's and Don'ts

**Do**

• Do use the primary blue (#036aff) exclusively for CTAs, links, and focus states—it's the brand's conversion engine and must remain distinctive.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile (16px tablet, 12px mobile) to preserve the breathing room that defines the aesthetic.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create a sense of responsive, engineered precision.
• Do use Montserrat at all weights and sizes—never substitute system fonts or other typefaces, as consistency reinforces the modern, technical brand identity.
• Do layer small labels (label-sm) over product photography with text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility without compromising the image.

**Don't**

• Don't use the secondary orange (#ffa443) on primary CTAs or interactive elements—reserve it for promotional badges and sale callouts only.
• Don't exceed a 1280px container max-width on desktop, as wider layouts dilute the focused, product-centric aesthetic.
• Don't apply heavy shadows (>0.15 opacity) or multiple layered shadows; the system uses restrained elevation to maintain clarity and avoid visual noise.
• Don't use rounded corners larger than 10px on cards or 4px on buttons—the engineered precision aesthetic rejects soft, playful curves.
• Don't mix font families or weights inconsistently; Montserrat is the sole typeface, and weight shifts (300→700) must follow the defined typography scale.