UI Style Guide

ChemCon Relaunch

01.Farben

Farben

Farbwert 1 // blau

CSS-Klasse: blue

HEX-Wert: #173FC6

RGBA-Wert: rgba(23,63,198,1)

Farbwert 2 // blau (hover)

CSS-Klasse: blue-hover

HEX-Wert: #0F2A88

RGBA-Wert: rgba(15,42,136,1)

Farbwert 3 // violett

CSS-Klasse: violett

HEX-Wert: #5432C4

RGBA-Wert: rgba(84,50,196,1)

Farbwert 4 // violett (hover)

CSS-Klasse: violett-hover

HEX-Wert: #3C248E

RGBA-Wert: rgba(60,36,142,1)

Farbwert 5 // türkis

CSS-Klasse: turquoise

HEX-Wert: #3ABACF

RGBA-Wert: rgba(58,186,207,1)

Farbwert 6 // türkis (hover)

CSS-Klasse: turquoise-hover

HEX-Wert: #3096A7

RGBA-Wert: rgba(48,150,167,1)

Farbwert 7 // cyan

CSS-Klasse: cyan

HEX-Wert: #3653F7

RGBA-Wert: rgba(54,83,247,1)

Farbwert 8 // cyan (hover)

CSS-Klasse: cyan-hover

HEX-Wert: #283DB5

RGBA-Wert: rgba(40,61,181,1)

Farbwert 9 // hellblau

CSS-Klasse: lightblue

HEX-Wert: #3789FA

RGBA-Wert: rgba(55,137,250,1)

Farbwert 10 // hellblau (hover)

CSS-Klasse: lightblue-hover

HEX-Wert: #2B6DC7

RGBA-Wert: rgba(43,109,199,1)

Farbwert 11 // schwarz

CSS-Klasse: black

HEX-Wert: #000000

RGBA-Wert: rgba(0,0,0,1)

Farbwert 12 // weiß

CSS-Klasse: white

HEX-Wert: #ffffff

RGBA-Wert: rgba(255,255,255,1)

Farbwert 13 // grau

CSS-Klasse: grey

HEX-Wert: #d7d7d7

RGBA-Wert: rgba(215,215,215,1)

Farbwert 14 // hellgrau

CSS-Klasse: lightgrey

HEX-Wert: #E9E9E9

RGBA-Wert: rgba(233,233,233,1)

Farbwert 15 // orange

CSS-Klasse: orange

HEX-Wert: #EF7C00

RGBA-Wert: rgba(239,124,0,1)

Farbwert 16 // Dunkelgrau

CSS-Klasse: darkgrey

HEX-Wert: #666666

RGBA-Wert: rgba(102,102,102,1)

Farbwert 17 // Hellschwarz

CSS-Klasse: lightblack

HEX-Wert: #707070

RGBA-Wert: rgba(112,112,112,1)

Farbwert 18 // weißgrau

CSS-Klasse: whitegrey

HEX-Wert: #F4F4F4

RGBA-Wert: rgba(244,244,244,1)

//
// Color system
//

$color1: #173FC6;
$color1-trans1: rgba(23,63,198,.8);
$color1-trans2: rgba(23,63,198,.5);
$color1-trans2: rgba(23,63,198,.2);

$color2: #0F2A88;
$color2-trans1: rgba(15,42,136,.8);
$color2-trans2: rgba(15,42,136,.5);
$color2-trans2: rgba(15,42,136,.2);

$color3: #5432C4;
$color3-trans1: rgba(84,50,196,.8);
$color3-trans2: rgba(84,50,196,.5);
$color3-trans2: rgba(84,50,196,.2);

$color4: #3C248E;
$color4-trans1: rgba(60,36,142,.8);
$color4-trans2: rgba(60,36,142,.5);
$color4-trans2: rgba(60,36,142,.2);

$color5: #3ABACF;
$color5-trans1: rgba(58,186,207,.8);
$color5-trans2: rgba(58,186,207,.5);
$color5-trans2: rgba(58,186,207,.2);

$color6: #3096A7;
$color6-trans1: rgba(48,150,167,.8);
$color6-trans2: rgba(48,150,167,.5);
$color6-trans2: rgba(48,150,167,.2);

$color7: #3653F7;
$color7-trans1: rgba(54,83,247,.8);
$color7-trans2: rgba(54,83,247,.5);
$color7-trans2: rgba(54,83,247,.2);

$color8: #283DB5;
$color8-trans1: rgba(40,61,181,.8);
$color8-trans2: rgba(40,61,181,.5);
$color8-trans2: rgba(40,61,181,.2);

$color9: #3789FA;
$color9-trans1: rgba(55,137,250,.8);
$color9-trans2: rgba(55,137,250,.5);
$color9-trans2: rgba(55,137,250,.2);

