@czi-sds/mcp 0.5.2 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/tailwind.json +25 -25
- package/data/zeroheight-cache.json +5065 -1
- package/data/zeroheight-exports/Accordion.md +81 -20
- package/data/zeroheight-exports/Banner.md +104 -10
- package/data/zeroheight-exports/Buttons.md +1029 -1454
- package/data/zeroheight-exports/Callout.md +174 -9
- package/data/zeroheight-exports/Colors.md +1164 -41
- package/data/zeroheight-exports/Content-Card.md +148 -0
- package/data/zeroheight-exports/Control-Inputs.md +778 -63
- package/data/zeroheight-exports/Corners.md +8 -15
- package/data/zeroheight-exports/Dialog.md +200 -12
- package/data/zeroheight-exports/Downloads.md +120 -0
- package/data/zeroheight-exports/Dropdown-Input.md +616 -12
- package/data/zeroheight-exports/Dropdown-Menus.md +1150 -0
- package/data/zeroheight-exports/Field-Inputs.md +450 -9
- package/data/zeroheight-exports/Filters.md +238 -9
- package/data/zeroheight-exports/Getting-Started.md +7 -3
- package/data/zeroheight-exports/Hero.md +152 -0
- package/data/zeroheight-exports/Icons.md +1854 -218
- package/data/zeroheight-exports/Intent.md +40 -0
- package/data/zeroheight-exports/Link.md +52 -6
- package/data/zeroheight-exports/Lists.md +364 -6
- package/data/zeroheight-exports/Loading-Indicator.md +8 -0
- package/data/zeroheight-exports/Navigation.md +328 -6
- package/data/zeroheight-exports/Notification.md +172 -12
- package/data/zeroheight-exports/Panel.md +72 -12
- package/data/zeroheight-exports/README.md +17 -19
- package/data/zeroheight-exports/Responsive-Design.md +52 -0
- package/data/zeroheight-exports/Search-Input.md +44 -0
- package/data/zeroheight-exports/Search.md +248 -0
- package/data/zeroheight-exports/Segmented-Control.md +34 -9
- package/data/zeroheight-exports/Table.md +468 -47
- package/data/zeroheight-exports/Tabs.md +542 -9
- package/data/zeroheight-exports/Tags.md +504 -12
- package/data/zeroheight-exports/Text-Link.md +100 -0
- package/data/zeroheight-exports/Theming.md +36 -6
- package/data/zeroheight-exports/Tooltips.md +466 -15
- package/data/zeroheight-exports/Typography.md +64 -32
- package/package.json +3 -3
- package/data/zeroheight-exports/Dropdown-Menu.md +0 -3883
|
@@ -16,13 +16,61 @@ While Primitive Color variables define the individual colors within the design s
|
|
|
16
16
|
|
|
17
17
|
Semantic Color variables are named in such a way as to create predictable usage across SDS. They start with the variable group, followed by the element it is applied to, and then add any number of modifiers to communicate the color's specific application within the UI, such as prominence or state.
|
|
18
18
|
|
|
19
|
+
**Color_Semantic Colors_Overview_Naming**
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
19
23
|
Because Semantic Color variables are scoped to individual UI elements, a single Primitive Color variable, such as _blue500_ (Light Mode) or _blue600_ (Dark Mode), can be mapped to a range of Semantic Color variables like _Accent.border_, _Accent.ornament_, _Accent.text-action_, etc. since all of these elements are the same color.
|
|
20
24
|
|
|
21
25
|
| Light Mode | Dark Mode |
|
|
22
26
|
| :--------: | :-------: |
|
|
23
27
|
|
|
28
|
+
**Color_Semantic Colors_Overview_Primitive Scoping_Light**
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
**Color_Semantic Colors_Overview_Primitive Scoping_Dark**
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
24
36
|
### Semantic Color Variable Groups
|
|
25
37
|
|
|
38
|
+
**Colors_Semantic_Base**
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
**Colors_Semantic_Action**
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
**Colors_Semantic_Accent**
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
**Colors_Semantic_Beta**
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
**Colors_Semantic_Info**
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
**Colors_Semantic_Negative**
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
**Colors_Semantic_Neutral**
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
**Colors_Semantic_Notice**
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
**Colors_Semantic_Positive**
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
26
74
|
---
|
|
27
75
|
|
|
28
76
|
### Base Colors
|
|
@@ -42,6 +90,14 @@ When greater visual contrast is needed use _background-primary-inverse, backgrou
|
|
|
42
90
|
| Light Mode | Dark Mode |
|
|
43
91
|
| :--------: | :-------: |
|
|
44
92
|
|
|
93
|
+
**Color_Semantic Colors_Base_Surface_Light**
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
**Color_Semantic Colors_Base_Surface_Dark**
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
45
101
|
| Name | | Figma Variable | | CSS / SCSS Variables |
|
|
46
102
|
| ---------------------------- | --- | ---------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
103
|
| background-primary | | Light: Base.background-primary (#ffffff) Dark: Base.background-primary (#101010) | | CSS light / dark: `--sds-color-semantic-component-base-background-primary` SCSS light: `$sds-color-semantic-component-base-background-primary` SCSS dark: `$sds-color-semantic-component-base-background-primary-dark` |
|
|
@@ -59,14 +115,25 @@ Base Fill colors are used for element backgrounds that are interactive and chang
|
|
|
59
115
|
| Light Mode | Dark Mode |
|
|
60
116
|
| :--------: | :-------: |
|
|
61
117
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
118
|
+
**Color_Base Colors_Fill_Light**
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
**Color_Base Colors_Fill_Dark**
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
| Name | | Figma Variable | | CSS / SCSS Variable |
|
|
127
|
+
| -------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
128
|
+
| fill-primary | | Light: Base.fill-primary (#ffffff) Dark: Base.fill-primary (#333333) | | CSS light / dark: `--sds-color-semantic-component-base-fill-primary` SCSS light: `$sds-color-semantic-component-base-fill-primary` SCSS dark: `$sds-color-semantic-component-base-fill-primary-dark` |
|
|
129
|
+
| fill-hover | | Light: Base.fill-hover (rgba(195, 195, 195, 0.2000)) Dark: Base.fill-hover (rgba(105, 105, 105, 0.5800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-hover` SCSS light: `$sds-color-semantic-component-base-fill-hover` SCSS dark: `$sds-color-semantic-component-base-fill-hover-dark` |
|
|
130
|
+
| fill-pressed | | Light: Base.fill-pressed (rgba(195, 195, 195, 0.2000)) Dark: Base.fill-pressed (rgba(105, 105, 105, 0.5800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-pressed` SCSS light: `$sds-color-semantic-component-base-fill-pressed` SCSS dark: `$sds-color-semantic-component-base-fill-pressed-dark` |
|
|
131
|
+
| fill-open | | Light: Base.fill-open (rgba(195, 195, 195, 0.2000)) Dark: Base.fill-open (rgba(105, 105, 105, 0.5800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-open` SCSS light: `$sds-color-semantic-component-base-fill-open` SCSS dark: `$sds-color-semantic-component-base-fill-open-dark` |
|
|
132
|
+
| fill-selected | | Light: Base.fill-selected (#000000) Dark: Base.fill-selected (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-fill-selected` SCSS light: `$sds-color-semantic-component-base-fill-selected` SCSS dark: `$sds-color-semantic-component-base-fill-selected-dark` |
|
|
133
|
+
| fill-hover-inverse | | Light: Base.fill-hover-inverse (rgba(195, 195, 195, 0.3400)) Dark: Base.fill-hover-inverse (rgba(105, 105, 105, 0.0800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-hover-inverse` SCSS light: `$sds-color-semantic-component-base-fill-hover-inverse` SCSS dark: `$sds-color-semantic-component-base-fill-hover-inverse-dark` |
|
|
134
|
+
| fill-pressed-inverse | | Light: Base.fill-pressed-inverse (rgba(195, 195, 195, 0.3400)) Dark: Base.fill-pressed-inverse (rgba(105, 105, 105, 0.0800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-pressed-inverse` SCSS light: `$sds-color-semantic-component-base-fill-pressed-inverse` SCSS dark: `$sds-color-semantic-component-base-fill-pressed-inverse-dark` |
|
|
135
|
+
| fill-open-inverse | | Light: Base.fill-open-inverse (rgba(195, 195, 195, 0.3400)) Dark: Base.fill-open-inverse (rgba(105, 105, 105, 0.0800)) | | CSS light / dark: `--sds-color-semantic-component-base-fill-open-inverse` SCSS light: `$sds-color-semantic-component-base-fill-open-inverse` SCSS dark: `$sds-color-semantic-component-base-fill-open-inverse-dark` |
|
|
136
|
+
| fill-disabled | | Light: Base.fill-disabled (#dfdfdf) Dark: Base.fill-disabled (#494949) | | CSS light / dark: `--sds-color-semantic-component-base-fill-disabled` SCSS light: `$sds-color-semantic-component-base-fill-disabled` SCSS dark: `$sds-color-semantic-component-base-fill-disabled-dark` |
|
|
70
137
|
|
|
71
138
|
#### Border and Divider
|
|
72
139
|
|
|
@@ -79,9 +146,17 @@ Base _divider_ is intended to be used only on horizontal dividers that separate
|
|
|
79
146
|
| Light Mode | Dark Mode |
|
|
80
147
|
| :--------: | :-------: |
|
|
81
148
|
|
|
149
|
+
**Color_Base Colors_Border and Divider_Light**
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
**Color_Base Colors_Border and Divider_Dark**
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
82
157
|
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
83
158
|
| ------------------------------- | --- | ---------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
84
|
-
| border-primary | | Light: Base.border-primary (#
|
|
159
|
+
| border-primary | | Light: Base.border-primary (#767676) Dark: Base.border-primary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary` SCSS light: `$sds-color-semantic-component-base-border-primary` SCSS dark: `$sds-color-semantic-component-base-border-primary-dark` |
|
|
85
160
|
| border-primary-hover | | Light: Base.border-primary-hover (#000000) Dark: Base.border-primary-hover (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-border-hover` SCSS light: `$sds-color-semantic-component-base-border-primary-hover` SCSS dark: `$sds-color-semantic-component-base-border-primary-hover-dark` |
|
|
86
161
|
| border-primary-pressed | | Light: Base.border-primary-pressed (#000000) Dark: Base.border-primary-pressed (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-pressed` SCSS light: `$sds-color-semantic-component-base-border-primary-pressed` SCSS dark: `$sds-color-semantic-component-base-border-primary-pressed-dark` |
|
|
87
162
|
| border-primary-disabled | | Light: Base.border-primary-disabled (#c3c3c3) Dark: Base.border-primary-disabled (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-disabled` SCSS light: `$sds-color-semantic-component-base-border-primary-disabled` SCSS dark: `$sds-color-semantic-component-base-border-primary-disabled-dark` |
|
|
@@ -89,10 +164,10 @@ Base _divider_ is intended to be used only on horizontal dividers that separate
|
|
|
89
164
|
| border-primary-inverse | | Light: Base.border-primary-inverse (#c3c3c3) Dark: Base.border-primary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-inverse-dark` |
|
|
90
165
|
| border-primary-hover-inverse | | Light: Base.border-primary-hover-inverse (#ffffff) Dark: Base.border-primary-hover-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-hover-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-hover-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-hover-inverse-dark` |
|
|
91
166
|
| border-primary-pressed-inverse | | Light: Base.border-primary-pressed-inverse (#ffffff) Dark: Base.border-primary-pressed-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-pressed-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-pressed-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-pressed-inverse-dark` |
|
|
92
|
-
| border-primary-disabled-inverse | | Light: Base.border-primary-disabled-inverse (#
|
|
167
|
+
| border-primary-disabled-inverse | | Light: Base.border-primary-disabled-inverse (#767676) Dark: Base.border-primary-disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-border-primary-disabled-inverse` SCSS light: `$sds-color-semantic-component-base-border-primary-disabled-inverse` SCSS dark: `$sds-color-semantic-component-base-border-primary-disabled-inverse-dark` |
|
|
93
168
|
| border-on-fill | | Light: Base.border-on-fill (#ffffff) Dark: Base.border-on-fill (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-border-on-fill` SCSS light: `$sds-color-semantic-component-base-border-on-fill` SCSS dark: `$sds-color-semantic-component-base-border-on-fill-dark` |
|
|
94
169
|
| divider | | Light: Base.divider (#dfdfdf) Dark: Base.divider (#494949) | | CSS light / dark: `--sds-color-semantic-component-base-divider` SCSS light: `$sds-color-semantic-component-base-divider` SCSS dark: `$sds-color-semantic-component-base-divider-dark` |
|
|
95
|
-
| divider-inverse | | Light: Base.divider-inverse (#
|
|
170
|
+
| divider-inverse | | Light: Base.divider-inverse (#767676) Dark: Base.divider-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-divider-inverse` SCSS light: `$sds-color-semantic-component-base-divider-inverse` SCSS dark: `$sds-color-semantic-component-base-divider-inverse-dark` |
|
|
96
171
|
|
|
97
172
|
#### Ornament
|
|
98
173
|
|
|
@@ -105,17 +180,27 @@ When visual contrast is needed use _ornament-primary-inverse_.
|
|
|
105
180
|
| Light Mode | Dark Mode |
|
|
106
181
|
| :--------: | :-------: |
|
|
107
182
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
| ornament-
|
|
183
|
+
**Colors_Semantic_Base_Icon_Light**
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
**Colors_Semantic_Base_Icon_Dark**
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
192
|
+
| ---------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
193
|
+
| ornament-primary | | Light: Base.ornament-primary (#000000) Dark: Base.ornament-primary (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-primary` SCSS light: `$sds-color-semantic-component-base-ornament-primary` SCSS dark: `$sds-color-semantic-component-base-ornament-primary-dark` |
|
|
194
|
+
| ornament-secondary | | Light: Base.ornament-secondary (#767676) Dark: Base.ornament-secondary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary` SCSS light: `$sds-color-semantic-component-base-ornament-secondary` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-dark` |
|
|
195
|
+
| ornament-secondary-hover | | Light: Base.ornament-secondary-hover (#000000) Dark: Base.ornament-secondary-hover (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-hover` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-hover` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-hover-dark` |
|
|
196
|
+
| ornament-secondary-pressed | | Light: Base.ornament-secondary-pressed (#000000) Dark: Base.ornament-secondary-pressed (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-pressed` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-pressed` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-pressed-dark` |
|
|
197
|
+
| ornament-primary-inverse | | Light: Base.ornament-primary-inverse (#ffffff) Dark: Base.ornament-primary-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-primary-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-primary-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-primary-inverse-dark` |
|
|
198
|
+
| ornament-secondary-inverse | | Light: Base.ornament-secondary-inverse (#c3c3c3) Dark: Base.ornament-secondary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-inverse-dark` |
|
|
199
|
+
| ornament-secondary-hover-inverse | | Light: Base.ornament-secondary-hover-inverse (#ffffff) Dark: Base.ornament-secondary-hover-inverse (#000000) | | SS light / dark: `--sds-color-semantic-component-base-ornament-secondary-hover-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-hover-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-hover-inverse-dark` |
|
|
200
|
+
| ornament-secondary-pressed-inverse | | Light: Base.ornament-secondary-pressed-inverse (#ffffff) Dark: Base.ornament-secondary-pressed-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-secondary-pressed-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-secondary-pressed-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-secondary-pressed-inverse-dark` |
|
|
201
|
+
| ornament-on-fill | | Light: Base.ornament-on-fill (#ffffff) Dark: Base.ornament-on-fill (#ffffff) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-on-fill` SCSS light: `$sds-color-semantic-component-base-ornament-on-fill` SCSS dark: `$sds-color-semantic-component-base-ornament-on-fill-dark` |
|
|
202
|
+
| ornament-disabled | | Light: Base.ornament-disabled (#c3c3c3) Dark: Base.ornament-disabled (#696969) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-disabled` SCSS light: `$sds-color-semantic-component-base-ornament-disabled` SCSS dark: `$sds-color-semantic-component-base-ornament-disabled-dark` |
|
|
203
|
+
| ornament-disabled-inverse | | Light: Base.ornament-disabled-inverse (#767676) Dark: Base.ornament-disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-base-ornament-disabled-inverse` SCSS light: `$sds-color-semantic-component-base-ornament-disabled-inverse` SCSS dark: `$sds-color-semantic-component-base-ornament-disabled-inverse-dark` |
|
|
119
204
|
|
|
120
205
|
#### Text
|
|
121
206
|
|
|
@@ -130,17 +215,25 @@ When the fill of the element that the text is placed on top of is too dark in bo
|
|
|
130
215
|
| Light Mode | Dark Mode |
|
|
131
216
|
| :--------: | :-------: |
|
|
132
217
|
|
|
218
|
+
**Colors_Semantic_Base_Text_Light**
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
**Colors_Semantic_Base_Text_Dark**
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
133
226
|
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
134
227
|
| ----------------- | --- | ------------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
135
228
|
| primary | | Light: Text.primary (#000000) Dark: Text.primary (#ffffff) | | CSS light / dark: `--sds-color-semantic-base-text-primary` SCSS light: `$sds-color-semantic-base-text-primary` SCSS dark: `$sds-color-semantic-base-text-primary-dark` |
|
|
136
|
-
| secondary | | Light: Text.secondary (#
|
|
229
|
+
| secondary | | Light: Text.secondary (#767676) Dark: Text.secondary (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-base-text-secondary` SCSS light: `$sds-color-semantic-base-text-secondary` SCSS dark: `$sds-color-semantic-base-text-secondary-dark` |
|
|
137
230
|
| tertiary | | Light: Text.tertiary (#a5a5a5) Dark: Text.tertiary (#9b9b9b) | | CSS light / dark: `--sds-color-semantic-base-text-tertiary` SCSS light: `$sds-color-semantic-base-text-tertiary` SCSS dark: `$sds-color-semantic-base-text-tertiary-dark` |
|
|
138
231
|
| primary-inverse | | Light: Text.primary-inverse (#ffffff) Dark: Text.primary-inverse (#000000) | | CSS light / dark: `--sds-color-semantic-base-text-primary-inverse` SCSS light: `$sds-color-semantic-base-text-primary-inverse` SCSS dark: `$sds-color-semantic-base-text-primary-inverse-dark` |
|
|
139
232
|
| secondary-inverse | | Light: Text.secondary-inverse (#c3c3c3) Dark: Text.secondary-inverse (#696969) | | CSS light / dark: `--sds-color-semantic-base-text-secondary-inverse` SCSS light: `$sds-color-semantic-text-base-secondary-inverse` SCSS dark: `$sds-color-semantic-text-base-secondary-inverse-dark` |
|
|
140
233
|
| tertiary-inverse | | Light: Text.tertiary-inverse (#969696) Dark: Text.tertiary-inverse (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-base-text-tertiary-inverse` SCSS light: `$sds-color-semantic-base-text-tertiary-inverse` SCSS dark: `$sds-color-semantic-base-text-tertiary-inverse-dark` |
|
|
141
234
|
| on-fill | | Light: Text.on-fill (#ffffff) Dark: Text.on-fill (#ffffff) | | CSS light / dark: `--sds-color-semantic-base-text-on-fill` SCSS light: `$sds-color-semantic-base-text-on-fill` SCSS dark: `$sds-color-semantic-base-text-on-fill-dark` |
|
|
142
235
|
| disabled | | Light: Text.disabled (#c3c3c3) Dark: Text.disabled (#696969) | | CSS light / dark: `--sds-color-semantic-base-text-disabled` SCSS light: `$sds-color-semantic-base-text-disabled` SCSS dark: `$sds-color-semantic-base-text-disabled-dark` |
|
|
143
|
-
| disabled-inverse | | Light: Text.disabled-inverse (#
|
|
236
|
+
| disabled-inverse | | Light: Text.disabled-inverse (#767676) Dark: Text.disabled-inverse (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-base-text-disabled-inverse` SCSS light: `$sds-color-semantic-base-text-disabled-inverse` SCSS dark: `$sds-color-semantic-base-text-disabled-inverse-dark` |
|
|
144
237
|
|
|
145
238
|
---
|
|
146
239
|
|
|
@@ -371,7 +464,7 @@ Neutral Fill Colors are used on elements that are interactive and change in resp
|
|
|
371
464
|
| **Name** | | **Figma Variable** | | **CSS / SCSS Variable** |
|
|
372
465
|
| -------------- | --- | ------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
373
466
|
| fill-primary | | Light: Neutral.fill-primary (#969696) Dark: Neutral.fill-primary (#aaaaaa) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-primary` SCSS light: `$sds-color-semantic-component-neutral-fill-primary` SCSS dark: `$sds-color-semantic-component-neutral-fill-primary-dark` |
|
|
374
|
-
| fill-hover | | Light: Neutral.fill-hover (#
|
|
467
|
+
| fill-hover | | Light: Neutral.fill-hover (#767676) Dark: Neutral.fill-hover (#cdcdcd) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-hover` SCSS light: `$sds-color-semantic-component-neutral-fill-hover` SCSS dark: `$sds-color-semantic-component-neutral-fill-hover-dark` |
|
|
375
468
|
| fill-pressed | | Light: Neutral.fill-pressed (#3b3b3b) Dark: Neutral.fill-pressed (#ededed) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-pressed` SCSS light: `$sds-color-semantic-component-neutral-fill-pressed` SCSS dark: `$sds-color-semantic-component-neutral-fill-pressed-dark` |
|
|
376
469
|
| fill-secondary | | Light: Neutral.fill-secondary (#dfdfdf) Dark: Neutral.fill-secondary (#494949) | | CSS light / dark: `--sds-color-semantic-component-neutral-fill-secondary` SCSS light: `$sds-color-semantic-component-neutral-fill-secondary` SCSS dark: `$sds-color-semantic-component-neutral-fill-secondary-dark` |
|
|
377
470
|
|
|
@@ -535,6 +628,10 @@ Magma is a well-vetted, industry-standard colormap from Matplotlib and is the fi
|
|
|
535
628
|
|
|
536
629
|
Magma is perceptually uniform, meaning it has consistent and even changes in brightness and hue across the entire colormap. This ensures the colors that get mapped to each datapoint in a visualization are not only an equivalent distance away from each other technically, but visually appear as such, even for folks with visual accessibility concerns who might have trouble perceiving differences between colors.
|
|
537
630
|
|
|
631
|
+
**Colors_Visualzation_Magma**
|
|
632
|
+
|
|
633
|
+
---
|
|
634
|
+
|
|
538
635
|
> **Note:** any color from the Magma colormap can be used in implementation, however the following nine colors have been created as variables for easy use in Figma.
|
|
539
636
|
|
|
540
637
|
| **Name** | | **Figma Variable** | | **CSS / SCSS Variables** |
|
|
@@ -561,20 +658,299 @@ For the sake of specificity, only those colors used in each scale are documented
|
|
|
561
658
|
|
|
562
659
|
### Primary Blue
|
|
563
660
|
|
|
661
|
+
**primary100**
|
|
662
|
+
|
|
663
|
+
| Property | Value |
|
|
664
|
+
| :------- | :----------------- |
|
|
665
|
+
| Hex | #ECF8FF |
|
|
666
|
+
| RGB | rgb(236, 248, 255) |
|
|
667
|
+
|
|
668
|
+
---
|
|
669
|
+
|
|
670
|
+
**primary200**
|
|
671
|
+
|
|
672
|
+
| Property | Value |
|
|
673
|
+
| :------- | :----------------- |
|
|
674
|
+
| Hex | #D2EFFF |
|
|
675
|
+
| RGB | rgb(210, 239, 255) |
|
|
676
|
+
|
|
677
|
+
---
|
|
678
|
+
|
|
679
|
+
**primary400**
|
|
680
|
+
|
|
681
|
+
| Property | Value |
|
|
682
|
+
| :------- | :----------------- |
|
|
683
|
+
| Hex | #80D1FF |
|
|
684
|
+
| RGB | rgb(128, 209, 255) |
|
|
685
|
+
|
|
686
|
+
---
|
|
687
|
+
|
|
688
|
+
**primary500**
|
|
689
|
+
|
|
690
|
+
| Property | Value |
|
|
691
|
+
| :------- | :----------------- |
|
|
692
|
+
| Hex | #68C8FF |
|
|
693
|
+
| RGB | rgb(104, 200, 255) |
|
|
694
|
+
|
|
695
|
+
---
|
|
696
|
+
|
|
697
|
+
**primary600**
|
|
698
|
+
|
|
699
|
+
| Property | Value |
|
|
700
|
+
| :------- | :--------------- |
|
|
701
|
+
| Hex | #009BF2 |
|
|
702
|
+
| RGB | rgb(0, 155, 242) |
|
|
703
|
+
|
|
704
|
+
---
|
|
705
|
+
|
|
564
706
|
### Grays
|
|
565
707
|
|
|
708
|
+
**White**
|
|
709
|
+
|
|
710
|
+
| Property | Value |
|
|
711
|
+
| :------- | :----------------- |
|
|
712
|
+
| Hex | #FFFFFF |
|
|
713
|
+
| RGB | rgb(255, 255, 255) |
|
|
714
|
+
|
|
715
|
+
---
|
|
716
|
+
|
|
717
|
+
**gray100**
|
|
718
|
+
|
|
719
|
+
| Property | Value |
|
|
720
|
+
| :------- | :----------------- |
|
|
721
|
+
| Hex | #F7F7F7 |
|
|
722
|
+
| RGB | rgb(247, 247, 247) |
|
|
723
|
+
|
|
724
|
+
---
|
|
725
|
+
|
|
726
|
+
**gray200**
|
|
727
|
+
|
|
728
|
+
| Property | Value |
|
|
729
|
+
| :------- | :----------------- |
|
|
730
|
+
| Hex | #EAEAEA |
|
|
731
|
+
| RGB | rgb(234, 234, 234) |
|
|
732
|
+
|
|
733
|
+
---
|
|
734
|
+
|
|
735
|
+
**gray300**
|
|
736
|
+
|
|
737
|
+
| Property | Value |
|
|
738
|
+
| :------- | :----------------- |
|
|
739
|
+
| Hex | #CCCCCC |
|
|
740
|
+
| RGB | rgb(204, 204, 204) |
|
|
741
|
+
|
|
742
|
+
---
|
|
743
|
+
|
|
744
|
+
**gray400**
|
|
745
|
+
|
|
746
|
+
| Property | Value |
|
|
747
|
+
| :------- | :----------------- |
|
|
748
|
+
| Hex | #999999 |
|
|
749
|
+
| RGB | rgb(153, 153, 153) |
|
|
750
|
+
|
|
751
|
+
---
|
|
752
|
+
|
|
753
|
+
**gray500**
|
|
754
|
+
|
|
755
|
+
| Property | Value |
|
|
756
|
+
| :------- | :----------------- |
|
|
757
|
+
| Hex | #686868 |
|
|
758
|
+
| RGB | rgb(104, 104, 104) |
|
|
759
|
+
|
|
760
|
+
---
|
|
761
|
+
|
|
762
|
+
**Black**
|
|
763
|
+
|
|
764
|
+
| Property | Value |
|
|
765
|
+
| :------- | :----------- |
|
|
766
|
+
| Hex | #000000 |
|
|
767
|
+
| RGB | rgb(0, 0, 0) |
|
|
768
|
+
|
|
769
|
+
---
|
|
770
|
+
|
|
566
771
|
---
|
|
567
772
|
|
|
568
773
|
## Admonition Colors
|
|
569
774
|
|
|
570
775
|
These colors are used on admonition blocks only and should not be used anywhere else in the UI. Each color should be used for the specific admonition type named.
|
|
571
776
|
|
|
777
|
+
**Danger**
|
|
778
|
+
|
|
779
|
+
| Property | Value |
|
|
780
|
+
| :------- | :----------------- |
|
|
781
|
+
| Hex | #FF8080 |
|
|
782
|
+
| RGB | rgb(255, 128, 128) |
|
|
783
|
+
|
|
784
|
+
---
|
|
785
|
+
|
|
786
|
+
**Warning**
|
|
787
|
+
|
|
788
|
+
| Property | Value |
|
|
789
|
+
| :------- | :----------------- |
|
|
790
|
+
| Hex | #FFA680 |
|
|
791
|
+
| RGB | rgb(255, 166, 128) |
|
|
792
|
+
|
|
793
|
+
---
|
|
794
|
+
|
|
795
|
+
**Caution**
|
|
796
|
+
|
|
797
|
+
| Property | Value |
|
|
798
|
+
| :------- | :----------------- |
|
|
799
|
+
| Hex | #FFC580 |
|
|
800
|
+
| RGB | rgb(255, 197, 128) |
|
|
801
|
+
|
|
802
|
+
---
|
|
803
|
+
|
|
804
|
+
**Error**
|
|
805
|
+
|
|
806
|
+
| Property | Value |
|
|
807
|
+
| :------- | :----------------- |
|
|
808
|
+
| Hex | #FADE7D |
|
|
809
|
+
| RGB | rgb(250, 222, 125) |
|
|
810
|
+
|
|
811
|
+
---
|
|
812
|
+
|
|
813
|
+
**Important**
|
|
814
|
+
|
|
815
|
+
| Property | Value |
|
|
816
|
+
| :------- | :----------------- |
|
|
817
|
+
| Hex | #F1F379 |
|
|
818
|
+
| RGB | rgb(241, 243, 121) |
|
|
819
|
+
|
|
820
|
+
---
|
|
821
|
+
|
|
822
|
+
**Attention**
|
|
823
|
+
|
|
824
|
+
| Property | Value |
|
|
825
|
+
| :------- | :----------------- |
|
|
826
|
+
| Hex | #D8F97D |
|
|
827
|
+
| RGB | rgb(216, 249, 125) |
|
|
828
|
+
|
|
829
|
+
---
|
|
830
|
+
|
|
831
|
+
**Note**
|
|
832
|
+
|
|
833
|
+
| Property | Value |
|
|
834
|
+
| :------- | :----------------- |
|
|
835
|
+
| Hex | #80FFE0 |
|
|
836
|
+
| RGB | rgb(128, 255, 224) |
|
|
837
|
+
|
|
838
|
+
---
|
|
839
|
+
|
|
840
|
+
**Default**
|
|
841
|
+
|
|
842
|
+
| Property | Value |
|
|
843
|
+
| :------- | :----------------- |
|
|
844
|
+
| Hex | #80D1FF |
|
|
845
|
+
| RGB | rgb(128, 209, 255) |
|
|
846
|
+
|
|
847
|
+
---
|
|
848
|
+
|
|
849
|
+
**Hint**
|
|
850
|
+
|
|
851
|
+
| Property | Value |
|
|
852
|
+
| :------- | :----------------- |
|
|
853
|
+
| Hex | #8094FF |
|
|
854
|
+
| RGB | rgb(128, 148, 255) |
|
|
855
|
+
|
|
856
|
+
---
|
|
857
|
+
|
|
858
|
+
**Tip**
|
|
859
|
+
|
|
860
|
+
| Property | Value |
|
|
861
|
+
| :------- | :----------------- |
|
|
862
|
+
| Hex | #CF80FF |
|
|
863
|
+
| RGB | rgb(207, 128, 255) |
|
|
864
|
+
|
|
865
|
+
---
|
|
866
|
+
|
|
572
867
|
---
|
|
573
868
|
|
|
574
869
|
## Code Colors
|
|
575
870
|
|
|
576
871
|
These colors are used in code snippets only and should not be used anywhere else in the UI. Each color should be used for the specific code element type named.
|
|
577
872
|
|
|
873
|
+
**Background**
|
|
874
|
+
|
|
875
|
+
| Property | Value |
|
|
876
|
+
| :------- | :----------------- |
|
|
877
|
+
| Hex | #F7F7F7 |
|
|
878
|
+
| RGB | rgb(247, 247, 247) |
|
|
879
|
+
|
|
880
|
+
---
|
|
881
|
+
|
|
882
|
+
**Comments**
|
|
883
|
+
|
|
884
|
+
| Property | Value |
|
|
885
|
+
| :------- | :----------------- |
|
|
886
|
+
| Hex | #6F6F6F |
|
|
887
|
+
| RGB | rgb(111, 111, 111) |
|
|
888
|
+
|
|
889
|
+
---
|
|
890
|
+
|
|
891
|
+
**Functions**
|
|
892
|
+
|
|
893
|
+
| Property | Value |
|
|
894
|
+
| :------- | :-------------- |
|
|
895
|
+
| Hex | #004166 |
|
|
896
|
+
| RGB | rgb(0, 65, 102) |
|
|
897
|
+
|
|
898
|
+
---
|
|
899
|
+
|
|
900
|
+
**HTML Tags**
|
|
901
|
+
|
|
902
|
+
| Property | Value |
|
|
903
|
+
| :------- | :--------------- |
|
|
904
|
+
| Hex | #5D7A1F |
|
|
905
|
+
| RGB | rgb(93, 122, 31) |
|
|
906
|
+
|
|
907
|
+
---
|
|
908
|
+
|
|
909
|
+
**Key Words**
|
|
910
|
+
|
|
911
|
+
| Property | Value |
|
|
912
|
+
| :------- | :---------------- |
|
|
913
|
+
| Hex | #7518A1 |
|
|
914
|
+
| RGB | rgb(117, 24, 161) |
|
|
915
|
+
|
|
916
|
+
---
|
|
917
|
+
|
|
918
|
+
**Operators**
|
|
919
|
+
|
|
920
|
+
| Property | Value |
|
|
921
|
+
| :------- | :---------------- |
|
|
922
|
+
| Hex | #956441 |
|
|
923
|
+
| RGB | rgb(149, 100, 65) |
|
|
924
|
+
|
|
925
|
+
---
|
|
926
|
+
|
|
927
|
+
**Strings**
|
|
928
|
+
|
|
929
|
+
| Property | Value |
|
|
930
|
+
| :------- | :--------------- |
|
|
931
|
+
| Hex | #0074B8 |
|
|
932
|
+
| RGB | rgb(0, 116, 184) |
|
|
933
|
+
|
|
934
|
+
---
|
|
935
|
+
|
|
936
|
+
**Text**
|
|
937
|
+
|
|
938
|
+
| Property | Value |
|
|
939
|
+
| :------- | :----------- |
|
|
940
|
+
| Hex | #000000 |
|
|
941
|
+
| RGB | rgb(0, 0, 0) |
|
|
942
|
+
|
|
943
|
+
---
|
|
944
|
+
|
|
945
|
+
**Variables, Numbers, Booleans**
|
|
946
|
+
|
|
947
|
+
| Property | Value |
|
|
948
|
+
| :------- | :---------------- |
|
|
949
|
+
| Hex | #227B81 |
|
|
950
|
+
| RGB | rgb(34, 123, 129) |
|
|
951
|
+
|
|
952
|
+
---
|
|
953
|
+
|
|
578
954
|
---
|
|
579
955
|
|
|
580
956
|
Color helps communicate usage and intent while providing brand distinction. Our palette has been selected for meaning, accessibility, and cohesion.
|
|
@@ -585,35 +961,133 @@ These are the most frequently used colors in the UI's design. Primary400 is the
|
|
|
585
961
|
|
|
586
962
|
### Primary Purple
|
|
587
963
|
|
|
588
|
-
|
|
964
|
+
**primary100**
|
|
965
|
+
|
|
966
|
+
| Property | Value |
|
|
967
|
+
| :------- | :----------------- |
|
|
968
|
+
| Hex | #FCFAFF |
|
|
969
|
+
| RGB | rgb(252, 250, 255) |
|
|
589
970
|
|
|
590
971
|
---
|
|
591
972
|
|
|
592
|
-
|
|
973
|
+
**primary200**
|
|
593
974
|
|
|
594
|
-
|
|
975
|
+
| Property | Value |
|
|
976
|
+
| :------- | :----------------- |
|
|
977
|
+
| Hex | #F6F2FC |
|
|
978
|
+
| RGB | rgb(246, 242, 252) |
|
|
595
979
|
|
|
596
|
-
|
|
980
|
+
---
|
|
597
981
|
|
|
598
|
-
|
|
982
|
+
**primary300**
|
|
599
983
|
|
|
600
|
-
|
|
984
|
+
| Property | Value |
|
|
985
|
+
| :------- | :----------------- |
|
|
986
|
+
| Hex | #D4BFFF |
|
|
987
|
+
| RGB | rgb(212, 191, 255) |
|
|
601
988
|
|
|
602
|
-
|
|
989
|
+
---
|
|
990
|
+
|
|
991
|
+
**primary400**
|
|
992
|
+
|
|
993
|
+
| Property | Value |
|
|
994
|
+
| :------- | :--------------- |
|
|
995
|
+
| Hex | #511CC1 |
|
|
996
|
+
| RGB | rgb(81, 28, 193) |
|
|
603
997
|
|
|
604
998
|
---
|
|
605
999
|
|
|
606
|
-
|
|
1000
|
+
**primary500**
|
|
607
1001
|
|
|
608
|
-
|
|
1002
|
+
| Property | Value |
|
|
1003
|
+
| :------- | :--------------- |
|
|
1004
|
+
| Hex | #4317A1 |
|
|
1005
|
+
| RGB | rgb(67, 23, 161) |
|
|
609
1006
|
|
|
610
|
-
|
|
1007
|
+
---
|
|
611
1008
|
|
|
612
|
-
|
|
1009
|
+
**primary600**
|
|
1010
|
+
|
|
1011
|
+
| Property | Value |
|
|
1012
|
+
| :------- | :--------------- |
|
|
1013
|
+
| Hex | #371680 |
|
|
1014
|
+
| RGB | rgb(55, 22, 128) |
|
|
1015
|
+
|
|
1016
|
+
---
|
|
613
1017
|
|
|
614
1018
|
### Grays
|
|
615
1019
|
|
|
616
|
-
|
|
1020
|
+
**White**
|
|
1021
|
+
|
|
1022
|
+
| Property | Value |
|
|
1023
|
+
| :------- | :----------------- |
|
|
1024
|
+
| Hex | #FFFFFF |
|
|
1025
|
+
| RGB | rgb(255, 255, 255) |
|
|
1026
|
+
|
|
1027
|
+
---
|
|
1028
|
+
|
|
1029
|
+
**gray100**
|
|
1030
|
+
|
|
1031
|
+
| Property | Value |
|
|
1032
|
+
| :------- | :----------------- |
|
|
1033
|
+
| Hex | #F8F8F8 |
|
|
1034
|
+
| RGB | rgb(248, 248, 248) |
|
|
1035
|
+
|
|
1036
|
+
---
|
|
1037
|
+
|
|
1038
|
+
**gray200**
|
|
1039
|
+
|
|
1040
|
+
| Property | Value |
|
|
1041
|
+
| :------- | :----------------- |
|
|
1042
|
+
| Hex | #EAEAEA |
|
|
1043
|
+
| RGB | rgb(234, 234, 234) |
|
|
1044
|
+
|
|
1045
|
+
---
|
|
1046
|
+
|
|
1047
|
+
**gray300**
|
|
1048
|
+
|
|
1049
|
+
| Property | Value |
|
|
1050
|
+
| :------- | :----------------- |
|
|
1051
|
+
| Hex | #CCCCCC |
|
|
1052
|
+
| RGB | rgb(204, 204, 204) |
|
|
1053
|
+
|
|
1054
|
+
---
|
|
1055
|
+
|
|
1056
|
+
**gray400**
|
|
1057
|
+
|
|
1058
|
+
| Property | Value |
|
|
1059
|
+
| :------- | :----------------- |
|
|
1060
|
+
| Hex | #999999 |
|
|
1061
|
+
| RGB | rgb(153, 153, 153) |
|
|
1062
|
+
|
|
1063
|
+
---
|
|
1064
|
+
|
|
1065
|
+
**gray500**
|
|
1066
|
+
|
|
1067
|
+
| Property | Value |
|
|
1068
|
+
| :------- | :----------------- |
|
|
1069
|
+
| Hex | #767676 |
|
|
1070
|
+
| RGB | rgb(118, 118, 118) |
|
|
1071
|
+
|
|
1072
|
+
---
|
|
1073
|
+
|
|
1074
|
+
**gray600**
|
|
1075
|
+
|
|
1076
|
+
| Property | Value |
|
|
1077
|
+
| :------- | :-------------- |
|
|
1078
|
+
| Hex | #545454 |
|
|
1079
|
+
| RGB | rgb(84, 84, 84) |
|
|
1080
|
+
|
|
1081
|
+
---
|
|
1082
|
+
|
|
1083
|
+
**Black**
|
|
1084
|
+
|
|
1085
|
+
| Property | Value |
|
|
1086
|
+
| :------- | :----------- |
|
|
1087
|
+
| Hex | #000000 |
|
|
1088
|
+
| RGB | rgb(0, 0, 0) |
|
|
1089
|
+
|
|
1090
|
+
---
|
|
617
1091
|
|
|
618
1092
|
---
|
|
619
1093
|
|
|
@@ -623,10 +1097,659 @@ These colors are used for product feedback only, i.e., showing info, success, wa
|
|
|
623
1097
|
|
|
624
1098
|
### Info
|
|
625
1099
|
|
|
626
|
-
|
|
1100
|
+
**info100Overlay**
|
|
627
1101
|
|
|
628
|
-
|
|
1102
|
+
| Property | Value |
|
|
1103
|
+
| :------- | :----------------- |
|
|
1104
|
+
| Hex | #EFEBF4 |
|
|
1105
|
+
| RGB | rgb(239, 235, 244) |
|
|
629
1106
|
|
|
630
|
-
|
|
1107
|
+
---
|
|
631
1108
|
|
|
632
|
-
|
|
1109
|
+
**info100**
|
|
1110
|
+
|
|
1111
|
+
| Property | Value |
|
|
1112
|
+
| :------- | :----------------- |
|
|
1113
|
+
| Hex | #F6F2FC |
|
|
1114
|
+
| RGB | rgb(246, 242, 252) |
|
|
1115
|
+
|
|
1116
|
+
---
|
|
1117
|
+
|
|
1118
|
+
**info200**
|
|
1119
|
+
|
|
1120
|
+
| Property | Value |
|
|
1121
|
+
| :------- | :----------------- |
|
|
1122
|
+
| Hex | #F3EDFC |
|
|
1123
|
+
| RGB | rgb(243, 237, 252) |
|
|
1124
|
+
|
|
1125
|
+
---
|
|
1126
|
+
|
|
1127
|
+
**info400**
|
|
1128
|
+
|
|
1129
|
+
| Property | Value |
|
|
1130
|
+
| :------- | :--------------- |
|
|
1131
|
+
| Hex | #511CC1 |
|
|
1132
|
+
| RGB | rgb(81, 28, 193) |
|
|
1133
|
+
|
|
1134
|
+
---
|
|
1135
|
+
|
|
1136
|
+
**info500**
|
|
1137
|
+
|
|
1138
|
+
| Property | Value |
|
|
1139
|
+
| :------- | :--------------- |
|
|
1140
|
+
| Hex | #4317A1 |
|
|
1141
|
+
| RGB | rgb(67, 23, 161) |
|
|
1142
|
+
|
|
1143
|
+
---
|
|
1144
|
+
|
|
1145
|
+
**info600**
|
|
1146
|
+
|
|
1147
|
+
| Property | Value |
|
|
1148
|
+
| :------- | :--------------- |
|
|
1149
|
+
| Hex | #371680 |
|
|
1150
|
+
| RGB | rgb(55, 22, 128) |
|
|
1151
|
+
|
|
1152
|
+
---
|
|
1153
|
+
|
|
1154
|
+
### Success
|
|
1155
|
+
|
|
1156
|
+
**success100Overlay**
|
|
1157
|
+
|
|
1158
|
+
| Property | Value |
|
|
1159
|
+
| :------- | :----------------- |
|
|
1160
|
+
| Hex | #E4EDE8 |
|
|
1161
|
+
| RGB | rgb(228, 237, 232) |
|
|
1162
|
+
|
|
1163
|
+
---
|
|
1164
|
+
|
|
1165
|
+
**success100**
|
|
1166
|
+
|
|
1167
|
+
| Property | Value |
|
|
1168
|
+
| :------- | :----------------- |
|
|
1169
|
+
| Hex | #ECF5F0 |
|
|
1170
|
+
| RGB | rgb(236, 245, 240) |
|
|
1171
|
+
|
|
1172
|
+
---
|
|
1173
|
+
|
|
1174
|
+
**success200**
|
|
1175
|
+
|
|
1176
|
+
| Property | Value |
|
|
1177
|
+
| :------- | :----------------- |
|
|
1178
|
+
| Hex | #E6F7ED |
|
|
1179
|
+
| RGB | rgb(230, 247, 237) |
|
|
1180
|
+
|
|
1181
|
+
---
|
|
1182
|
+
|
|
1183
|
+
**success400**
|
|
1184
|
+
|
|
1185
|
+
| Property | Value |
|
|
1186
|
+
| :------- | :---------------- |
|
|
1187
|
+
| Hex | #3CB371 |
|
|
1188
|
+
| RGB | rgb(60, 179, 113) |
|
|
1189
|
+
|
|
1190
|
+
---
|
|
1191
|
+
|
|
1192
|
+
**success500**
|
|
1193
|
+
|
|
1194
|
+
| Property | Value |
|
|
1195
|
+
| :------- | :--------------- |
|
|
1196
|
+
| Hex | #349A61 |
|
|
1197
|
+
| RGB | rgb(52, 154, 97) |
|
|
1198
|
+
|
|
1199
|
+
---
|
|
1200
|
+
|
|
1201
|
+
**success600**
|
|
1202
|
+
|
|
1203
|
+
| Property | Value |
|
|
1204
|
+
| :------- | :--------------- |
|
|
1205
|
+
| Hex | #1C7F48 |
|
|
1206
|
+
| RGB | rgb(28, 127, 72) |
|
|
1207
|
+
|
|
1208
|
+
---
|
|
1209
|
+
|
|
1210
|
+
### Error
|
|
1211
|
+
|
|
1212
|
+
**error100Overlay**
|
|
1213
|
+
|
|
1214
|
+
| Property | Value |
|
|
1215
|
+
| :------- | :----------------- |
|
|
1216
|
+
| Hex | #F6EAEA |
|
|
1217
|
+
| RGB | rgb(246, 234, 234) |
|
|
1218
|
+
|
|
1219
|
+
---
|
|
1220
|
+
|
|
1221
|
+
**error100**
|
|
1222
|
+
|
|
1223
|
+
| Property | Value |
|
|
1224
|
+
| :------- | :----------------- |
|
|
1225
|
+
| Hex | #FEF2F2 |
|
|
1226
|
+
| RGB | rgb(254, 242, 242) |
|
|
1227
|
+
|
|
1228
|
+
---
|
|
1229
|
+
|
|
1230
|
+
**error200**
|
|
1231
|
+
|
|
1232
|
+
| Property | Value |
|
|
1233
|
+
| :------- | :----------------- |
|
|
1234
|
+
| Hex | #F8E8E8 |
|
|
1235
|
+
| RGB | rgb(248, 232, 232) |
|
|
1236
|
+
|
|
1237
|
+
---
|
|
1238
|
+
|
|
1239
|
+
**error400**
|
|
1240
|
+
|
|
1241
|
+
| Property | Value |
|
|
1242
|
+
| :------- | :--------------- |
|
|
1243
|
+
| Hex | #DC132C |
|
|
1244
|
+
| RGB | rgb(220, 19, 44) |
|
|
1245
|
+
|
|
1246
|
+
---
|
|
1247
|
+
|
|
1248
|
+
**error500**
|
|
1249
|
+
|
|
1250
|
+
| Property | Value |
|
|
1251
|
+
| :------- | :--------------- |
|
|
1252
|
+
| Hex | #C61128 |
|
|
1253
|
+
| RGB | rgb(198, 17, 40) |
|
|
1254
|
+
|
|
1255
|
+
---
|
|
1256
|
+
|
|
1257
|
+
**error600**
|
|
1258
|
+
|
|
1259
|
+
| Property | Value |
|
|
1260
|
+
| :------- | :-------------- |
|
|
1261
|
+
| Hex | #B70016 |
|
|
1262
|
+
| RGB | rgb(183, 0, 22) |
|
|
1263
|
+
|
|
1264
|
+
---
|
|
1265
|
+
|
|
1266
|
+
### Warning
|
|
1267
|
+
|
|
1268
|
+
**warning100Overlay**
|
|
1269
|
+
|
|
1270
|
+
| Property | Value |
|
|
1271
|
+
| :------- | :----------------- |
|
|
1272
|
+
| Hex | #F4EEE4 |
|
|
1273
|
+
| RGB | rgb(244, 238, 228) |
|
|
1274
|
+
|
|
1275
|
+
---
|
|
1276
|
+
|
|
1277
|
+
**warning100**
|
|
1278
|
+
|
|
1279
|
+
| Property | Value |
|
|
1280
|
+
| :------- | :----------------- |
|
|
1281
|
+
| Hex | #FCF6EC |
|
|
1282
|
+
| RGB | rgb(252, 246, 236) |
|
|
1283
|
+
|
|
1284
|
+
---
|
|
1285
|
+
|
|
1286
|
+
**warning200**
|
|
1287
|
+
|
|
1288
|
+
| Property | Value |
|
|
1289
|
+
| :------- | :----------------- |
|
|
1290
|
+
| Hex | #FFF3E1 |
|
|
1291
|
+
| RGB | rgb(255, 243, 225) |
|
|
1292
|
+
|
|
1293
|
+
---
|
|
1294
|
+
|
|
1295
|
+
**warning400**
|
|
1296
|
+
|
|
1297
|
+
| Property | Value |
|
|
1298
|
+
| :------- | :---------------- |
|
|
1299
|
+
| Hex | #F5A623 |
|
|
1300
|
+
| RGB | rgb(245, 166, 35) |
|
|
1301
|
+
|
|
1302
|
+
---
|
|
1303
|
+
|
|
1304
|
+
**warning500**
|
|
1305
|
+
|
|
1306
|
+
| Property | Value |
|
|
1307
|
+
| :------- | :---------------- |
|
|
1308
|
+
| Hex | #D8921F |
|
|
1309
|
+
| RGB | rgb(216, 146, 31) |
|
|
1310
|
+
|
|
1311
|
+
---
|
|
1312
|
+
|
|
1313
|
+
**warning600**
|
|
1314
|
+
|
|
1315
|
+
| Property | Value |
|
|
1316
|
+
| :------- | :--------------- |
|
|
1317
|
+
| Hex | #946314 |
|
|
1318
|
+
| RGB | rgb(148, 99, 20) |
|
|
1319
|
+
|
|
1320
|
+
---
|
|
1321
|
+
|
|
1322
|
+
---
|
|
1323
|
+
|
|
1324
|
+
Color helps communicate usage and intent while providing brand distinction. Our palette has been selected for meaning, accessibility, and cohesion.
|
|
1325
|
+
|
|
1326
|
+
## Primary Colors
|
|
1327
|
+
|
|
1328
|
+
These are the most frequently used colors in the UI's design. Primary400 is the main brand color and is the default color choice for most interactive elements across the product. Black is featured prominently through headlines and body text with the other shades of Gray and Primary Blue used to help distinguish and differentiate elements throughout the UI.
|
|
1329
|
+
|
|
1330
|
+
### Primary Blue
|
|
1331
|
+
|
|
1332
|
+
**primary600**
|
|
1333
|
+
|
|
1334
|
+
| Property | Value |
|
|
1335
|
+
| :------- | :--------------- |
|
|
1336
|
+
| Hex | #223F9C |
|
|
1337
|
+
| RGB | rgb(34, 63, 156) |
|
|
1338
|
+
|
|
1339
|
+
---
|
|
1340
|
+
|
|
1341
|
+
**primary400**
|
|
1342
|
+
|
|
1343
|
+
| Property | Value |
|
|
1344
|
+
| :------- | :---------------- |
|
|
1345
|
+
| Hex | #3867FA |
|
|
1346
|
+
| RGB | rgb(56, 103, 250) |
|
|
1347
|
+
|
|
1348
|
+
---
|
|
1349
|
+
|
|
1350
|
+
**primary200**
|
|
1351
|
+
|
|
1352
|
+
| Property | Value |
|
|
1353
|
+
| :------- | :----------------- |
|
|
1354
|
+
| Hex | #EBEFFC |
|
|
1355
|
+
| RGB | rgb(235, 239, 252) |
|
|
1356
|
+
|
|
1357
|
+
---
|
|
1358
|
+
|
|
1359
|
+
**primary500**
|
|
1360
|
+
|
|
1361
|
+
| Property | Value |
|
|
1362
|
+
| :------- | :--------------- |
|
|
1363
|
+
| Hex | #2B52CD |
|
|
1364
|
+
| RGB | rgb(43, 82, 205) |
|
|
1365
|
+
|
|
1366
|
+
---
|
|
1367
|
+
|
|
1368
|
+
**primary300**
|
|
1369
|
+
|
|
1370
|
+
| Property | Value |
|
|
1371
|
+
| :------- | :----------------- |
|
|
1372
|
+
| Hex | #A9BDFC |
|
|
1373
|
+
| RGB | rgb(169, 189, 252) |
|
|
1374
|
+
|
|
1375
|
+
---
|
|
1376
|
+
|
|
1377
|
+
**primary100**
|
|
1378
|
+
|
|
1379
|
+
| Property | Value |
|
|
1380
|
+
| :------- | :----------------- |
|
|
1381
|
+
| Hex | #F8F9FE |
|
|
1382
|
+
| RGB | rgb(248, 249, 254) |
|
|
1383
|
+
|
|
1384
|
+
---
|
|
1385
|
+
|
|
1386
|
+
### Grays
|
|
1387
|
+
|
|
1388
|
+
**White**
|
|
1389
|
+
|
|
1390
|
+
| Property | Value |
|
|
1391
|
+
| :------- | :----------------- |
|
|
1392
|
+
| Hex | #FFFFFF |
|
|
1393
|
+
| RGB | rgb(255, 255, 255) |
|
|
1394
|
+
|
|
1395
|
+
---
|
|
1396
|
+
|
|
1397
|
+
**gray100**
|
|
1398
|
+
|
|
1399
|
+
| Property | Value |
|
|
1400
|
+
| :------- | :----------------- |
|
|
1401
|
+
| Hex | #F8F8F8 |
|
|
1402
|
+
| RGB | rgb(248, 248, 248) |
|
|
1403
|
+
|
|
1404
|
+
---
|
|
1405
|
+
|
|
1406
|
+
**gray200**
|
|
1407
|
+
|
|
1408
|
+
| Property | Value |
|
|
1409
|
+
| :------- | :----------------- |
|
|
1410
|
+
| Hex | #EAEAEA |
|
|
1411
|
+
| RGB | rgb(234, 234, 234) |
|
|
1412
|
+
|
|
1413
|
+
---
|
|
1414
|
+
|
|
1415
|
+
**gray300**
|
|
1416
|
+
|
|
1417
|
+
| Property | Value |
|
|
1418
|
+
| :------- | :----------------- |
|
|
1419
|
+
| Hex | #CCCCCC |
|
|
1420
|
+
| RGB | rgb(204, 204, 204) |
|
|
1421
|
+
|
|
1422
|
+
---
|
|
1423
|
+
|
|
1424
|
+
**gray400**
|
|
1425
|
+
|
|
1426
|
+
| Property | Value |
|
|
1427
|
+
| :------- | :----------------- |
|
|
1428
|
+
| Hex | #999999 |
|
|
1429
|
+
| RGB | rgb(153, 153, 153) |
|
|
1430
|
+
|
|
1431
|
+
---
|
|
1432
|
+
|
|
1433
|
+
**gray500**
|
|
1434
|
+
|
|
1435
|
+
| Property | Value |
|
|
1436
|
+
| :------- | :----------------- |
|
|
1437
|
+
| Hex | #767676 |
|
|
1438
|
+
| RGB | rgb(118, 118, 118) |
|
|
1439
|
+
|
|
1440
|
+
---
|
|
1441
|
+
|
|
1442
|
+
**gray600**
|
|
1443
|
+
|
|
1444
|
+
| Property | Value |
|
|
1445
|
+
| :------- | :-------------- |
|
|
1446
|
+
| Hex | #545454 |
|
|
1447
|
+
| RGB | rgb(84, 84, 84) |
|
|
1448
|
+
|
|
1449
|
+
---
|
|
1450
|
+
|
|
1451
|
+
**Black**
|
|
1452
|
+
|
|
1453
|
+
| Property | Value |
|
|
1454
|
+
| :------- | :----------- |
|
|
1455
|
+
| Hex | #000000 |
|
|
1456
|
+
| RGB | rgb(0, 0, 0) |
|
|
1457
|
+
|
|
1458
|
+
---
|
|
1459
|
+
|
|
1460
|
+
### Secondary Green
|
|
1461
|
+
|
|
1462
|
+
**secondary400**
|
|
1463
|
+
|
|
1464
|
+
| Property | Value |
|
|
1465
|
+
| :------- | :---------------- |
|
|
1466
|
+
| Hex | #9BC74E |
|
|
1467
|
+
| RGB | rgb(155, 199, 78) |
|
|
1468
|
+
|
|
1469
|
+
---
|
|
1470
|
+
|
|
1471
|
+
---
|
|
1472
|
+
|
|
1473
|
+
## Feedback Colors
|
|
1474
|
+
|
|
1475
|
+
These colors are used for product feedback only, i.e., showing info, success, warnings, and errors. For the sake of specificity, only those colors used in each scale are documented in our design system.
|
|
1476
|
+
|
|
1477
|
+
### Info
|
|
1478
|
+
|
|
1479
|
+
**info100Overlay**
|
|
1480
|
+
|
|
1481
|
+
| Property | Value |
|
|
1482
|
+
| :------- | :----------------- |
|
|
1483
|
+
| Hex | #E7EAF4 |
|
|
1484
|
+
| RGB | rgb(231, 234, 244) |
|
|
1485
|
+
|
|
1486
|
+
---
|
|
1487
|
+
|
|
1488
|
+
**info100**
|
|
1489
|
+
|
|
1490
|
+
| Property | Value |
|
|
1491
|
+
| :------- | :----------------- |
|
|
1492
|
+
| Hex | #EFF2FC |
|
|
1493
|
+
| RGB | rgb(239, 242, 252) |
|
|
1494
|
+
|
|
1495
|
+
---
|
|
1496
|
+
|
|
1497
|
+
**info200**
|
|
1498
|
+
|
|
1499
|
+
| Property | Value |
|
|
1500
|
+
| :------- | :----------------- |
|
|
1501
|
+
| Hex | #EBEFFC |
|
|
1502
|
+
| RGB | rgb(235, 239, 252) |
|
|
1503
|
+
|
|
1504
|
+
---
|
|
1505
|
+
|
|
1506
|
+
**info400**
|
|
1507
|
+
|
|
1508
|
+
| Property | Value |
|
|
1509
|
+
| :------- | :---------------- |
|
|
1510
|
+
| Hex | #3867FA |
|
|
1511
|
+
| RGB | rgb(56, 103, 250) |
|
|
1512
|
+
|
|
1513
|
+
---
|
|
1514
|
+
|
|
1515
|
+
**info500**
|
|
1516
|
+
|
|
1517
|
+
| Property | Value |
|
|
1518
|
+
| :------- | :--------------- |
|
|
1519
|
+
| Hex | #2B52CD |
|
|
1520
|
+
| RGB | rgb(43, 82, 205) |
|
|
1521
|
+
|
|
1522
|
+
---
|
|
1523
|
+
|
|
1524
|
+
**info600**
|
|
1525
|
+
|
|
1526
|
+
| Property | Value |
|
|
1527
|
+
| :------- | :--------------- |
|
|
1528
|
+
| Hex | #223F9C |
|
|
1529
|
+
| RGB | rgb(34, 63, 156) |
|
|
1530
|
+
|
|
1531
|
+
---
|
|
1532
|
+
|
|
1533
|
+
### Success
|
|
1534
|
+
|
|
1535
|
+
**success100Overlay**
|
|
1536
|
+
|
|
1537
|
+
| Property | Value |
|
|
1538
|
+
| :------- | :----------------- |
|
|
1539
|
+
| Hex | #E4EDE8 |
|
|
1540
|
+
| RGB | rgb(228, 237, 232) |
|
|
1541
|
+
|
|
1542
|
+
---
|
|
1543
|
+
|
|
1544
|
+
**success100**
|
|
1545
|
+
|
|
1546
|
+
| Property | Value |
|
|
1547
|
+
| :------- | :----------------- |
|
|
1548
|
+
| Hex | #ECF5F0 |
|
|
1549
|
+
| RGB | rgb(236, 245, 240) |
|
|
1550
|
+
|
|
1551
|
+
---
|
|
1552
|
+
|
|
1553
|
+
**success200**
|
|
1554
|
+
|
|
1555
|
+
| Property | Value |
|
|
1556
|
+
| :------- | :----------------- |
|
|
1557
|
+
| Hex | #E6F7ED |
|
|
1558
|
+
| RGB | rgb(230, 247, 237) |
|
|
1559
|
+
|
|
1560
|
+
---
|
|
1561
|
+
|
|
1562
|
+
**success400**
|
|
1563
|
+
|
|
1564
|
+
| Property | Value |
|
|
1565
|
+
| :------- | :---------------- |
|
|
1566
|
+
| Hex | #3CB371 |
|
|
1567
|
+
| RGB | rgb(60, 179, 113) |
|
|
1568
|
+
|
|
1569
|
+
---
|
|
1570
|
+
|
|
1571
|
+
**success500**
|
|
1572
|
+
|
|
1573
|
+
| Property | Value |
|
|
1574
|
+
| :------- | :--------------- |
|
|
1575
|
+
| Hex | #349A61 |
|
|
1576
|
+
| RGB | rgb(52, 154, 97) |
|
|
1577
|
+
|
|
1578
|
+
---
|
|
1579
|
+
|
|
1580
|
+
**success600**
|
|
1581
|
+
|
|
1582
|
+
| Property | Value |
|
|
1583
|
+
| :------- | :--------------- |
|
|
1584
|
+
| Hex | #1C7F48 |
|
|
1585
|
+
| RGB | rgb(28, 127, 72) |
|
|
1586
|
+
|
|
1587
|
+
---
|
|
1588
|
+
|
|
1589
|
+
### Error
|
|
1590
|
+
|
|
1591
|
+
**error100Overlay**
|
|
1592
|
+
|
|
1593
|
+
| Property | Value |
|
|
1594
|
+
| :------- | :----------------- |
|
|
1595
|
+
| Hex | #F6EAEA |
|
|
1596
|
+
| RGB | rgb(246, 234, 234) |
|
|
1597
|
+
|
|
1598
|
+
---
|
|
1599
|
+
|
|
1600
|
+
**error100**
|
|
1601
|
+
|
|
1602
|
+
| Property | Value |
|
|
1603
|
+
| :------- | :----------------- |
|
|
1604
|
+
| Hex | #FEF2F2 |
|
|
1605
|
+
| RGB | rgb(254, 242, 242) |
|
|
1606
|
+
|
|
1607
|
+
---
|
|
1608
|
+
|
|
1609
|
+
**error200**
|
|
1610
|
+
|
|
1611
|
+
| Property | Value |
|
|
1612
|
+
| :------- | :----------------- |
|
|
1613
|
+
| Hex | #F8E8E8 |
|
|
1614
|
+
| RGB | rgb(248, 232, 232) |
|
|
1615
|
+
|
|
1616
|
+
---
|
|
1617
|
+
|
|
1618
|
+
**error400**
|
|
1619
|
+
|
|
1620
|
+
| Property | Value |
|
|
1621
|
+
| :------- | :--------------- |
|
|
1622
|
+
| Hex | #DC132C |
|
|
1623
|
+
| RGB | rgb(220, 19, 44) |
|
|
1624
|
+
|
|
1625
|
+
---
|
|
1626
|
+
|
|
1627
|
+
**error500**
|
|
1628
|
+
|
|
1629
|
+
| Property | Value |
|
|
1630
|
+
| :------- | :--------------- |
|
|
1631
|
+
| Hex | #C61128 |
|
|
1632
|
+
| RGB | rgb(198, 17, 40) |
|
|
1633
|
+
|
|
1634
|
+
---
|
|
1635
|
+
|
|
1636
|
+
**error600**
|
|
1637
|
+
|
|
1638
|
+
| Property | Value |
|
|
1639
|
+
| :------- | :-------------- |
|
|
1640
|
+
| Hex | #B70016 |
|
|
1641
|
+
| RGB | rgb(183, 0, 22) |
|
|
1642
|
+
|
|
1643
|
+
---
|
|
1644
|
+
|
|
1645
|
+
### Warning
|
|
1646
|
+
|
|
1647
|
+
**warning100Overlay**
|
|
1648
|
+
|
|
1649
|
+
| Property | Value |
|
|
1650
|
+
| :------- | :----------------- |
|
|
1651
|
+
| Hex | #F4EEE4 |
|
|
1652
|
+
| RGB | rgb(244, 238, 228) |
|
|
1653
|
+
|
|
1654
|
+
---
|
|
1655
|
+
|
|
1656
|
+
**warning100**
|
|
1657
|
+
|
|
1658
|
+
| Property | Value |
|
|
1659
|
+
| :------- | :----------------- |
|
|
1660
|
+
| Hex | #FCF6EC |
|
|
1661
|
+
| RGB | rgb(252, 246, 236) |
|
|
1662
|
+
|
|
1663
|
+
---
|
|
1664
|
+
|
|
1665
|
+
**warning200**
|
|
1666
|
+
|
|
1667
|
+
| Property | Value |
|
|
1668
|
+
| :------- | :----------------- |
|
|
1669
|
+
| Hex | #FFF3E1 |
|
|
1670
|
+
| RGB | rgb(255, 243, 225) |
|
|
1671
|
+
|
|
1672
|
+
---
|
|
1673
|
+
|
|
1674
|
+
**warning400**
|
|
1675
|
+
|
|
1676
|
+
| Property | Value |
|
|
1677
|
+
| :------- | :---------------- |
|
|
1678
|
+
| Hex | #F5A623 |
|
|
1679
|
+
| RGB | rgb(245, 166, 35) |
|
|
1680
|
+
|
|
1681
|
+
---
|
|
1682
|
+
|
|
1683
|
+
**warning500**
|
|
1684
|
+
|
|
1685
|
+
| Property | Value |
|
|
1686
|
+
| :------- | :---------------- |
|
|
1687
|
+
| Hex | #D8921F |
|
|
1688
|
+
| RGB | rgb(216, 146, 31) |
|
|
1689
|
+
|
|
1690
|
+
---
|
|
1691
|
+
|
|
1692
|
+
**warning600**
|
|
1693
|
+
|
|
1694
|
+
| Property | Value |
|
|
1695
|
+
| :------- | :--------------- |
|
|
1696
|
+
| Hex | #946314 |
|
|
1697
|
+
| RGB | rgb(148, 99, 20) |
|
|
1698
|
+
|
|
1699
|
+
---
|
|
1700
|
+
|
|
1701
|
+
### Beta
|
|
1702
|
+
|
|
1703
|
+
**beta100Overlay**
|
|
1704
|
+
|
|
1705
|
+
| Property | Value |
|
|
1706
|
+
| :------- | :----------------- |
|
|
1707
|
+
| Hex | #ECE8F1 |
|
|
1708
|
+
| RGB | rgb(236, 232, 241) |
|
|
1709
|
+
|
|
1710
|
+
---
|
|
1711
|
+
|
|
1712
|
+
**beta100**
|
|
1713
|
+
|
|
1714
|
+
| Property | Value |
|
|
1715
|
+
| :------- | :----------------- |
|
|
1716
|
+
| Hex | #F4F0F9 |
|
|
1717
|
+
| RGB | rgb(244, 240, 249) |
|
|
1718
|
+
|
|
1719
|
+
---
|
|
1720
|
+
|
|
1721
|
+
**beta200**
|
|
1722
|
+
|
|
1723
|
+
| Property | Value |
|
|
1724
|
+
| :------- | :----------------- |
|
|
1725
|
+
| Hex | #F0EBF6 |
|
|
1726
|
+
| RGB | rgb(240, 235, 246) |
|
|
1727
|
+
|
|
1728
|
+
---
|
|
1729
|
+
|
|
1730
|
+
**beta400**
|
|
1731
|
+
|
|
1732
|
+
| Property | Value |
|
|
1733
|
+
| :------- | :---------------- |
|
|
1734
|
+
| Hex | #7A41CE |
|
|
1735
|
+
| RGB | rgb(122, 65, 206) |
|
|
1736
|
+
|
|
1737
|
+
---
|
|
1738
|
+
|
|
1739
|
+
**beta500**
|
|
1740
|
+
|
|
1741
|
+
| Property | Value |
|
|
1742
|
+
| :------- | :---------------- |
|
|
1743
|
+
| Hex | #703CBE |
|
|
1744
|
+
| RGB | rgb(112, 60, 190) |
|
|
1745
|
+
|
|
1746
|
+
---
|
|
1747
|
+
|
|
1748
|
+
**beta600**
|
|
1749
|
+
|
|
1750
|
+
| Property | Value |
|
|
1751
|
+
| :------- | :---------------- |
|
|
1752
|
+
| Hex | #693BAC |
|
|
1753
|
+
| RGB | rgb(105, 59, 172) |
|
|
1754
|
+
|
|
1755
|
+
---
|