Inputs come in two different colors. The default input color is $field-01
and
is used on $ui-background
and $ui-02
page backgrounds. The --light
version
input color is $field-02
and is used on $ui-01
page backgrounds.
Element | Property | Color token |
---|
Label | text color | $text-02 |
Field text | text color | $text-01 |
Field text: prompt | text color | $text-05 |
Helper text | text color | $text-05 |
Field | background-color | $field-01 |
| border-bottom | $ui-04 |
Field: light | background-color | $field-02 |
Chevron | svg | $icon-01 |
Menu option | text color | $text-02 |
| background-color | $field-01 |
| border-top | $ui-03 |
Menu option: light | background-color | $field-02 |
Menu | box-shadow | 0 2px 6px 0 rgba(0,0,0,.2) |
Checkbox | background-color | $icon-01 |
| check | $inverse-01 |
| border | $icon-01 |
Dropdown variant examples: default, inline, multiselect, combo box.
State | Element | Property | Color token |
---|
Focus | Field | border | $focus |
Hover | Field | background-color | $hover-ui |
| Menu option | background-color | $hover-ui |
| Menu option | text color | $text-01 |
| Field: light | background-color | $hover-light-ui |
| Menu option: light | background-color | $hover-light-ui |
Invalid | Error icon | svg | $support-01 |
| Field | border | $support-01 |
| Error message | text-color | $text-error |
Warning | Warning message | text-color | $text-01 |
| Warning icon | svg | $support-03 |
Active | Menu option | background-color | $selected-ui |
| Menu option: light | background-color | $selected-light-ui |
Selected | Menu option | background-color | $selected-ui |
| Menu option | checkmark | $icon-01 |
Multi-selected | Tag | background-color | $inverse-02 |
| Tag | text color | $inverse-02 |
Disabled | Field | background-color | $disabled-01 |
| Field | text color | $disabled-02 |
| Label | text color | $disabled-02 |
| Chevron | svg | $disabled-02 |
Dropdown and combo box states
Multiselect dropdown states
Element | State | Property | Color token |
---|
Enabled | Field | background-color | transparent |
| Field text | text color | $text-01 |
| Chevron | svg | $icon-01 |
| Menu option | text color | $text-02 |
| Menu option | background-color | $field-01 |
| Menu option: light | background-color | $field-02 |
Hover | Field | background-color | $hover-ui |
| Menu option | background-color | $hover-ui |
| Menu option | text color | $text-01 |
| Menu option: light | background-color | $hover-light-ui |
Active | Menu option | background-color | $selected-ui |
| Menu option: light | background-color | $selected-light-ui |
Selected | Menu option | background-color | $selected-ui |
| Menu option | checkmark | $icon-01 |
Invalid | Error icon | svg | $support-01 |
| Field | border | $support-01 |
| Error message | text-color | $text-error |
Inline dropdown states
All dropdown text should be set in sentence case, with only the first word in a
phrase and any proper nouns capitalized. Dropdown options should not exceed
three words.
Class | Font-size | Font-weight | Type style |
---|
Label | 12 / 0.75 | Regular / 400 | $label-01 |
Field text | 14 / 0.875 | Regular / 400 | $body-short-01 |
Menu option text | 14 / 0.875 | Regular / 400 | $body-short-01 |
Error message | 12 / 0.75 | Regular / 400 | $label-01 |
Helper text | 12 / 0.75 | Regular / 400 | $helper-text-01 |
Dropdowns have two states, open and closed. An open and closed dropdown should
be the same width and appropriately fit the design, layout, and content. The
height of a closed dropdown stays consistent while the height of an open
dropdown will vary based on the amount of options it has. Please note the
various color differences for closed and open dropdowns.
Element | Property | px / rem | Spacing tokens |
---|
Label | margin-bottom | 8 / 0.5 | $spacing-03 |
Field | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 48 / 3 | $spacing-09 |
| border-bottom | 1px | – |
Chevron | padding-right, padding-left | 16 / 1 | $spacing-05 |
Helper text | margin-top | 4 / 0.25 | $spacing-02 |
State icon | padding-right, padding-left | 16 / 1 | $spacing-05 |
Structure and spacing measurements for dropdown | px / rem
The field height and menu option height should always match. These sizes options
can be applied to all variants of dropdown.
Element | Property | Size | px / rem |
---|
Field | height | Small | 32 / 2 |
| height | Default | 40 / 2.5 |
| height | Large | 48 / 3 |
Menu option | height | Small | 32 / 2 |
| height | Default | 40 / 2.5 |
| height | Large | 48 / 3 |
Dropdown sizes | px / rem
Element | Property | px / rem | Spacing token |
---|
Label | margin-bottom | 8 / 0.5 | $spacing-03 |
Field | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 72 / 4.5 | – |
Chevron | padding-right | 16 / 1 | $spacing-05 |
Clear icon | padding-right | 8 / .5 | $spacing-03 |
Spacing for combo box dropdown | px / rem
Element | Property | px / rem | Spacing tokens |
---|
Label | margin-bottom | 8 / 0.5 | $spacing-03 |
Field | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 48 / 3 | $spacing-09 |
Chevron | padding-left, padding-right | 16 / 1 | $spacing-05 |
Tag | height | 24 / 1.5 | – |
| padding-right | 8 / .5 | $spacing-03 |
Checkbox | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 8 / .5 | $spacing-03 |
Structure and spacing measurements for a multiselect dropdown | px / rem
Class | Property | px / rem | Spacing token |
---|
Field text | padding-right, padding-left | 16 / 1 | $spacing-05 |
Menu option | padding-right, padding-left | 16 / 1 | $spacing-05 |
Chevron | padding-left | 16 / 1 | $spacing-05 |
Structure and spacing for inline dropdown | px / rem