Main colors

→

Here are the main interface colors. There are only five sets, with five colors each. And there is a background class to use them.

See how to theme the colors over here.

Syntax: .bg-{state}-{level}

SCSS: _color-map.scss _vars-color.scss _background-colors.scss

Main

.bg-main-1

.bg-main-2

.bg-main-3

.bg-main-4

.bg-main-5

Prime

.bg-prime-1

.bg-prime-2

.bg-prime-3

.bg-prime-4

.bg-prime-5

Warn

.bg-warn-1

.bg-warn-2

.bg-warn-3

.bg-warn-4

.bg-warn-5

Danger

.bg-danger-1

.bg-danger-2

.bg-danger-3

.bg-danger-4

.bg-danger-5

Success

.bg-success-1

.bg-success-2

.bg-success-3

.bg-success-4

.bg-success-5

Hoverable

→

Like above, but this time the color boxes will become darker when the mouse pointer is :hover or the element is in :focus.

Syntax: .bg-{state}-{level}-h

SCSS: _background-colors-h.scss

.bg-main-1-h

.bg-main-2-h

.bg-main-3-h

.bg-main-4-h

.bg-main-5-h

.bg-prime-1-h

.bg-prime-2-h

.bg-prime-3-h

.bg-prime-4-h

.bg-prime-5-h

.bg-warn-1-h

.bg-warn-2-h

.bg-warn-3-h

.bg-warn-4-h

.bg-warn-5-h

.bg-danger-1-h

.bg-danger-2-h

.bg-danger-3-h

.bg-danger-4-h

.bg-danger-5-h

.bg-success-1-h

.bg-success-2-h

.bg-success-3-h

.bg-success-4-h

.bg-success-5-h

Shades

→

Here are two light and two dark semi transparent shades.

The shades are used in various places, like for placeholder text, skeuomorphic effetcs and stripes. Per default, the shade color is slightly tinted as the main color.

Syntax: .bg-{state}-{level}

SCSS: _color-map.scss _color-vars.scss _background-shades.scss

Neutral 50% gray checkers for reference

.bg-shadow-1

.bg-shadow-2

.bg-highlight-1

.bg-highlight-2

Tinted

→

Paint the town. The .tinted class will tint the text color, border color and some magic extras with the predefined states warn, success, danger and prime or your own custom color variable. Basically everything that was blackish before will become colorish.

The example below is just a test-case. There are many cool use cases for this, like for theming, customization or form validation. This is a local theme, the effective space is scoped by the container holding the class. It can be combined with tinted background. See the form validation example.

Syntax: .tinted-{color}

SCSS: _tinted.scss

No Class is blackish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Danger is redish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Warn is yellowish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Success is greenish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Prime is purpleish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Custom is different

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

table	check	1
table	check	2

Tinted background

→

Paint the town again. With this wrapper you’ll modify the background color and some magic extras with the predefined states warn, success and danger or your own colors.

The tinted background class will only color child elements, that already have a background color. To alter the background color of an element directly use the background color class. This can be combined with colored text and borders. See the form validation example. When applied to a whole container, like in the example below, everything will be tinted in a mono-colored way. To match all states (hover, disabled …), five color variables need to be set. Keep an eye on paint performance when working with tinted images.

Syntax: .tinted-bg-{color}

SCSS: _tinted.scss

No Class is standard

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

Danger is redish .tinted-bg-danger

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

Warn is yellowish .tinted-bg-warn

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

Success is greenish .tinted-bg-success

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

Custom is different .tinted-bg-custom

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

Inverted

→

Apply this to a container to flip all the colors > light will become dark, dark will be light.

Syntax: .inverted

SCSS: _inverted.scss

Inverted is whitish on blackish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

meter

Local theming

striped

The .article wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:

Text is optimized for readability
Headlines have more spacing

Lists have a hanging punctuation
- Nested lists work as well

p, ol, ol, dl, table, blockquote, a, img, hr, pre, code, i — all work well

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12

h1: Headline level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?

Pasting code from the Internet into production code is like chewing gum found in the street.

h2: Headline level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!

# Never execute:
$ rmf *

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

That’s all she wrote.

Normal is blackish on whitish

CSS is awesome

div.box

.active

a.box

mini-info

progress

check

radio

form-box

meter

Local theming

striped

Text is optimized for readability
Headlines have more spacing

Lists have a hanging punctuation
- Nested lists work as well

p, ol, ol, dl, table, blockquote, a, img, hr, pre, code, i — all work well

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12

h1: Headline level 1

Pasting code from the Internet into production code is like chewing gum found in the street.

h2: Headline level 2

# Never execute:
$ rmf *

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

That’s all she wrote.

Alphabet colors

→

Here is an additional shaded color spectrum. Use cases are: “heat tables”, “generic avatars”, “zebra stripes” and possibly much more. Other than the core interface colors, these colors are ready-made and not accessible as CSS Vars, so they can only be modified in the SCSS files.

Use .bg- for background-color and than any small latin character or number (^a-z0-9). These colors also have no :hover sate.

Syntax: .bg-{color}

SCSS: _colors-alphabet.scss

bg-a

Anton

bg-b

Berta

bg-c

Cäsar

bg-d

Dora

bg-e

Emil

bg-f

Friedrich

bg-g

Gustav

bg-h

Heinrich

bg-i

Ida

bg-j

Joseph

bg-k

Kaufmann

bg-l

Ludwig

bg-m

Martha

bg-n

Nordpol

bg-o

Otto

bg-p

Paula

bg-q

Quelle

bg-r

Richard

bg-s

Samuel

bg-t

Theodor

bg-u

Ulrich

bg-v

Viktor

bg-w

Wilhelm

bg-x

Xanthippe

bg-y

Ypsilon

bg-z

Zacharias

bg-0

Zero

bg-1

One

bg-2

Two

bg-3

Three

bg-4

Four

bg-5

Five

bg-6

Six

bg-7

Seven

bg-8

Eight

bg-9

Nine

Branding and emotion

Main

Prime

Warn

Danger

Success

No Class is blackish

Danger is redish

Warn is yellowish

Success is greenish

Prime is purpleish

Custom is different

No Class is standard

Danger is redish .tinted-bg-danger

Warn is yellowish .tinted-bg-warn

Success is greenish .tinted-bg-success

Custom is different .tinted-bg-custom

Inverted is whitish on blackish

Local theming

h1: Headline level 1

h2: Headline level 2

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

Normal is blackish on whitish

Local theming

h1: Headline level 1

h2: Headline level 2

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good