Brush

Brushes are svg illustrations used to decorate pages and highlight content, while conveying a human touch.

Wave

Waves represent our strides and constant progress in the search for a cure for T1D. They can be used as accents over images, or as background graphics (see Container).

Example of a wave 4 brush behind a block quote

Wave 1
Wave 2
Wave 3
Wave 4
Wave 5
Code Copied
Copy Code
<svg class="spirit-brush spirit-brush--wave1" aria-hidden="true">
    <use xlink:href="/brushes/spirit-brushes.svg#wave1">
    </use>
</svg>

Painted Edge

Adding painted edges to a container creates a branded color band with rough edges simulating the stroke of a paintbrush. It is used to draw a user’s attention to a section of the page containing important information.

Example of a container masked by painted edges

Painted Edge - Top
Painted Edge - Bottom
Code Copied
Copy Code
<svg class="spirit-brush spirit-brush--painted-edge-top" aria-hidden="true">
    <use xlink:href="/brushes/spirit-brushes.svg#painted-edge-top">
    </use>
</svg>
<svg class="spirit-brush spirit-brush--painted-edge-bottom" aria-hidden="true">
    <use xlink:href="/brushes/spirit-brushes.svg#painted-edge-bottom">
    </use>
</svg>

Guidelines

Use When

  • Use brushes sparingly, and in a meaningful way.
  • Use brushes as supportive elements to the content they elevate.
  • Do not distract or overwhelm users.
  • Use wave backgrounds and painted brushes to tell stories and connect with our audience by evoking the human spirit.

Code Reference

Class Applies to Outcome

.spirit-container__wave-bg

Child container of .spirit-container__inner, peer to the container’s content

Displays container holding a spirit wave svg.

.spirit-container__wave-bg--[wave]

.spirit-container__wave-bg

Displays wave svg based on the wave number. Use --wave1, --wave2, --wave3, --wave4, --wave5

.spirit-container__inner[--painted-edge-position]

.spirit-container__inner

Adjusts spirit container styles for where a painted edge will be used. Use --painted-edge-both, --painted-edge-top, --painted-edge-bottom

.spirit-container__painted-edge[-position]

Container holding painted edge contents within .spirit-container__inner, peer to the container’s content

Applies painted edge wrapper styles and controls width and height. Will be inside spirit-container__inner either as first or last element depending if top or bottom. Use -top, or -bottom.