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

Sort by

propertygroup

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

spacing / screen

Token name	Value
spacing.screen.default	0px
spacing.screen.tablet	960px
spacing.screen.desktop	1440px

spacing / tweak

Token name	Value
spacing.tweak.0	0px
spacing.tweak.100	0.1px
spacing.tweak.125	0.125px
spacing.tweak.200	0.2px
spacing.tweak.250	0.25px
spacing.tweak.300	0.3px
spacing.tweak.333	0.333333px
spacing.tweak.400	0.4px
spacing.tweak.500	0.5px
spacing.tweak.600	0.6px
spacing.tweak.666	0.666666px
spacing.tweak.700	0.7px
spacing.tweak.750	0.75px
spacing.tweak.800	0.8px
spacing.tweak.900	0.9px
spacing.tweak.1000	1px
spacing.tweak.2000	2px
spacing.tweak.3000	3px
spacing.tweak.4000	4px

CSS Custom Properties

/**
 * Private properties (not for direct usage or editing):
 */
:root {
  ----dimension--0: 0px;
  ----dimension--1: 1px;
  ----dimension--2: 2px;
  ----dimension--3: 3px;
  ----dimension--4: 4px;
  ----dimension--6: 6px;
  ----dimension--8: 8px;
  ----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--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.333333px;
  ----dimension--0_400: 0.4px;
  ----dimension--0_500: 0.5px;
  ----dimension--0_600: 0.6px;
  ----dimension--0_666: 0.666666px;
  ----dimension--0_700: 0.7px;
  ----dimension--0_750: 0.75px;
  ----dimension--0_800: 0.8px;
  ----dimension--0_900: 0.9px;
}

/**
 * Dimension tokens:
 */
