Style Guide

This is the style guide and class/widget reference for the CL dawn retheme. Brand guide can be viewed here (though the color swatches and font instructions should be replicated here at some point): https://drive.google.com/drive/u/0/folders/1fRtuwY3M3KgZ1RZ9TBZbgT1PCqJZ3gQd

Please edit this page and/or template and keep it up to date as you create new blocks and styles. 


Color Palette

Navy

#003764
00 55 100

For headings, icons and small backgrounds

Blue

#58afc0
88 175 12

Only for backgrounds and objects that need to stand out

White

#ffffff
255 255 255

Main background color; For text on navy and blue backgrounds

Gray

#f3f3f3
243 243 243

Body text on white and gray backgrounds

Dark Gray

#626262
98 98 98

Background color when on top of white background; For line dividers


Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5 
Heading 6

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu nisi pretium, viverra libero id, ullamcorper urna. Sed lectus orci, condimentum ut tincidunt at, pharetra consequat arcu. Nam dignissim augue ut ipsum convallis, id ornare dui auctor. Duis eu facilisis tortor, maximus finibus metus. Curabitur finibus ultrices metus non varius.

Phasellus rhoncus vitae nisl non commodo. Nulla vehicula ut nisi eget porta. Praesent id placerat elit, in iaculis eros. Ut quis hendrerit felis, vitae sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque placerat magna sed enim tempor, vitae tristique tellus congue. Phasellus sit amet sapien neque. Phasellus porta ex libero, porta volutpat massa molestie eu. Nulla

  • bullet
  • list
  • item
  1. numbered
  2. list
  3. item

Blockquote. orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu nisi pretium, viverra libero id, ullamcorper urna. Sed lectus orci, condimentum ut tincidunt at, pharetra consequat arcu. Nam dignissim augue ut ipsum convallis, id ornare dui auctor. Duis eu facilisis tortor, maximus finibus metus. Curabitur finibus ultrices metus non varius.Phasellus rhoncus vitae nisl non commodo. Nulla vehicula ut nisi eget porta.

Praesent id placerat elit, in iaculis eros. Ut quis hendrerit felis, vitae sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque placerat magna sed enim tempor, vitae tristique tellus congue. Phasellus sit amet sapien neque. Phasellus porta ex libero, porta volutpat massa molestie eu. Nulla


Still needed: Demo of grid. Current/default breakpoints:

  • 1200
  • max: 989, min: 990
  • max: 749, min: 750

Image with text

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

Button label
  • Column

    Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

    Shop Now
  • Column

    Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

    Shop Now
  • Column

    Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

    Shop Now

Talk about your brand

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

Button label

Video