Mobfish UI Colors

Our design theory for UI elements are based on at least 5 colors. The palette consists of a light color, a dark color, primary brand color and two highlight colors (accent).
The primary color is in the center of the palette and has the largest impact on the overall look.

Dark / Light Shade

Use this color as the main background / font colors in your UI.

Accent's

Accent colors should be used sparingly to draw attention to important design elements. Overuse of accent colors can make your design look haphazard.

Brand Colors (primary, secondary...)

This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity.

Mobfish WEB Colors

light-shade

Hex: #FFFFFF

SCSS:

background-color: map_get($ui-colors, light-shade);

light-accent

Hex: #DEE8EF

SCSS:

background-color: map_get($ui-colors, light-accent);

primary-color

Hex: #0096F6

SCSS:

background-color: map_get($ui-colors, primary-color);

dark-accent

Hex: #3E4C55

SCSS:

background-color: map_get($ui-colors, dark-accent);

dark-shade

Hex: #000000

SCSS:

background-color: map_get($ui-colors, dark-shade);

UI Color States

UI color states should be used to create signals after certain actions. They are not a fixed part of the color scheme and should only signal certain states transitionally.

success

Hex: #3BCE95

SCSS:

background-color: map_get($ui-color-states, success);

warning

Hex: #FFBA00

SCSS:

background-color: map_get($ui-color-states, warning);

danger

Hex: #FF4664

SCSS:

background-color: map_get($ui-color-states, danger);

info

Hex: #0096F6

SCSS:

background-color: map_get($ui-color-states, info);

Predefined UI Helper Classes

For Background Colors

Class name Preview
success-bg Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
warn-bg Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
danger-bg Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
info-bg Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

For Font Colors

Class name Preview
success-c Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
warn-c Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
danger-c Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
info-c Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Mobfish Brand Colors

In general you should not use them in web applications, for this you should use the web colors.

primary

Hex: #F2F2F2

SCSS:

background-color: map_get($brand-colors, primary);

secondary

Hex: #00DAE5

SCSS:

background-color: map_get($brand-colors, secondary);

tertiary

Hex: #FF4664

SCSS:

background-color: map_get($brand-colors, tertiary);

quaternary

Hex: #0096F6

SCSS:

background-color: map_get($brand-colors, quaternary);

quinary

Hex: #003278

SCSS:

background-color: map_get($brand-colors, quinary);

senary

Hex: #000000

SCSS:

background-color: map_get($brand-colors, senary);