Colors

Theme Colors

Typeface

Montserrat

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Typography Stylings

The Omega Theme uses a modular type scale combined with varying font weights to establish a functional and visually pleasing content hierarchy. By default, Omega uses REM units to ensure that typography and general spacing remain optimized at different screen sizes and on different devices. Headers and spacing scale down from a base font size of 16px.

What is rem?
rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

Mobile Font Scaling
For tablet and mobile font sizing, we are using Fluid Typography . Using viewport units and calc(), we can have font-size (and other properties) adjust their size based on the size of the screen. So rather than always being the same size, or jumping from one size to the next at media queries, the size can be fluid.

Large title/Montserrat Bold
Maximum Size 72px/4.5rem Line Height 82px/5.125rem
Minimum Size 62px/3.875rem Line Height 72px/4.5rem

How Vexingly Quick Daft Zebras Jump

Medium title/Montserrat Bold
Maximum Size 52px/3.25rem Line Height 62px/3.875rem
Minimum Size 44px/2.75rem Line Height 54px/3.375rem

How Vexingly Quick Daft Zebras Jump

Small Title/Montserrat Bold All Caps
Maximum Size 16px/1rem Line Height 28px/1.75rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

How Vexingly Quick Daft Zebras Jump

H1/Montserrat Bold
Maximum Size 48px/3rem Line Height 56px/3.5rem
Minimum Size 38px/2.375rem Line Height 46px/2.875rem

How Vexingly Quick Daft Zebras Jump

H2/Montserrat Bold
Maximum Size 40px/2.5rem Line Height 48px/3rem
Minimum Size 36px/2.25rem Line Height 42px/2.625rem

How Vexingly Quick Daft Zebras Jump

H3/Montserrat Bold
Maximum Size 32px/2rem Line Height 40px/2.5rem
Minimum Size 28px/1.75rem Line Height 36px/2.25rem

How Vexingly Quick Daft Zebras Jump

H4/Montserrat Bold
Maximum Size 40px/2.5rem Line Height 48px/3rem
Minimum Size 36px/2.25rem Line Height 42px/2.625rem

How Vexingly Quick Daft Zebras Jump

H5/Montserrat Bold
Maximum Size 20px/1.25rem Line Height 28px/1.75rem
Minimum Size 18px/1.125rem Line Height 28px/1.75rem

How Vexingly Quick Daft Zebras Jump

H6/Montserrat Bold
Maximum Size 16px/1rem Line Height 24px/1.5rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

How Vexingly Quick Daft Zebras Jump

Lead/Montserrat Light
Maximum Size 20px/1.5rem Line Height 32px/2rem
Minimum Size 16px/1rem Line Height 24px/1.5rem

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...

Body(Base)/Montserrat Light
Maximum Size 16px/1rem Line Height 28px/1.75rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...

Unordered List/Montserrat Light
Maximum Size 16px/1rem Line Height 28px/1.75rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet

Ordered List/Montserrat Light
Maximum Size 16px/1rem Line Height 28px/1.75rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

1. Lorem ipsum dolor sit amet
   1. Lorem ipsum dolor sit amet
   2. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet
   
   

In-Line Link - Montserrat Regular
Maximum Size 16px/1rem Line Height 28px/1.75rem
Minimum Size 14px/0.875rem Line Height 24px/1.5rem

Lorem ipsum dolor sit amet

CTA Text/Montserrat Bold
Maximum Size 20px/1.25rem Line Height 32px/2rem
Minimum Size 16px/1rem Line Height 28px/1.75rem

Lorem ipsum dolor sit amet

Block Quote/Montserrat Italic
Maximum Size 20px/1.25rem Line Height 32px/2rem
Minimum Size 16px/1rem Line Height 28px/1.75rem

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Buttons + Links

Primary Buttons

Styled Links

Ghost Buttons

Card, Image, and Video Default Styles

Use this section to globally configure the default styling for both the Fancy Image, Fancy Video and all modules with Card options. Here you can control background, text, accent line, and bullet colors, along with card corners, shadow, and blur effects. The image module allows for you to control default placeholder image, overlays, corner radius, and drop shadows. The video module allows for the same controls as the image, along with settings for the play button (shape, icon color, opacity, plug, and background color).

Container Sizing Guidelines

This defines the common page containers used across the layout. The Site Container is for the page center width, and is set on fixed width website deigns where the content does not go edge to edge. Centered text container is for keeping titles/descriptions that could span the full width of the browser contained to a fixed width for optimal User Experience. And Small container which I our left/right container for 50/50 layouts

Standard Padding

Omega uses an 8px base for spacing guidelines, and have designated sizings from Extra Small to Extra Large. This should cover section padding, along with spacing between content, and within rows of the content as well.

Fancy Content Underlines

These are vectors that can be edited, or swapped for other assets. Update the maincomponent with your new SVG for quick reuse of elements. This will override any existing elements with your new defaults.