Styleguide

FastServ Styleguide
Corp Styleguide

Colors

Navy
(--color-brand-primary)
#131C3B
Orange (Headlines)
(--color-brand-secondary)
#F05400
Orange (Link)
(--color-brand-secondary-variant)
#DB3700
Slate
(--color-brand-text)
#424551
Poplar
(--color-brand-accent-1)
#F3F1EE
Steel
(--color-brand-accent-2)
#B0BFD8
SALE Red
(--color-brand-misc-1)
#C80000
Colbalt
(--color-brand-misc-2)
#2A6AC5
Neutral Gray #1
(--color-brand-neutral-1)
#cccccc
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