Skip to content
@erikakers/slate

Space and radius

The invariants from settings/_space.scss: literal declarations rather than a map, because the viewport-unit exemption is read by property name. They do not vary by theme, and a consumer overrides one by redeclaring it in their own :root, which wins on source order. Each example below is sized by the token itself: the bar is width: var(--slate-space-*), the corner is border-radius: var(--slate-radius-*), so the drawing cannot drift from the value.

The spacing scale

Ten steps on a 4px base, for padding, gaps and layout (never for block margins on a claimed tag).

  • --slate-space-10.25rem
  • --slate-space-20.5rem
  • --slate-space-30.75rem
  • --slate-space-41rem
  • --slate-space-51.5rem
  • --slate-space-62rem
  • --slate-space-73rem
  • --slate-space-84rem
  • --slate-space-96rem
  • --slate-space-108rem

The radii

Swiss corners: 2px to 4px, close to square, 4px being the whole range.

  • --slate-radius-sm2px
  • --slate-radius3px
  • --slate-radius-lg4px

The other invariants

Declared beside them, drawn by nothing because they are lengths and rates rather than shapes:

  • --slate-page-max72rem
  • --slate-gutterclamp(1.25rem, 4vw, 2rem)
  • --slate-bar-height3.5rem
  • --slate-border-width1px
  • --slate-border-width-thick2px
  • --slate-easecubic-bezier(0.2, 0, 0, 1)
  • --slate-duration-1120ms
  • --slate-duration-2180ms
  • --slate-duration-3280ms
  • --slate-z-base1
  • --slate-z-bar50
  • --slate-z-top100