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