Styleguide

OneSource Styleguide
Corp Styleguide

Colors

Black
(--color-brand-primary)
#000000
Red
(--color-brand-secondary)
#D32028
Red
(--color-brand-secondary-variant)
#D32028
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
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