# Urbansim Design System

> High-contrast architectural precision meets slate-toned technical depth, anchored by sharp geometry and geometric sans-serif typography.

**Source:** https://urbansim.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Urbansim utilizes a high-contrast foundation of pure white (#ffffff) and absolute black (#000000), punctuated by a signature muted teal-slate (#335861). The system is strictly geometric, rejecting rounded corners (0px radius) in favor of sharp, architectural edges that mirror urban planning blueprints. Typography pairs the technical, wide-stanced Acumin Pro for massive display headlines with Poppins for light-weight, legible body copy. Layouts use large, monochromatic surface blocks to create section rhythm, often alternating between white, black, and slate canvases.

## Signature DNA
1. **Zero-Radius Geometry** (Every component, from buttons to large surface containers, uses a strict 0px border radius, reinforcing a precise, structural aesthetic observed across all analyzed pages.)
2. **Slate-Teal Immersion** (The use of #335861 as a full-bleed section background creates a "technical dark mode" that differentiates the brand from standard SaaS grays.)
3. **Acumin-Display Hierarchy** (Massive 68px headlines in Acumin Pro 500 create a bold, authoritative entry point that dominates the hero sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary canvas, text on dark surfaces, button text | 59 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Footer background, primary text, primary button background | 39 | 0.8 | Computed Style |
| `{color.stone}` | `#c7c6c2` | Subtle section backgrounds, secondary text | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.slate-primary}` | `#335861` | Primary brand accent, large surface backgrounds | 8 | 0.6 | Computed Style |
| `{color.slate-light}` | `#546f76` | Secondary surface background (decorative_only) | 8 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Acumin Pro | 500 | Display Headlines | Archivo | Adobe Fonts |
| Poppins | 300, 500 | Body, UI Labels, Buttons | Poppins (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 68px | 83.58px | normal | 500 | Hero H1 | `h1.preScale.scaleIn` |
| `{text.body}` | 16px | 28.8px | normal | 300 | Standard prose | `article#sections` |
| `{text.ui-label}` | 14px | normal | 0.28px | 500 | Button labels | `a.list-item-content__button` |
| `{text.nav-link}` | 16px | normal | normal | 500 | Header navigation | `nav.header-nav-list` |

### Principles
1. **Display weight is fixed at 500.** Acumin Pro provides enough visual mass at large sizes without requiring a bold weight.
2. **Body copy uses Light (300).** This creates a high-contrast, airy feel against the heavy headlines.
3. **UI Labels use Medium (500).** Interactive elements are distinguished by weight rather than color or radius.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 4 |
| `{space.sm}` | 11px | 3 |
| `{space.md}` | 18px | 3 |
| `{space.lg}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | All buttons, cards, and sections | 83 occurrences across all pages |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | `0px 0px 0px 0px` | All UI components | 4 occurrences (shadow-less system) |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., Log In, Get Started)
**Pages observed:** `urbansim.com`, `urbansim.com/about`
**Spec:** 
- Background: `{color.black}` (#000000)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sharp}` (0px)
- Padding: 10.7px 17.8px
- Typography: `{text.ui-label}` (14px / 500)

#### Slate Surface
**Role:** High-impact content sectioning
**Pages observed:** `urbansim.com`, `urbansim.com/about`
**Spec:** 
- Background: `{color.slate-primary}` (#335861)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sharp}` (0px)

### Tier 2: Patterns

#### Navigation Header
**Role:** Global site navigation
**Pages observed:** All
**Spec:** 
- Background: `{color.white}` (#ffffff)
- Text: `{color.black}` (#000000)
- Height: Not captured in source
- Link Typography: 16px / 500

#### Global Footer
**Role:** Site-wide information and links
**Pages observed:** All
**Spec:** 
- Background: `{color.black}` (#000000)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sharp}` (0px)

### Tier 3: Surface-specific

#### Light Surface
**Role:** Standard content block
**Pages observed:** `urbansim.com`, `urbansim.com/about`
**Spec:** 
- Background: `{color.white}` (#ffffff)
- Text: `{color.black}` (#000000)
- Border: 0px

#### Muted Surface
**Role:** Secondary content or background variation
**Pages observed:** `urbansim.com/about`
**Spec:** 
- Background: `{color.stone}` (#c7c6c2)
- Text: `{color.black}` (#000000)

## Layout
| Property | Value |
|---|---|
| Max Width | Not captured in source |
| Section Padding | Large vertical padding (observed in screenshots) |
| Grid | Single-column centered for text; multi-column for logo grids |

## Imagery & decoration
- **Aerial Photography:** Uses desaturated or high-contrast satellite/drone imagery of urban environments as hero backgrounds.
- **Logo Grids:** Partner/Client logos are displayed in a monochromatic (white) strip against dark backgrounds.
- **3D Diagrams:** Technical isometric urban models with grayscale shading.

## Do's
- Use `{radius.sharp}` (0px) for all interactive and container elements.
- Set display headlines in Acumin Pro at 68px for hero sections.
- Use `{color.slate-primary}` (#335861) for full-width section backgrounds to create visual depth.
- Maintain Poppins weight at 300 for long-form body text.
- Use absolute black (#000000) for primary buttons on light backgrounds.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px radius. **Reason:** The brand identity is architectural and structural.
- **Wrong:** Using Poppins for H1 headlines. **Right:** Acumin Pro. **Reason:** Acumin provides the necessary technical authority.
- **Wrong:** Adding drop shadows to cards. **Right:** Flat surfaces. **Reason:** The system relies on color blocking rather than elevation.
- Do not use sub-brand colors (if they existed) as primary section backgrounds; stick to the parent Slate (#335861).

## Quick start

```css
/* CSS Variables */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-slate: #335861;
  --color-stone: #c7c6c2;
  --font-display: "acumin-pro", sans-serif;
  --font-body: "Poppins", sans-serif;
  --radius-sharp: 0px;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "foundation": {
      "white": { "value": "#ffffff" },
      "black": { "value": "#000000" }
    },
    "accent": {
      "slate": { "value": "#335861" }
    }
  },
  "radius": {
    "sharp": { "value": "0px" }
  }
}
```

## Known gaps
- Mobile-specific font scaling was not explicitly captured in the typography scale.
- Exact container max-width was not present in the evidence.
- Hover and Active states for buttons were not captured in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://urbansim.com | Desktop 1440 | 2026-06-06 |
| About | https://urbansim.com/about | Desktop 1440 | 2026-06-06 |
| Pricing | https://urbansim.com/pricing | Desktop 1440 | 2026-06-06 |