Themes should be created using both the Light & Dark logos.

White logos are used against dark backgrounds and dark logos are used against light backgrounds, as shown.

Upload both versions in the theme, then head to the Properties tab to link each to the correlating Page Element property – Light Logo or Dark Logo.

By linking the logos to these properties, both versions will be saved within the theme so they can be utilized and easily updated across other touch points as well as in email templates.

Once the Page Element properties have been selected for each, you may hide the logo version that is not relevant to the current design.

*What about colorful logos that aren't technically "dark"?

Full color logos should also have the Dark Logo property applied as they will most often be used against light backgrounds unless otherwise specified by a client's brand guidelines.

The Overlay Swatch should be the same color as the Text swatch, with an alpha value between .1 and .45. The self-serve Global Brand Manager automatically applies this as .1 of the Text swatch but the Branded Themes themselves can be distinct from this. 

Accessibility

When picking colors for your themes, ensure an adequate contrast ratio is maintained between all color combinations. 

Use an app like Who Can Use to check your colors before shipping your theme. 

Light Logo - Used against dark backgrounds.

Option 1: Dark Logo - Used against light backgrounds.

Option 2: Dark Logo - Used against light backgrounds.

Themes should be created using a minimum of 6 swatches, corresponding in principle to the definitions outlined in this section.

The sixth swatch should be reserved for full transparency and should not be editable by the client. Brand Library should not affect the sixth swatch. 

The Overlay Swatch should be the same color as the Text swatch, with an alpha value of .1 (or 10% opacity). The self-serve Brand Library automatically applies this as .1 of the Text swatch but the Branded Themes themselves can be distinct from this.

In the Brand Library, event organizers are given the opportunity to include black and white swatches by default, and can assign them or change them as needed. Any additional unassigned swatches beyond the first four will be appended to the end of the list, after the Transparency swatch.

In order to align with Brand Library, the first swatch should always be darker than the second, even if the branding specifies dark backgrounds.

*Sixth Swatch

The sixth white swatch is not currently an accepted component of the org style guide. I still feel that it's important, for use overtop of images, but its inclusion is not currently approved. For the time being when building new themes, use the 4th swatch, the lighter accent color.

The Overlay Swatch should be the same color as the Text swatch, with an alpha value between .1 and .45. The self-serve Global Brand Manager automatically applies this as .1 of the Text swatch but the Branded Themes themselves can be distinct from this. 

Accessibility

When picking colors for your themes, ensure an adequate contrast ratio is maintained between all color combinations. 

Use an app like Who Can Use to check your colors before shipping your theme. 

Swatch 1: Dark Text /Backgrounds

Swatch 2: Light Text /Backgrounds

Swatch 3: Button Background

Swatch 4: Button Hover

Swatch 5: Translucent

Swatch 6: Transparent

rgba(0, 0, 0, 0)

1. Always follow the same color direction for swatches 1-6

2. Always apply the color white to either the seventh swatch or the last swatch in the Color Set – even if it's technically already added to the second, background color swatch*

3. Continue adding the rest of your brand colors onwards from the eighth swatch

*Why would I repeat the color white in my Color Set?

A designated white swatch helps ensure that a customer's text will remain white if the background color swatch changes.

Notice how the white swatch has been added twice - to the second background color swatch and to the last swatch of the Color Set.

In this example, only the seventh swatch includes the color white since the second background color swatch is assigned an off-white color.

Notice how the color black is repeated twice in this Color Set since it is a brand color and therefore may be used for other purposes outside of just the background color. (There is always a risk that the background color swatch may change and we wouldn't want the color black to be removed entirely from the Theme's Color Set.)

Proper care needs to be taken to apply the colors in a systematic way when building out your themes, in order maximize the efficiency of the org style guide.

As a general rule, button text should match the background color of the block that the button is in.

Specific mapping can be visualized below each of the example blocks to the right. 

The Primary swatch should correspond to the desired button background color, and the secondary swatch should correspond to the button text color. 

Default Colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et consequatur illo unde nobis nostrum porro inventore voluptatibus tenetur, omnis illum, corporis fuga ea? Eaque.

Tinted Colors

Example of a component that utilizes the tinting effect (block background = overlay color)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et consequatur illo unde nobis nostrum porro inventore voluptatibus tenetur, omnis illum, corporis fuga ea? Eaque.

Inverted Colors

Example of a component built using the inverted theme colors.

 Dignissimos et consequatur illo unde nobis nostrum porro inventore voluptatibus tenetur, omnis illum, corporis fuga ea? Eaque.

