Bricks UI - Visual Guide

Style Guide

Your Bricks UI theme at a glance

Colours

A simple colour and theming system that relies solely on two tonal palettes: color and neutral.

neutral-90

High emphasis

neutral-28

Medium emphasis

color-60

High emphasis

neutral-5

Low emphasis

Typography

Up to 3 font families for typographic contexts: display, body and monospace (mono).

Aa

Display

Headings and titles

Aa

Body

Regular content

Aa

Monospace

Technical emphasis

High emphasis
High emphasisMedium emphasisLow emphasisLow emphasis
  • Bricks UI is the best way to build websites with Bricks Builder
Tag title
Tag title
Tag title
This is a tooltip. You can use this to provide supplementary information to your users.
Notification message foes here.

* This guide is purely demonstrative and isn't representative of Bricks UI design resources.

Colour

There are two types of colour variables: color and neutral. Colors and neutral tones can be changed by attaching the relevant classes.

Color

var(–color-xxx)

5
10
20
30
40
50
60
70
80
90
100

Neutral

var(–neutral-xxx)

5
10
12
14
16
18
20
22
24
26
28
30
40
50
60
70
80
82
84
86
88
90
92
94
96
98
100

Themes

.color-xxx

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

indigo

violet

purple

fuchsia

pink

rose

Neutral Themes

.neutral-xxx

cool

slate

gray

onyx

mono

warm

Neutral (Dark mode)

.dark

5
10
12
14
16
18
20
22
24
26
28
30
40
50
60
70
80
82
84
86
88
90
92
94
96
98
100

Typography

The typography system is comprised of 2 types of text: display and body text. Display text are headings and titles and body text is, as the name suggests, for content.

Display text

This is a type scale

.text--display-l

This is a type scale

.text--display-m

This is a type scale

.text--display-s

This is a type scale

.text--heading-1

This is a type scale

.text--heading-m

This is a type scale

.text--heading-s

This is a type scale

.text--title-l

This is a type scale

.text--title-m

This is a type scale

.text--title-s

Body text

This is a type scale

.text--label-l

This is a type scale

.text--label-m

This is a type scale

.text--label-s

This is a type scale

.text--label-xs

This is a type scale

.text--body-l

This is a type scale

.text--body-m

This is a type scale

.text--body-s

This is a type scale

.text--body-xs

This is a type scale

.text--mono-l

This is a type scale

.text--mono-m

This is a type scale

.text--mono-s

This is a type scale

.text--mono-xs

Space

Responsive spatial values for padding, margins, gaps, etc.

--space-4xs

--space-3xs

--space-2xs

--space-xs

--space-s

--space-m

--space-l

--space-xl

--space-2xl

--space-3xl

--space-4xl

Border radius

Scalable definitions for border radii.

--radius-none

--radius-m

--radius-m

--radius-m

--radius-l

--radius-l

--radius-l

--radius-l

Shadow

Customisable box-shadow variables.

--shadow-xs

--shadow-s

--shadow-m

--shadow-l

--shadow-xl

Grid

.grid–xx

Even Distribution

12

11

10

9

8

7

6

5

4

3

2

1

Uneven Distribution

3-1

3-2

2-1

1-2

1-3

Grid Span

.grid–xx

Even Distribution

12

11

10

9

8

7

6

5

4

3

2

1

Uneven Distribution

3-1

3-2

2-1

1-2

1-3