Typeface

Normal / 400

Aa

Bold / 700

Aa

Black / 900

Aa

ABC Social / Normal

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
!
?

Typeface / STK Bureau

Light / 300

Aa

STK Bureau / Light

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
!
?

Primary Colors

Black

Hex
 
#0000000
Available Classes
.text-color-black
.bg-color-black

Grey

Hex
 
#f0f0f0
Available Classes
.text-color-black
.bg-color-black

White

Hex
 
#FFFFFF
Available Classes
.text-color-white
.bg-color-white

Natural

Hex
 
#ededdb
Available Classes
.text-color-natural
.bg-color-natural

Brand colors

Burgundy

Hex
 
#C8056e
Available Classes
.text-color-burgundy
.bg-color-burgundy

Mural Red

Hex
 
#ff4b4b
Available Classes
.text-color-mural-red
.bg-color-mural-red

Flamingo

Hex
 
#FF98b4
Available Classes
.text-color-flamingo
.bg-color-flamingo

Blush

Hex
 
#FFCEE0
Available Classes
.text-color-blush
.bg-color-blush

Indigo

Hex
 
#195ad7
Available Classes
.text-color-indigo
.bg-color-indigo

Mural Blue

Hex
 
#5887ff
Available Classes
.text-color-mural-blue
.bg-color-mural-blue

Sky

Hex
 
#79c1ff
Available Classes
.text-color-sky
.bg-color-sky

Ice

Hex
 
#bed7ff
Available Classes
.text-color-ice
.bg-color-ice

Orange

Hex
 
#ed6000
Available Classes
.text-color-orange
.bg-color-orange

Mural Yellow

Hex
 
#ffaa00
Available Classes
.text-color-mural-yellow
.bg-color-mural-yellow

Lemon

Hex
 
#FFe146
Available Classes
.text-color-lemon
.bg-color-lemon

Canary

Hex
 
#FFed87
Available Classes
.text-color-canary
.bg-color-canary

Mural Green

Hex
 
#00843f
Available Classes
.text-color-mural-green
.bg-color-mural-green

Jade

Hex
 
#00c27a
Available Classes
.text-color-jade
.bg-color-jade

Spring

Hex
 
#8fec7f
Available Classes
.text-color-spring
.bg-color-spring

Mint

Hex
 
#b4f5c8
Available Classes
.text-color-mint
.bg-color-mint

Violet

Hex
 
#8728e6
Available Classes
.text-color-violet
.bg-color-violet

Grape

Hex
 
#be53ff
Available Classes
.text-color-grape
.bg-color-grape

Mural Pink

Hex
 
#FC83ff
Available Classes
.text-color-mural-pink
.bg-color-mural-pink

Lavender

Hex
 
#e6bfff
Available Classes
.text-color-lavender
.bg-color-lavender

Text Color

Text styling classes can be applied to text elements themselves or to wrapping DIV containers.

.text-color-black
.text-color-grey
.text-color-white
.text-color-natural
.text-color-burgundy
.text-color-mural-red
.text-color-flamingo
.text-color-blush
.text-color-indigo
.text-color-mural-blue
.text-color-sky
.text-color-ice
.text-color-orange
.text-color-mural-yellow
.text-color-lemon
.text-color-canary
.text-color-mural-green
.text-color-jade
.text-color-spring
.text-color-mint
.text-color-violet
.text-color-grape
.text-color-mural-pink
.text-color-lavender

Headings

Always try to stick to the pre-defined HTML element styles when it comes to headlines. This way you always display the heading in the right size. Sometimes the hierarchic HTML heading structure does not match the design. In that case feel free to use the heading classes.

HTML Elements

Heading1

4 REM

Heading2

2.5 REM

Heading3

1.5 REM

Heading4

1.125 REM
Heading5
1 REM
Heading1
0.875 REM

Heading Classes

.heading1
4 REM
.heading2
2.5 REM
.heading3
1.5 REM
.heading4
1.125 REM
.heading5
1 REM
.heading6
0.875 REM

Text Size

Text styling classes can be applied to text elements themselves or to wrapping DIV containers. The predefined classes are responisve and therefore usable for most mobile views without further customization.

