Housekeep

Overview

Housekeep is a London-based domestic cleaning marketplace that transforms household management into a seamless, trustworthy experience. The design system embodies 'Service-Oriented Minimalism'—a philosophy that prioritizes clarity, accessibility, and professional reliability over decorative flourish. The brand serves busy professionals and families seeking vetted, vetted cleaners, and the UI reflects this through a clean, direct aesthetic that builds confidence through transparency. The emotional response is one of relief: users feel they've found a solution that works, managed with care and precision.

The brand voice is warm yet authoritative, practical yet reassuring. Housekeep speaks in clear, action-oriented language without corporate jargon. Tone vocabulary favors directness ('Book now', 'Vetted cleaners', 'Fixed price') and avoids hyperbole. The brand personality is competent, friendly, and genuinely helpful—like a trusted friend who has solved this problem before. Example sentence in brand voice: 'Your cleaner arrives on time, every time—we handle the rest.'

Colors

The Housekeep color system is built on a foundation of trust and clarity. Primary (#3040b6) is the signature brand accent—a confident, professional blue used on all call-to-action buttons, interactive elements, and key links. It conveys reliability and security without coldness. The primary-container variant (#1863dc) provides a deeper, more saturated option for hover and active states, ensuring tactile feedback at 100% opacity. Secondary (#00be5f) is a vibrant, optimistic green reserved for success states, confirmations, and positive messaging—it signals 'all is well' and 'action complete'. Tertiary (#ff9500) is an energetic orange used sparingly for alerts, special offers, and attention-grabbing secondary CTAs.

The surface stack is deliberately neutral and spacious: surface (#ffffff) is

Typography

The type system uses two distinct font families to create visual hierarchy and emotional resonance. Display and headline levels use Tablet Gothic Condensed (fontWeight: 800, fontSize: 80px for display), a bold, geometric typeface that commands attention and conveys confidence—ideal for hero messaging and page titles. Body and label levels use Fabriga (fontWeight: 300–700), a humanist sans-serif that balances professionalism with approachability. The weight progression is deliberate: body copy runs at fontWeight: 300 (light) for a spacious, readable feel, while labels and CTAs jump to fontWeight: 700 for clear visual distinction. Line-height is generous (28px for 18px body-lg, 24px for 16px body-md) to ensure readability on mobile and reduce cognitive load. For small labels over busy backgr

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus. The spacing scale is semantic and hierarchical: unit (8px) is the baseline, with md (24px) used for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter spacing is fixed at 24px on desktop, collapsing to 16px on tablet and 12px on mobile. The design favors ample white space—sections are separated by at least lg spacing (40px), and card padding uses md (24px) consistently. Container max-widths vary by content type (845px for preference centers, 1099px for standard content), but never exceed 1280px to prevent line-length fatigue. The rhythm is calm and deliberate, reflecting th

Elevation & Depth

Depth in Housekeep is achieved through a restrained shadow system that avoids visual clutter. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle internal divisions like input focus states; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; and lg (0 32px 68px rgba(0, 0, 0, 0.3)) for full-screen modals and overlays. Shadows are always soft and diffuse, never sharp or dramatic. The cookie consent modal uses lg elevation (box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3)) combined with a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) to es

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used strategically to soften the interface without introducing unnecessary complexity. Buttons use rounded.lg (1rem / 16px) for a modern, approachable feel that's neither too sharp nor too rounded. Input fields and standard cards use rounded.DEFAULT (0.5rem / 8px), a subtle radius that signals interactivity without distraction. Modals and elevated containers use rounded.lg (1rem) to establish visual prominence. Pill-shaped buttons (secondary CTAs like 'Contact') use rounded.full (9999px), creating a distinctive, friendly silhoue

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: rgb(48, 64, 182), textColor: rgb(255, 255, 255), padding: 14px 30px, height: 48px, rounded: 1rem, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background transitions to the primary-container (#1863dc) with a 150ms ease-out timing function. button-secondary is transparent with a 2px solid border in primary color, padding: 13px 22px, height: 44px, and rounded: 9999px (pill shape). Secondary buttons on hover receive a subtle background fill (surface-container-high) without changing text color, maintaining visual distinction from primary buttons.

Containers & Surfaces Cards use backgroundColor: rgb(244, 244, 244), rounded: 0.75rem, padding: 24px, and box-shadow: 0 3px 8p

Do's and Don'ts

**Do**

• Do use primary (#3040b6) exclusively for primary CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do maintain consistent padding (24px for cards, 14px 30px for buttons) across all components to create visual rhythm and predictability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces (cards, dropdowns, modals) for consistent depth.
• Do use Tablet Gothic Condensed (fontWeight: 800) only for display and headline-lg; reserve Fabriga for all body and label text to maintain readability.
• Do provide generous line-height (28px for 18px body text) and white space (lg: 40px between sections) to reflect the brand's 'hassle-free' promise.

**Don't**

• Don't use secondary (#00be5f) or tertiary (#ff9500) on primary CTAs—they dilute the primary brand signal and confuse interaction hierarchy.
• Don't apply multiple shadows or layered effects; each shadow serves one purpose (sm for focus, md for cards, lg for modals).
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px)—custom radii break visual consistency.
• Don't reduce line-height below 24px for body text or below 20px for labels; tight line-height contradicts the brand's calm, spacious aesthetic.
• Don't mix Tablet Gothic Condensed and Fabriga at the same size or weight level; maintain clear typographic hierarchy by reserving Tablet Gothic for display/headline only.