Primary Block

Copy on a primary background color, should be set in the theme background color. 

Calls to action should be set in the secondary accent color.

Dignissimos et consequatur illo unde nobis nostrum porro inventore voluptatibus tenetur, omnis illum, corporis fuga ea? Eaque.

Secondary Block

All copy on a secondary background color, should be set in the theme text color. 

Calls to action should be set in the primary accent color.

Image Background

If an image is used as a background, a color mask with the overlay swatch applied should appear between the image and text, and all text and buttons should be set in the secondary accent color [at least until we get approval for a fixed white swatch.]

Swatch 1: Dark Text /Backgrounds

Swatch 2: Light Text /Backgrounds

Swatch 3: Button

Swatch 4: Button Hover

Swatch 5: Translucent

Swatch 6: Transparent

rgba(0, 0, 0, 0)

Fonts need to be added in a specific order that maps to certain element types on a page in order to integrate with the organization style guide. 

Please make sure that you're maintaining the proper order and hierarchy when applying fonts to elements in your theme.

If a particular font is used for more than one heading type (e.g. sub-headlines and body copy, it can be helpful to add the font to the palette for both instances so that the corrects fonts always apply to new blocks as intended.

Headings

Subheadings

Copy

Call to Actions

Fonts need to be added in a specific order that maps to certain element types on a page in order to integrate with the organization style guide. 

Please make sure that you're maintaining the proper order and hierarchy when applying fonts to elements in your theme.

If a particular font is used for more than one heading type (e.g. sub-headlines and body copy, it can be helpful to add the font to the palette for both instances so that the corrects fonts always apply to new blocks as intended.

Headings

Subheadings

Copy

Call to Actions

The styles to the left outline the typographic scale to be used for the creation of new branded and public themes. 

The scale is in the minor third (5:6) using a root-font size of 18px for desktop and tablet, and 16px for mobile. See the resources section for more information on Modular Scales in typogrpahy.

These type styles have line heights defined, but I encourage you to take time and review the typefaces you're using in your theme build and assign optimized line heights.

Headline XL

4.837 rem | 1.2 | 0
2.986 rem | 1.2 | 0

Headline

3.359 rem | 1.2 | 0
2.986 rem | 1.2 | 0

Heading 1

2.333 rem | 1.2 | 0
2.074 rem | 1.2 | 0

Heading 2

1.944 rem | 1.2 | 0
1.728 rem | 1.2 | 0

Heading 3

1.620 rem | 1.2 | 0
1.440 rem | 1.2 | 0 

Heading 4

1.350 rem | 1.2 | 0
1.200 rem | 1.2 | 0

Body Copy & Buttons

1.125 rem | 1.5 | 0
1.000 rem | 1.5 | 0

Captions

0.938 rem | 1.3 | 0
0.833 rem | 1.3 | 0

Component spacing refers to the spacing between elements inside of a component. 

An example of this would be the relationships between text elements, or the amount of padding inside of a hub card. 

Component spacing is different from block spacing, and should be focused on a smaller scale. 

Spacing between elements should be set in a fixed unit like REMs, and spacing around elements can be set in a relative unit like percent [%].

The shaded blocks to the right are meant to visualize the amount of space that the different values take up.

Block spacing refers to the spacing inside of a block, and should be measured horizontally in percent [%] and vertically in % or REMs depending on the desired effect. 

Spacing in percentages is always measured in relation to the width of the element or it's parent container, so using % to control vertical spacing can yield undesired results on larger screens.

Block spacing refers to the spacing inside of a block, and should be measured horizontally in percent [%] and vertically in % or REMs depending on the desired effect. 

What are Advanced Design Features [ADF]? 

ADFs are anything that requires either advanced knowledge of the CMS, or the implementation of custom CSS or Javascript through the developer tools. 

Blocks built using ADFs should not rely on external CSS or JS to affect the color of on-page elements, so that they are not broken by the Org Style Sheet.

In addition, custom JS or CSS needs to be embedded onto the page in a way that it will not break when child events or themes are saved out from the original theme file. 

Gradients can be used in your themes as long as they are tied to color values defined by your theme. 

Please refer to this confluence article for documentation around the implementation of this technique. 

Gradient 1

From rgba($primary) to rgba($secondary)

Gradient 2

From rgba($text) to rgba($overlay)

Some helpful resources for additional reading to help understand the principles outlined in this document.

What to learn more about design systems? Here are some books on the subject that are worth checking out.