Utilities / iOS / Android / Web

Urban Company

Urban Company stays plain and native, near-black system text on white with 8px corners everywhere, and lets one purple say add this.

Download
  • #6E42E5
  • #0F0F0F
  • #545454
  • #F5F5F5
  • #07794C
  • #C5B4F5

Color

Every color token in the file, grouped by role.

Brand

  • primary#6E42E5
  • on primary#FFFFFF
  • primary light#C5B4F5
  • primary wash#F5F2FD

Surfaces

  • canvas#FFFFFF

Text

  • ink#0F0F0F
  • ink body#545454
  • ink muted#757575

Lines

  • divider#EDEDED
  • border#E3E3E3

More

  • band#F5F5F5
  • green#07794C
  • green wash#EDF7F2
  • teal#0B5459
  • yellow#FFC247
  • dark chip#262626

Typography

Each style is set with the file's own family, size, weight and spacing.

  • -apple-systemNot served by an open font library, so it falls back through the file's own stack.
  • headline36px / 600 / 44px

    Urban Company

  • title28px / 700 / 40px

    Pack my box with five dozen liquor jugs

  • subtitle20px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • button14px / 600 / 20px

    Continue to checkout

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • small12px / 400 / 16px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md18px
  • lg20px
  • pill200px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm8px
  • md12px
  • base16px

Components

Component tokens drawn with the colors, type and corners they name.

  • add button
    add-button
  • see all button
    see-all-button
  • service tile
    service-tile
  • offer panel
    offer-panel
  • timing tag
    timing-tag
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 102 lines
version: alpha
name: Urban-Company-design-analysis
description: "A home services marketplace in near-black (#0f0f0f) on white and light gray, with Urban Company purple (#6e42e5) for Add buttons and See all links, green for ratings and timing, the device's own system font at 400 to 700 and 8px corners on almost everything."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#6e42e5"
  on-primary: "#ffffff"
  primary-light: "#c5b4f5"
  primary-wash: "#f5f2fd"
  ink: "#0f0f0f"
  ink-body: "#545454"
  ink-muted: "#757575"
  canvas: "#ffffff"
  band: "#f5f5f5"
  divider: "#ededed"
  border: "#e3e3e3"
  green: "#07794c"
  green-wash: "#edf7f2"
  teal: "#0b5459"
  yellow: "#ffc247"
  dark-chip: "#262626"

typography:
  headline:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 44px
  title:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 40px
  subtitle:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  button:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  small:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px

rounded:
  xs: 4px
  sm: 8px
  md: 18px
  lg: 20px
  pill: 200px

spacing:
  xs: 6px
  sm: 8px
  md: 12px
  base: 16px

components:
  add-button:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 36px
    padding: 6px 8px
  see-all-button:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 0 16px
  service-tile:
    backgroundColor: "{colors.band}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.sm}"
  offer-panel:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
  timing-tag:
    backgroundColor: "{colors.green-wash}"
    textColor: "{colors.green}"
    typography: "{typography.small}"
    rounded: "{rounded.xs}"

Overview

Urban Company is a marketplace for booking home services in India and a few other countries: cleaning, repairs, salon and spa at home, and its own water purifiers and smart locks. Its site is near-black text on white and light gray, drawn in the visitor's own system font, with Urban Company purple for adding a service and for links, and green for timing and ratings. Nearly every shape has an 8px corner. [Observed]

What defines the look:

  1. Near-black and gray. Text is #0f0f0f, body #545454 and muted #757575, on white and #f5f5f5. [Measured]
  2. Purple for adding. Add buttons are white with a 1px light purple #c5b4f5 edge and purple #6e42e5 14px semibold text, and See all links are purple. [Measured]
  3. The system font. All text uses the device's system font stack, from 400 to 700. No web font is loaded. [Measured]
  4. 8px everything. Tiles, cards, buttons and panels use 8 (the most frequent radius by far), with 4 for small tags. [Measured]
  5. Green for time. Arrival times ("14 mins") are small green #07794c labels. [Measured]

