Omniyat Style Guide

Based on Client-First — Version 2

Client-First is a set of guidelines and strategies created by Finsweet to help you build Webflow websites.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

content-container

gutter-global

container-small

container-medium

container-large

padding-section-small

padding-section-medium

padding-section-large

button-group

HTML Heading Tags

HTML tags define default Heading styles.

H1

Header 1

H2

Header 2

H3

Header 3

H4

Header 4

H5

Header 5

H6

Header 6

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-x-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-caption

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-menu

text-size-counter

100

text-size-footer

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-align-left

text-align-left

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-xbold

text-weight-xbold

text-weight-bold

text-weight-bold

text-weight-semibold

text-weight-semibold

text-weight-medium

text-weight-medium

text-weight-normal

text-weight-normal

text-weight-light

text-weight-light

Text Alignments

text-align-center

text-align-center

text-align-right

text-align-right

Buttons

Button combo class system.

button

button

is-long

button

is-secondary

button

is-large

button

is-icon

button

is-icon-only

cta-close

carousel-hover-spot

Colors

Manage recurring text and background colors.

Color Palette

Black - #000000

Rich Blue - #0A0A3D

Sky Blue - #98D2DD

Sand - #DBC0A8

Gold - #A18A6B

Light Grey 70 - #E2DFDB

Light Grey 30 - #F3F1EF

White - #fffff

Text Colors

text-color-black

text-color-black

text-color-richblue

text-color-richblue

text-color-grey

text-color-grey

text-color-gold

text-color-gold

text-color-white

text-color-white

Background Colors

background-color-black

background-color-grey

background-color-white

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide-mobile

hide-desktop

hide-tablet

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

hide reset

object-fit-cover

padding-bottom-0

Gallery carousel card types

These card type styles are used to set the gallery card type styles across the site.

Wide gallery card

Lorem ipsum

Square gallery card

Lorem ipsum

Portrait gallery card

Lorem ipsum

Components

Reusable components across the site

Fullscreen CMS Carousel

Fullscreen carousel slide 1 title

This is an example of a fullscreen cms driven carousel with title and caption text

Full carousel slide 2 title

Dolor non commodi sunt dicta molestiae ratione omnis.

Full carousel slide 4 title

Dolore sunt deleniti suscipit qui blanditiis doloribus voluptas eius. Quaerat aspernatur molestiae error labore ea sunt aperiam do

Full carousel slide 3 title

Sequi autem aspernatur harum nemo asperiores quod maiores dolorum accusamus. Consequatur nulla perspiciatis molestias qui laudan

Full Screen Carousel (non-cms)

Fullscreen Non-cms Carousel

This carousel type can be duplicated and content edited in designer

Fullscreen Non-Cms Carousel slide 2

This carousel type can be duplicated and content edited in designer

PDP Overview Carousel

Double Height Living

Crafted by Foster+Partners

Architectural Excellence

VELA has been crafted by the award-winning practice Foster + Partners, the masterminds behind Apple’s California headquarters, France’s dramatic Millau Viaduct, and London’s ‘Gherkin’ tower.

Panoramic Vistas

VELA has been positioned to capture breathtaking views of Marasi Bay and the iconic Burj Khalifa amid the glittering Downtown Dubai cityscape.

Marina Residences

Marasi Bay’s Only Waterfront Arrival

Arriving at VELA is a sensory experience with layers of water features welcoming you and bold quadruple-height colonnade framing the surrounding marina vistas.

Overlooking Dubai's Skyline

Designed by Gilles & Boissier

Interiors Beyond Comparison

Parisian designer duo Gilles & Boissier have brought their signature refined design to the forefront of OMNIYAT’s properties once again.

Amenities Gallery Carousel

Cigar Lounge

ORLA beach club

Wellness Spa

Fitness studio

Yoga Studio

Cycle studio

An arrival like no other

Private residence-only cinema

Sunset lounge

Indoor lap pool

Dorchester - Card Carousel

Concierge and personal valet

Doorman and porter services

Car Care service

One-off dining events and functions

À la carte services

our story - Card Carousel

Setting benchmarks

Dubai is a global gateway and a leading landmark for innovation. As an established and trusted voice, OMNIYAT is set to be the architect of its future.

Creating legacies

Setting a new standard for luxury living, always reaching for the rare, the masterful, adding great works of art to famous skylines and creating legacies for the future.

Crafting masterpieces

OMNIYAT's crafts peerless destinations and immersive experiences that bring together location, design, innovation and service to deliver a unique experience of living.

Daring to dream

OMNIYAT is dedicated to the art of building dreams into reality: conceptualising iconic projects and realising the extraordinary

Enquire COMPONENT

Discover exclusivity

Enquire for more details.

Request a Callback

Download Brochure

ARCHIVED Components

Old component designs for archive purposes

Homepage - OLD Partners Tab Carousels

Zaha Hadid

Foster + Partners

Foster + Partners

Gilles & Boissier

Gilles & Boissier

Portia Fox

Vladimir Djurovic

Vladimir Djurovic

Rafael Viñoly

Dorchester Collection

Dorchester Collection

Gilles & Boissier

Gilles & Boissier

Superpotato

Portio Fox Design

Portio Fox Design

Lorem Ipsum

Dorchester Collection

PDP - OLD Residences TABS

Sky Palace of VELA, Dorchester Collection by OMNIYAT

Sky Palace of VELA, Dorchester Collection by OMNIYAT

Sky palace

For a life lived amongst the highest, the Sky Palace celebrates the pinnacle of design and extraordinary living experiences. Vast living spaces spread over three floors with two sparkling swimming pools, grand terraces, a private gym and majlis. Magnificent heights reveal a panoramic vista from every angle.

Penthouse of VELA, Dorchester Collection by OMNIYAT

Penthouse of VELA, Dorchester Collection by OMNIYAT

Penthouses

Starring double-height ceilings and incredible private pools, the three Penthouses marry sublime refinement with the vibrant life of the marina below. VELA’s Penthouses have a lofty sense of beauty and boldness that shapes your elegant sanctuary poised above the rest.

Sky Residences' Pool Area of VELA, Dorchester Collection by OMNIYAT

Sky Residences

Designed with magnificence in mind, the Sky Residences are beautifully light and spacious, offering inspiring views. From the interior heights of sophistication within, to the expansive terraces reaching out to the skies above, the Sky Residences bring an elevated standard to a waterfront way of life.

Sky Residences Interiors of VELA, Dorchester Collection by OMNIYAT

Sky Residences Interiors of VELA, Dorchester Collection by OMNIYAT

Sky Palace Bathroom Area of VELA, Dorchester Collection by OMNIYAT

Sky Palace Bathroom Area of VELA, Dorchester Collection by OMNIYAT

Sky Palace Bedroom Area of VELA, Dorchester Collection by OMNIYAT

Sky Palace Bedroom Area of VELA, Dorchester Collection by OMNIYAT

Marina residences

Life at the Marina Residences moves like the gentle flow of water. Here, the energy of the Marasi Marina fuels a lively pace of life that dances its own path through the promenade. For this is a new way of living in the city of Dubai, full of fresh moments that calm the mind and free the spirit.

OLD Enquire COMPONENT

Discover exclusivity

Enquire to register your interest, schedule a viewing or find out more.

Request a callback

Message on Whatsapp

Download Brochure