UrbanLoft Design System

UrbanLoft Design System mockup preview
Click to expand

UrbanLoft is a modern, urban, and architecturally inspired design system for commercial real estate and urban property platforms. Its monochromatic foundation of charcoal and concrete is punctuated by precise blue accents, reflecting the clean lines of contemporary architecture. The system emphasizes structure, data clarity, and professional presentation.

Primary Charcoal#1C1917
Secondary Concrete#9CA3AF
Tertiary Accent Blue#2563EB
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplaySpace Grotesk · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1Space Grotesk · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2Space Grotesk · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Space Grotesk · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H4Space Grotesk · 16px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LGInter · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SMInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

UrbanLoft is a modern, urban, and architecturally inspired design system for commercial real estate and urban property platforms. Its monochromatic foundation of charcoal and concrete is punctuated by precise blue accents, reflecting the clean lines of contemporary architecture. The system emphasizes structure, data clarity, and professional presentation.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterFilter ActiveStatus SuccessStatus WarningStatus Error

Elevation & Depth

sm
DEFAULT
md
lg

Do's & Don'ts

Do

Use the Charcoal + White contrast as the primary visual rhythm; Accent Blue is reserved for interactive elements only.
Lean on clean grid layouts that echo architectural floor plans and structured data tables.
Use subtle radius (4px) consistently; sharper corners reinforce the modern, urban identity.
Use uppercase chip labels with tracking for a polished, institutional feel.
Include high-quality architectural photography with minimal filters.
Ensure data tables for lease terms and financials use JetBrains Mono for tabular numerals.

Don't

Introduce warm or playful colors -- UrbanLoft is strictly professional and architectural.
Use decorative fonts or rounded display type; Space Grotesk's geometric precision is intentional.
Clutter property detail pages; use progressive disclosure and tabbed sections.
Use heavy drop shadows; the subtle elevation system is deliberate.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.1 KB
Downloads 0
clean dashboard modern professional realestate

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/urbanloft and implement it in my code

Don't have the MCP? Install it here