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.


  • Copied!
    Logo #5C2D91 rgb(92,45,145)
  • Copied!
    Orchid #FF527C rgb(255, 82, 124)
  • Copied!
    Lavender #7180DA rgb(113,128,218)


  • Copied!
    Hortensia #125580 rgb(18,85,128)
  • Copied!
    Hyacinth #2B84FF rgb(43,132,255)
  • Copied!
    Grass #00C5AA rgb(0,197,170)
  • Copied!
    Roses #FF5964 rgb(255,89,100)
  • Copied!
    Narcissus #FFD04E rgb(255,208,78)

Gray tones

  • Copied!
    Gray-01 #F3F3F3 rgb(243,243,243)
  • Copied!
    Gray-02 #EEEEEE rgb(238,238,238)
  • Copied!
    Gray-03 #EBEBEB rgb(235,235,235)
  • Copied!
    Gray-04 #D8D8D7 rgb(216,216,215)
  • Copied!
    Gray-05 #BFBFBF rgb(191,191,191)
  • Copied!
    Gray-06 #A3A3A3 rgb(163,163,163)
  • Copied!
    Gray-07 #757575 rgb(117,117,117)
  • Copied!
    Gray-08 #4F4F49 rgb(79,79,73)
  • Copied!
    Black #1D1D1B rgb(29,29,27)

Orchid tones

  • Copied!
    Orchid-01 #FFDDE5 rgb(255,221,229)
  • Copied!
    Orchid-02 #FFB8C9 rgb(255,184,201)
  • Copied!
    Orchid-03 #FF96B0 rgb(255,150,176)
  • Copied!
    Orchid-04 #FF7496 rgb(255,116,150)
  • Copied!
    Orchid-05 #FF527C rgb(255,82,124)
  • Copied!
    Orchid-06 #FF3063 rgb(255,48,99)
  • Copied!
    Orchid-07 #FF0E49 rgb(255,14,73)

Lavender tones

  • Copied!
    Lavender-01 #E8EBF6 rgb(232,235,246)
  • Copied!
    Lavender-02 #DDE0F6 rgb(221,224,246)
  • Copied!
    Lavender-03 #C2C8EF rgb(194,200,239)
  • Copied!
    Lavender-04 #A7B0E8 rgb(167,176,232)
  • Copied!
    Lavender-05 #8C98E1 rgb(140,152,225)
  • Copied!
    Lavender-06 #7180DA rgb(113,128,218)
  • Copied!
    Lavender-07 #5667D3 rgb(86,103,211)


Use one of three defined gradients to vary the content. This can be use only for block elements.


<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%
gradient-p1 #7180DA - #5667D3
gradient-p2 #FF7496 - #FF3063
gradient-p3 #5C2D91 - #5667D3


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.


<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)


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.


<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.

Icons arrows

Copied! icon-arrow-down
Copied! icon-arrow-left
Copied! icon-arrow-right
Copied! icon-arrow-up
Copied! icon-left
Copied! icon-right

Icons big

Copied! icon-account-big
Copied! icon-basket-big
Copied! icon-heart-big
Copied! icon-heart-big-filled
Copied! icon-warning-big

Icons normal

Copied! icon-account
Copied! icon-basket
Copied! icon-bouquet
Copied! icon-calendar
Copied! icon-check
Copied! icon-check-filled
Copied! icon-check-line
Copied! icon-clock
Copied! icon-cross
Copied! icon-cross-filled
Copied! icon-cross-line
Copied! icon-delivery
Copied! icon-flower
Copied! icon-heart
Copied! icon-heart-filled
Copied! icon-info
Copied! icon-info-filled
Copied! icon-info-line
Copied! icon-menu
Copied! icon-min
Copied! icon-min-filled
Copied! icon-min-line
Copied! icon-phone
Copied! icon-placemark
Copied! icon-plus
Copied! icon-plus-filled
Copied! icon-plus-line
Copied! icon-search
Copied! icon-star
Copied! icon-star-filled
Copied! icon-time
Copied! icon-warning-filled
Copied! icon-warning-line
Copied! icon-spinner
Copied! icon-logout
Copied! icon-edit
Copied! icon-redirect
Copied! icon-setting

Icons social

Copied! icon-twitter
Copied! icon-facebook
Copied! icon-youtube
Copied! icon-instagram
Copied! icon-pinterest
Copied! icon-blog