Design
Colors
For Euroflorist Brand there are defined 8 main colors (three primary and five secondaries) and three pallets based on gray, lavender and orchid tones. To copy the value in hexadecimal format just click on one of the examples below.
Primary
-
Copied!Logo
#5C2D91rgb(92,45,145) -
Copied!Orchid
#FF527Crgb(255, 82, 124) -
Copied!Lavender
#7180DArgb(113,128,218)
Secondary
-
Copied!Hortensia
#125580rgb(18,85,128) -
Copied!Hyacinth
#2B84FFrgb(43,132,255) -
Copied!Grass
#00C5AArgb(0,197,170) -
Copied!Roses
#FF5964rgb(255,89,100) -
Copied!Narcissus
#FFD04Ergb(255,208,78)
Gray tones
-
Copied!Gray-01
#F3F3F3rgb(243,243,243) -
Copied!Gray-02
#EEEEEErgb(238,238,238) -
Copied!Gray-03
#EBEBEBrgb(235,235,235) -
Copied!Gray-04
#D8D8D7rgb(216,216,215) -
Copied!Gray-05
#BFBFBFrgb(191,191,191) -
Copied!Gray-06
#A3A3A3rgb(163,163,163) -
Copied!Gray-07
#757575rgb(117,117,117) -
Copied!Gray-08
#4F4F49rgb(79,79,73) -
Copied!Black
#1D1D1Brgb(29,29,27)
Orchid tones
-
Copied!Orchid-01
#FFDDE5rgb(255,221,229) -
Copied!Orchid-02
#FFB8C9rgb(255,184,201) -
Copied!Orchid-03
#FF96B0rgb(255,150,176) -
Copied!Orchid-04
#FF7496rgb(255,116,150) -
Copied!Orchid-05
#FF527Crgb(255,82,124) -
Copied!Orchid-06
#FF3063rgb(255,48,99) -
Copied!Orchid-07
#FF0E49rgb(255,14,73)
Lavender tones
-
Copied!Lavender-01
#E8EBF6rgb(232,235,246) -
Copied!Lavender-02
#DDE0F6rgb(221,224,246) -
Copied!Lavender-03
#C2C8EFrgb(194,200,239) -
Copied!Lavender-04
#A7B0E8rgb(167,176,232) -
Copied!Lavender-05
#8C98E1rgb(140,152,225) -
Copied!Lavender-06
#7180DArgb(113,128,218) -
Copied!Lavender-07
#5667D3rgb(86,103,211)
Gradients
Use one of three defined gradients to vary the content. This can be use only for block elements.
Usage
<div class="gradient-p1"></div>
where -p1 is a suffix of the class denoting the type of gradient. To copy a class name just click on one of the examples below.
The following table presents the values for the CSS property background: linear-gradient(value) for each of the gradients:
.gradient-p1 |
90deg, #7180DA 0%, #5667D3 100% |
.gradient-p2 |
90deg, #FF7496 0%, #FF3063 100% |
.gradient-p3 |
90deg, #5C2D91 0%, #5667D3 100% |
Shadows
Shadows in Design System Euroflorist are used to make content appear elevated (like UI elements which need to be more distinguished). There is five predefined value of shadows and they can be used only for block elements.
Usage
<div class="shadow-p1"></div>
where -p1 is a suffix of the class denoting the type of shadow. To copy a class name just click on one of the examples below.
The following table presents the values for the CSS property box-shadow for each of the shadows:
.shadow-p1 |
0 2px 1px 0 rgba(0, 0, 0, 0.15) |
.shadow-p2 |
0 2px 3px 0 rgba(0, 0, 0, 0.15) |
.shadow-p3 |
0 2px 5px 0 rgba(0, 0, 0, 0.15) |
.shadow-p4 |
0 2px 15px 0 rgba(0, 0, 0, 0.15) |
.shadow-p5 |
0 2px 20px 0 rgba(0, 0, 0, 0.15) |
Icons
Euroflorist Design System Framework is using icons that have been prepared as a font library. To implement one of the icons use <i> tag with the correct class name. To copy a ready tag just click on one of the examples below.
Usage
<i class="icon-name"></i>
All icon-name are placed under the icon in this documentation.
There is a possibility to download all SVG icons in the zip file.