PropertyVue Design System

PropertyVue Design System mockup preview
Click to expand

PropertyVue is a map-heavy, listing-card, search-driven design system built for real estate listing and property search platforms. It uses a clean blue primary palette alongside functional greens and grays to prioritize data density without sacrificing clarity. The system is engineered for rapid filtering, comparison, and at-a-glance property evaluation.

Primary Blue#2563EB
Secondary Green#16A34A
Tertiary Gray#6B7280
Background#F9FAFB
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayRed Hat Display · 36px · Black

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

h1Red Hat Display · 30px · Bold

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

h2Red Hat Display · 24px · Bold

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

h3Red Hat Display · 20px · SemiBold

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

h4Red Hat Display · 16px · SemiBold

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

body-lgDM Sans · 18px · Regular

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

bodyDM Sans · 16px · Regular

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

body-smDM Sans · 14px · Regular

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

captionDM Sans · 12px · Medium

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

codeFira Code · 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

PropertyVue is a map-heavy, listing-card, search-driven design system built for real estate listing and property search platforms. It uses a clean blue primary palette alongside functional greens and grays to prioritize data density without sacrificing clarity. The system is engineered for rapid filtering, comparison, and at-a-glance property evaluation.

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

List

Default

Default

Checked

Indeterminate

Default

Selected

Elevation & Depth

sm
DEFAULT
md
lg

Do's & Don'ts

Do

always pair the map view with a list/card view -- users switch between both frequently.
use Blue (#2563EB) for all primary interactive elements to maintain a single action color.
show price, beds, baths, and sqft on the card surface -- these are the top-four scanning criteria.
provide skeleton loaders for listing cards, especially during map-driven searches.
use consistent card sizes in grid layouts for clean visual alignment.
ensure map pins use the Blue primary with a white center dot for maximum visibility.

Don't

hide search filters behind a toggle; keep the most common filters persistently visible
use green for anything other than price/availability signals to avoid semantic confusion
load full-resolution images in listing grids; use optimized thumbnails with lazy loading.
stack more than three filter rows without collapsing into an expandable panel
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.3 KB
Downloads 54
Copies 6
clean dashboard light modern realestate

Use with MCP

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

Don't have the MCP? Install it here