Style Guide

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore  in reprehenderit  in voluptate magna aliqua.

Shadow Default

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Primary Blue -  #0F8FED
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

bg-light__primary

bg-light__onPrimary

bg-light__primaryContainer

bg-light__onPrimaryContainer

bg-light__secondary

bg-light__onSecondary

bg-light__secondaryContainer

bg-light__onSecondaryContainer

bg-light__tertiary

bg-light__onTertiary

bg-light__tertiaryContainer

bg-light__onTertiaryContainer

bg-light__error

bg-light__onError

bg-light__errorContainer

bg-light__onErrorContainer

bg-light__background

bg-light__onBackground

bg-light__surface

bg-light__onSurface

bg-light__surfaceVariant

bg-light__onSurfaceVariant

bg-light__outline

bg-light__outlineVariant

bg-light__shadow

bg-light__scrim

bg-light__inverseSurface

bg-light__inverseOnSurface

bg-light__inversePrimary

bg-light__success

bg-light__successContainer

bg-light__onSuccess

bg-light__onSuccessContainer

bg-light__warning

bg-light__warningContainer

bg-light__onWarning

bg-light__onWarningContainer

bg-light__info

bg-light__infoContainer

bg-light__onInfo

bg-light__onInfoContainer

bg-light__primaryFixed

bg-light__primaryFixedDim

bg-light__onPrimaryFixed

bg-light__onPrimaryFixedVariant

bg-light__secondaryFixed

bg-light__secondaryFixedDim

bg-light__onSecondaryFixed

bg-light__onSecondaryFixedVariant

bg-light__tertiaryFixed

bg-light__tertiaryFixedDim

bg-light__onTertiaryFixed

bg-light__onTertiaryFixedVariant

bg-light__surfaceDim

bg-light__surfaceBright

bg-light__surfaceContainerLowest

bg-light__surfaceContainerLow

bg-light__surfaceContainer

bg-light__surfaceContainerHigh

bg-light__surfaceContainerHighest

bg-dark__primary

bg-dark__onPrimary

bg-dark__primaryContainer

bg-dark__onPrimaryContainer

bg-dark__secondary

bg-dark__onSecondary

bg-dark__secondaryContainer

bg-dark__onSecondaryContainer

bg-dark__tertiary

bg-dark__onTertiary

bg-dark__tertiaryContainer

bg-dark__onTertiaryContainer

bg-dark__error

bg-dark__onError

bg-dark__errorContainer

bg-dark__onErrorContainer

bg-dark__background

bg-dark__onBackground

bg-dark__surface

bg-dark__onSurface

bg-dark__surfaceVariant

bg-dark__onSurfaceVariant

bg-dark__outline

bg-dark__outlineVariant

bg-dark__shadow

bg-dark__scrim

bg-dark__inverseSurface

bg-dark__inverseOnSurface

bg-dark__inversePrimary

bg-dark__success

bg-dark__successContainer

bg-dark__onSuccess

bg-dark__onSuccessContainer

bg-dark__warning

bg-dark__warningContainer

bg-dark__onWarning

bg-dark__onWarningContainer

bg-dark__info

bg-dark__infoContainer

bg-dark__onInfo

bg-dark__onInfoContainer

bg-dark__primaryFixed

bg-dark__primaryFixedDim

bg-dark__onPrimaryFixed

bg-dark__onPrimaryFixedVariant

bg-dark__secondaryFixed

bg-dark__secondaryFixedDim

bg-dark__onSecondaryFixed

bg-dark__onSecondaryFixedVariant

bg-dark__tertiaryFixed

bg-dark__tertiaryFixedDim

bg-dark__onTertiaryFixed

bg-dark__onTertiaryFixedVariant

bg-dark__surfaceDim

bg-dark__surfaceBright

bg-dark__surfaceContainerLowest

bg-dark__surfaceContainerLow

bg-dark__surfaceContainer

bg-dark__surfaceContainerHigh

bg-dark__surfaceContainerHighest

Black  -  #1C1E21
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Charcoal  -  #3F444C
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
White -  #F7F9F9
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Secondary  - Yellow -  #FBBE4B
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Secondary  -  Green -  #4BBE71
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Secondary  -  Yellow Hover -  #FA5B68
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Secondary  -  Green Hover -  #3BA55F
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Typography Styles

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Heading One

72 px
110%
Regular

Heading Two

60px
130%
Regular

Heading Three

48px
120%
Thin

Heading Four

32px
110%
Medium
Heading Five
28px
120%
Bold
Heading six
26px
150%
Medium

Body Large

24px
140%
Medium

Body Medium

20px
116%
Regular

Body Small

16px
160%
Regular

Elements

These are all the Element that are used in this project. Editing them will reflect the changes on all the other Elements of the project too.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text Elements (RTE)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • testing bullets
  • testing bullets
  1. testing numbers
  2. tesing numbers

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Block Quote

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Dear [Donor's Name],As we approach the end of another remarkable year, we want to take a moment to express our heartfelt gratitude for your unwavering support. Thanks to you, [Nonprofit Name] has been able to [mention specific accomplishments or programs]. Your generosity has touched countless lives and made a lasting impact on our community.As we look ahead to the coming year, we have ambitious plans to [briefly mention upcoming initiatives or projects]. To bring these visions to life, we need your continued support. Your donation, no matter the size, will play a vital role in helping us achieve our goals.Would you donate to [support specific action. Example: provide meals for families struggling this holiday season.]?[Insert link to donation page]Your support means the world to us, and together, we can continue to make a positive impact on the lives of those we serve. Thank you for being a part of our [Nonprofit Name] family!Wishing you a joyful holiday season filled with love and warmth.[Your Name][Your Title][Nonprofit Name][Contact Information]

This is some text

code
Block Quote

Symbols

Features that get you results

Transform how your teams collaborate. Brainstorm together, develop strategies and build ads that guarantee customers.

Live Collaboration
1M+ Templates
Searchable Assets
Unlimited Reviewers
Notifications
Responsive Design
Multiple media support
Version history

Join our growing team of doers.

99.9% teams love Collab. Not convinced you’re one?We love a challenge.

99.9% teams love Collab. Not convinced you’re one?We love a challenge.

Unseen
United Way
Ronald McDonald House Charities
Hubbs Seaworld Research Institute
Habitat for Humanity
Friends of the Children

Hear what teams around the world saying about Collab.

I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Collab helps them do that.
Robert Mayar  -  Founder of Airbnb
I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Collab helps them do that.
Robert Mayar  -  Founder of Airbnb
I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Collab helps them do that.
Robert Mayar  -  Founder of Airbnb

No more siloed data

DonorDock integrates with all your favorite tools
Zapier logo
paypal logo
QuickBooks logo

99.9% teams love Collab. Not convinced you’re one?We love a challenge.