Specifications
- A switch must have a visible label that clearly conveys what option a user will turn on or off.
Behaviors
- Avoid changing the label text based on on and off state.
|
|
|
| Do use the same label text for both the on and off state. | Don't change label text between states. |
Colors
| Element | Property | Color |
|---|---|---|
| Toggle |
White
White
#ffffff
#ffffff
| |
| Label |
Gray 8
Gray 2
#464b52
#b7b9c3
| |
| Default/On | Background |
Blue Light
Dark Mode Blue
#217cbb
#019aeb
|
| Default/Off | Background |
Gray 4
Gray 4
#90939f
#90939f
|
| Focused/On | Background |
Trimble Blue
Dark Mode Blue
#0063a3
#019aeb
|
| Focused/Off | Background |
Gray 4
Gray 4
#90939f
#90939f
|
| Border |
Blue Light
Dark Mode Blue
#217cbb
#019aeb
| |
| Hover/On | Background |
Trimble Blue
Dark Mode Blue
#0063a3
#019aeb
|
| Hover/Off | Background |
Gray 4
Gray 4
#90939f
#90939f
|
| Border |
Blue Light
Dark Mode Blue
#217cbb
#019aeb
| |
| Disabled/On | Background (30%) |
Trimble Blue
Dark Mode Blue
#0063a380
#019aeb
|
| Disabled/Off | Background (30%) |
Gray 4
Gray 4
#90939f80
#90939f
|
Editorial
- Avoid acronyms.
- Use 2-5 words.
- Use the same label text for on and off states