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?