Layout

⋯

Layout tokens are available as CSS variables and Tailwind utilities. The unit scale includes 2px steps; it is not a strict 4px grid.

<section className="grid gap-nesra-spacing-xl p-nesra-padding-4xl">
  <div>Related controls</div>
</section>

Units

Figma variable	CSS variable	Value
`Unit/unit-0`	`--nesra-unit-0`	`0px`
`Unit/unit-1`	`--nesra-unit-1`	`4px`
`Unit/unit-2`	`--nesra-unit-2`	`6px`
`Unit/unit-3`	`--nesra-unit-3`	`8px`
`Unit/unit-4`	`--nesra-unit-4`	`10px`
`Unit/unit-5`	`--nesra-unit-5`	`12px`
`Unit/unit-6`	`--nesra-unit-6`	`14px`
`Unit/unit-7`	`--nesra-unit-7`	`16px`
`Unit/unit-8`	`--nesra-unit-8`	`18px`
`Unit/unit-9`	`--nesra-unit-9`	`20px`
`Unit/unit-10`	`--nesra-unit-10`	`22px`
`Unit/unit-11`	`--nesra-unit-11`	`24px`
`Unit/unit-12`	`--nesra-unit-12`	`26px`
`Unit/unit-13`	`--nesra-unit-13`	`28px`
`Unit/unit-14`	`--nesra-unit-14`	`30px`
`Unit/unit-15`	`--nesra-unit-15`	`32px`
`Unit/unit-16`	`--nesra-unit-16`	`34px`
`Unit/unit-17`	`--nesra-unit-17`	`36px`
`Unit/unit-18`	`--nesra-unit-18`	`38px`
`Unit/unit-19`	`--nesra-unit-19`	`40px`
`Unit/unit-20`	`--nesra-unit-20`	`42px`
`Unit/unit-21`	`--nesra-unit-21`	`44px`
`Unit/unit-22`	`--nesra-unit-22`	`46px`
`Unit/unit-23`	`--nesra-unit-23`	`48px`
`Unit/unit-24`	`--nesra-unit-24`	`50px`
`Unit/unit-25`	`--nesra-unit-25`	`52px`

Named gaps

Figma variable	CSS variable	Value
`Gap/spacing-xxs`	`--nesra-spacing-xxs`	`2px`
`Gap/spacing-xs`	`--nesra-spacing-xs`	`4px`
`Gap/spacing-sm`	`--nesra-spacing-sm`	`6px`
`Gap/spacing-md`	`--nesra-spacing-md`	`8px`
`Gap/spacing-lg`	`--nesra-spacing-lg`	`12px`
`Gap/spacing-xl`	`--nesra-spacing-xl`	`16px`
`Gap/spacing-2xl`	`--nesra-spacing-2xl`	`20px`
`Gap/spacing-3xl`	`--nesra-spacing-3xl`	`24px`
`Gap/spacing-7xl`	`--nesra-spacing-7xl`	`64px`
`Gap/container-padding-mobile`	`--nesra-container-padding-mobile`	`16px`

Padding

Role	Value
`0`	`0px`
`xs`	`4px`
`sm`	`6px`
`md`	`8px`
`lg`	`10px`
`xl`	`12px`
`2xl`	`16px`
`3xl`	`20px`
`4xl`	`24px`
`5xl`	`32px`
`6xl`	`40px`

Margin

Role	Value
`0`	`0px`
`xs`	`8px`
`sm`	`12px`
`md`	`16px`
`lg`	`24px`
`xl`	`32px`
`2xl`	`36px`
`3xl`	`40px`
`4xl`	`46px`
`5xl`	`52px`

Calendar/Size/date-icon-height is 56px: --nesra-calendar-size-date-icon-height or h-nesra-calendar-size-date-icon-height.