Design system

A compact reference for the local single-property landing preview. The sample listing and photo pairing are fictional; this page documents the shared interface styles, not verified property data.

Color roles

Pagecolor.surface.canvas · #FFFFFF
Subtle surfacecolor.surface.placeholder · #F5F5F5
Primary textcolor.content.primary · #111111
Secondary textcolor.content.secondary · #525252
Muted textcolor.content.muted · #666666
Bordercolor.border.default · #E5E5E5
Email actioncolor.action.primary · #C52228
Email hovercolor.action.primary-hover · #A61B20
Email activecolor.action.primary-active · #8F171B
Disabled surfacecolor.action.disabled-surface · #E5E5E5
Focus ringcolor.focus.ring · #111111
Focus separatorcolor.focus.separator · #FFFFFF

One typeface, clear reading

AKNP Home

Heading 1 · Arial bold · 40/48 desktop · 32/38 mobile

Room to settle in

Heading 2 · Arial bold · 30/38 desktop · 26/34 mobile

Room for everyday life

Heading 3 · Arial bold · 22/30

Body copy stays calm and readable across both languages.

Body · Arial regular · 18/28

At a glance

Label · Arial bold · 14/20

Email action · Arial bold · 20/28

Layout and spacing

4
8
12
16
24
32
40
48
64
80

4px base · 1200px maximum content width · 12 columns desktop, 8 tablet, 4 mobile · 24/20/16px gutters · 4px controls and 8px cards · 64px desktop / 40px mobile section rhythm.

Component states and patterns

Email action states

Photo treatment

A Mexican-American family arriving at a home.A Black American family arriving at a home.A white American family arriving at a home.

Three generated family move-in photos lead the page. Interior photos remain static and do not open at a larger size.

Property facts

Bedrooms
2
Bathrooms
1.5
Area
950 sq ft

FAQ row

Is this home available?

Availability can change. Email to confirm this home is still available.

Focus and interaction

Keyboard focus uses a 3px black ring with 2px offset and a white separator over dark surfaces. Controls target at least 44 × 44px. Listing and family photos are static and do not open in an enlarged view. Contact actions use email only.

Return to listing preview