Color / States by style
Rest
The default or normal appearance when it's not being interacted with.
|
|
Design token |
Value |
|---|---|---|
|
(1) Input rest state |
|
|
|
(2) Open/close icon |
BrandForeground1.Rest |
#295CAD |
|
(3) Input focus state |
|
|
|
(4) Open container bkgd |
NeutralBackground1.Rest |
#FFFFFF |
|
(5) Divider |
NeutralStroke1.Rest |
#E4E7E7 |
|
(6) Header |
NeutralForeground1.Rest |
#0F1A38 |
|
|
Design token |
Value |
|---|---|---|
|
(1) Input container |
NeutralBackground3.Rest |
#F8F8F8 |
|
(2) Open/close icon |
BrandForeground1.Rest |
#295CAD |
|
(3) Input focus state |
|
|
|
(4) Open container bkgd |
NeutralBackground1.Rest |
#FFFFFF |
|
(5) Divider |
NeutralStroke1.Rest |
#E4E7E7 |
|
(6) Header |
NeutralForeground1.Rest |
#0F1A38 |
Hover
The hover state refers to the visual and interactive changes that occurs when a user moves their cursor over the button but doesn't click it. This temporary interaction includes an underline and color change, providing feedback to the user. List items will have a different background color and you’ll need to refer to the checkbox hover states.
|
|
Design token |
Value |
|---|---|---|
|
(1) Input hover state |
|
|
|
(2) Single select list item |
NeutralBackground1.Hover Icon: NeutralForeground2.Hover |
#F2F3F3 #1F2525 |
|
(3) Multi select list item Checkbox hover state |
NeutralBackground1.Hover |
#F2F3F3 |
|
|
Design token |
Value |
|---|---|---|
|
(1) Input hover state |
|
|
|
(2) Single select list item |
NeutralBackground1.Hover Icon: NeutralForeground2.Hover |
#F2F3F3 #1F2525 |
|
(3) Multi select list item Checkbox hover state |
NeutralBackground1.Hover |
#F2F3F3 |
Pressed
The pressed state refers to the visual and interactive changes that occur when a user clicks or taps on it. List items will have a different background color and you’ll need to refer to the checkbox pressed states.
|
|
Design token |
Value |
|---|---|---|
|
(1) Input pressed state |
|
|
|
(2) Single select list item |
NeutralBackground1.Pressed Icon: NeutralForeground2.Pressed |
#F2F3F3 #1F2525 |
|
(3) Multi select list item Checkbox hover state |
NeutralBackground1.Pressed |
#E4E7E7 |
|
|
Design token |
Value |
|---|---|---|
|
(1) Input pressed state |
|
|
|
(2) Single select list item |
NeutralBackground1.Pressed Icon: NeutralForeground2.Pressed |
#F2F3F3 #1F2525 |
|
(3) Multi select list item Checkbox hover state |
NeutralBackground1.Pressed |
#E4E7E7 |
Disabled
When the component is temporarily inactive or unresponsive to user interaction. In this state, the container and label appears grayed out to visually indicate that it cannot be clicked or triggered.
Focus
The focus state occurs when it is highlighted, indicating that it is currently selected or in focus. This state is often triggered when a user tabs through interactive elements on a webpage or app, providing a visual cue that it's ready to be activated or clicked. It helps users navigate and interact with the interface, especially for those who rely on keyboard navigation or assistive technologies.
|
|
Design token |
Value |
|---|---|---|
|
(1) Input focus state |
|
Error
The error state normally appears when the user forgot to input their information or the wrong type of information was entered. When a dropdown becomes a field, the error state should come with error text to let the user know the problem.
Coming soon
Read only
This is a state where the user needs to see what was entered, but not able to interact with it. Disabled states are not read by screen readers, which make them inaccessible if they need to be interpreted.
Coming soon
Size options
Delish has 3 size options for a dropdown: small, medium and large. The default size for desktop is medium and the default for mobile is large.
Visual of size options
Specs by size
Coming soon