Refto
ALRE

ALRE

American Landmark Real Estate (ALRE) is a full-service real estate firm specializing in multifamily and mixed-use development, construction, and management.

GridScrolling AnimationArchitectureBig Background VideoLightCleanReal Estate
3.0
14
Visits
Visit

Available Pages

Home

Version History

Design Analysis

ALRE Home design analysis

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty. Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation....

Key Takeaways

  • Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
  • Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.
  • Use copy blocks and CTAs to support the place narrative, not to overwhelm it.
  • Favor architecture, interiors, landscapes, and lifestyle scenes with strong cropping discipline.
  • Use large-format imagery or video-like hero framing before relying on UI decoration.
  • Motion libraries detected in capture: gsap, Lenis, Three.js. Treat them as sequence scaffolding rather than decoration.

Overview

  • Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
  • Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.
  • Use copy blocks and CTAs to support the place narrative, not to overwhelm it.

Image Direction

  • Favor architecture, interiors, landscapes, and lifestyle scenes with strong cropping discipline.
  • Use large-format imagery or video-like hero framing before relying on UI decoration.

Entry & Arrival Motion

  • Motion libraries detected in capture: gsap, Lenis, Three.js. Treat them as sequence scaffolding rather than decoration.
  • Keep arrival motion purposeful and short so the shell remains legible in its resting state.

Colors

  • Base the shell on FFFFFF and keep 1B1B1B as the primary reading color.
  • Use 2F3A44 as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let F2F4F5 and D7DEE3 separate secondary surfaces without introducing noisy ornament.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Architectural Real Estate Marketing

A restrained property-marketing system that uses white space, blue-slate anchors, and large rounded image blocks to signal quiet premium confidence.

spatial, premium, and lifestyle-led

Primary mode: lightreal estate marketingmotion-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
spatial, premium, and lifestyle-led
Density
3
Variance
3
Motion
3
Signals
primary background #FFFFFF · primary action #2F3A44 · display font Haas · body font Haas

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Primary
#2F3A44
Secondary
#FFFFFF
Neutral
#FFFFFF
Surface
#F2F4F5
On Surface
#1B1B1B
Usage rules
Keep #2F3A44 reserved for intentional emphasis.
Use #F2F4F5 and #D7DEE3 to separate layers without over-framing them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
14px
card
24px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Haas
assertive display sans
Body
Haas
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Let the page breathe with large media moments and measured transitions into text and utility modules.
Use a small number of strong section types rather than many widget variants.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#2F3A44
Text
#FFFFFF
Border
none
Radius
999px
Padding
0 18px
Min height
38px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
500
Specimen label
Partner with LANDMARK
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.08)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.18)
Radius
999px
Padding
0 14px
Min height
32px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
300
Specimen label
Home
Cards default
Portfolio Property
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1B1B1B
Border
1px solid rgba(27,27,27,0.06)
Radius
14px
Padding
18px
Min width
280px
Shadow
none
Specimen label
Portfolio Property
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Height
26px
Active text
#FFFFFF
Item padding
0 0 2.8px
Item radius
0px
Specimen label
Portfolio
Inputs default
Base Attributes
Background
#33414E
Text
#FFFFFF
Placeholder color
rgba(17,17,17,0.45)
Border
none
Border bottom
1px solid rgba(255,255,255,0.18)
Radius
0px
Padding
0 0 10px 0
Min height
40px
Font family
"Inter", system-ui, sans-serif
Font size
13px
Placeholder
First Name
Specimen label
First Name

Motion system

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Libraries
  • -
    gsap
  • -
    Lenis
  • -
    Three.js
Role
narrative scaffolding
Rules
  • -
    Motion should reveal sequence, not create constant distraction.
  • -
    Every animated state should still land in a clean readable resting frame.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.