All work

(Case study 09/11)

Quattro Spaces

Brand guidelines · Mockups · Website · studioMOrph

Quattro has been building offices in Gurgaon since 2013. Its brand had to feel like its buildings: solid, quiet and well made.

Role
Brand and website design
Client
Quattro Spaces, Gurugram
Platform
Web, desktop and mobile
Deliverables
Brand guidelines, mockups, website, UI components
Designed at
studioMOrph ↗
Quattro Spaces website hero: an office tower at dusk
The briefOverview

When the buildings are this good, the design gets out of the way.

Quattro develops and runs commercial offices in Gurugram. The work covered the whole brand: a guidelines book, its applications and a new website.

Full-bleed building photography, light oversized type and a slate-and-orange palette carry all three. The website reads like an argument: proof first, then the properties, then the promise of one lease for everything.

My part(4)
  1. 01

    Brand guidelines

    The brand book: architecture, logo, colour, type, icons, layout and tone.

  2. 02

    Mockups

    39 applications, from stationery and apparel to billboards and branded walls.

  3. 03

    Website

    The home page and every section, designed for desktop and mobile.

  4. 04

    UI components

    Property cards with location tags, counters, service rows and calls to action.

Brand guidelines · 46 pages

A complete brand book for a landlord

Built from Quattro's brand and marketing strategy: the architecture across Quattro, Quattrospaces and Quattrocare, the logo and its twin orange bars, the Moon Dust, Dark Azure and Atomic Orange palette, Gotham, an amenity icon library, layout, tone and vocabulary. The last pages put it to work.

Quattro brand guidelines, page 1 of 46
Quattro brand guidelines, page 2 of 46
Quattro brand guidelines, page 3 of 46
Quattro brand guidelines, page 4 of 46
Quattro brand guidelines, page 5 of 46
Quattro brand guidelines, page 6 of 46
Quattro brand guidelines, page 7 of 46
Quattro brand guidelines, page 8 of 46
Quattro brand guidelines, page 9 of 46
Quattro brand guidelines, page 10 of 46
Quattro brand guidelines, page 11 of 46
Quattro brand guidelines, page 12 of 46
Quattro brand guidelines, page 13 of 46
Quattro brand guidelines, page 14 of 46
Quattro brand guidelines, page 15 of 46
Quattro brand guidelines, page 16 of 46
Quattro brand guidelines, page 17 of 46
Quattro brand guidelines, page 18 of 46
Quattro brand guidelines, page 19 of 46
Quattro brand guidelines, page 20 of 46
Quattro brand guidelines, page 21 of 46
Quattro brand guidelines, page 22 of 46
Quattro brand guidelines, page 23 of 46
Quattro brand guidelines, page 24 of 46
Quattro brand guidelines, page 25 of 46
Quattro brand guidelines, page 26 of 46
Quattro brand guidelines, page 27 of 46
Quattro brand guidelines, page 28 of 46
Quattro brand guidelines, page 29 of 46
Quattro brand guidelines, page 30 of 46
Quattro brand guidelines, page 31 of 46
Quattro brand guidelines, page 32 of 46
Quattro brand guidelines, page 33 of 46
Quattro brand guidelines, page 34 of 46
Quattro brand guidelines, page 35 of 46
Quattro brand guidelines, page 36 of 46
Quattro brand guidelines, page 37 of 46
Quattro brand guidelines, page 38 of 46
Quattro brand guidelines, page 39 of 46
Quattro brand guidelines, page 40 of 46
Quattro brand guidelines, page 41 of 46
Quattro brand guidelines, page 42 of 46
Quattro brand guidelines, page 43 of 46
Quattro brand guidelines, page 44 of 46
Quattro brand guidelines, page 45 of 46
Quattro brand guidelines, page 46 of 46
0146

Mockups

From a business card to a billboard

Every mockup carries the twin orange bars, the palette and Gotham, laid out to the rules in the book.

Stationery07

Business card
Business card
Envelope
Envelope
Envelopes, set
Envelopes, set
Mailer
Mailer
Mailer, open
Mailer, open
Brand book
Brand book
Brand book, in hand
Brand book, in hand

ID and apparel06

ID card
ID card
Lanyard
Lanyard
Lanyard, detail
Lanyard, detail
Polo shirt
Polo shirt
Cap
Cap
Cap, side
Cap, side

Print06

Poster
Poster
Poster, framed
Poster, framed
Posters, series
Posters, series
Stickers
Stickers
Sticker
Sticker
Tags
Tags

Outdoor09

Billboard
Billboard
Corner billboard
Corner billboard
Street hoarding
Street hoarding
Urban billboard
Urban billboard
Site fence
Site fence
Site fence, close
Site fence, close
Site fence, run
Site fence, run
Event tent
Event tent
Event tent, front
Event tent, front

Spaces03

Branded wall
Branded wall
Branded wall, lounge
Branded wall, lounge
Branded wall, café
Branded wall, café

Merchandise08

Mug
Mug
Bottle
Bottle
Tote bag
Tote bag
Coffee cup
Coffee cup
Box
Box
Tumbler
Tumbler
Tumbler, pair
Tumbler, pair
Tumbler, detail
Tumbler, detail

Website

quattrospaces.com, live

Scroll inside the window to use the real site, and switch to mobile to see it at phone width.

quattrospaces.com

quattrospaces.comOpen in a new tab ↗

Loading the live site…

Home page · section by section

Proof, then place, then promise

The home page reads top to bottom as an argument: who Quattro is, the numbers behind it, the buildings, and why one lease covers everything.

Hero: corporate office space in Gurugram
About: developing and operating since 2013
Proof: 250+ clients, 550+ spaces delivered
A 60-day turnaround, then featured properties
Property: Quattro 63, with location and type tags
Property: Quattro UNO
Property: Quattro Tech Park
Why Quattro: everything under one lease
Craft, care and flexibility
Footer: locations, updates and contact
0110

On mobile

The same calm, under your thumb

Stacked counters, full-height building cards and a menu within easy reach.

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Next case study10/11 studioMOrph The two versions of the studioMOrph website side by side, dark and light

(Hire me)

Need something like Quattro Spaces for your company? Tell me what you're working on.

Hire Me