Skip to content
    Ocean

    Style Guide

    Ocean Guide Style
    Primary#002855
    Secondary#00B2A9
    Background#ffffff
    Accent 1#A50034
    Accent 2#D9D9D6
    Accent 3#000000

    Typography

    Primary FontInter
    Primary Font
    Secondary FontInter
    Secondary Font
    Test Styles
    H1 Hero Font: Inter | Color: #FFF | Size: 65px | 200
    H1 Heading Font: Inter | Color: | Size: 48px | 700
    H2 Heading Font: Inter | Color: #000000 | Size: 39px | 300
    H3 Heading Font: Inter | Color: #000000 | Size: 30px | 500
    H4 Heading Font: Inter | Color: #000000 | Size: 25px | 500
    H5 Heading Font: Inter | Color: #000000 | Size: 20px | 500
    H6 Heading Font: Inter | Color: #000000 | Size: 16px | 500
    Paragraph, list and more

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh sem, tincidunt in odio nec, vehicula malesuada velit. Suspendisse convallis, orci in ornare laoreet, orci odio mollis quam, et laoreet tellus dui id erat. Mauris non diam eu leo volutpat accumsan.

    Quisque lacus ex, auctor nec egestas in, hendrerit vel lectus. Mauris quis enim pellentesque, gravida augue ac, varius neque.

    • Praesent non lacus rhoncus, tempus tellus ut, placerat nisl.
    • Sed vitae nibh cursus, condimentum est eu, tincidunt felis.
    • Nullam posuere metus eu neque pretium sollicitudin.
    • Vivamus facilisis nisi sed varius aliquam.
    • Aliquam et felis at sem bibendum dictum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Color Scheme

    Dark

    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

    Light

    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

    Corners

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae.

    Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Sociis natoque penatibus et magnis dis parturient.

    Nibh tellus molestie nunc non blandit massa. A condimentum vitae sapien pellentesque habitant morbi.

    Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ut placerat orci nulla pellentesque dignissim enim. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros.

    Main Image
    Button Styles
    PrimaryLarge
    Learn more
    .button .button--large
    Primary HoverLarge
    Learn more
    PrimaryRegular
    Learn more
    .button .button--large
    Primary HoverRegular
    Learn more
    PrimarySmall
    Learn more
    .button .button--small
    Primary HoverSmall
    Learn more
    SecondaryLarge
    Learn more
    .button .button--large
    Secondary HoverLarge
    Learn more
    .button .button--secondary .button--large
    SecondaryRegular
    Learn more
    .button .button--large
    Secondary HoverRegular
    Learn more
    .button .button--secondary
    SecondarySmall
    Learn more
    .button .button--small
    Secondary HoverSmall
    Learn more
    .button .button--secondary .button--small
    Inputs

    Media Source is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below to say how you would like us to contact you:

    In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.

    You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.