--- 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 | Role | Value | Where | |------|-------|-------| | Purple | `#6e42e5`, edge `#c5b4f5`, wash `#f5f2fd` | Add buttons, See all, offer panels [Measured] | | Ink | `#0f0f0f` | Headings, icons [Measured] | | Body and muted | `#545454`, `#757575` | Descriptions and addresses [Measured] | | Canvas and band | `#ffffff`, `#f5f5f5` | Page and service tiles [Measured] | | Dividers and borders | `#ededed`, `#e3e3e3` | Section rules, See all edges [Measured] | | Green | `#07794c`, wash `#edf7f2` | Arrival times, ratings [Measured] | | Teal | `#0b5459` | Product labels [Measured] | | Yellow | `#ffc247` | Promotion banners on mobile [Measured] | | Dark chip | `#262626` | Small labels on mobile [Measured] | ### Typography The system font stack only, at 400, 600 and 700. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Page headline | 36 on 44 | 24 on 32 | 600 to 700 [Measured] | | Service title | 28 on 40 | 20 on 28 | 700 [Measured] | | Section heading | 20 on 28 | 16 on 24 | 600 [Measured] | | Add label | 14 on 20 | same | 600 [Measured] | | Body | 14 on 20 | same | 400 [Measured] | | Small and ratings | 12 on 16 | same | 400 [Measured] | | Timing label | 9 | same | 600 [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.