:root {
  --spacing--screen-default: var(----dimension--0, 0px);
  --spacing--screen-tablet: var(----dimension--960, 960px);
  --spacing--screen-desktop: var(----dimension--1440, 1440px);
  --spacing--tweak-0: var(----dimension--0, 0px);
  --spacing--tweak-100: var(----dimension--0_100, 0.1px);
  --spacing--tweak-125: var(----dimension--0_125, 0.125px);
  --spacing--tweak-200: var(----dimension--0_200, 0.2px);
  --spacing--tweak-250: var(----dimension--0_250, 0.25px);
  --spacing--tweak-300: var(----dimension--0_300, 0.3px);
  --spacing--tweak-333: var(----dimension--0_333, 0.333333px);
  --spacing--tweak-400: var(----dimension--0_400, 0.4px);
  --spacing--tweak-500: var(----dimension--0_500, 0.5px);
  --spacing--tweak-600: var(----dimension--0_600, 0.6px);
  --spacing--tweak-666: var(----dimension--0_666, 0.666666px);
  --spacing--tweak-700: var(----dimension--0_700, 0.7px);
  --spacing--tweak-750: var(----dimension--0_750, 0.75px);
  --spacing--tweak-800: var(----dimension--0_800, 0.8px);
  --spacing--tweak-900: var(----dimension--0_900, 0.9px);
  --spacing--tweak-1000: var(----dimension--1, 1px);
  --spacing--tweak-2000: var(----dimension--2, 2px);
  --spacing--tweak-3000: var(----dimension--3, 3px);
  --spacing--tweak-4000: var(----dimension--4, 4px);
  --borderRadius--element-small: var(----dimension--4, 4px);
  --borderRadius--element-medium: var(----dimension--8, 8px);
  --borderRadius--element-large: var(----dimension--16, 16px);
  --padding--element-small: var(----dimension--4, 4px);
  --padding--element-medium: var(----dimension--8, 8px);
  --padding--element-large: var(----dimension--16, 16px);
  --gap--element-small: var(----dimension--4, 4px);
  --gap--element-medium: var(----dimension--8, 8px);
  --gap--element-large: var(----dimension--16, 16px);
  --borderRadius--group-extraSmall: var(----dimension--8, 8px);
  --borderRadius--group-small: var(----dimension--12, 12px);
  --borderRadius--group-medium: var(----dimension--16, 16px);
  --borderRadius--group-large: var(----dimension--22, 22px);
  --borderRadius--group-extraLarge: var(----dimension--28, 28px);
  --padding--group-extraSmall: var(----dimension--8, 8px);
  --padding--group-small: var(----dimension--12, 12px);
  --padding--group-medium: var(----dimension--16, 16px);
  --padding--group-large: var(----dimension--22, 22px);
  --padding--group-extraLarge: var(----dimension--28, 28px);
  --gap--group-extraSmall: var(----dimension--8, 8px);
  --gap--group-small: var(----dimension--12, 12px);
  --gap--group-medium: var(----dimension--16, 16px);
  --gap--group-large: var(----dimension--22, 22px);
  --gap--group-extraLarge: var(----dimension--28, 28px);
  --borderRadius--layout-extraSmall: var(----dimension--16, 16px);
  --borderRadius--layout-small: var(----dimension--22, 22px);
  --borderRadius--layout-medium: var(----dimension--28, 28px);
  --borderRadius--layout-large: var(----dimension--40, 40px);
  --borderRadius--layout-extraLarge: var(----dimension--48, 48px);
  --padding--layout-extraSmall: var(----dimension--16, 16px);
  --padding--layout-small: var(----dimension--22, 22px);
  --padding--layout-medium: var(----dimension--28, 28px);
  --padding--layout-large: var(----dimension--40, 40px);
  --padding--layout-extraLarge: var(----dimension--48, 48px);
  --gap--layout-extraSmall: var(----dimension--16, 16px);
  --gap--layout-small: var(----dimension--22, 22px);
  --gap--layout-medium: var(----dimension--28, 28px);
  --gap--layout-large: var(----dimension--40, 40px);
  --gap--layout-extraLarge: var(----dimension--48, 48px);
}
@media (min-width: 960px){
  :root {
    --borderRadius--element-small: var(----dimension--4, 4px);
    --borderRadius--element-medium: var(----dimension--8, 8px);
    --borderRadius--element-large: var(----dimension--16, 16px);
    --padding--element-small: var(----dimension--4, 4px);
    --padding--element-medium: var(----dimension--8, 8px);
    --padding--element-large: var(----dimension--16, 16px);
    --gap--element-small: var(----dimension--4, 4px);
    --gap--element-medium: var(----dimension--8, 8px);
    --gap--element-large: var(----dimension--16, 16px);
    --borderRadius--group-extraSmall: var(----dimension--8, 8px);
    --borderRadius--group-small: var(----dimension--12, 12px);
    --borderRadius--group-medium: var(----dimension--16, 16px);
    --borderRadius--group-large: var(----dimension--22, 22px);
    --borderRadius--group-extraLarge: var(----dimension--28, 28px);
    --padding--group-extraSmall: var(----dimension--8, 8px);
    --padding--group-small: var(----dimension--12, 12px);
    --padding--group-medium: var(----dimension--16, 16px);
    --padding--group-large: var(----dimension--24, 24px);
    --padding--group-extraLarge: var(----dimension--32, 32px);
    --gap--group-extraSmall: var(----dimension--8, 8px);
    --gap--group-small: var(----dimension--12, 12px);
    --gap--group-medium: var(----dimension--16, 16px);
    --gap--group-large: var(----dimension--24, 24px);
    --gap--group-extraLarge: var(----dimension--32, 32px);
    --borderRadius--layout-extraSmall: var(----dimension--16, 16px);
    --borderRadius--layout-small: var(----dimension--24, 24px);
    --borderRadius--layout-medium: var(----dimension--32, 32px);
    --borderRadius--layout-large: var(----dimension--48, 48px);
    --borderRadius--layout-extraLarge: var(----dimension--64, 64px);
    --padding--layout-extraSmall: var(----dimension--16, 16px);
    --padding--layout-small: var(----dimension--24, 24px);
    --padding--layout-medium: var(----dimension--32, 32px);
    --padding--layout-large: var(----dimension--48, 48px);
    --padding--layout-extraLarge: var(----dimension--64, 64px);
    --gap--layout-extraSmall: var(----dimension--16, 16px);
    --gap--layout-small: var(----dimension--24, 24px);
    --gap--layout-medium: var(----dimension--32, 32px);
    --gap--layout-large: var(----dimension--48, 48px);
    --gap--layout-extraLarge: var(----dimension--64, 64px);
  }
}
@media (min-width: 1440px){
  :root {
    --borderRadius--element-small: var(----dimension--4, 4px);
    --borderRadius--element-medium: var(----dimension--8, 8px);
    --borderRadius--element-large: var(----dimension--16, 16px);
    --padding--element-small: var(----dimension--4, 4px);
    --padding--element-medium: var(----dimension--8, 8px);
    --padding--element-large: var(----dimension--16, 16px);
    --gap--element-small: var(----dimension--4, 4px);
    --gap--element-medium: var(----dimension--8, 8px);
    --gap--element-large: var(----dimension--16, 16px);
    --borderRadius--group-extraSmall: var(----dimension--8, 8px);
    --borderRadius--group-small: var(----dimension--12, 12px);
    --borderRadius--group-medium: var(----dimension--16, 16px);
    --borderRadius--group-large: var(----dimension--22, 22px);
    --borderRadius--group-extraLarge: var(----dimension--28, 28px);
    --padding--group-extraSmall: var(----dimension--8, 8px);
    --padding--group-small: var(----dimension--12, 12px);
    --padding--group-medium: var(----dimension--16, 16px);
    --padding--group-large: var(----dimension--24, 24px);
    --padding--group-extraLarge: var(----dimension--32, 32px);
    --gap--group-extraSmall: var(----dimension--8, 8px);
    --gap--group-small: var(----dimension--12, 12px);
    --gap--group-medium: var(----dimension--16, 16px);
    --gap--group-large: var(----dimension--24, 24px);
    --gap--group-extraLarge: var(----dimension--32, 32px);
    --borderRadius--layout-extraSmall: var(----dimension--16, 16px);
    --borderRadius--layout-small: var(----dimension--24, 24px);
    --borderRadius--layout-medium: var(----dimension--32, 32px);
    --borderRadius--layout-large: var(----dimension--48, 48px);
    --borderRadius--layout-extraLarge: var(----dimension--64, 64px);
    --padding--layout-extraSmall: var(----dimension--16, 16px);
    --padding--layout-small: var(----dimension--24, 24px);
    --padding--layout-medium: var(----dimension--32, 32px);
    --padding--layout-large: var(----dimension--48, 48px);
    --padding--layout-extraLarge: var(----dimension--64, 64px);
    --gap--layout-extraSmall: var(----dimension--16, 16px);
    --gap--layout-small: var(----dimension--24, 24px);
    --gap--layout-medium: var(----dimension--32, 32px);
    --gap--layout-large: var(----dimension--48, 48px);
    --gap--layout-extraLarge: var(----dimension--64, 64px);
  }
}

