bt-designsystem-example-2

January

19th

7:00pm

Fluid Reset

RSVP

Activity Title

Activity Description

The day we've all been waiting for

Date TBD

RSVP

What to Expect

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus mollitia enim vel, voluptatem alias, incidunt. Qui, nihil. Accusamus corporis eum necessitatibus impedit, consequuntur tempore fugit esse dolorum maiores officia voluptate atque sunt, alias unde natus, nobis amet excepturi rerum maxime odio! Fuga recusandae adipisci minus. Magni neque, rem! Eos error ullam voluptatibus, reprehenderit libero odio!

Contact Info

Aidan Zanders is a host of exceptional ability. Studies show that a vast majority of guests attending events by Aidan have been known to leave more elated than visitors to Santa's Workshop, The Lost of Continent of Atlantis, and the Fountain of Youth.

Venue Details

Order of Events

Meet the Team

Numquam quo illum laudantium mollitia velit ab!

Snacks

Animi quod architecto aperiam error fugit cum esse ratione?

Concert

Eligendi delectus, numquam ipsum.

Activity Title

Blanditiis quam qui laborum rerum.

Activity Title

Adipisci veniam, quam similique dignissimos, beatae accusamus ipsam consectetur nemo?

Contact Organizer

Add to Calendar

Colors

Themes should be creating using 6 swatches max, corresponding in principle to the definitions outlined in this section.

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

The Overlay Swatch should be the same color as the Text swatch, with an alpha value between .2 and .45

Text

rgb(37, 19, 54)

Background

rgb(242, 242, 242)

Primary

rgb(85, 67, 101)

Secondary

rgb(215, 208, 222)

Overlay

rgba(37, 19, 54, 0.35)

White

rgb(255, 255, 255)

Color Applications

It's important to consider (and test) your designs against different types of color sets, and to build in a way that respects the intended use cases of each swatch.

The day we've all been waiting for

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

Learn More

Default Colors

Example of a component built using the intended theme colors.

The day we've all been waiting for

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

Learn More

Inverted Colors

Example of a component built using the inverted theme colors.

The day we've all been waiting for

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

Learn More

Primary Block

Example of a component built using the Primary Accent as the background color.

The secondary Accent is used for text contrast.

The day we've all been waiting for

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

Learn More

Secondary Block

Example of a component built using the Secondary Accent as the background color.

The Primary Accent color is used for all text to maintain contrast.

The day we've all been waiting for

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

Learn More

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

Typographic Scale

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.

The day we've all been waiting for

Headline XL

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

The day we've all been waiting for

Headline

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

The day we've all been waiting for

Heading 1

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

The day we've all been waiting for

Heading 2

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

The day we've all been waiting for

Heading 3

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

The day we've all been waiting for

Heading 4

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

The day we've all been waiting for

Body Copy & Buttons

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

The day we've all been waiting for

Captions

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

Component Spacing

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.

Fixed Spacing Examples

cSpacing_Sf

0.5 rem

cSpacing_Mf

1 rem

cSpacing_Lf

2 rem

cSpacing_XLf

4 rem

Example Card

Using fixed spacing

Warning

The action you're about to take cannot be undone.

Relative Spacing Examples

cSpacing_Sr

cSpacing_Mr

cSpacing_Lr

cSpacing_XLr

16%

Example Card

Using relative spacing

Warning

The action you're about to take cannot be undone.

Block Spacing

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.

Fixed Spacing Examples

bSpacing_Sf

2 rem

bcSpacing_Mf

4 rem

bSpacing_Lf

8 rem

bSpacing_XLf

16 rem

Example Block

Using fixed spacing

Warning

The action you're about to take cannot be undone.

Relative Spacing Examples

bSpacing_Sr

2.5%

bSpacing_Mr

bSpacing_Lr

10%

bSpacing_XLr

20%

Example Block

Using relative spacing

Warning

The action you're about to take cannot be undone.

Advanced Design Features

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

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($text, 0) to rgba($text, 1)

Gradient 2

From rgba($button) to rgba($buttonText)