Styles for Caring Ways

For use on website and campaign platform

Images

When using a full-width background image as a design element (shown above), include a semi-transparent overlay that utilizes the primary blue color with an opacity of 70%. The color code for the overlay is RGBA(33,66,142,0.7). The color for all text within the background image element is white (#FFFFFF) and follows the same size properties of the main heading tags.


Container Elements

For container elements that are not full-width, the maximum width of the site container is 980 pixels with an overall padding of 30 pixels.


Heading One Style

The H1 tag uses the Raleway “SemiBold” style with a font-weight of 600. The desktop font size is 42 pixels with a line-height of 52 pixels and a bottom margin of 10 pixels. On mobile, the font size is 36 pixels with a line-height of 40 pixels. The color code is #212428e.

Heading Two Style

The H2 tag uses the Raleway “SemiBold” style with a font-weight of 600. The desktop font size is 36 pixels with a line-height of 40 pixels and a bottom margin of 10 pixels. On mobile, the font size is 24 pixels with a line-height of 30 pixels. The color code is #1EADCC.

Heading Three Style

The H3 tag uses the Raleway “SemiBold” style with a font-weight of 600. The desktop font size is 24 pixels with a line-height of 24 pixels and a bottom margin of 10 pixels. On mobile, the font size is 20 pixels with a line-height of 24 pixels. The color code is #1EADCC.


Body Copy

The site-wide font family is Raleway from Google Fonts. Body copy utilizes the “Regular” style with a font-weight of 400. Font size is 18 pixels with a line-height of 30 pixels. The color code is #A2AEB3. Paragraph elements within the body copy have a margin space of 20 pixels between elements. Link elements are underlined with a color code of #21428E. When hovered, the color changes to #1EADCC.

Dividing Line

When using a horizontal rule to separate body copy, the line should be 1 pixel thick with a color of #CCCCCC. The line should have a top and bottom margin of 38 pixels.


Button Styles

Button-style links use the “SemiBold” font style of Raleway. The text is in all caps with a font size of 14 pixels and a line-height of 24 pixels. The letter-spacing attribute is 0.02rem. The main button element has a border radius of 25 pixels with a padding declaration of 13px 29px 13px 29px. There is a margin space of 30 pixels above and below the button element. The background color is #FCCB3E with a text color of #21428E. On hover, the background color is #1EADCC with a text color of #FFFFFF.

Button Example

Lists

Unordered Lists

  • List item
  • List item
  • List item

Ordered Lists

  1. List item
  2. List item
  3. List item

Both ordered and unordered lists follow the CSS style of the body copy. They utilize the “Regular” font style with a font-weight of 400. Font size is 18 pixels with a line-height of 26 pixels. The color code is #A2AEB3. List elements indent from the left with a padding of 24 pixels and have a bottom margin of 20 pixels.

Lists With Arrows

  • List item
  • List item
  • List item

Lists with arrows utilize the “Regular” font style with a font-weight of 400. Font size is 18 pixels with a line-height of 26 pixels. The color code is #A2AEB3. List containers indent from the left with a padding of 24 pixels and have a bottom margin of 20 pixels. The circle containers for the icon are CSS-based with a width and height of 30 pixels and a 50% border radius. The background color is #21428e. The icons in are from the open-source FontAwesome. The icon font size is 16 pixels with a hex color of #FFFFFF.


Form elements

In general, form elements follow the same style parameters. The font matches the body copy style declarations: font style is ‘”Regular” with a font-weight of 400, font size is 18 pixels, and line-height is 26 pixels with a #A2AEB3 color code. Input text fields have a padding declaration of 0 1em 0 1em and a height declaration of 36 pixels. Text area fields have a padding declaration of 1em 1em 1em 1em with a max-height declaration of 185 pixels. The elements have a 1 pixel border with a #A2AEB3 color declaration. Submit buttons follow the same style as hyperlink buttons and are centered relative to the form.

Note: Previous brand guides included a purple swoosh graphic that has been removed from the updated brand guide to create a cleaner, more modern look.

Thank you for your message. It has been sent.
There was an error trying to send your message. Please try again later.