Refto
Canal Club Wickside

Canal Club Wickside

Canal Club is a collection of rental apartments and townhouses spread across the Wickside development in East London.

Scrolling AnimationLarge TypeIllustrativeHorizontal ScrollingCustom CursorAnimationArchitectureHospitalityBig Background VideoReal Estate
5.0
2
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Canal Club Wickside 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, ScrollTrigger. 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, ScrollTrigger. 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 E5DCD5 and keep 10162D as the primary reading color.
  • Use 54453F as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let FFD3E0 and C9E7B5 separate secondary surfaces without introducing noisy ornament.

Design.md

System Overview

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

Playful Property Lifestyle Showcase

A high-theatre residential marketing system with masking preloader motion, oversized wordmark geometry, and a pastel-coded lifestyle navigation.

spatial, premium, and lifestyle-led

Primary mode: lightproperty 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 #E5DCD5 · primary action #54453F · display font Px Grotesk · body font Founders Grotesk

Colors

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

Palette colors
Primary
#54453F
Secondary
#FFFFFF
Neutral
#E5DCD5
Surface
#FFD3E0
On Surface
#10162D
Usage rules
Keep #54453F reserved for intentional emphasis.
Use #FFD3E0 and #C9E7B5 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
Px Grotesk
assertive display sans
Body
Founders Grotesk
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
#F692BD
Text
#2B0F24
Border
none
Radius
0px
Padding
0 22px
Min height
44px
Shadow
none
Font family
"Founders Grotesk", system-ui, sans-serif
Font size
15px
Font weight
600
Letter spacing
0.02em
Text transform
uppercase
Specimen label
BOOK A VIEWING
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#54453F
Border
1px solid rgba(84,69,63,0.18)
Radius
0px
Padding
0 10px
Min height
26px
Shadow
none
Font family
"Founders Grotesk", system-ui, sans-serif
Font size
11px
Font weight
600
Letter spacing
0.03em
Text transform
uppercase
Specimen label
VIEW BROCHURE IN 3D
Cards default
1 BEDROOM APARTMENT
Prices from £2,380 PCM
Base Attributes
Background
#FFFFFF
Text
#2B2130
Border
1px solid #DCCFC7
Radius
0px
Padding
18px
Min width
280px
Shadow
none
Font family
"Founders Grotesk", system-ui, sans-serif
Specimen label
1 BEDROOM APARTMENT
Specimen supporting text
Prices from £2,380 PCM
Navigation desktop
ENQUIRE NOWVIEW BROCHUREENG
Base Attributes
Background
transparent
Text
#54453F
Height
34px
Font family
"Founders Grotesk", system-ui, sans-serif
Font size
11px
Font weight
600
Letter spacing
0.03em
Text transform
uppercase
Active text
#54453F
Item padding
0 10px
Item radius
0px
Specimen items
["ENQUIRE NOW","VIEW BROCHURE","ENG"]
Specimen label
MENU
Inputs default
Base Attributes
Background
#FFFFFF
Text
#54453F
Placeholder color
rgba(84,69,63,0.45)
Border
1px solid #DCCFC7
Radius
0px
Padding
0 14px
Min height
42px
Font family
"Founders Grotesk", system-ui, sans-serif
Font size
13px
Specimen label
Search availability

Motion system

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

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

Spatial layers

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

Role
supportive
Rules
  • -
    Treat spatial layers as supportive atmosphere or proof framing.
  • -
    Maintain full legibility when the 3D layer is absent.

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.