Figma JSON

{
  "Scales": {
    "dimension": {
      "dimension/0": {
        "$type": "dimension",
        "$value": 0
      },
      "dimension/1": {
        "$type": "dimension",
        "$value": 1
      },
      "dimension/2": {
        "$type": "dimension",
        "$value": 2
      },
      "dimension/3": {
        "$type": "dimension",
        "$value": 3
      },
      "dimension/4": {
        "$type": "dimension",
        "$value": 4
      },
      "dimension/6": {
        "$type": "dimension",
        "$value": 6
      },
      "dimension/8": {
        "$type": "dimension",
        "$value": 8
      },
      "dimension/10": {
        "$type": "dimension",
        "$value": 10
      },
      "dimension/12": {
        "$type": "dimension",
        "$value": 12
      },
      "dimension/14": {
        "$type": "dimension",
        "$value": 14
      },
      "dimension/16": {
        "$type": "dimension",
        "$value": 16
      },
      "dimension/18": {
        "$type": "dimension",
        "$value": 18
      },
      "dimension/20": {
        "$type": "dimension",
        "$value": 20
      },
      "dimension/22": {
        "$type": "dimension",
        "$value": 22
      },
      "dimension/24": {
        "$type": "dimension",
        "$value": 24
      },
      "dimension/28": {
        "$type": "dimension",
        "$value": 28
      },
      "dimension/32": {
        "$type": "dimension",
        "$value": 32
      },
      "dimension/36": {
        "$type": "dimension",
        "$value": 36
      },
      "dimension/40": {
        "$type": "dimension",
        "$value": 40
      },
      "dimension/44": {
        "$type": "dimension",
        "$value": 44
      },
      "dimension/48": {
        "$type": "dimension",
        "$value": 48
      },
      "dimension/52": {
        "$type": "dimension",
        "$value": 52
      },
      "dimension/56": {
        "$type": "dimension",
        "$value": 56
      },
      "dimension/60": {
        "$type": "dimension",
        "$value": 60
      },
      "dimension/64": {
        "$type": "dimension",
        "$value": 64
      },
      "dimension/68": {
        "$type": "dimension",
        "$value": 68
      },
      "dimension/72": {
        "$type": "dimension",
        "$value": 72
      },
      "dimension/76": {
        "$type": "dimension",
        "$value": 76
      },
      "dimension/80": {
        "$type": "dimension",
        "$value": 80
      },
      "dimension/84": {
        "$type": "dimension",
        "$value": 84
      },
      "dimension/88": {
        "$type": "dimension",
        "$value": 88
      },
      "dimension/92": {
        "$type": "dimension",
        "$value": 92
      },
      "dimension/96": {
        "$type": "dimension",
        "$value": 96
      },
      "dimension/100": {
        "$type": "dimension",
        "$value": 100
      },
      "dimension/104": {
        "$type": "dimension",
        "$value": 104
      },
      "dimension/108": {
        "$type": "dimension",
        "$value": 108
      },
      "dimension/112": {
        "$type": "dimension",
        "$value": 112
      },
      "dimension/116": {
        "$type": "dimension",
        "$value": 116
      },
      "dimension/120": {
        "$type": "dimension",
        "$value": 120
      },
      "dimension/124": {
        "$type": "dimension",
        "$value": 124
      },
      "dimension/128": {
        "$type": "dimension",
        "$value": 128
      },
      "dimension/132": {
        "$type": "dimension",
        "$value": 132
      },
      "dimension/136": {
        "$type": "dimension",
        "$value": 136
      },
      "dimension/140": {
        "$type": "dimension",
        "$value": 140
      },
      "dimension/144": {
        "$type": "dimension",
        "$value": 144
      },
      "dimension/148": {
        "$type": "dimension",
        "$value": 148
      },
      "dimension/152": {
        "$type": "dimension",
        "$value": 152
      },
      "dimension/156": {
        "$type": "dimension",
        "$value": 156
      },
      "dimension/160": {
        "$type": "dimension",
        "$value": 160
      },
      "dimension/164": {
        "$type": "dimension",
        "$value": 164
      },
      "dimension/168": {
        "$type": "dimension",
        "$value": 168
      },
      "dimension/172": {
        "$type": "dimension",
        "$value": 172
      },
      "dimension/176": {
        "$type": "dimension",
        "$value": 176
      },
      "dimension/180": {
        "$type": "dimension",
        "$value": 180
      },
      "dimension/184": {
        "$type": "dimension",
        "$value": 184
      },
      "dimension/188": {
        "$type": "dimension",
        "$value": 188
      },
      "dimension/192": {
        "$type": "dimension",
        "$value": 192
      },
      "dimension/196": {
        "$type": "dimension",
        "$value": 196
      },
      "dimension/200": {
        "$type": "dimension",
        "$value": 200
      },
      "dimension/204": {
        "$type": "dimension",
        "$value": 204
      },
      "dimension/208": {
        "$type": "dimension",
        "$value": 208
      },
      "dimension/212": {
        "$type": "dimension",
        "$value": 212
      },
      "dimension/216": {
        "$type": "dimension",
        "$value": 216
      },
      "dimension/220": {
        "$type": "dimension",
        "$value": 220
      },
      "dimension/224": {
        "$type": "dimension",
        "$value": 224
      },
      "dimension/228": {
        "$type": "dimension",
        "$value": 228
      },
      "dimension/232": {
        "$type": "dimension",
        "$value": 232
      },
      "dimension/236": {
        "$type": "dimension",
        "$value": 236
      },
      "dimension/240": {
        "$type": "dimension",
        "$value": 240
      },
      "dimension/244": {
        "$type": "dimension",
        "$value": 244
      },
      "dimension/248": {
        "$type": "dimension",
        "$value": 248
      },
      "dimension/252": {
        "$type": "dimension",
        "$value": 252
      },
      "dimension/256": {
        "$type": "dimension",
        "$value": 256
      },
      "dimension/320": {
        "$type": "dimension",
        "$value": 320
      },
      "dimension/960": {
        "$type": "dimension",
        "$value": 960
      },
      "dimension/1440": {
        "$type": "dimension",
        "$value": 1440
      },
      "dimension/1920": {
        "$type": "dimension",
        "$value": 1920
      },
      "dimension/2560": {
        "$type": "dimension",
        "$value": 2560
      },
      "dimension/3840": {
        "$type": "dimension",
        "$value": 3840
      },
      "dimension/0_100": {
        "$type": "dimension",
        "$value": 0.1
      },
      "dimension/0_125": {
        "$type": "dimension",
        "$value": 0.125
      },
      "dimension/0_200": {
        "$type": "dimension",
        "$value": 0.2
      },
      "dimension/0_250": {
        "$type": "dimension",
        "$value": 0.25
      },
      "dimension/0_300": {
        "$type": "dimension",
        "$value": 0.3
      },
      "dimension/0_333": {
        "$type": "dimension",
        "$value": 0.333333
      },
      "dimension/0_400": {
        "$type": "dimension",
        "$value": 0.4
      },
      "dimension/0_500": {
        "$type": "dimension",
        "$value": 0.5
      },
      "dimension/0_600": {
        "$type": "dimension",
        "$value": 0.6
      },
      "dimension/0_666": {
        "$type": "dimension",
        "$value": 0.666666
      },
      "dimension/0_700": {
        "$type": "dimension",
        "$value": 0.7
      },
      "dimension/0_750": {
        "$type": "dimension",
        "$value": 0.75
      },
      "dimension/0_800": {
        "$type": "dimension",
        "$value": 0.8
      },
      "dimension/0_900": {
        "$type": "dimension",
        "$value": 0.9
      }
    }
  },
  "Dimension": {
    "spacing/screen/default": {
      "$type": "dimension",
      "$value": "{dimension/0}"
    },
    "spacing/screen/tablet": {
      "$type": "dimension",
      "$value": "{dimension/960}"
    },
    "spacing/screen/desktop": {
      "$type": "dimension",
      "$value": "{dimension/1440}"
    },
    "spacing/tweak/0": {
      "$type": "dimension",
      "$value": "{dimension/0}"
    },
    "spacing/tweak/100": {
      "$type": "dimension",
      "$value": "{dimension/0_100}"
    },
    "spacing/tweak/125": {
      "$type": "dimension",
      "$value": "{dimension/0_125}"
    },
    "spacing/tweak/200": {
      "$type": "dimension",
      "$value": "{dimension/0_200}"
    },
    "spacing/tweak/250": {
      "$type": "dimension",
      "$value": "{dimension/0_250}"
    },
    "spacing/tweak/300": {
      "$type": "dimension",
      "$value": "{dimension/0_300}"
    },
    "spacing/tweak/333": {
      "$type": "dimension",
      "$value": "{dimension/0_333}"
    },
    "spacing/tweak/400": {
      "$type": "dimension",
      "$value": "{dimension/0_400}"
    },
    "spacing/tweak/500": {
      "$type": "dimension",
      "$value": "{dimension/0_500}"
    },
    "spacing/tweak/600": {
      "$type": "dimension",
      "$value": "{dimension/0_600}"
    },
    "spacing/tweak/666": {
      "$type": "dimension",
      "$value": "{dimension/0_666}"
    },
    "spacing/tweak/700": {
      "$type": "dimension",
      "$value": "{dimension/0_700}"
    },
    "spacing/tweak/750": {
      "$type": "dimension",
      "$value": "{dimension/0_750}"
    },
    "spacing/tweak/800": {
      "$type": "dimension",
      "$value": "{dimension/0_800}"
    },
    "spacing/tweak/900": {
      "$type": "dimension",
      "$value": "{dimension/0_900}"
    },
    "spacing/tweak/1000": {
      "$type": "dimension",
      "$value": "{dimension/1}"
    },
    "spacing/tweak/2000": {
      "$type": "dimension",
      "$value": "{dimension/2}"
    },
    "spacing/tweak/3000": {
      "$type": "dimension",
      "$value": "{dimension/3}"
    },
    "spacing/tweak/4000": {
      "$type": "dimension",
      "$value": "{dimension/4}"
    },
    "borderRadius/element/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/4}",
        "tablet": "{dimension/4}",
        "desktop": "{dimension/4}"
      }
    },
    "borderRadius/element/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "borderRadius/element/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "padding/element/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/4}",
        "tablet": "{dimension/4}",
        "desktop": "{dimension/4}"
      }
    },
    "padding/element/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "padding/element/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "gap/element/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/4}",
        "tablet": "{dimension/4}",
        "desktop": "{dimension/4}"
      }
    },
    "gap/element/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "gap/element/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "borderRadius/group/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "borderRadius/group/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/12}",
        "tablet": "{dimension/12}",
        "desktop": "{dimension/12}"
      }
    },
    "borderRadius/group/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "borderRadius/group/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/22}",
        "desktop": "{dimension/22}"
      }
    },
    "borderRadius/group/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/28}",
        "desktop": "{dimension/28}"
      }
    },
    "padding/group/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "padding/group/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/12}",
        "tablet": "{dimension/12}",
        "desktop": "{dimension/12}"
      }
    },
    "padding/group/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "padding/group/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/24}",
        "desktop": "{dimension/24}"
      }
    },
    "padding/group/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/32}",
        "desktop": "{dimension/32}"
      }
    },
    "gap/group/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/8}",
        "tablet": "{dimension/8}",
        "desktop": "{dimension/8}"
      }
    },
    "gap/group/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/12}",
        "tablet": "{dimension/12}",
        "desktop": "{dimension/12}"
      }
    },
    "gap/group/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "gap/group/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/24}",
        "desktop": "{dimension/24}"
      }
    },
    "gap/group/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/32}",
        "desktop": "{dimension/32}"
      }
    },
    "borderRadius/layout/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "borderRadius/layout/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/24}",
        "desktop": "{dimension/24}"
      }
    },
    "borderRadius/layout/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/32}",
        "desktop": "{dimension/32}"
      }
    },
    "borderRadius/layout/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/40}",
        "tablet": "{dimension/48}",
        "desktop": "{dimension/48}"
      }
    },
    "borderRadius/layout/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/48}",
        "tablet": "{dimension/64}",
        "desktop": "{dimension/64}"
      }
    },
    "padding/layout/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "padding/layout/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/24}",
        "desktop": "{dimension/24}"
      }
    },
    "padding/layout/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/32}",
        "desktop": "{dimension/32}"
      }
    },
    "padding/layout/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/40}",
        "tablet": "{dimension/48}",
        "desktop": "{dimension/48}"
      }
    },
    "padding/layout/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/48}",
        "tablet": "{dimension/64}",
        "desktop": "{dimension/64}"
      }
    },
    "gap/layout/extraSmall": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/16}",
        "tablet": "{dimension/16}",
        "desktop": "{dimension/16}"
      }
    },
    "gap/layout/small": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/22}",
        "tablet": "{dimension/24}",
        "desktop": "{dimension/24}"
      }
    },
    "gap/layout/medium": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/28}",
        "tablet": "{dimension/32}",
        "desktop": "{dimension/32}"
      }
    },
    "gap/layout/large": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/40}",
        "tablet": "{dimension/48}",
        "desktop": "{dimension/48}"
      }
    },
    "gap/layout/extraLarge": {
      "$type": "dimension",
      "$value": {
        "default": "{dimension/48}",
        "tablet": "{dimension/64}",
        "desktop": "{dimension/64}"
      }
    }
  }
}

We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.

React Native

TBD