UI Styleguide

This styleguide will be a resource for designers, product managers, and developers, providing a common language around ForgeRock’s UI patterns. We will use it to maintain modular front-end code and visual consistency across all apps.

Colors

Vivid Yellow #eeea07
Sea Green #519387
Off-White #f7f7f7
Light Gray #eee
Border Gray #ddd
Medium Gray #999
Dark Gray #777
Charcoal #1f2223
Dashboard Red #a94442
Dashboard Yellow #f0ad4e
Dashboard Blue #337ab7

Typography

H1 Header Example

H2 Header Example

H3 Header Example

H4 Header Example

Here is a p tag with a Link

Nav Tabs

Basic Tabs

Tab one
Tab two

Tab With Panel

Body
Footer
Body 2
Footer 2

Panels

Default Panel

Toggles

Library: http://kleinejan.github.io/titatoggle/

Toggles Admin Only

Buttons

Normal Button Group

Dark Button Group Admin Only

Button Types

Alerts

Selectize

Normal Selectize

this.$el.find('#selectizeExample').selectize({ create: true });

Pill Selectize

this.$el.find('#selectizePillExample').selectize({ create: true, maxItems: 3 });

Grids

Backgrid

Column Column Column
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Headers

Page Information Header

Sub page header

Page Header

Forms

Error form field

Normal form field

Dialog

Normal Dialog

Normal Dialog
Some text here

Delete Dialog

Danger Dialog
Some text here