Source for this file: the home page, the Bangalore home and the Bangalore home cleaning service page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The salon address returned a not-found page, and the mobile view of the home page opened another country's edition. Urban Company does not publish its design system. Booking and checkout need an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Purple#6e42e5, edge #c5b4f5, wash #f5f2fdAdd buttons, See all, offer panels [Measured]
Ink#0f0f0fHeadings, icons [Measured]
Body and muted#545454, #757575Descriptions and addresses [Measured]
Canvas and band#ffffff, #f5f5f5Page and service tiles [Measured]
Dividers and borders#ededed, #e3e3e3Section rules, See all edges [Measured]
Green#07794c, wash #edf7f2Arrival times, ratings [Measured]
Teal#0b5459Product labels [Measured]
Yellow#ffc247Promotion banners on mobile [Measured]
Dark chip#262626Small labels on mobile [Measured]

Typography

The system font stack only, at 400, 600 and 700. [Measured]

RoleDesktopMobileWeight
Page headline36 on 4424 on 32600 to 700 [Measured]
Service title28 on 4020 on 28700 [Measured]
Section heading20 on 2816 on 24600 [Measured]
Add label14 on 20same600 [Measured]
Body14 on 20same400 [Measured]
Small and ratings12 on 16same400 [Measured]
Timing label9same600 [Measured]

Shape and spacing

8 is the house radius for tiles, cards, buttons and panels, with 4 for tags, 18 and 20 for a few mobile cards and 200 for round avatars. [Measured] Add buttons carry 6 by 8 padding, See all 16px sides. [Measured]

Iconography and motion

Icons are filled in the ink color. [Measured] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Urban Company iOS app looks and behaves was not captured. Urban Company does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, bookings, the cart and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Purple Add buttons on each service and a purple checkout bar. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the purple, the near-black text and 8px corners with the web. Because the web already uses the system font, the app likely does too. [Inferred]

Platform: Android

How the Urban Company Android app looks and behaves was not captured. Urban Company does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, bookings, the cart and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Purple Add buttons on each service and a purple checkout bar. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the purple, the near-black text and 8px corners with the web. Because the web already uses the system font, the app likely does too. [Inferred]

Platform: Web

The home page, a city home and a service page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with the location and search, and a grid of service tiles on gray #f5f5f5 with 8px corners. Sections end in a white See all button, 48 high with an 8px corner and a 1px #e3e3e3 border. [Measured]

Main action

Expected on Web: Page-level button.

The Add button on each service: white with a light purple edge and purple semibold text, 36 high on desktop and 32 on mobile, with an 8px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Services list a rating (12px), the price and a View details text link. [Measured]

Text sizing

Expected on Web: Browser zoom.

The system font follows the visitor's settings, and sizes step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

See all buttons are 48 high. Add buttons are 32 to 36, below 44. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Filled ink icons. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not checked on the pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Using the system font makes the site read like the device it is on, while the purple keeps it recognizable. [Measured]

Cross-platform consistency

Consistent across platforms: the purple, the near-black text, the system font and 8px corners. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use purple for adding services and for links.
  • Keep text near-black on white and light gray.
  • Use the system font.
  • Give every tile, card and button an 8px corner.

Don't

  • Don't fill Add buttons solid purple. They are outlined.
  • Don't load a brand display face.
  • Don't use green for anything but timing and ratings.

Known Gaps

  • Booking, the cart, checkout and the account need an account and were not measured.
  • The salon address returned a not-found page, and the mobile view of the home page opened another country's edition, so some mobile values come from the service page only.
  • The iOS and Android apps were not captured, and Urban Company publishes no design system, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • Add buttons (32 to 36) are below the 44 and 48 touch minimums. That is the shipped size.
  • Account deletion and store policy rules were not verified.