Bloomreach

Bloomreach Documentation version

Open UI Style Guide

Create a look and feel for your Open UI extension that is consistent with the Bloomreach Experience Manager UI by using the following style guide.

Input fields

Floating label (Material)

  • Field height: 36px

  • Field corner radius: 4px

  • Field padding: 14px

  • Field value text: Open Sans 14, #000000 87%

  • Placeholder label: Open Sans 14, #000000 60%

  • Floating label font: Open Sans 12 

  • Field spacing:  24px

Separate label

  • Field height: 36px

  • Field corner radius: 4px

  • Field padding: 14px

  • Field value text: Open Sans 14, #000000 87%

  • Label: Open Sans 14, #000000 60%

Label at the top, spacing:

  • Label - field: 6px

  • Bottom of field - Top of label next field:
    20px 

Label in line, spacing:

  • Label - field: 24px min.

  • Field - field: 24px

State changes (for floating label and separate label)

Normal 

  • Border: #000000 38%, 1px

  • Label: #000000 60%

  • Field value: #000000 87%

  • Icon: #000000 60%

Hover 

  • Border: #000000 60%, 1px

Focus 

  • Border: #147AC8 (primary colour), 2px

  • Label: #147AC8 (primary colour)

Disabled 

  • Border: #000000 12%, 1px

  • Label: #000000 38%

  • Field value: #000000 38%

  • Icon: #000000 38%

Error

  • Error color: #D40022

  • Error text: Open Sans 12px, #D40022

  • Spacing field - error text: 6px

Buttons

All button types

  • Height 36px

  • Minimum width 64px

  • Text padding (left and right) 16px

  • Corner radius 4px

  • Font Opens Sans 14 semibold

  • Border width 1px

Focus rectangle:

  • Box shadow #A9CDE8, 2px

Disabled state:

  • Border colour #000000 12%

  • Font colour #000000 38%

Primary button

Normal

  • Fill colour #147AC8 (primary colour)

  • Border colour #147AC8 (primary colour)

  • Font colour #FFFFFF

Hover

  • Fill colour #1265B3

  • Border colour #1265B3

Disabled

  • Fill colour #000000 5%

Secondary button

Normal

  • Fill colour none/transparent

  • Border colour #147AC8 (primary colour)

  • Font colour #147AC8 (primary colour)

Hover

  • Fill colour #147AC8 10%

  • Border colour #1265B3

  • Font colour #1265B3 

Button

Normal

  • Fill colour none/transparent

  • Border colour #000000 38%

  • Font colour #000000 87%

Hover

  • Fill colour #147AC8 10%

  • Border colour #1265B3

  • Font colour #1265B3 

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?

    We rely on cookies

    to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

    Manage cookies
    Accept & close

    Cookies preferences

    Accept & close
    Back