Style guide

Brand foundations and custom block samples for Defenders Action Fund C4. Select the outer Group in Canvas to copy this entire guide onto another page.

Colors

Primary

Yellow #FFCC00

Secondary

Black #2D2926

Accent

Blue #00BBDC

Accent secondary

Green #0EA784

Typography — headings

TEXT-8XL — The quick brown fox

TEXT-7XL — The quick brown fox

TEXT-6XL — The quick brown fox

TEXT-5XL — The quick brown fox

TEXT-4XL — The quick brown fox

TEXT-3XL — The quick brown fox

TEXT-2XL — The quick brown fox

TEXT-XL — The quick brown fox

TEXT-LG — The quick brown fox

TEXT-BASE — The quick brown fox

TEXT-SM — The quick brown fox

TEXT-XS — The quick brown fox

Typography — body text

lead — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

default (base) — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

text-xl — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

text-lg — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

text-sm — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

text-xs — Defenders of Wildlife Action Fund works to protect wildlife and wild places across America.

Text colors

Heading color: default

Heading color: primary

Heading color: muted

Heading color: accent

Heading color: accent-secondary

Body text color: default

Body text color: primary

Body text color: accent-secondary

Accent bar sample

Uppercase black heading

Buttons

Variants

Yellow / white bar Yellow / black bar White / black bar Link style

Sizes (primary-black)

 Small
Medium
Large

On dark surface

Primary Inverted Link

Badges

Primary badge
Secondary badge

Section backgrounds

No background (default)

Sample content on this surface.

Muted

Sample content on this surface.

Primary

Sample content on this surface.

Secondary

Sample content on this surface.

Accent

Sample content on this surface.

Accent secondary

Sample content on this surface.

Components

Sample instances of custom blocks with lorem ipsum. Media is attached when an image exists in the library.

Hero CTA

placeholder

Lorem ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Take action

Vision banner

Our vision

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Learn more

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Org callout

Lorem ipsum dolor sit amet

501(c)(4)

Organization A

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.

501(c)(3)

Organization B

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Visit example.org

Value list

How we are different

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dedicated solely to conservation

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Focused on legislative action

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Grounded in science and policy

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Icon cards

Protect habitat

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Defend wildlife

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Build coalitions

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Cards & teasers

placeholder

Image card heading

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

placeholder

Article teaser title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Read more
placeholder
New

Featured card heading

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured action

placeholder
Featured Action

Lorem ipsum dolor sit amet consectetur

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.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sign the petition

Accordion

Image + text

placeholder

Image and text block

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Section 50/50 split

Left column

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.

Right column

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Newsletter signup

Legal disclaimer