Interface Lab

Real Estate Websitev1.0 Published

1.5K

Real Estate Website Design SystemReal Estate Website establishes a open grid system for marketing landing page. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.

Typography

Heading systemInter / 46px / 600 / - / -Body systemInter / 14px / 400 / - / -Inter

LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09

Colors

Primary#FFFFFF

40% usage signal

Secondary#101513

20% usage signal

Tertiary#DFE8EF

20% usage signal

Neutral#9AB48B

20% usage signal

linear-gradient(180deg,#dfe8ef 0 46%,#9ab48b 46%)

Layout

LayoutGridWidthFull BleedGridStrongFramingOpen

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

18px14pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

14px18px20px24px30px

Elevation & Depth

Depth is communicated through surfaces, borders, shadows, and blur treatments.

Reusable shadowsReusable shadows / Gradient surfaces

Surface sampleOpen

SurfaceOpenBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px

Shapes

Shapes define the radius family for cards, inputs, tags, and supporting surfaces.

10pxradius-112pxradius-218pxradius-324pxradius-4

Card surfaceInput fieldStatus pill