Tokens

The non-color design tokens: spacing, radius, border width, shadow, and height. Unlike brand colors, these are identical across every theme and mode: switching brand or light/dark in the toolbar won't change any value on this page.

Each category also has its own focused page with more integration detail: Space · Radius · Border width · Height · Shadow · Grid utilities

None of these tokens exist without a theme stylesheet loaded: see Foundation → Import for how to load it per framework.

Spacing

Token	Value
--eun-space-xxs	0.1rem
--eun-space-xs	0.25rem
--eun-space-s	0.5rem
--eun-space-m	1rem
--eun-space-l	2rem
--eun-space-xl	3.5rem
--eun-space-xxl	5rem

Radius

Token	Value
--eun-borderRadius-s	5px
--eun-borderRadius-m	10px
--eun-borderRadius-l	20px
--eun-borderRadius-xl	999px (pill)

Border width

Token	Value
--eun-borderWidth-s	1px
--eun-borderWidth-m	1.5px
--eun-borderWidth-l	2px

Height

Token	Value
--eun-height-xxs	8px
--eun-height-xs	16px
--eun-height-s	24px
--eun-height-m	32px
--eun-height-l	34px
--eun-height-xl	48px
--eun-height-xxl	56px

Shadow

--eun-shadow-xs:
  rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
--eun-shadow-s:
  rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--eun-shadow-m:
  rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
--eun-shadow-l:
  rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
--eun-shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

Same black at low opacity throughout, mode-independent: offset, blur, and spread scale up together from xs to xl, so the five steps read as one continuous scale.

Grid utilities

A handful of plain CSS grid utility classes for laying out fields without hand-writing display: grid each time: .eun-grid plus a modifier: --halves, --thirds-1-2, --thirds-2-1, --thirds-equal, --2x2, --sidebar-left, --sidebar-right. Every variant collapses to a single column below 767px.

<div class="eun-grid eun-grid--halves">
  <eun-input label="First name"></eun-input>
  <eun-input label="Last name"></eun-input>
</div>