MarbellaStudio
Start a project

Press G to toggle the grid

Quiet luxury,
systematised.

Colour drawn from limestone, olive leaf, terracotta and night. A high-contrast serif in conversation with a precise grotesk. A 12-column grid, and motion that is slow, weighted and never decorative for its own sake.

Eight tones.
One accent.

Clay is used sparingly — the cursor, active states, hover fills. Everything else is light and shade.

Bone

--bone · #F3EEE6

Page background

Linen

--linen · #E9E2D6

Raised surface

Sand

--sand · #D8CDBB

Placeholder, hairline

Stone

--stone · #8A8377

Muted text

Olive

--olive · #5D5F48

Quiet accent

Clay

--clay · #A26A4C

Warm accent, cursor

Ink 2

--ink-2 · #26241F

Dark surface

Ink

--ink · #1B1A17

Text, dark sections

Newsreader
& Hanken Grotesk.

Display set in Newsreader Light at optical size 72, tracked tight. Interface and body in Hanken Grotesk. Labels in uppercase at 0.22em tracking, echoing the original wordmark.

Display
--fs-display
clamp(3.6rem, 12.5vw, 13.5rem) / .86 / −0.045em
Marbella
H1
--fs-h1
clamp(3rem, 7.6vw, 8rem) / .92
Interior design.
H2
--fs-h2
clamp(2.3rem, 4.8vw, 5rem) / 1
Before and after.
H3
--fs-h3
clamp(1.55rem, 2.3vw, 2.4rem) / 1.08
A living room with layers of comfort.
Lead
--fs-lead
clamp(1.2rem, 1.65vw, 1.7rem) / 1.38
Warm textures, thoughtful lighting and spaces that bring everyday life together.
Body
--fs-body
1rem — 1.0625rem / 1.65
Our English-speaking team supports international homeowners, with clear design reviews and an agreed furnishing scope.
Label
--fs-label
.6875rem / 0.22em / uppercase
Interior design · Costa del Sol

Twelve columns.
Generous margins.

12 columns on desktop, 4 on mobile. Margin clamp(20px, 4.2vw, 72px); gutter clamp(14px, 1.8vw, 32px); max width 1920px. Layouts lean asymmetric — offset starts, staggered tops.

123456789101112

Slow in.
Weighted out.

Expo-out for reveals, expo-in-out for curtains and masks. Durations step 0.35 / 0.7 / 1.1 / 1.6s. Everything respects prefers-reduced-motion.

Expo out

--ease-out · reveals, hovers

Hover to play

Expo in-out

--ease-in-out · curtains, menu

Hover to play

Soft

--ease-soft · micro

Hover to play

Linear

scrub · parallax, marquee

Hover to play

Text animation

  • Hero chars rise1.5s · 0.028 stagger
  • Line-masked headings1.3s · per line 0.09
  • Statement word light-upscrub
  • Footer wordmark1.6s · 0.05

Image animation

  • Clip reveal + de-zoom1.6s / 2s
  • Parallax±7% scrub
  • Hero settle1.3 → 1 · 2.4s
  • Hover zoom1.05 · 1.4s

Navigation & transitions

  • Page curtain (2 panels)0.8s · 0.12 offset
  • Menu mask + links1s · 0.06
  • Header hide on scroll0.7s
  • Loader (first visit)≈ 3.9s

Buttons, links
& fields.

Primary buttonSecondary buttonText linkChip