Urban Company

Overview

Urban Company is a hyperlocal marketplace that brings trusted professionals directly to customers' homes for beauty, cleaning, repairs, and maintenance services. The brand serves time-constrained urban professionals and families seeking convenience without compromising quality. The design aesthetic is **Pragmatic Minimalism**—a clean, efficient visual language that prioritizes clarity and trust through generous whitespace (surface: #ffffff, on-surface: #212121), bold action-oriented typography (headline-lg: 40px, fontWeight: 700), and a distinctive red accent (primary: #dd0017) that signals urgency and reliability. The UI evokes a sense of professional competence and accessibility: every interaction feels direct, every service discoverable, every booking frictionless.

The brand voice is confident, direct, and service-focused. Urban Company speaks in active verbs and concrete outcomes—not aspirational promises, but delivery guarantees. Vocabulary emphasizes expertise ('hand-picked Professionals'), locality ('serve you at your doorstep'), and speed ('on demand'). The tone avoids corporate jargon; instead, it mirrors the clarity of a trusted neighbor recommending a plumber. Example sentence in brand voice: 'Book a verified professional in 60 seconds—service starts within 2 hours.'

Colors

The color system is built on a foundation of neutral surfaces with a single, commanding accent. **Primary (#dd0017)** is the brand's signature red—used exclusively on CTAs (buttons, links, key interactions), focus states, and status indicators. It commands attention without aggression, signaling action and trust simultaneously. Secondary (#304ffe), a deep blue, supports secondary actions and informational elements (badges, chips, secondary CTAs). Tertiary (#00968b), a teal, is reserved for success states and positive feedback.

The surface stack is deliberately minimal: surface (#ffffff) is the default canvas; surface-container-high (#e3e3e3) and surface-container-highest (#e2e2e2) create subtle depth for cards and elevated sections without visual noise. On-surface (#212121) is the primary

Typography

The type system prioritizes legibility and hierarchy through weight and scale rather than color variation. Display (56px, fontWeight: 700, lineHeight: 64px, letterSpacing: -0.02em) is reserved for hero headlines; headline-lg (40px, fontWeight: 700) anchors major sections like 'Why Urban Company?'; headline-md (32px, fontWeight: 700) breaks up content areas. Body-lg (18px, fontWeight: 400, lineHeight: 28px) is used for hero copy and prominent descriptions; body-md (16px, fontWeight: 400, lineHeight: 24px) is the default paragraph text. Label-md (14px, fontWeight: 600, letterSpacing: 0.02em) is applied to button text and form labels; label-sm (12px, fontWeight: 500, letterSpacing: 0.03em) for helper text and captions.

All typography uses the system font stack (-apple-system, BlinkMacSystemF

Layout

The layout uses a 12-column fluid grid with a max-width of 1120px (container-max-width: 1120px), centered on the viewport. Sections are separated using lg spacing (40px margin-bottom, margin-top) for major breaks (hero to 'Why Urban Company?'), md spacing (24px) for subsection separation, and sm spacing (12px) for component-level grouping. The gutter (24px padding-left, padding-right) is applied to all full-width sections, creating consistent breathing room on desktop and tablet.

Whitespace is treated as a design material: the hero section uses 50% of the viewport for imagery and 50% for copy, with md (24px) padding between the headline and subheading, and lg (40px) padding between copy and the primary CTA. Cards are laid out in a 3-column grid on desktop (width: calc(33.333% - 16px), mar

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered colors. The elevation system uses three levels: sm (0px 1px 3px rgba(0, 0, 0, 0.12)) for interactive elements like buttons and small cards; md (0px 4px 12px rgba(15, 15, 15, 0.06)) for standard cards and modals; lg (0px 8px 24px rgba(0, 0, 0, 0.15)) for elevated overlays and expanded modals. Shadows are soft and diffuse, never harsh or dark (max opacity: 0.15), to maintain the clean, professional aesthetic.

Cards use a combination of shadow and border: card component applies {elevation.md} (0px 4px 12px rgba(15

Shapes

The shape philosophy is **Functional Softness**—rounded corners are used sparingly and purposefully to signal interactivity and reduce visual harshness, but never so aggressively that they distract from content. Buttons use sm (2px) border-radius for a subtle, professional appearance (button-primary: rounded: {rounded.sm}); cards use md (8px) for a more approachable, modern feel (card: rounded: {rounded.md}); modals and elevated containers use lg (16px) to signal importance and separation. Input fields use DEFAULT (4px) to match button styling and create visual consistency.

Chips and badges u

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (backgroundColor: {colors.primary}, height: 48px, padding: 12px 24px, rounded: {rounded.DEFAULT}) is used for all primary CTAs—'Book Now', 'Get Started', 'Continue'. On hover, the background darkens to #b71c1c (transition-duration: 0.2s ease-in-out), and on focus, a 3px ring of rgba(221, 0, 23, 0.1) appears around the button. Button-secondary (backgroundColor: transparent, border: 2px solid {colors.primary}, height: 48px) is used for secondary actions like 'Learn More' or 'Cancel'; on hover, it fills with primary-container (#ffebee) while maintaining the red border.

Containers & Surfaces Cards (backgroundColor: {colors.surface}, rounded: {rounded.md}, padding: {spacing.md}, boxShadow: {elevation.md}, borde

Do's and Don'ts

**Do**

• Do use primary (#dd0017) exclusively for CTAs, focus states, and key interactive elements—never for decorative or background purposes.
• Do maintain 12px minimum padding (sm spacing) inside all interactive elements to ensure touch targets are at least 44px tall and 44px wide.
• Do apply the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) to all text—never use serif or display fonts for body copy.
• Do use md (8px) or lg (16px) border-radius on cards and containers; avoid sharp corners (0px) except for full-width sections.
• Do layer shadows with borders: cards use 1px solid border in surface-container-high (#e3e3e3) plus md elevation shadow (0px 4px 12px rgba(15, 15, 15, 0.06)).
• Do limit color palette to primary (#dd0017), secondary (#304ffe), tertiary (#00968b), and neutrals—avoid introducing new brand colors.

**Don't**

• Don't use primary red (#dd0017) for body text, backgrounds, or non-interactive elements—it should feel rare and urgent.
• Don't apply shadows heavier than lg (0px 8px 24px rgba(0, 0, 0, 0.15))—the design should feel light and modern, not heavy.
• Don't mix font families or use custom fonts; the system font stack ensures consistency across platforms and reduces load time.
• Don't create interactive elements smaller than 44px × 44px (including padding); this violates WCAG touch target guidelines.
• Don't use rounded corners greater than 20px (xl) on standard components—reserve full (9999px) for pills and badges only.
• Don't apply color alone to convey meaning (e.g., red for error without an icon or text label)—always pair color with text or iconography for accessibility.