Condominium · Light

Commons

A light, photographic condo-management SaaS: architecture-and-nature cards advance in numbered steps, and an aerial photo stays still while glass app screens slide over it.

Palette

--bg#F8F8F6
main off-white
--ink#141414
text, black buttons, dark sections and footer
--ink-2#6E6E6A
supporting text
--accent#0B7A40
green (darkened from #0D914C to 5.4:1 with white text): pricing section, notice bar, logo square, "confirmed" status
--surface#FFFFFF
app cards, form, panels
--line#E4E3DF
thin borders and dividers
--dark-2#1E1E1E
cards inside the dark block

Typography

Display: geometric grotesque, light/regular weight (300–400), normal case, tracking -0.04em, line-height 1.0; clamp(36px, 4vw, 60px), 2-line titles — suggestions: Manrope 300 / Satoshi Light (Fontshare).
Body: same family 13–15px, 400, gray.
Support/labels: 10–11px in glass tags over photos and black chips; "01/04" counter with a large light number and a small fraction.
Treatments: giant light statistic numbers with a tiny unit; huge footer wordmark in white on black with the green square icon.

Sections

Nav — logo (small square + name) on the left; 4 centered links; "Sign in" and a black pill "try free" button on the right.
Hero with carousel — 2-line title on the left and a short phrase on the right; carousel of photo cards (architecture + greenery) with a feature tag on top, a floating glass app card ("booking confirmed") and a large caption over the photo; 01/04 counter with caption; square arrows (one white, one black).
Fixed aerial photo — full-bleed aerial photo of the condo that stays still (sticky) with a white title; screens slide up over it: manager panel (desktop dashboard) and resident app (white card with a phone and a quote).
Numbers — row of 3 large light stats with captions, short text on the left.
White label — rounded dark block: tag, centered title, paragraph, link; fan of 5 phones with different color themes.
Pricing — thin green strip with a notice for property managers; large green block with per-unit price in light weight.
FAQ — 2-line title on the left, 6-row accordion on the right.
CTA with form — photo of a building at sunset; white card with a form (name, condo, units, role as a segmented control) and a black button.
Footer — rounded black block with a phrase, button, link columns with thumbnails and a giant wordmark.

Motion and interaction

Step carousel: click on the arrows (or scroll) → cards slide one step (translateX of 1 card + gap) in ~700ms ease-out; counter switches 01→02 with a vertical slide; the active card grows slightly.
Glass app card: follows the active photo card with a delay (40ms parallax), appears with fade + y 8px.
Fixed aerial photo: CSS position: sticky — the photo stays fixed while the white panels rise over it with native scrolling (no GSAP).
Counters: on enter → numbers climb from 0 with ease-out over 1.2s.
Phone fan: on enter → phones open into a fan (rotation -12° to 12°) from the center.
Accordion: "+" rotates, answer opens in 300ms.
Buttons: hover darkens/lightens 8%, arrow shifts 2px.

Components

Black pill button: #141414, white 12px text, → arrow.
Square arrow: 32px, 4px radius, one white with a border and one black.
Photo card: 14px radius, 4:5 photo, glass tag at the top left, 22px light white title + 11px caption at the base with a dark gradient.
Floating app card: white/glass, 10px radius, 3 rows with a green status dot.
App panel: white, 16px radius, shadow 0 30px 80px -30px rgba(0,0,0,.35).
Stat: 56px light number + 12px unit + 11px caption.
FAQ row: 14px question, thin "+", --line divider.
Segmented control: 3 options in a pill, active one black.