Design System Components

Typography

Name
Token
Preview
Display 1
--heading-display-1
The quick brown fox
Display 2
--heading-display-2
The quick brown fox
Heading 1
--heading-heading-1
The quick brown fox
Heading 2
--heading-heading-2
The quick brown fox
Heading 3
--heading-heading-3
The quick brown fox
Heading 4
--heading-heading-4
The quick brown fox
Heading 5
--heading-heading-5
The quick brown fox
Heading 6
--heading-heading-6
The quick brown fox
Body Large
--body-large
The quick brown fox
Body Medium
--body-medium
The quick brown fox
Body Small
--body-small
The quick brown fox
Body X-Small
--body-x-small
The quick brown fox

Background Colors

Name
Token
Preview
Core Black
--core-black
Base White
--background-base-white
Neutral Soft Surface
--background-neutral-soft-surface
Neutral Subtle
--background-neutral-subtle
Neutral Emphasis
--background-neutral-emphasis
Neutral Strong
--background-neutral-strong
Brand Soft Surface
--background-brand-soft-surfac
Brand Default
--background-brand-default
Brand Emphasis
--background-brand-emphasis

Foreground Colors

Name
Token
Preview
Neutral Primary
--foreground-neutral-primary
Aa
Neutral Secondary
--foreground-neutral-secondary
Aa
Neutral Tertiary
--foreground-neutral-tertiary
Aa
Light Primary
--foreground-light-primary
Aa
Light Secondary
--foreground-light-secondary
Aa
Light Tertiary
--foreground-light-tertiary
Aa
Brand Primary
--foreground-brand-primary
Aa
Brand Secondary
--foreground-brand-secondary
Aa
Link Primary
--foreground-link-primary
Aa
Link Hover
--foreground-link-hover
Aa
Link Disabled
--foreground-link-disabled
Aa

Border Colors

Name
Token
Preview
Neutral X-Subtle
--border-neutral-xsubtle
Neutral Subtle
--border-neutral-subtle
Neutral Muted
--border-neutral-muted
Neutral Default
--border-neutral-default
Brand X-Subtle
--border-brand-xsubtle
Brand Subtle
--border-brand-subtle

Buttons

btn btn-icon btn-small btn-primary btn btn-icon btn-medium btn-primary btn btn-icon btn-large btn-primary
btn btn-text btn-small btn-primary btn btn-text btn-medium btn-primary btn btn-text btn-large btn-primary
btn btn-icon btn-small btn-dark btn btn-icon btn-medium btn-dark btn btn-icon btn-large btn-dark
btn btn-text btn-small btn-dark btn btn-text btn-medium btn-dark btn btn-text btn-large btn-dark
btn btn-icon btn-small btn-light-color btn btn-icon btn-medium btn-light-color btn btn-icon btn-large btn-light-color
btn btn-text btn-small btn-light-color btn btn-text btn-medium btn-light-color btn btn-text btn-large btn-light-color
btn btn-icon btn-small btn-light-border-light btn btn-icon btn-medium btn-light-border-light btn btn-icon btn-large btn-light-border-light
btn btn-text btn-small btn-light-border-light btn btn-text btn-medium btn-light-border-light btn btn-text btn-large btn-light-border-light
btn btn-icon btn-small btn-light-border-dark btn btn-icon btn-medium btn-light-border-dark btn btn-icon btn-large btn-light-border-dark
btn btn-text btn-small btn-light-border-dark btn btn-text btn-medium btn-light-border-dark btn btn-text btn-large btn-light-border-dark
btn btn-icon btn-small btn-borderless btn btn-icon btn-medium btn-borderless btn btn-icon btn-large btn-borderless
btn btn-text btn-small btn-borderless btn btn-text btn-medium btn-borderless btn btn-text btn-large btn-borderless

Additional Components

btn btn-icon btn-small btn-light-color
btn btn-icon btn-medium btn-light-color btn btn-icon btn-medium btn-light-color
btn btn-icon btn-large btn-light-color 4 interest free payments of $597.49
btn btn-icon btn-large btn-light-color Next-Day delivery available in Montreal
btn btn-icon btn-large btn-light-color Fast & simple returns

Form Inputs

Default: .form-group > .form-label, .form-control
Selected: .form-group > .form-label, .form-control
Focused: .form-group > .form-label, .form-control
Disabled: .form-group > .form-label, .form-control
Error: .form-group > .form-label, .form-control
Error Text

Dropdowns

Default: .form-group > .form-label, .select-control
Selected: .form-group > .form-label, .select-control
Disabled: .form-group > .form-label, .select-control
Error: .form-group > .form-label, .select-control.error
Error Text

Textareas

Default: .form-group > .form-label, .textarea-control
Selected: .form-group > .form-label, .textarea-control
Focused: .form-group > .form-label, .textarea-control
Disabled: .form-group > .form-label, .textarea-control
Error: .form-group > .form-label, .textarea-control.error, .form-error
Error Text