Dimension Tokens
Dimension tokens define values for component composition, paddings, gaps, sizing, and dimensions. These tokens provide options for designers to define spacing, sizing, and layout properties for our interfaces.
Organization of Dimension Tokens
Dimension tokens are organized into groups to provide a clear structure and purpose for properties related to composition and scale at which they should be applied.
Tweaks
Fine-tune component dimensions and layouts to achieve precise visual alignment.
Elements
Self-contained components with defined dimensions for consistent sizing.
Groups
Organize related components with slots and create logical hierarchies for consistent design.
Layout
Define larger layout areas to structure the overall interface consistently.
As we start from the base elements, we need to tweak some positions or sizes to achieve desired visual results.
Naming Convention
Unless stated otherwise, dimension tokens can be applied to various properties such as width, height, padding, margin, gap, etc. When specific property mapping is needed, we adhere to property names defined in React Native's Layout Props and View Style Props specifications.
<property>.<group>.<value>Default Dimension Tokens
important
The following set of tokens represent the defaults that should cover most use cases in our design system. No values are strictly enforced here, however, we recommend using these as a starting point for your products.
- Preview
- CSS Custom Properties
- Figma JSON
- TypeScript
borderRadius / element
| Token name | default | tablet | desktop |
|---|---|---|---|
borderRadius.element.small | 4px | 4px | 4px |
borderRadius.element.medium | 8px | 8px | 8px |
borderRadius.element.large | 16px | 16px | 16px |
borderRadius / group
| Token name | default | tablet | desktop |
|---|---|---|---|
borderRadius.group.extraSmall | 8px | 8px | 8px |
borderRadius.group.small | 12px | 12px | 12px |
borderRadius.group.medium | 16px | 16px | 16px |
borderRadius.group.large | 22px | 22px | 22px |
borderRadius.group.extraLarge | 28px | 28px | 28px |
borderRadius / layout
| Token name | default | tablet | desktop |
|---|---|---|---|
borderRadius.layout.extraSmall | 16px | 16px | 16px |
borderRadius.layout.small | 22px | 24px | 24px |
borderRadius.layout.medium | 28px | 32px | 32px |
borderRadius.layout.large | 40px | 48px | 48px |
borderRadius.layout.extraLarge | 48px | 64px | 64px |
gap / element
| Token name | default | tablet | desktop |
|---|---|---|---|
gap.element.small | 4px | 4px | 4px |
gap.element.medium | 8px | 8px | 8px |
gap.element.large | 16px | 16px | 16px |
gap / group
| Token name | default | tablet | desktop |
|---|---|---|---|
gap.group.extraSmall | 8px | 8px | 8px |
gap.group.small | 12px | 12px | 12px |
gap.group.medium | 16px | 16px | 16px |
gap.group.large | 22px | 24px | 24px |
gap.group.extraLarge | 28px | 32px | 32px |
gap / layout
| Token name | default | tablet | desktop |
|---|---|---|---|
gap.layout.extraSmall | 16px | 16px | 16px |
gap.layout.small | 22px | 24px | 24px |
gap.layout.medium | 28px | 32px | 32px |
gap.layout.large | 40px | 48px | 48px |
gap.layout.extraLarge | 48px | 64px | 64px |
padding / element
| Token name | default | tablet | desktop |
|---|---|---|---|
padding.element.small | 4px | 4px | 4px |
padding.element.medium | 8px | 8px | 8px |
padding.element.large | 16px | 16px | 16px |
padding / group
| Token name | default | tablet | desktop |
|---|---|---|---|
padding.group.extraSmall | 8px | 8px | 8px |
padding.group.small | 12px | 12px | 12px |
padding.group.medium | 16px | 16px | 16px |
padding.group.large | 22px | 24px | 24px |
padding.group.extraLarge | 28px | 32px | 32px |
padding / layout
| Token name | default | tablet | desktop |
|---|---|---|---|
padding.layout.extraSmall | 16px | 16px | 16px |
padding.layout.small | 22px | 24px | 24px |
padding.layout.medium | 28px | 32px | 32px |
padding.layout.large | 40px | 48px | 48px |
padding.layout.extraLarge | 48px | 64px | 64px |
screen
| Token name | Value |
|---|---|
screen.default | 0px |
screen.tablet | 960px |
screen.desktop | 1440px |
tweak
| Token name | Value |
|---|---|
tweak.0 | 0px |
tweak.100 | 0.1px |
tweak.125 | 0.125px |
tweak.200 | 0.2px |
tweak.250 | 0.25px |
tweak.300 | 0.3px |
tweak.333 | 0.3333px |
tweak.400 | 0.4px |
tweak.500 | 0.5px |
tweak.600 | 0.6px |
tweak.666 | 0.6667px |
tweak.700 | 0.7px |
tweak.750 | 0.75px |
tweak.800 | 0.8px |
tweak.900 | 0.9px |
tweak.1000 | 1px |
tweak.2000 | 2px |
tweak.3000 | 3px |
tweak.4000 | 4px |
tweak.5000 | 5px |
tweak.6000 | 6px |
tweak.7000 | 7px |
tweak.-7000 | -7px |
tweak.-6000 | -6px |
tweak.-5000 | -5px |
tweak.-4000 | -4px |
tweak.-3000 | -3px |
tweak.-2000 | -2px |
tweak.-1000 | -1px |
tweak.-900 | -0.9px |
tweak.-800 | -0.8px |
tweak.-750 | -0.7px |
tweak.-700 | -0.7px |
tweak.-666 | -0.6px |
tweak.-600 | -0.6px |
tweak.-500 | -0.5px |
tweak.-400 | -0.4px |
tweak.-333 | -0.3px |
tweak.-300 | -0.3px |
tweak.-250 | -0.2px |
tweak.-200 | -0.2px |
tweak.-125 | -0.1px |
tweak.-100 | -0.1px |
/**
* [IMPORTANT]: Private properties marked ---- are not intended for direct usage
*/
:root,
:host {
/**
* Scales:
*/
----dimension--0: 0px;
----dimension--1: 1px;
----dimension--2: 2px;
----dimension--3: 3px;
----dimension--4: 4px;
----dimension--5: 5px;
----dimension--6: 6px;
----dimension--7: 7px;
----dimension--8: 8px;
----dimension--9: 9px;
----dimension--10: 10px;
----dimension--12: 12px;
----dimension--14: 14px;
----dimension--16: 16px;
----dimension--18: 18px;
----dimension--20: 20px;
----dimension--22: 22px;
----dimension--24: 24px;
----dimension--28: 28px;
----dimension--32: 32px;
----dimension--36: 36px;
----dimension--40: 40px;
----dimension--44: 44px;
----dimension--48: 48px;
----dimension--52: 52px;
----dimension--56: 56px;
----dimension--60: 60px;
----dimension--64: 64px;
----dimension--68: 68px;
----dimension--72: 72px;
----dimension--76: 76px;
----dimension--80: 80px;
----dimension--84: 84px;
----dimension--88: 88px;
----dimension--92: 92px;
----dimension--96: 96px;
----dimension--100: 100px;
----dimension--104: 104px;
----dimension--108: 108px;
----dimension--112: 112px;
----dimension--116: 116px;
----dimension--120: 120px;
----dimension--124: 124px;
----dimension--128: 128px;
----dimension--132: 132px;
----dimension--136: 136px;
----dimension--140: 140px;
----dimension--144: 144px;
----dimension--148: 148px;
----dimension--152: 152px;
----dimension--156: 156px;
----dimension--160: 160px;
----dimension--164: 164px;
----dimension--168: 168px;
----dimension--172: 172px;
----dimension--176: 176px;
----dimension--180: 180px;
----dimension--184: 184px;
----dimension--188: 188px;
----dimension--192: 192px;
----dimension--196: 196px;
----dimension--200: 200px;
----dimension--204: 204px;
----dimension--208: 208px;
----dimension--212: 212px;
----dimension--216: 216px;
----dimension--220: 220px;
----dimension--224: 224px;
----dimension--228: 228px;
----dimension--232: 232px;
----dimension--236: 236px;
----dimension--240: 240px;
----dimension--244: 244px;
----dimension--248: 248px;
----dimension--252: 252px;
----dimension--256: 256px;
----dimension--320: 320px;
----dimension--960: 960px;
----dimension--1440: 1440px;
----dimension--1920: 1920px;
----dimension--2560: 2560px;
----dimension--3840: 3840px;
----dimension--neg3840: -3840px;
----dimension--neg2560: -2560px;
----dimension--neg1920: -1920px;
----dimension--neg1440: -1440px;
----dimension--neg960: -960px;
----dimension--neg320: -320px;
----dimension--neg256: -256px;
----dimension--neg252: -252px;
----dimension--neg248: -248px;
----dimension--neg244: -244px;
----dimension--neg240: -240px;
----dimension--neg236: -236px;
----dimension--neg232: -232px;
----dimension--neg228: -228px;
----dimension--neg224: -224px;
----dimension--neg220: -220px;
----dimension--neg216: -216px;
----dimension--neg212: -212px;
----dimension--neg208: -208px;
----dimension--neg204: -204px;
----dimension--neg200: -200px;
----dimension--neg196: -196px;
----dimension--neg192: -192px;
----dimension--neg188: -188px;
----dimension--neg184: -184px;
----dimension--neg180: -180px;
----dimension--neg176: -176px;
----dimension--neg172: -172px;
----dimension--neg168: -168px;
----dimension--neg164: -164px;
----dimension--neg160: -160px;
----dimension--neg156: -156px;
----dimension--neg152: -152px;
----dimension--neg148: -148px;
----dimension--neg144: -144px;
----dimension--neg140: -140px;
----dimension--neg136: -136px;
----dimension--neg132: -132px;
----dimension--neg128: -128px;
----dimension--neg124: -124px;
----dimension--neg120: -120px;
----dimension--neg116: -116px;
----dimension--neg112: -112px;
----dimension--neg108: -108px;
----dimension--neg104: -104px;
----dimension--neg100: -100px;
----dimension--neg96: -96px;
----dimension--neg92: -92px;
----dimension--neg88: -88px;
----dimension--neg84: -84px;
----dimension--neg80: -80px;
----dimension--neg76: -76px;
----dimension--neg72: -72px;
----dimension--neg68: -68px;
----dimension--neg64: -64px;
----dimension--neg60: -60px;
----dimension--neg56: -56px;
----dimension--neg52: -52px;
----dimension--neg48: -48px;
----dimension--neg44: -44px;
----dimension--neg40: -40px;
----dimension--neg36: -36px;
----dimension--neg32: -32px;
----dimension--neg28: -28px;
----dimension--neg24: -24px;
----dimension--neg22: -22px;
----dimension--neg20: -20px;
----dimension--neg18: -18px;
----dimension--neg16: -16px;
----dimension--neg14: -14px;
----dimension--neg12: -12px;
----dimension--neg10: -10px;
----dimension--neg8: -8px;
----dimension--neg7: -7px;
----dimension--neg6: -6px;
----dimension--neg5: -5px;
----dimension--neg4: -4px;
----dimension--neg3: -3px;
----dimension--neg2: -2px;
----dimension--neg1: -1px;
----dimension--neg0_900: -0.9px;
----dimension--neg0_800: -0.8px;
----dimension--neg0_750: -0.75px;
----dimension--neg0_700: -0.7px;
----dimension--neg0_666: -0.6667px;
----dimension--neg0_600: -0.6px;
----dimension--neg0_500: -0.5px;
----dimension--neg0_400: -0.4px;
----dimension--neg0_333: -0.3333px;
----dimension--neg0_300: -0.3px;
----dimension--neg0_250: -0.25px;
----dimension--neg0_200: -0.2px;
----dimension--neg0_125: -0.125px;
----dimension--neg0_100: -0.1px;
----dimension--0_100: 0.1px;
----dimension--0_125: 0.125px;
----dimension--0_200: 0.2px;
----dimension--0_250: 0.25px;
----dimension--0_300: 0.3px;
----dimension--0_333: 0.3333px;
----dimension--0_400: 0.4px;
----dimension--0_500: 0.5px;
----dimension--0_600: 0.6px;
----dimension--0_666: 0.6667px;
----dimension--0_700: 0.7px;
----dimension--0_750: 0.75px;
----dimension--0_800: 0.8px;
----dimension--0_900: 0.9px;
/**
* Dimension tokens:
*/
/** screen: */
--screen--default: var(----dimension--0);
--screen--tablet: var(----dimension--960);
--screen--desktop: var(----dimension--1440);
/** tweak: */
--tweak--0: var(----dimension--0);
--tweak--100: var(----dimension--0_100);
--tweak--125: var(----dimension--0_125);
--tweak--200: var(----dimension--0_200);
--tweak--250: var(----dimension--0_250);
--tweak--300: var(----dimension--0_300);
--tweak--333: var(----dimension--0_333);
--tweak--400: var(----dimension--0_400);
--tweak--500: var(----dimension--0_500);
--tweak--600: var(----dimension--0_600);
--tweak--666: var(----dimension--0_666);
--tweak--700: var(----dimension--0_700);
--tweak--750: var(----dimension--0_750);
--tweak--800: var(----dimension--0_800);
--tweak--900: var(----dimension--0_900);
--tweak--1000: var(----dimension--1);
--tweak--2000: var(----dimension--2);
--tweak--3000: var(----dimension--3);
--tweak--4000: var(----dimension--4);
--tweak--5000: var(----dimension--5);
--tweak--6000: var(----dimension--6);
--tweak--7000: var(----dimension--7);
--tweak--neg7000: var(----dimension--neg7);
--tweak--neg6000: var(----dimension--neg6);
--tweak--neg5000: var(----dimension--neg5);
--tweak--neg4000: var(----dimension--neg4);
--tweak--neg3000: var(----dimension--neg3);
--tweak--neg2000: var(----dimension--neg2);
--tweak--neg1000: var(----dimension--neg1);
--tweak--neg900: var(----dimension--neg0_900);
--tweak--neg800: var(----dimension--neg0_800);
--tweak--neg750: var(----dimension--neg0_700);
--tweak--neg700: var(----dimension--neg0_700);
--tweak--neg666: var(----dimension--neg0_600);
--tweak--neg600: var(----dimension--neg0_600);
--tweak--neg500: var(----dimension--neg0_500);
--tweak--neg400: var(----dimension--neg0_400);
--tweak--neg333: var(----dimension--neg0_300);
--tweak--neg300: var(----dimension--neg0_300);
--tweak--neg250: var(----dimension--neg0_200);
--tweak--neg200: var(----dimension--neg0_200);
--tweak--neg125: var(----dimension--neg0_100);
--tweak--neg100: var(----dimension--neg0_100);
/** borderRadius / element: */
--borderRadius--element-small: var(----dimension--4);
--borderRadius--element-medium: var(----dimension--8);
--borderRadius--element-large: var(----dimension--16);
/** padding / element: */
--padding--element-small: var(----dimension--4);
--padding--element-medium: var(----dimension--8);
--padding--element-large: var(----dimension--16);
/** gap / element: */
--gap--element-small: var(----dimension--4);
--gap--element-medium: var(----dimension--8);
--gap--element-large: var(----dimension--16);
/** borderRadius / group: */
--borderRadius--group-extraSmall: var(----dimension--8);
--borderRadius--group-small: var(----dimension--12);
--borderRadius--group-medium: var(----dimension--16);
--borderRadius--group-large: var(----dimension--22);
--borderRadius--group-extraLarge: var(----dimension--28);
/** padding / group: */
--padding--group-extraSmall: var(----dimension--8);
--padding--group-small: var(----dimension--12);
--padding--group-medium: var(----dimension--16);
--padding--group-large: var(----dimension--22);
--padding--group-extraLarge: var(----dimension--28);
/** gap / group: */
--gap--group-extraSmall: var(----dimension--8);
--gap--group-small: var(----dimension--12);
--gap--group-medium: var(----dimension--16);
--gap--group-large: var(----dimension--22);
--gap--group-extraLarge: var(----dimension--28);
/** borderRadius / layout: */
--borderRadius--layout-extraSmall: var(----dimension--16);
--borderRadius--layout-small: var(----dimension--22);
--borderRadius--layout-medium: var(----dimension--28);
--borderRadius--layout-large: var(----dimension--40);
--borderRadius--layout-extraLarge: var(----dimension--48);
/** padding / layout: */
--padding--layout-extraSmall: var(----dimension--16);
--padding--layout-small: var(----dimension--22);
--padding--layout-medium: var(----dimension--28);
--padding--layout-large: var(----dimension--40);
--padding--layout-extraLarge: var(----dimension--48);
/** gap / layout: */
--gap--layout-extraSmall: var(----dimension--16);
--gap--layout-small: var(----dimension--22);
--gap--layout-medium: var(----dimension--28);
--gap--layout-large: var(----dimension--40);
--gap--layout-extraLarge: var(----dimension--48);
}
@media (min-width: 960px) {
:root,
:host {
/** borderRadius / element: */
--borderRadius--element-small: var(----dimension--4);
--borderRadius--element-medium: var(----dimension--8);
--borderRadius--element-large: var(----dimension--16);
/** padding / element: */
--padding--element-small: var(----dimension--4);
--padding--element-medium: var(----dimension--8);
--padding--element-large: var(----dimension--16);
/** gap / element: */
--gap--element-small: var(----dimension--4);
--gap--element-medium: var(----dimension--8);
--gap--element-large: var(----dimension--16);
/** borderRadius / group: */
--borderRadius--group-extraSmall: var(----dimension--8);
--borderRadius--group-small: var(----dimension--12);
--borderRadius--group-medium: var(----dimension--16);
--borderRadius--group-large: var(----dimension--22);
--borderRadius--group-extraLarge: var(----dimension--28);
/** padding / group: */
--padding--group-extraSmall: var(----dimension--8);
--padding--group-small: var(----dimension--12);
--padding--group-medium: var(----dimension--16);
--padding--group-large: var(----dimension--24);
--padding--group-extraLarge: var(----dimension--32);
/** gap / group: */
--gap--group-extraSmall: var(----dimension--8);
--gap--group-small: var(----dimension--12);
--gap--group-medium: var(----dimension--16);
--gap--group-large: var(----dimension--24);
--gap--group-extraLarge: var(----dimension--32);
/** borderRadius / layout: */
--borderRadius--layout-extraSmall: var(----dimension--16);
--borderRadius--layout-small: var(----dimension--24);
--borderRadius--layout-medium: var(----dimension--32);
--borderRadius--layout-large: var(----dimension--48);
--borderRadius--layout-extraLarge: var(----dimension--64);
/** padding / layout: */
--padding--layout-extraSmall: var(----dimension--16);
--padding--layout-small: var(----dimension--24);
--padding--layout-medium: var(----dimension--32);
--padding--layout-large: var(----dimension--48);
--padding--layout-extraLarge: var(----dimension--64);
/** gap / layout: */
--gap--layout-extraSmall: var(----dimension--16);
--gap--layout-small: var(----dimension--24);
--gap--layout-medium: var(----dimension--32);
--gap--layout-large: var(----dimension--48);
--gap--layout-extraLarge: var(----dimension--64);
}
}
@media (min-width: 1440px) {
:root,
:host {
/** borderRadius / element: */
--borderRadius--element-small: var(----dimension--4);
--borderRadius--element-medium: var(----dimension--8);
--borderRadius--element-large: var(----dimension--16);
/** padding / element: */
--padding--element-small: var(----dimension--4);
--padding--element-medium: var(----dimension--8);
--padding--element-large: var(----dimension--16);
/** gap / element: */
--gap--element-small: var(----dimension--4);
--gap--element-medium: var(----dimension--8);
--gap--element-large: var(----dimension--16);
/** borderRadius / group: */
--borderRadius--group-extraSmall: var(----dimension--8);
--borderRadius--group-small: var(----dimension--12);
--borderRadius--group-medium: var(----dimension--16);
--borderRadius--group-large: var(----dimension--22);
--borderRadius--group-extraLarge: var(----dimension--28);
/** padding / group: */
--padding--group-extraSmall: var(----dimension--8);
--padding--group-small: var(----dimension--12);
--padding--group-medium: var(----dimension--16);
--padding--group-large: var(----dimension--24);
--padding--group-extraLarge: var(----dimension--32);
/** gap / group: */
--gap--group-extraSmall: var(----dimension--8);
--gap--group-small: var(----dimension--12);
--gap--group-medium: var(----dimension--16);
--gap--group-large: var(----dimension--24);
--gap--group-extraLarge: var(----dimension--32);
/** borderRadius / layout: */
--borderRadius--layout-extraSmall: var(----dimension--16);
--borderRadius--layout-small: var(----dimension--24);
--borderRadius--layout-medium: var(----dimension--32);
--borderRadius--layout-large: var(----dimension--48);
--borderRadius--layout-extraLarge: var(----dimension--64);
/** padding / layout: */
--padding--layout-extraSmall: var(----dimension--16);
--padding--layout-small: var(----dimension--24);
--padding--layout-medium: var(----dimension--32);
--padding--layout-large: var(----dimension--48);
--padding--layout-extraLarge: var(----dimension--64);
/** gap / layout: */
--gap--layout-extraSmall: var(----dimension--16);
--gap--layout-small: var(----dimension--24);
--gap--layout-medium: var(----dimension--32);
--gap--layout-large: var(----dimension--48);
--gap--layout-extraLarge: var(----dimension--64);
}
}
{
"Scales": {
"__scales": {
"dimension": {
"0": {
"$type": "dimension",
"$value": 0
},
"1": {
"$type": "dimension",
"$value": 1
},
"2": {
"$type": "dimension",
"$value": 2
},
"3": {
"$type": "dimension",
"$value": 3
},
"4": {
"$type": "dimension",
"$value": 4
},
"5": {
"$type": "dimension",
"$value": 5
},
"6": {
"$type": "dimension",
"$value": 6
},
"7": {
"$type": "dimension",
"$value": 7
},
"8": {
"$type": "dimension",
"$value": 8
},
"9": {
"$type": "dimension",
"$value": 9
},
"10": {
"$type": "dimension",
"$value": 10
},
"12": {
"$type": "dimension",
"$value": 12
},
"14": {
"$type": "dimension",
"$value": 14
},
"16": {
"$type": "dimension",
"$value": 16
},
"18": {
"$type": "dimension",
"$value": 18
},
"20": {
"$type": "dimension",
"$value": 20
},
"22": {
"$type": "dimension",
"$value": 22
},
"24": {
"$type": "dimension",
"$value": 24
},
"28": {
"$type": "dimension",
"$value": 28
},
"32": {
"$type": "dimension",
"$value": 32
},
"36": {
"$type": "dimension",
"$value": 36
},
"40": {
"$type": "dimension",
"$value": 40
},
"44": {
"$type": "dimension",
"$value": 44
},
"48": {
"$type": "dimension",
"$value": 48
},
"52": {
"$type": "dimension",
"$value": 52
},
"56": {
"$type": "dimension",
"$value": 56
},
"60": {
"$type": "dimension",
"$value": 60
},
"64": {
"$type": "dimension",
"$value": 64
},
"68": {
"$type": "dimension",
"$value": 68
},
"72": {
"$type": "dimension",
"$value": 72
},
"76": {
"$type": "dimension",
"$value": 76
},
"80": {
"$type": "dimension",
"$value": 80
},
"84": {
"$type": "dimension",
"$value": 84
},
"88": {
"$type": "dimension",
"$value": 88
},
"92": {
"$type": "dimension",
"$value": 92
},
"96": {
"$type": "dimension",
"$value": 96
},
"100": {
"$type": "dimension",
"$value": 100
},
"104": {
"$type": "dimension",
"$value": 104
},
"108": {
"$type": "dimension",
"$value": 108
},
"112": {
"$type": "dimension",
"$value": 112
},
"116": {
"$type": "dimension",
"$value": 116
},
"120": {
"$type": "dimension",
"$value": 120
},
"124": {
"$type": "dimension",
"$value": 124
},
"128": {
"$type": "dimension",
"$value": 128
},
"132": {
"$type": "dimension",
"$value": 132
},
"136": {
"$type": "dimension",
"$value": 136
},
"140": {
"$type": "dimension",
"$value": 140
},
"144": {
"$type": "dimension",
"$value": 144
},
"148": {
"$type": "dimension",
"$value": 148
},
"152": {
"$type": "dimension",
"$value": 152
},
"156": {
"$type": "dimension",
"$value": 156
},
"160": {
"$type": "dimension",
"$value": 160
},
"164": {
"$type": "dimension",
"$value": 164
},
"168": {
"$type": "dimension",
"$value": 168
},
"172": {
"$type": "dimension",
"$value": 172
},
"176": {
"$type": "dimension",
"$value": 176
},
"180": {
"$type": "dimension",
"$value": 180
},
"184": {
"$type": "dimension",
"$value": 184
},
"188": {
"$type": "dimension",
"$value": 188
},
"192": {
"$type": "dimension",
"$value": 192
},
"196": {
"$type": "dimension",
"$value": 196
},
"200": {
"$type": "dimension",
"$value": 200
},
"204": {
"$type": "dimension",
"$value": 204
},
"208": {
"$type": "dimension",
"$value": 208
},
"212": {
"$type": "dimension",
"$value": 212
},
"216": {
"$type": "dimension",
"$value": 216
},
"220": {
"$type": "dimension",
"$value": 220
},
"224": {
"$type": "dimension",
"$value": 224
},
"228": {
"$type": "dimension",
"$value": 228
},
"232": {
"$type": "dimension",
"$value": 232
},
"236": {
"$type": "dimension",
"$value": 236
},
"240": {
"$type": "dimension",
"$value": 240
},
"244": {
"$type": "dimension",
"$value": 244
},
"248": {
"$type": "dimension",
"$value": 248
},
"252": {
"$type": "dimension",
"$value": 252
},
"256": {
"$type": "dimension",
"$value": 256
},
"320": {
"$type": "dimension",
"$value": 320
},
"960": {
"$type": "dimension",
"$value": 960
},
"1440": {
"$type": "dimension",
"$value": 1440
},
"1920": {
"$type": "dimension",
"$value": 1920
},
"2560": {
"$type": "dimension",
"$value": 2560
},
"3840": {
"$type": "dimension",
"$value": 3840
},
"neg3840": {
"$type": "dimension",
"$value": -3840
},
"neg2560": {
"$type": "dimension",
"$value": -2560
},
"neg1920": {
"$type": "dimension",
"$value": -1920
},
"neg1440": {
"$type": "dimension",
"$value": -1440
},
"neg960": {
"$type": "dimension",
"$value": -960
},
"neg320": {
"$type": "dimension",
"$value": -320
},
"neg256": {
"$type": "dimension",
"$value": -256
},
"neg252": {
"$type": "dimension",
"$value": -252
},
"neg248": {
"$type": "dimension",
"$value": -248
},
"neg244": {
"$type": "dimension",
"$value": -244
},
"neg240": {
"$type": "dimension",
"$value": -240
},
"neg236": {
"$type": "dimension",
"$value": -236
},
"neg232": {
"$type": "dimension",
"$value": -232
},
"neg228": {
"$type": "dimension",
"$value": -228
},
"neg224": {
"$type": "dimension",
"$value": -224
},
"neg220": {
"$type": "dimension",
"$value": -220
},
"neg216": {
"$type": "dimension",
"$value": -216
},
"neg212": {
"$type": "dimension",
"$value": -212
},
"neg208": {
"$type": "dimension",
"$value": -208
},
"neg204": {
"$type": "dimension",
"$value": -204
},
"neg200": {
"$type": "dimension",
"$value": -200
},
"neg196": {
"$type": "dimension",
"$value": -196
},
"neg192": {
"$type": "dimension",
"$value": -192
},
"neg188": {
"$type": "dimension",
"$value": -188
},
"neg184": {
"$type": "dimension",
"$value": -184
},
"neg180": {
"$type": "dimension",
"$value": -180
},
"neg176": {
"$type": "dimension",
"$value": -176
},
"neg172": {
"$type": "dimension",
"$value": -172
},
"neg168": {
"$type": "dimension",
"$value": -168
},
"neg164": {
"$type": "dimension",
"$value": -164
},
"neg160": {
"$type": "dimension",
"$value": -160
},
"neg156": {
"$type": "dimension",
"$value": -156
},
"neg152": {
"$type": "dimension",
"$value": -152
},
"neg148": {
"$type": "dimension",
"$value": -148
},
"neg144": {
"$type": "dimension",
"$value": -144
},
"neg140": {
"$type": "dimension",
"$value": -140
},
"neg136": {
"$type": "dimension",
"$value": -136
},
"neg132": {
"$type": "dimension",
"$value": -132
},
"neg128": {
"$type": "dimension",
"$value": -128
},
"neg124": {
"$type": "dimension",
"$value": -124
},
"neg120": {
"$type": "dimension",
"$value": -120
},
"neg116": {
"$type": "dimension",
"$value": -116
},
"neg112": {
"$type": "dimension",
"$value": -112
},
"neg108": {
"$type": "dimension",
"$value": -108
},
"neg104": {
"$type": "dimension",
"$value": -104
},
"neg100": {
"$type": "dimension",
"$value": -100
},
"neg96": {
"$type": "dimension",
"$value": -96
},
"neg92": {
"$type": "dimension",
"$value": -92
},
"neg88": {
"$type": "dimension",
"$value": -88
},
"neg84": {
"$type": "dimension",
"$value": -84
},
"neg80": {
"$type": "dimension",
"$value": -80
},
"neg76": {
"$type": "dimension",
"$value": -76
},
"neg72": {
"$type": "dimension",
"$value": -72
},
"neg68": {
"$type": "dimension",
"$value": -68
},
"neg64": {
"$type": "dimension",
"$value": -64
},
"neg60": {
"$type": "dimension",
"$value": -60
},
"neg56": {
"$type": "dimension",
"$value": -56
},
"neg52": {
"$type": "dimension",
"$value": -52
},
"neg48": {
"$type": "dimension",
"$value": -48
},
"neg44": {
"$type": "dimension",
"$value": -44
},
"neg40": {
"$type": "dimension",
"$value": -40
},
"neg36": {
"$type": "dimension",
"$value": -36
},
"neg32": {
"$type": "dimension",
"$value": -32
},
"neg28": {
"$type": "dimension",
"$value": -28
},
"neg24": {
"$type": "dimension",
"$value": -24
},
"neg22": {
"$type": "dimension",
"$value": -22
},
"neg20": {
"$type": "dimension",
"$value": -20
},
"neg18": {
"$type": "dimension",
"$value": -18
},
"neg16": {
"$type": "dimension",
"$value": -16
},
"neg14": {
"$type": "dimension",
"$value": -14
},
"neg12": {
"$type": "dimension",
"$value": -12
},
"neg10": {
"$type": "dimension",
"$value": -10
},
"neg8": {
"$type": "dimension",
"$value": -8
},
"neg7": {
"$type": "dimension",
"$value": -7
},
"neg6": {
"$type": "dimension",
"$value": -6
},
"neg5": {
"$type": "dimension",
"$value": -5
},
"neg4": {
"$type": "dimension",
"$value": -4
},
"neg3": {
"$type": "dimension",
"$value": -3
},
"neg2": {
"$type": "dimension",
"$value": -2
},
"neg1": {
"$type": "dimension",
"$value": -1
},
"neg0_900": {
"$type": "dimension",
"$value": -0.9
},
"neg0_800": {
"$type": "dimension",
"$value": -0.8
},
"neg0_750": {
"$type": "dimension",
"$value": -0.75
},
"neg0_700": {
"$type": "dimension",
"$value": -0.7
},
"neg0_666": {
"$type": "dimension",
"$value": -0.666666
},
"neg0_600": {
"$type": "dimension",
"$value": -0.6
},
"neg0_500": {
"$type": "dimension",
"$value": -0.5
},
"neg0_400": {
"$type": "dimension",
"$value": -0.4
},
"neg0_333": {
"$type": "dimension",
"$value": -0.333333
},
"neg0_300": {
"$type": "dimension",
"$value": -0.3
},
"neg0_250": {
"$type": "dimension",
"$value": -0.25
},
"neg0_200": {
"$type": "dimension",
"$value": -0.2
},
"neg0_125": {
"$type": "dimension",
"$value": -0.125
},
"neg0_100": {
"$type": "dimension",
"$value": -0.1
},
"0_100": {
"$type": "dimension",
"$value": 0.1
},
"0_125": {
"$type": "dimension",
"$value": 0.125
},
"0_200": {
"$type": "dimension",
"$value": 0.2
},
"0_250": {
"$type": "dimension",
"$value": 0.25
},
"0_300": {
"$type": "dimension",
"$value": 0.3
},
"0_333": {
"$type": "dimension",
"$value": 0.333333
},
"0_400": {
"$type": "dimension",
"$value": 0.4
},
"0_500": {
"$type": "dimension",
"$value": 0.5
},
"0_600": {
"$type": "dimension",
"$value": 0.6
},
"0_666": {
"$type": "dimension",
"$value": 0.666666
},
"0_700": {
"$type": "dimension",
"$value": 0.7
},
"0_750": {
"$type": "dimension",
"$value": 0.75
},
"0_800": {
"$type": "dimension",
"$value": 0.8
},
"0_900": {
"$type": "dimension",
"$value": 0.9
}
}
}
},
"Dimension": {
"screen": {
"default": {
"$type": "dimension",
"$value": {
"default": "{__scales/screen/0}",
"tablet": "{__scales/screen/0}",
"desktop": "{__scales/screen/0}"
}
},
"tablet": {
"$type": "dimension",
"$value": {
"default": "{__scales/screen/960}",
"tablet": "{__scales/screen/960}",
"desktop": "{__scales/screen/960}"
}
},
"desktop": {
"$type": "dimension",
"$value": {
"default": "{__scales/screen/1440}",
"tablet": "{__scales/screen/1440}",
"desktop": "{__scales/screen/1440}"
}
}
},
"tweak": {
"0": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0}",
"tablet": "{__scales/tweak/0}",
"desktop": "{__scales/tweak/0}"
}
},
"100": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_100}",
"tablet": "{__scales/tweak/0_100}",
"desktop": "{__scales/tweak/0_100}"
}
},
"125": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_125}",
"tablet": "{__scales/tweak/0_125}",
"desktop": "{__scales/tweak/0_125}"
}
},
"200": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_200}",
"tablet": "{__scales/tweak/0_200}",
"desktop": "{__scales/tweak/0_200}"
}
},
"250": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_250}",
"tablet": "{__scales/tweak/0_250}",
"desktop": "{__scales/tweak/0_250}"
}
},
"300": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_300}",
"tablet": "{__scales/tweak/0_300}",
"desktop": "{__scales/tweak/0_300}"
}
},
"333": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_333}",
"tablet": "{__scales/tweak/0_333}",
"desktop": "{__scales/tweak/0_333}"
}
},
"400": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_400}",
"tablet": "{__scales/tweak/0_400}",
"desktop": "{__scales/tweak/0_400}"
}
},
"500": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_500}",
"tablet": "{__scales/tweak/0_500}",
"desktop": "{__scales/tweak/0_500}"
}
},
"600": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_600}",
"tablet": "{__scales/tweak/0_600}",
"desktop": "{__scales/tweak/0_600}"
}
},
"666": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_666}",
"tablet": "{__scales/tweak/0_666}",
"desktop": "{__scales/tweak/0_666}"
}
},
"700": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_700}",
"tablet": "{__scales/tweak/0_700}",
"desktop": "{__scales/tweak/0_700}"
}
},
"750": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_750}",
"tablet": "{__scales/tweak/0_750}",
"desktop": "{__scales/tweak/0_750}"
}
},
"800": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_800}",
"tablet": "{__scales/tweak/0_800}",
"desktop": "{__scales/tweak/0_800}"
}
},
"900": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/0_900}",
"tablet": "{__scales/tweak/0_900}",
"desktop": "{__scales/tweak/0_900}"
}
},
"1000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/1}",
"tablet": "{__scales/tweak/1}",
"desktop": "{__scales/tweak/1}"
}
},
"2000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/2}",
"tablet": "{__scales/tweak/2}",
"desktop": "{__scales/tweak/2}"
}
},
"3000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/3}",
"tablet": "{__scales/tweak/3}",
"desktop": "{__scales/tweak/3}"
}
},
"4000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/4}",
"tablet": "{__scales/tweak/4}",
"desktop": "{__scales/tweak/4}"
}
},
"5000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/5}",
"tablet": "{__scales/tweak/5}",
"desktop": "{__scales/tweak/5}"
}
},
"6000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/6}",
"tablet": "{__scales/tweak/6}",
"desktop": "{__scales/tweak/6}"
}
},
"7000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/7}",
"tablet": "{__scales/tweak/7}",
"desktop": "{__scales/tweak/7}"
}
},
"-7000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg7}",
"tablet": "{__scales/tweak/neg7}",
"desktop": "{__scales/tweak/neg7}"
}
},
"-6000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg6}",
"tablet": "{__scales/tweak/neg6}",
"desktop": "{__scales/tweak/neg6}"
}
},
"-5000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg5}",
"tablet": "{__scales/tweak/neg5}",
"desktop": "{__scales/tweak/neg5}"
}
},
"-4000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg4}",
"tablet": "{__scales/tweak/neg4}",
"desktop": "{__scales/tweak/neg4}"
}
},
"-3000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg3}",
"tablet": "{__scales/tweak/neg3}",
"desktop": "{__scales/tweak/neg3}"
}
},
"-2000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg2}",
"tablet": "{__scales/tweak/neg2}",
"desktop": "{__scales/tweak/neg2}"
}
},
"-1000": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg1}",
"tablet": "{__scales/tweak/neg1}",
"desktop": "{__scales/tweak/neg1}"
}
},
"-900": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_900}",
"tablet": "{__scales/tweak/neg0_900}",
"desktop": "{__scales/tweak/neg0_900}"
}
},
"-800": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_800}",
"tablet": "{__scales/tweak/neg0_800}",
"desktop": "{__scales/tweak/neg0_800}"
}
},
"-750": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_700}",
"tablet": "{__scales/tweak/neg0_700}",
"desktop": "{__scales/tweak/neg0_700}"
}
},
"-700": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_700}",
"tablet": "{__scales/tweak/neg0_700}",
"desktop": "{__scales/tweak/neg0_700}"
}
},
"-666": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_600}",
"tablet": "{__scales/tweak/neg0_600}",
"desktop": "{__scales/tweak/neg0_600}"
}
},
"-600": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_600}",
"tablet": "{__scales/tweak/neg0_600}",
"desktop": "{__scales/tweak/neg0_600}"
}
},
"-500": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_500}",
"tablet": "{__scales/tweak/neg0_500}",
"desktop": "{__scales/tweak/neg0_500}"
}
},
"-400": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_400}",
"tablet": "{__scales/tweak/neg0_400}",
"desktop": "{__scales/tweak/neg0_400}"
}
},
"-333": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_300}",
"tablet": "{__scales/tweak/neg0_300}",
"desktop": "{__scales/tweak/neg0_300}"
}
},
"-300": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_300}",
"tablet": "{__scales/tweak/neg0_300}",
"desktop": "{__scales/tweak/neg0_300}"
}
},
"-250": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_200}",
"tablet": "{__scales/tweak/neg0_200}",
"desktop": "{__scales/tweak/neg0_200}"
}
},
"-200": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_200}",
"tablet": "{__scales/tweak/neg0_200}",
"desktop": "{__scales/tweak/neg0_200}"
}
},
"-125": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_100}",
"tablet": "{__scales/tweak/neg0_100}",
"desktop": "{__scales/tweak/neg0_100}"
}
},
"-100": {
"$type": "dimension",
"$value": {
"default": "{__scales/tweak/neg0_100}",
"tablet": "{__scales/tweak/neg0_100}",
"desktop": "{__scales/tweak/neg0_100}"
}
}
},
"borderRadius": {
"element": {
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/4}",
"tablet": "{__scales/borderRadius/4}",
"desktop": "{__scales/borderRadius/4}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/8}",
"tablet": "{__scales/borderRadius/8}",
"desktop": "{__scales/borderRadius/8}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/16}",
"tablet": "{__scales/borderRadius/16}",
"desktop": "{__scales/borderRadius/16}"
}
}
},
"group": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/8}",
"tablet": "{__scales/borderRadius/8}",
"desktop": "{__scales/borderRadius/8}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/12}",
"tablet": "{__scales/borderRadius/12}",
"desktop": "{__scales/borderRadius/12}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/16}",
"tablet": "{__scales/borderRadius/16}",
"desktop": "{__scales/borderRadius/16}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/22}",
"tablet": "{__scales/borderRadius/22}",
"desktop": "{__scales/borderRadius/22}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/28}",
"tablet": "{__scales/borderRadius/28}",
"desktop": "{__scales/borderRadius/28}"
}
}
},
"layout": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/16}",
"tablet": "{__scales/borderRadius/16}",
"desktop": "{__scales/borderRadius/16}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/22}",
"tablet": "{__scales/borderRadius/24}",
"desktop": "{__scales/borderRadius/24}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/28}",
"tablet": "{__scales/borderRadius/32}",
"desktop": "{__scales/borderRadius/32}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/40}",
"tablet": "{__scales/borderRadius/48}",
"desktop": "{__scales/borderRadius/48}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/borderRadius/48}",
"tablet": "{__scales/borderRadius/64}",
"desktop": "{__scales/borderRadius/64}"
}
}
}
},
"padding": {
"element": {
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/4}",
"tablet": "{__scales/padding/4}",
"desktop": "{__scales/padding/4}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/8}",
"tablet": "{__scales/padding/8}",
"desktop": "{__scales/padding/8}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/16}",
"tablet": "{__scales/padding/16}",
"desktop": "{__scales/padding/16}"
}
}
},
"group": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/8}",
"tablet": "{__scales/padding/8}",
"desktop": "{__scales/padding/8}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/12}",
"tablet": "{__scales/padding/12}",
"desktop": "{__scales/padding/12}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/16}",
"tablet": "{__scales/padding/16}",
"desktop": "{__scales/padding/16}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/22}",
"tablet": "{__scales/padding/24}",
"desktop": "{__scales/padding/24}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/28}",
"tablet": "{__scales/padding/32}",
"desktop": "{__scales/padding/32}"
}
}
},
"layout": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/16}",
"tablet": "{__scales/padding/16}",
"desktop": "{__scales/padding/16}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/22}",
"tablet": "{__scales/padding/24}",
"desktop": "{__scales/padding/24}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/28}",
"tablet": "{__scales/padding/32}",
"desktop": "{__scales/padding/32}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/40}",
"tablet": "{__scales/padding/48}",
"desktop": "{__scales/padding/48}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/padding/48}",
"tablet": "{__scales/padding/64}",
"desktop": "{__scales/padding/64}"
}
}
}
},
"gap": {
"element": {
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/4}",
"tablet": "{__scales/gap/4}",
"desktop": "{__scales/gap/4}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/8}",
"tablet": "{__scales/gap/8}",
"desktop": "{__scales/gap/8}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/16}",
"tablet": "{__scales/gap/16}",
"desktop": "{__scales/gap/16}"
}
}
},
"group": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/8}",
"tablet": "{__scales/gap/8}",
"desktop": "{__scales/gap/8}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/12}",
"tablet": "{__scales/gap/12}",
"desktop": "{__scales/gap/12}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/16}",
"tablet": "{__scales/gap/16}",
"desktop": "{__scales/gap/16}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/22}",
"tablet": "{__scales/gap/24}",
"desktop": "{__scales/gap/24}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/28}",
"tablet": "{__scales/gap/32}",
"desktop": "{__scales/gap/32}"
}
}
},
"layout": {
"extraSmall": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/16}",
"tablet": "{__scales/gap/16}",
"desktop": "{__scales/gap/16}"
}
},
"small": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/22}",
"tablet": "{__scales/gap/24}",
"desktop": "{__scales/gap/24}"
}
},
"medium": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/28}",
"tablet": "{__scales/gap/32}",
"desktop": "{__scales/gap/32}"
}
},
"large": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/40}",
"tablet": "{__scales/gap/48}",
"desktop": "{__scales/gap/48}"
}
},
"extraLarge": {
"$type": "dimension",
"$value": {
"default": "{__scales/gap/48}",
"tablet": "{__scales/gap/64}",
"desktop": "{__scales/gap/64}"
}
}
}
}
}
}
We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.
const scales = {
"dimension": {
"0": 0,
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"12": 12,
"14": 14,
"16": 16,
"18": 18,
"20": 20,
"22": 22,
"24": 24,
"28": 28,
"32": 32,
"36": 36,
"40": 40,
"44": 44,
"48": 48,
"52": 52,
"56": 56,
"60": 60,
"64": 64,
"68": 68,
"72": 72,
"76": 76,
"80": 80,
"84": 84,
"88": 88,
"92": 92,
"96": 96,
"100": 100,
"104": 104,
"108": 108,
"112": 112,
"116": 116,
"120": 120,
"124": 124,
"128": 128,
"132": 132,
"136": 136,
"140": 140,
"144": 144,
"148": 148,
"152": 152,
"156": 156,
"160": 160,
"164": 164,
"168": 168,
"172": 172,
"176": 176,
"180": 180,
"184": 184,
"188": 188,
"192": 192,
"196": 196,
"200": 200,
"204": 204,
"208": 208,
"212": 212,
"216": 216,
"220": 220,
"224": 224,
"228": 228,
"232": 232,
"236": 236,
"240": 240,
"244": 244,
"248": 248,
"252": 252,
"256": 256,
"320": 320,
"960": 960,
"1440": 1440,
"1920": 1920,
"2560": 2560,
"3840": 3840,
"neg3840": -3840,
"neg2560": -2560,
"neg1920": -1920,
"neg1440": -1440,
"neg960": -960,
"neg320": -320,
"neg256": -256,
"neg252": -252,
"neg248": -248,
"neg244": -244,
"neg240": -240,
"neg236": -236,
"neg232": -232,
"neg228": -228,
"neg224": -224,
"neg220": -220,
"neg216": -216,
"neg212": -212,
"neg208": -208,
"neg204": -204,
"neg200": -200,
"neg196": -196,
"neg192": -192,
"neg188": -188,
"neg184": -184,
"neg180": -180,
"neg176": -176,
"neg172": -172,
"neg168": -168,
"neg164": -164,
"neg160": -160,
"neg156": -156,
"neg152": -152,
"neg148": -148,
"neg144": -144,
"neg140": -140,
"neg136": -136,
"neg132": -132,
"neg128": -128,
"neg124": -124,
"neg120": -120,
"neg116": -116,
"neg112": -112,
"neg108": -108,
"neg104": -104,
"neg100": -100,
"neg96": -96,
"neg92": -92,
"neg88": -88,
"neg84": -84,
"neg80": -80,
"neg76": -76,
"neg72": -72,
"neg68": -68,
"neg64": -64,
"neg60": -60,
"neg56": -56,
"neg52": -52,
"neg48": -48,
"neg44": -44,
"neg40": -40,
"neg36": -36,
"neg32": -32,
"neg28": -28,
"neg24": -24,
"neg22": -22,
"neg20": -20,
"neg18": -18,
"neg16": -16,
"neg14": -14,
"neg12": -12,
"neg10": -10,
"neg8": -8,
"neg7": -7,
"neg6": -6,
"neg5": -5,
"neg4": -4,
"neg3": -3,
"neg2": -2,
"neg1": -1,
"neg0_900": -0.9,
"neg0_800": -0.8,
"neg0_750": -0.75,
"neg0_700": -0.7,
"neg0_666": -0.666666,
"neg0_600": -0.6,
"neg0_500": -0.5,
"neg0_400": -0.4,
"neg0_333": -0.333333,
"neg0_300": -0.3,
"neg0_250": -0.25,
"neg0_200": -0.2,
"neg0_125": -0.125,
"neg0_100": -0.1,
"0_100": 0.1,
"0_125": 0.125,
"0_200": 0.2,
"0_250": 0.25,
"0_300": 0.3,
"0_333": 0.333333,
"0_400": 0.4,
"0_500": 0.5,
"0_600": 0.6,
"0_666": 0.666666,
"0_700": 0.7,
"0_750": 0.75,
"0_800": 0.8,
"0_900": 0.9
}
} as const;
export const tokens = {
"default": {
"screen": {
"default": scales.dimension[0],
"tablet": scales.dimension[960],
"desktop": scales.dimension[1440]
},
"tweak": {
"0": scales.dimension[0],
"100": scales.dimension["0_100"],
"125": scales.dimension["0_125"],
"200": scales.dimension["0_200"],
"250": scales.dimension["0_250"],
"300": scales.dimension["0_300"],
"333": scales.dimension["0_333"],
"400": scales.dimension["0_400"],
"500": scales.dimension["0_500"],
"600": scales.dimension["0_600"],
"666": scales.dimension["0_666"],
"700": scales.dimension["0_700"],
"750": scales.dimension["0_750"],
"800": scales.dimension["0_800"],
"900": scales.dimension["0_900"],
"1000": scales.dimension[1],
"2000": scales.dimension[2],
"3000": scales.dimension[3],
"4000": scales.dimension[4],
"5000": scales.dimension[5],
"6000": scales.dimension[6],
"7000": scales.dimension[7],
"-7000": scales.dimension.neg7,
"-6000": scales.dimension.neg6,
"-5000": scales.dimension.neg5,
"-4000": scales.dimension.neg4,
"-3000": scales.dimension.neg3,
"-2000": scales.dimension.neg2,
"-1000": scales.dimension.neg1,
"-900": scales.dimension.neg0_900,
"-800": scales.dimension.neg0_800,
"-750": scales.dimension.neg0_700,
"-700": scales.dimension.neg0_700,
"-666": scales.dimension.neg0_600,
"-600": scales.dimension.neg0_600,
"-500": scales.dimension.neg0_500,
"-400": scales.dimension.neg0_400,
"-333": scales.dimension.neg0_300,
"-300": scales.dimension.neg0_300,
"-250": scales.dimension.neg0_200,
"-200": scales.dimension.neg0_200,
"-125": scales.dimension.neg0_100,
"-100": scales.dimension.neg0_100
}
},
"small": {
"borderRadius": {
"element": {
"default": scales.dimension[4],
"tablet": scales.dimension[4],
"desktop": scales.dimension[4]
},
"group": {
"default": scales.dimension[12],
"tablet": scales.dimension[12],
"desktop": scales.dimension[12]
},
"layout": {
"default": scales.dimension[22],
"tablet": scales.dimension[24],
"desktop": scales.dimension[24]
}
},
"padding": {
"element": {
"default": scales.dimension[4],
"tablet": scales.dimension[4],
"desktop": scales.dimension[4]
},
"group": {
"default": scales.dimension[12],
"tablet": scales.dimension[12],
"desktop": scales.dimension[12]
},
"layout": {
"default": scales.dimension[22],
"tablet": scales.dimension[24],
"desktop": scales.dimension[24]
}
},
"gap": {
"element": {
"default": scales.dimension[4],
"tablet": scales.dimension[4],
"desktop": scales.dimension[4]
},
"group": {
"default": scales.dimension[12],
"tablet": scales.dimension[12],
"desktop": scales.dimension[12]
},
"layout": {
"default": scales.dimension[22],
"tablet": scales.dimension[24],
"desktop": scales.dimension[24]
}
}
},
"medium": {
"borderRadius": {
"element": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"group": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"layout": {
"default": scales.dimension[28],
"tablet": scales.dimension[32],
"desktop": scales.dimension[32]
}
},
"padding": {
"element": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"group": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"layout": {
"default": scales.dimension[28],
"tablet": scales.dimension[32],
"desktop": scales.dimension[32]
}
},
"gap": {
"element": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"group": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"layout": {
"default": scales.dimension[28],
"tablet": scales.dimension[32],
"desktop": scales.dimension[32]
}
}
},
"large": {
"borderRadius": {
"element": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"group": {
"default": scales.dimension[22],
"tablet": scales.dimension[22],
"desktop": scales.dimension[22]
},
"layout": {
"default": scales.dimension[40],
"tablet": scales.dimension[48],
"desktop": scales.dimension[48]
}
},
"padding": {
"element": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"group": {
"default": scales.dimension[22],
"tablet": scales.dimension[24],
"desktop": scales.dimension[24]
},
"layout": {
"default": scales.dimension[40],
"tablet": scales.dimension[48],
"desktop": scales.dimension[48]
}
},
"gap": {
"element": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
},
"group": {
"default": scales.dimension[22],
"tablet": scales.dimension[24],
"desktop": scales.dimension[24]
},
"layout": {
"default": scales.dimension[40],
"tablet": scales.dimension[48],
"desktop": scales.dimension[48]
}
}
},
"extraSmall": {
"borderRadius": {
"group": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"layout": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
}
},
"padding": {
"group": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"layout": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
}
},
"gap": {
"group": {
"default": scales.dimension[8],
"tablet": scales.dimension[8],
"desktop": scales.dimension[8]
},
"layout": {
"default": scales.dimension[16],
"tablet": scales.dimension[16],
"desktop": scales.dimension[16]
}
}
},
"extraLarge": {
"borderRadius": {
"group": {
"default": scales.dimension[28],
"tablet": scales.dimension[28],
"desktop": scales.dimension[28]
},
"layout": {
"default": scales.dimension[48],
"tablet": scales.dimension[64],
"desktop": scales.dimension[64]
}
},
"padding": {
"group": {
"default": scales.dimension[28],
"tablet": scales.dimension[32],
"desktop": scales.dimension[32]
},
"layout": {
"default": scales.dimension[48],
"tablet": scales.dimension[64],
"desktop": scales.dimension[64]
}
},
"gap": {
"group": {
"default": scales.dimension[28],
"tablet": scales.dimension[32],
"desktop": scales.dimension[32]
},
"layout": {
"default": scales.dimension[48],
"tablet": scales.dimension[64],
"desktop": scales.dimension[64]
}
}
}
} as const;