Branding and the Style Guide

Samael Creative is my personal branding based on my second name and burgher arms. Branding rules and guides are built in similar ways as heraldic rules on my personal burgher arms, but with opposite color and metal on the upper field when used together with the Samael Creative logo.

Logo

Preferred color combination is silver on sable
Color variations and usage

Sable on silver

Silver on sable

Silver on gules

Never put the logo inside a box. Instead, use either silver or sable for maximum contrast. If used together with other logos try to keep the size equal to others.

Slogan

Always below the logo
Let the monster loose
The slogan "Let the monster loose" comes from releasing your inner monster. The thing you're most afraid of and that holds you back from finding the best version of yourself. It's what we all are the most scared of.
Be brave and let your inner monster loose and go outside your comfort zone. Break the rules. Be different.

Symbol and Arms

Arms
Monstrum Solve
Samael Creative is my personal branding based on my second name and burgher arms. Branding rules and guides are built in similar ways as heraldic rules on my personal burgher arms, but with opposite color and metal on the upper field when used together with the Samael Creative logo.

Original blazon in Finnish: Hopeisessa kentässä musta, kävelevä, siivekäs, punakielinen pukki miekalla rintaan lävistetty, jonka punaisessa tyvessä kolme kuusikärkistä hopeatähteä 2-1.

Translated blazon: Wavy per fess silver and gules. On the silver field a ram passant, winged, pierced with a sword, tongue gules. On the gules field, three six-pointed stars 2-1.

Typography

Real size
Variable
Min size @
320px viewport
Max size @
1360px viewport

Here's a H1 heading

var(--h1)
2.03rem
3.42rem

Here's a h2 heading

var(--h2)
1.80rem
2.85.rem

Here's a H3 heading

var(--h3)
1.60rem
2.38rem

Here's a H4 heading

var(--h4)
1.42rem
1.98rem
Here's a H5 heading
var(--h5)
1.27rem
1.65rem
Here's a H6 heading
var(--h6)
1.13rem
1.38rem
.c-text-xl - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--xl-text)
1.1rem
1.4rem
.c-text-l - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--l-text)
1rem
1.2rem
.c-text-m - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--m-text)
1rem
1rem
.c-text-s - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--s-text)
0.85rem
0.85rem
.c-uppercase
.c-lowercase
.c-underline
.c-bold
.c-italic

Aa

calc(var(--h1) * 3)

Aa

calc(var(--h1) * 2)

Aa

calc(var(--h1) * 1.5)

Colors

#990000
.c-heading-accent
#040404
.c-heading-dark
#e1e1e1
.c-heading-light
#990000
.c-text-accent
#040404
.c-text-dark
#e1e1e1
.c-text-light

Backgrounds

#990000
.c-bg-accent
#ffffff
.c-bg-accent-alt
#e1e1e1
.c-bg-light
#adadad
.c-bg-light-alt
#040404
.c-bg-dark
#686868
.c-bg-dark-alt

Spacing

Real size
Variable
Min space size
Max space size
XXL size
var(--xxl-space)
52px
130px
XL size
var(--xl-space)
32px
80px
L size
var(--l-space)
20px
50px
M size
var(--m-space)
12px
30px
S size
var(--s-space)
8px
20px
XS size
var(--xs-space)
4px
10px

Cards

Samael Creative | Favicon

Silver

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more
Samael Creative | Favicon

Sable

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more
Samael Creative | Favicon

Gules

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

Icon Pack