web design · branding

Lumen Greens

Brand mark, UI kit and responsive home pages for a luxury housing project.

Role
Web design and branding
Made for
Desktop and phone
Includes
Brand identity and a UI kit
Delivered as
A 19-slide case study
Lumen Greens / Home · Desktop
The home page opening on the view
The home page on a phone

overview

A brand and a website, designed together.

Brand mark, UI kit and responsive home pages for a luxury housing project, presented as a 19-slide case study.

The home page moves through an overview, the residences, floor plans, the master plan, amenities, a gallery, the location and a site-visit form.

  • 01Brand identity
  • 02UI kit
  • 03Desktop pages
  • 04Mobile pages

brand

A mark about light and openness.

The Aperture mark, logo versions, a colour palette, the Outfit typeface and interface samples, on one board.

Lumen Greens / Brand identity
The brand identity on one board

ui kit

Tokens first, then every control in every state.

Lumen Greens / UI kit · Foundations
Colour tokens and the type scale
Lumen Greens / UI kit · Controls
Buttons in every state

desktop

The home page, section by section.

One long page that moves from the view to the homes, the plans, the amenities and the way to get there.

Lumen Greens / Home · Desktop 1440
The home page from the hero to the residences

Scroll inside the window

plans and places

Floor plans, the master plan and the way there.

Floor plans
A floor plan viewer
Location
A map drawn in the brand’s colours
Master plan
The master plan on a navy band
Amenities
Amenities as a photo mosaic

mobile

The same story, built for thumbs.

Home
Floor plans
Amenities
Location
Site visit form