Styleguide

OneSource Styleguide
FastServ Styleguide

Colors

Dark Blue
(--color-brand-primary)
#002437
Blue
(--color-brand-secondary)
#00679B
Blue
(--color-brand-secondary-variant)
#00679B
Charcoal
(--color-brand-text)
#484A50
Lt-Gray
(--color-brand-accent-1)
#f4f4f4
Gray
(--color-brand-accent-2)
#BCBEC4
SALE Red
(--color-brand-misc-1)
#C80000
Red
(--color-brand-misc-2)
#D22630
Neutral Gray #1
(--color-brand-neutral-1)
#cccccc
Neutral Blue Gray #2
(--color-brand-neutral-2)
#D4E2E8
White
(--color-brand-white)
#FFFFFF
Black
(--color-brand-black)
#000000

Typography

Eyebrow Text

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Custom Headline 1

Body X Large

Body Text Large

Body Text Medium

Body Text Small

Body Special Large

Body Special Medium

Body Special Small

Buttons

Button Primary (.button.button--primary)

Primary

Primary - Hover

Primary - Disabled

Primary - Large & disabled

Primary - Active

Button Secondary (.button.button--secondary)

Secondary

Secondary - Hover

Secondary - Active

Button Outline (.button.button--outline)

Outline

Outline - Hover

Outline - Active

"Button" Link (.button.button--link-1)

Default

Hover

Active

Links (.link or inline <a>)

Default

Learn More

Hover

Learn More

Active

Learn More

Dark Background (.dark-background)

(the .dark-background class only effects the child elements)

Typography

Eyebrow Text

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Custom Headline 1

Body X Large

Body Text Large

Body Text Medium

Body Text Small

Body Special Large

Body Special Medium

Body Special Small

Buttons

Button Primary (.button.button--primary)

Primary

Primary - Hover

Primary - Disabled

Primary - Large & disabled

Primary - Active

Button Secondary (.button.button--secondary)

Secondary

Secondary - Hover

Secondary - Active

Button Outline (.button.button--outline)

Outline

Outline - Hover

Outline - Active

"Button" Link (.button.button--link-1)

Default

Hover

Active

Links (.link or inline <a>)

Default

Learn More

Hover

Learn More

Active

Learn More

Form Fields

Input Field - Default

Input Field - Active

Input Field - Disabled

Input Field - Error

Error message

Dropdown - Default

Dropdown - Active

Dropdown - Disabled

Dropdown - Error

Error message

Radio Fields

Checkbox Fields

Badges

Badge