| A | B | C | D | E | F | G | H | I | J | K | |
|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Level 1: Namespace | Level 2 | Level 3 | Level 4 | Design Token Name | Value | |||||
2 | Design System name | Theme/Brand | Component | Category | Property | Variant | State | Scale | Name | add your values here | |
3 | Color | ci | color | brand | 100 | ci-color-brand-100 | #BEB5FD | ||||
4 | ci | color | brand | 200 | ci-color-brand-200 | #9E8BFA | |||||
5 | ci | color | brand | 300 | ci-color-brand-300 | #7F5CF6 | |||||
6 | ci | color | brand | 400 | ci-color-brand-400 | #6C37ED | |||||
7 | ci | color | brand | 500 | ci-color-brand-500 | #5F28D9 | |||||
8 | ci | color | brand | 600 | ci-color-brand-600 | #4F21B6 | |||||
9 | ci | color | feedback | danger | 100 | ci-color-feedback-danger-100 | #FDCED6 | ||||
10 | ci | color | feedback | danger | 200 | ci-color-feedback-danger-200 | #FBA6B4 | ||||
11 | ci | color | feedback | danger | 300 | ci-color-feedback-danger-300 | #F8748D | ||||
12 | ci | color | feedback | danger | 400 | ci-color-feedback-danger-400 | #EF2D57 | ||||
13 | ci | color | feedback | danger | 500 | ci-color-feedback-danger-500 | #DD2153 | ||||
14 | ci | color | feedback | danger | 600 | ci-color-feedback-danger-600 | #BB1546 | ||||
15 | ci | color | feedback | info | 100 | ci-color-feedback-info-100 | #CAE3F3 | ||||
16 | ci | color | feedback | info | 200 | ci-color-feedback-info-200 | #A5D2EB | ||||
17 | ci | color | feedback | info | 300 | ci-color-feedback-info-300 | #7AB9E0 | ||||
18 | ci | color | feedback | info | 400 | ci-color-feedback-info-400 | #5B9ED6 | ||||
19 | ci | color | feedback | info | 500 | ci-color-feedback-info-500 | #4785C9 | ||||
20 | ci | color | feedback | info | 600 | ci-color-feedback-info-600 | #3D71B8 | ||||
21 | ci | color | feedback | success | 100 | ci-color-feedback-success-100 | #C9F0A6 | ||||
22 | ci | color | feedback | success | 200 | ci-color-feedback-success-200 | #A5E571 | ||||
23 | ci | color | feedback | success | 300 | ci-color-feedback-success-300 | #85D546 | ||||
24 | ci | color | feedback | success | 400 | ci-color-feedback-success-400 | #6DC82A | ||||
25 | ci | color | feedback | success | 500 | ci-color-feedback-success-500 | #4D951B | ||||
26 | ci | color | feedback | success | 600 | ci-color-feedback-success-600 | #3C7219 | ||||
27 | ci | color | feedback | warning | 100 | ci-color-feedback-warning-100 | #FFF986 | ||||
28 | ci | color | feedback | warning | 200 | ci-color-feedback-warning-200 | #FFED41 | ||||
29 | ci | color | feedback | warning | 300 | ci-color-feedback-warning-300 | #FFDC0D | ||||
30 | ci | color | feedback | warning | 400 | ci-color-feedback-warning-400 | #EEBF00 | ||||
31 | ci | color | feedback | warning | 500 | ci-color-feedback-warning-500 | #D19600 | ||||
32 | ci | color | feedback | warning | 600 | ci-color-feedback-warning-600 | #A66B02 | ||||
33 | |||||||||||
34 | Elevation | ci | elevation | highlight | ci-elevation-highlight | box-shadow(0,4px,16px,rgba(0,0,0,.8)) | |||||
35 | ci | elevation | depth | ci-elevation-depth | box-shadow(0,8px,20px,rgba(0,0,0,.24)) | ||||||
36 | |||||||||||
37 | Spacing | ci | spacing | none | ci-spacing-none | 0 | |||||
38 | ci | spacing | xl | ci-spacing-xl | 20px | ||||||
39 | ci | spacing | lg | ci-spacing-lg | 16px | ||||||
40 | ci | spacing | md | ci-spacing-md | 12px | ||||||
41 | ci | spacing | sm | ci-spacing-sm | 8px | ||||||
42 | ci | spacing | xs | ci-spacing-xs | 4px | ||||||
43 | |||||||||||
44 | Type | ci | type | heading | xl | ci-type-heading-xl | 32px | ||||
45 | ci | type | heading | lg | ci-type-heading-lg | 28px | |||||
46 | ci | type | heading | md | ci-type-heading-md | 25px | |||||
47 | ci | type | heading | sm | ci-type-heading-sm | 22px | |||||
48 | ci | type | heading | xl | ci-type-heading-xl | 18px | |||||
49 | ci | type | body | lg | ci-type-body-lg | 16px | |||||
50 | ci | type | body | md | ci-type-body-md | 14px | |||||
51 | ci | type | body | sm | ci-type-body-sm | 12px | |||||
52 | ci | type | line-height | md | ci-type-line-height-md | 1.5rem | |||||
53 | ci | type | line-height | sm | ci-type-line-height-sm | 1.2rem | |||||