$color10: #2B6DC7;
$color10-trans1: rgba(43,109,199,.8);
$color10-trans2: rgba(43,109,199,.5);
$color10-trans2: rgba(43,109,199,.2);

$color11: #000000;
$color11-trans1: rgba(0,0,0,.8);
$color11-trans2: rgba(0,0,0,.5);
$color11-trans2: rgba(0,0,0,.2);

$color12: #ffffff;
$color12-trans1: rgba(255,255,255,.8);
$color12-trans2: rgba(255,255,255,.5);
$color12-trans2: rgba(255,255,255,.2);

$color13: #d7d7d7;
$color13-trans1: rgba(215,215,215,.8);
$color13-trans2: rgba(215,215,215,.5);
$color13-trans2: rgba(215,215,215,.2);

$color14: #E9E9E9;
$color14-trans1: rgba(233,233,233,.8);
$color14-trans2: rgba(233,233,233,.5);
$color14-trans2: rgba(233,233,233,.2);

$color15: #EF7C00;
$color15-trans1: rgba(239,124,0,.8);
$color15-trans2: rgba(239,124,0,.5);
$color15-trans2: rgba(239,124,0,.2);

$color16: #666666;
$color16-trans1: rgba(102,102,102,.8);
$color16-trans2: rgba(102,102,102,.5);
$color16-trans2: rgba(102,102,102,.2);

$color17: #707070;
$color17-trans1: rgba(112,112,112,.8);
$color17-trans2: rgba(112,112,112,.5);
$color17-trans2: rgba(112,112,112,.2);

$color18: #F4F4F4;
$color18-trans1: rgba(244,244,244,.8);
$color18-trans2: rgba(244,244,244,.5);
$color18-trans2: rgba(244,244,244,.2);


//
// Class to id assignment
//

$blue: $color1;
$blue-hover: $color2;
$violett: $color3;
$violett-hover: $color4;
$turquoise: $color5;
$turquoise-hover: $color6;
$cyan: $color7;
$cyan-hover: $color8;
$lightblue: $color9;
$lightblue-hover: $color10;
$black: $color11;
$white: $color12;
$grey: $color13;
$lightgrey: $color14;
$orange: $color15;
$darkgrey: $color16;
$lightblack: $color17;
$whitegrey: $color18;
//
// Copy&paste colors for _styleguide.scss
//

&.color-1 {
 background-color: $blue;
}

&.color-2 {
 background-color: $blue-hover;
}

&.color-3 {
 background-color: $violett;
}

&.color-4 {
 background-color: $violett-hover;
}

&.color-5 {
 background-color: $turquoise;
}

&.color-6 {
 background-color: $turquoise-hover;
}

&.color-7 {
 background-color: $cyan;
}

&.color-8 {
 background-color: $cyan-hover;
}

&.color-9 {
 background-color: $lightblue;
}

&.color-10 {
 background-color: $lightblue-hover;
}

&.color-11 {
 background-color: $black;
}

&.color-12 {
 background-color: $white;
}

&.color-13 {
 background-color: $grey;
}

&.color-14 {
 background-color: $lightgrey;
}

&.color-15 {
 background-color: $orange;
}

&.color-16 {
 background-color: $darkgrey;
}

&.color-17 {
 background-color: $lightblack;
}

&.color-18 {
 background-color: $whitegrey;
}

02.Typography

Font/Font Weight

Aa

Open Sans Regular

Aa

Open Sans Bold

Aa

Open Sans Italic

Aa

Open Sans Bolditalic

Überschriften

H1 Überschrift mit Link

H2 Überschrift mit Link

H3 Überschrift mit Link

H4 Überschrift mit Link

H5 Überschrift mit Link
H6 Überschrift mit Link

02.Typography

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula Link eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Donec quam felis, ultricies nec, pellentesque eu, pretium Link quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.

Listen // ungeornete Liste & geordnete Liste

  • Cum sociis natoque Link penatibus et magnis dis parturient montes
  • Donec pede justo, fringilla vel, aliquet nec, Link vulputate eget, arcu
  • In enim justo Link rhoncus ut imperdiet a venenatis vitae justo
  1. Cum sociis natoque Link penatibus et magnis dis parturient montes
  2. Nascetur ridiculus mus donec quam felis ultricies nec pellentesque eu
  3. In enim justo Link rhoncus ut imperdiet a venenatis vitae justo

03.Icons und Logos

Icons

Standort

Chemcon Produkte

Analyse Service

CDMO

GMP Qualität

GMP

Facebook

Pfeil nach rechts

Pfeil nach links

LinkedIn

Xing

Chemie

Download

E-Mail

Ordner

Mikroscop

Telefon

Playbutton

Plus

Script

Minus

---- Kein Icon ----

Pfeil nach oben

Auszeichnung