Example Header

Style Guide Basics

Primary Colors

Gridwise Blue
#023F5E
#02354E
#022D43
#012537
Gridwise Teal
#369395
#6AB4B9
#57ABB0
#4AA1A5
Gridwise Baby Blue
#F0F7F7
#E6EFEF
#DBE7E7
#CFDCDC

Headlines

This is an example of a header (H1)

Font: Raleway SemiBold -- 42px | 39px | 36px | Color: #023F5E

This is an example of a header (H2)

Font: Raleway SemiBold -- 36px | 33px | 30px | Color: #023F5E

This is an example of a header (H3)

Font: Raleway SemiBold -- 24px | 24px | 24px | Color: #023F5E

This is an example of a header (H4)

Font: Raleway SemiBold -- 22px | 22px | 22px | Color: #023F5E

This is an example of a header (H5)

Font: Raleway SemiBold -- 20px | 20px | 20px | Color: #023F5E

This is an example of a header (H6)

Font: Raleway SemiBold -- 18px | 18px | 18px | Color: #023F5E

This is an example of a Body

Font: Raleway Medium -- 16px | 16px | 16px | Color: #717679

This is an example call to action (Button)

Font: Raleway Bold -- 13px | 13px | 13px | Color: #023F5E

Body Copy

Text Editor - Default Widget
Text Editor Class | gridwise2k24-internal-main-content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. This is an example of a link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Font: Raleway Medium -- 16px | 16px | 16px | Color: #717679

Unordered List

Text Editor - Default Widget
Text Editor Class | gridwise2k24-internal-main-content

This is a paragraph before an unnumbered list. Note that the spacing between a paragraph and a list before or after that is hard to tune in a user-style sheet. You can’t guess which paragraphs are logically related to a list, e.g. as a “list”.

  • This is an example of a bulleted list.
  • This is an example of a bulleted list.
  • This is an example of a bulleted list.
  • This is an example of a bulleted list.
    • Quisque consequat eros est, at commodo luctus ex tincidunt vitae non erat ipsum.
    • Nullam nunc purus, consequat dapibus vitae tristique ac, pulvinar eget ante.
  • This is an example of a bulleted list.
  • This is an example of a bulleted list.
Font: Raleway Medium -- 16px | 16px | 16px | Color: #717679

Ordered list

Text Editor - Default Widget
Text Editor Class | gridwise2k24-internal-main-content

This is a paragraph before a numbered list (ol). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can’t guess which paragraphs are logically related to a list, e.g. as a “list header”.

  1. This is an example of a bulleted list
  2. This is an example of a bulleted list
    1. Sub bullet list
    2. Sub bullet list
      1. Sub bullet list
      2. Sub bullet list
      3. Sub bullet list
    3. Sub bullet list
  3. This is an example of a bulleted list
  4. This is an example of a bulleted list
  5. This is an example of a bulleted list
  6. This is an example of a bulleted list
Font: Raleway Medium -- 16px | 16px | 16px | Color: #717679

Buttons

Button Primary | Light Background | Global Widget
Class | button-primary
Button Secondary | Dark Background | Global Widget
Class | button-secondary
Button Tertiary | Dark Background | Global Widget
Class | button-tertiary
Button Quaternary | Dark Background | Global Widget
Class | button-quaternary