Style Guide

Auto updated with JavaScript

Colors

Set all colors in Advanced Themer “Color Pallets” 

Black Text
WhiteText
..HEX..
..VAR..

Primary

Primary Colour should be the most dominant / Brand color

Below are 6 light and 6 dark variations

Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..

Action

Action is used if the Primary is not A11Y suitable. It should be a variation of Primary to improve color contrast

Below are 6 light and 6 dark variations

Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..

Secondary

Secondary Colour should be the next most dominant if the style calls for it.

Below are 6 light and 6 dark variations

Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..

Accent

Accent should be the least used color.

Below are 6 light and 6 dark variations

Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..

Shade

Shade is a neutral color.

Below are 6 light and 6 dark variations

Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..
Black Text
WhiteText
..HEX..
..VAR..

Typography

Set all Typography in the active Bricks Builder Theme. All fonts are Google Fonts served locally unless otherwise specified.

Semantic HTML Typography

H1 heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..

H2 heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..

H3 heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..

H4 heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..
H5 heading
Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..

Class Based Typograpy

Hero heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..
Class:
.bricks-type-hero

Lede heading

Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..
Class:
.bricks-type-lead
Accent Text - Set in Bricks Class System
Family:
..VAL..
Weight:
..VAL..
Style:
..VAL..
Class:
.font-accent

Clamp Font Sizes

Maybe there’s a happy little waterfall happening over here. You can create the world you want to see and be a part of. You have that power. We want to use a lot pressure while using no pressure at all. Let that brush dance around there and play.

Size:
var(--at-font-body)

Maybe there’s a happy.

Size:
var(--at-font-clamp--3xl)

Maybe there’s a happy.

Size:
var(--at-font-clamp--2xl)

Maybe there’s a happy little waterfall.

Size:
var(--at-font-clamp--xl)

Maybe there’s a happy little waterfall.

Size:
var(--at-font-clamp--l)

Maybe there’s a happy little waterfall.

Size:
var(--at-font-clamp--m)

Maybe there’s a happy little waterfall.

Size:
var(--at-font-clamp--s)

Maybe there’s a happy little waterfall.

Size:
var(--at-font-clamp--xs)