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`.