Orizon Webflow Template

Style Guide

The Style Guide is set to help you understand the foundations of this template such as design principles, structure, reusable components and styles.

Typography

Typography is all about the different text styles you use in your design, like headings, body text, captions, and labels. It covers everything from fonts and sizes to weights and line heights, making sure everything looks consistent and is easy to read.

Typeface

Inter: Google fonts

Aa

Regular

Aa

Medium

Aa

Semi Bold

Aa Bb Cc Dd Ee Ff Gg Hh li Jj Kk LI Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ( ) _ +

Heading classes

Headings establish a clear visual order and sort content, they get attention plus direct users through the page structure. They change in size, thickness along with importance. The largest is the H1 and the smallest is the H6.

Heading Style H1

Heading H1

Heading Style H2

Heading 2

Heading Style H3

Heading 3

Heading Style H4

Heading 4

Heading Style H5

Heading 5

Heading Style H6

Heading 6

Text classes

Paragraphs form the main body of text they offer readability and clarity. Line spacing should be right, plus line length should feel good - these elements provide a pleasant reading experience.

Text styles

Text Style Large

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

Text Style Main

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

Text Style Small

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

Text Style Eyebrow

Eyebrow Sample text

Text alignment

Text Align Left

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

Text Align Center

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

Text Align Right

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

Text weights

Text Weight Regular

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

Text Weight Medium

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

Text Weight Semi Bold

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

Rich Text styles

The Rich Text Element in Webflow is a useful block - it manages a lot of text or mixed content, such as paragraphs, headings, pictures, quotes along with videos. This serves well for making blog posts, articles, help files, or other parts of a website with much content.

Rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Quote - 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.

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Colors

Colors can be used to create contrast, establish a visual hierarchy, express branding, and evoke emotional responses. Ultimately the use of color in web design should be guided by the goals of the product and the target audience, and tested to ensure it is effective and usable.

Primary colors

The core color palette combines neutral tones with a bold blue accent to create visual hierarchy and focus across UI and content.

Colors are applied with purpose to guide attention, support readability, and highlight important elements.

‍Blue (500) is used for actions like buttons, links.
‍Neutral (300) is the default for body text.
‍White is used for headings.
‍Neutral (950) provides the background foundation.
‍Neutral (900) provides the surface foundation.

Blue 500

#3b82f6

White

#ffffff

Neutral 300

#cacfd8

Neutral 950

#0e121b

Neutral 900

#181b25

Background color

Color Elevation

Text colors

Text Color Inherit

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

Text Color Faded

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

Text Color Primary

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

Text Color Gradient

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

Components

Buttons

Guiding users to take action and helping them navigate smoothly through the interface. Designed for clarity and accessibility, buttons should be visually distinct, clearly labeled, and sized appropriately for easy clicking.

Button Main

Button Primary

Button Secondary

Form

Form are essential UI elements that allow users to enter and submit information, playing a key role in forms, searches, and data collection across the interface.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Accordion

Accordion components are valuable for organizing content in a compact, user-friendly manner, allowing users to expand or collapse sections as needed.

Question text goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Icons

Icon used to providing visual cues that simplify communication, and create a more intuitive experience. Used to represent actions, features, or sections of content, icons help users quickly understand functionality without relying solely on text.

Structure classes

Spacing creates visual order, improves readability, and ensures that components maintain a cohesive and balanced structure, regardless of screen size or resolution.

Sections

Padding Top Tiny

Padding Bottom Tiny

Padding Top Small

Padding Bottom Small

Padding Top Main

Padding Bottom Main

Padding Top Large

Padding Bottom Large

Padding Top None

Padding Bottom None

Padding Top Hero

Containers

Section Container Main

Section Container Large

Section Container Full Width

Grid

Grid 1 Cols

Grid 2 Cols

Grid 3 Cols

Grid 4 Cols

Grid 12 Cols

Spacing

Spaces

Spacing can refer to the distance between different elements, such as buttons, text, or images, as well as the padding within elements, such as the space between text and the edge of a button.

spacing-none

spacing-2xs

spacing-xs

spacing-sm

spacing-md

spacing-lg

spacing-xl

spacing-2xl

spacing-3xl

spacing-4xl

spacing-5xl

spacing-6xl

spacing-7xl

spacing-8xl

spacing-9xl

Miscellaneous

Display properties

Hide

Tablet Hide

Landscape Hide

Mobile Hide