Skip to content

    Style Guide

    Ocean Guide Style
    Colors

    Primary, secondary and accent colors

    Primary
    Secondary
    Body
    Accent color 1
    Accent color 2
    Accent color 3
    Typography

    Fonts, sizes, colors, and freedom to customize everything.

    Tip: Type Scale

    Heading Example

    .h1_hero

    h1.hero heading

    <h1></h1>

    h1. heading

    <h2></h2>

    h2. heading

    <h3></h3>

    h3. heading

    <h4></h4>

    h4. heading

    <h5></h5>

    h5. heading

    <h6></h6>

    h6. heading

    Paragraph

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas diam in arcu cursus. Quam viverra orci sagittis eu. Leo a diam sollicitudin tempor.

    Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Posuere morbi leo urna molestie at.

    List unordered

    • Unordered list
    • Second element
    • Tertiary element

    List ordered

    1. Ordered list
    2. Second element
    3. Tertiary element

    Blockquote

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

    Buttons and CTA

    Use this classes in the call to actions

    Dark and light

    Use the preset that some modules have in styles.

    Wow Intro

    The awesome title

    Text modules don’t have to be simple, you can add personality to them without this being a problem.

    All blocks are customizable, add, change and choose the best for your brand.

    pexels-mikhail-nilov-8322997
    Wow Intro

    The awesome title

    Text modules don’t have to be simple, you can add personality to them without this being a problem.

    All blocks are customizable, add, change and choose the best for your brand.

    pexels-mikhail-nilov-8322997