CMS Style Guide

---

Colors

• Red = Containers > Code

Available Headers

Here is an overview of Headers used in the CMS:

Header 1 - Roboto Slab Bold: 32px

All pages will have one Header 1 used. This style is reserved for the Main tab > Header content area where we manage the text for the Yellow banner at the top of pages (e.g. as shown on this page -- CMS Style Guide). The default alignment is Flush Left.

Header 2 - Roboto Slab Regular: 26px

For the first or primary header on the page, use Headers > Page Header in the Page Content block. This is the first headline style to be used in the Body copy. It is equivalent to a Heading 2 tag in our old CMS. Default style is flush left.

Header 3 - Roboto Slab Regular: 22px

For the second-level header on a page -- essentially a section header within body copy to separate major sections of content -- use Headers > Section Header. This is the second headline or sub-headline style to use for the Body copy. This is equivalent to a Heading 3 tag in our old CMS. Default style is flush left.

Header 4 - Roboto Slab Regular: 18px

For the third-level header on a page -- essentially the final bold treatment for separate paragraphs within a section -- use Headers > Paragraph Header. This is the third headline style to use in the Body copy, and is typically used for headers within long sections of copy in a block of content using a Section Header. This is equivalent to a Header 4 tag. Default style is flush left.

---

Retired Headers

Here is an overview of Headers that will be retired and unavailable for use in the CMS.

Heading 5 - Proxima Nova Regular: 16px

This style was previously used for fine print that appears on the page, and usually applied to the Page tab, or used for select anchor tags on scrolling pages. The spacing around this style is tighter than the other headings.

Heading 6 - Proxima Nova Regular: 12px

This style was previously used sparingly -- only when necessary -- for the smallest copy on the page, usually applied to the Page tab. As with Heading 5, the spacing around this style is tighter than the other headings.

---

Body Copy

Here is an overview of body copy styles used in our CMS:

Paragraph - Proxima Nova Regular 18px (Headers > Paragraph Header)

For body copy, use Blocks > Normal to apply the paragraph style. Within this style, you may use the following to create emphasis for certain words or phrases:

• Bold: use the 'B' icon on the tool bar or <strong>bold</strong>
• Italics: use the 'I' icon on the tool bar or <em>italics</em>
• Underline: not recommended (no icon available on tool bar), however, when essential to have underlined copy in a paragraph,  you can use keyboard shortcut (Control + U) or apply HTML code <u>underline</u> in the source.

---

Bulleted Lists

Here is an overview of the bulleted list formats available in our CMS:

Unordered lists - Mixed Style (default)

• Top level (filled circle)
  • Second level (unfilled circle)
    • Third level (filled square)

Unordered lists - Unfilled Circle (all levels)

• Top level
  • Second level
    • Third level

Unordered lists - Filled Square (all levels)

• Top level
  • Second level
    • Third level

Ordered lists - Numerical Style with Numbered Subsets (default)

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Lowercase Letters with Lowercase Subsets

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Lowercase Greek Letters with Lowercase Greek Letter Subsets

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Lowercase Roman Numeral Style with

Lowercase Roman Numeral Subsets

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Capital Letters with Capital Letter Subsets

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Uppercase Roman Numeral Style with

Uppercase Roman Numeral Subsets

1. Top level
   1. Top level sub-bullet
2. Second level
   1. Second level sub-bullet
3. Third level
   1. Third level sub-bullet

Ordered lists - Mixed Format (must format each bullet individually; avoid use if possible, however if attempting to match an offline document, may have to make adjustments in the source code for the proper number/letter sequence)

1. Top level
   1. Second level sub-bullet
      1. Third level sub-bullet
         1. Fourth level sub-bullet
            1. Fifth level sub-bullet
               1. Sixth level sub-bullet
                  1. Seventh level sub-bullet

---

Diacritical Marks

Here is a list of Hawaiian words that should include diacritical marks when posting content in our CMS. Words will be added as needed:

• Hawaiʻi
• ʻEwa
• Hālawa
• Koʻolau
• Kauaʻi
• Nuʻuanu
• Oʻahu
• Waiʻanae
• Waiheʻe

---

---