.text-size-xsmall
0.75 REM
.text-size-small
0.875 REM
.text-size-normal
1 REM
.text-size-medium
1.25 REM
.text-size-large
1.5 REM
.text-size-xlarge
1.75 REM
.text-size-xxlarge
2 REM
.text-size-huge
2.5 REM
.text-size-xhuge
4 REM
.text-size-xxhuge
5 REM
.text-size-gigantic
6 REM

Text Style

Text styling classes can be applied to text elements themselves or to wrapping DIV containers.

.text-style-italic
.text-style-allcaps
.text-style-underline
.text-style-muted (transparency: 70%)
.text-align-left
.text-align-center
.text-align-right
.text-line-height-110
.text-line-height-130
.text-line-height-150
.text-break-nowrap
.text-break-normal
.text-max-width-25 This is text to show how 25ch max width look like in real life
.text-max-width-50ch This is text to show how 25ch max width look like in real life
.text-max-width-70ch This is text to show how 25ch max width look like in real life
text-style-class

Text Weight

Text styling classes can be applied to text elements themselves or to wrapping DIV containers.

.text-weight-normal
.text-weight-bold
.text-weight-black

Rich Text Element

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget odio eget quam hendrerit pulvinar. Mauris tempus vulputate elit eget tincidunt. Curabitur vel metus lectus. Ut auctor sollicitudin molestie. Nunc ultricies, erat sit amet fringilla faucibus, velit est interdum ex, sed luctus ex nisl sed nisi.

This is a text link

This is a blockquote
  • List Item
  • List Item
  • List item
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
This is a Placeholder Image

Spacing

We avoid spacing elements directly by giving them wrapping DIV containers and then assigning the appropriate spacing to them.

Margin

.margin-0 0 REM
.margin-tiny 0.125 REM
.margin-xxsmall 0.25 REM
.margin-xsmall 0.5 REM
.margin-small 1 REM
.margin-normal 1.5 REM
.margin-medium 2 REM
.margin-large 3 REM
.margin-xlarge 4 REM
.margin-xxlarge 5 REM
.margin-huge 6 REM
.margin-xhuge 8 REM
.margin-xxhuge 12 REM
.margin-top
.margin-bottom
.margin-left
.margin-right
.margin-vertical
.margin-horizontal

Padding

.padding-0 0 REM
.padding-tiny 0.125 REM
.padding-xxsmall 0.25 REM
.padding-xsmall 0.5 REM
.padding-small 1 REM
.padding-normal 1.5 REM
.padding-medium 2REM
.padding-large 3 REM
.padding-xlarge 4 REM
.padding-xxlarge 5 REM
.padding-huge 6 REM
.padding-xhuge 8 REM
.padding-xxhuge 12 REM
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-vertical
.padding-horizontal

Container

We use three predefined container sizes. They keep the entire content centered on the page. No combo class should be added to the containers themselves, nor should the container itself be modified.

.container-small
width
100%
max-width
48 REM
Usage
Headline component, rich text, callouts, standalone media
.container-medium
width
100%
max-width
64 REM
Usage
Featured layouts, grid content, diverse layouts, tables
.container-large
width
100%
max-width
80 REM
Usage
Featured layouts, grid content, diverse layouts

Grids

Our grid is based on 12 columns. We use a 2rem gutter that is applied as 1rem padding to every grid item.

Grid 1 of 2

1 / 2
1 / 2

Grid 1 of 3

1 / 3
1 / 3
1 / 3

Grid 1 of 4

1 / 4
1 / 4
1 / 4
1 / 4

Mixed

1 / 4
3 / 4

Images

3:2 Aspect Ratio (Standard Image)

4:3 Aspect Ratio

16:9 Aspect Ratio

1:1 Aspect Ratio

Buttons

Button Purple

Primary w/ Icon

Button Purple

Primary w/o Icon

Link Purple

Secondary

Button Green

Primary w/ Icon

Button Green

Primary w/o Icon

Link Green

Secondary

Button Blue

Primary w/ Icon

Button Blue

Primary w/o Icon

Link Blue

Secondary

Button Red

Primary w/ Icon

Button Red

Primary w/o Icon

Link Red

Secondary

Button Yellow

Primary w/ Icon

Button Yellow

Primary w/o Icon

Link Yellow

Secondary

Button Black

Primary w/ Icon

Button Black

Primary w/o Icon

Link Black

Secondary

Shadows

Shadow large

Images, product screens, etc.

Shadow medium

tbd

Shadow small

Cards, bars, etc.