Omniyat Style Guide
Based on Client-First — Version 2Client-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.
Heading Styles
Heading classes when typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look.
Sample text
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.
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 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.
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.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
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 on your website. 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 on your website. 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 on your website. 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 on your website. Sample text helps you understand how real text may look on your website.
100
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
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
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 Alignments
Colors
Manage recurring text and background colors.
Color Palette
Text Colors
Background Colors
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Gallery carousel card types
These card type styles are used to set the gallery card type styles across the site.
Wide gallery card
Square gallery card
Portrait gallery card
Components
Reusable components across the site
Fullscreen CMS Carousel
Full Screen Carousel (non-cms)
PDP Overview Carousel
Amenities Gallery Carousel
صالة السيجار
نادي "أورلا" الشاطئي
المنتجع الصحي
استوديو للياقة
استوديو لليوغا
استوديو للدرّاجات الثابتة
تجربة وصول لا مثيل لها
صالة سينما خصيصاً لشاغلي الوحدات السكنية
صالة لمشاهدة غروب الشمس
مسبح داخلي مستطيل التصميم (lap pool)
Dorchester - Card Carousel
our story - Card Carousel
إرساء معايير جديدة
بناء إرث راسخ
إبداع روائع متميّزة
نجرؤ على الحلم
Enquire COMPONENT
ARCHIVED Components
Old component designs for archive purposes
Homepage - OLD Partners Tab Carousels
