Buttons
Primary CTA
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
Choose what colour you want your text to be.
This is to determine how rounded you want your button to be.
This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.
Secondary CTA
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
Choose what colour you want your text to be.
This is to determine how rounded you want your button to be.
This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.
Tertiary CTA
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
Choose what colour you want your text to be.
This is to determine how rounded you want your button to be.
This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.
Form Fields
Default
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Disabled
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Focus Active
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Invalid
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Selected Accent
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Selected Block
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Success
This includes the weight, style and colour.
Add the full colour including the # symbol or rgb prefix.
This is to determine how rounded you want your form field to be.
Inputs
Checkbox
The default input border colour.
The border radius of popovers across the site.
The border colour when selected.
The background colour of the input when selected.
The colour of the check inside the checkbox.
Radio
The default input border colour.
The border radius of popovers across the site.
The border colour when selected.
The background colour of the input when selected.
The colour of the indicator inside the checkbox.