--- url: https://brand.okrado.com/tokens/browser/ title: Token browser description: Every token family with its CSS variable and value, generated from @okrado/brand. kind: reference owner: Ghassen-Hizem updated: 2026-11-03 review_by: 2027-02-28 audience: - designer - developer - agent --- # Token browser > Every token family with its CSS variable and value, generated from @okrado/brand. Use a token by its CSS variable. The colour roles are on [Colour](https://brand.okrado.com/foundations/colour/); this page lists the rest of the families. Renaming or removing a token is a breaking change: it is deprecated for one minor release first. ## Spacing | Token | CSS variable | Value | | ------------------- | ------------------------- | -------------------------------- | | `ui.space.0` | `--okr-ui-space-0` | `0px` | | `ui.space.1` | `--okr-ui-space-1` | `4px` | | `ui.space.2` | `--okr-ui-space-2` | `8px` | | `ui.space.3` | `--okr-ui-space-3` | `12px` | | `ui.space.4` | `--okr-ui-space-4` | `16px` | | `ui.space.5` | `--okr-ui-space-5` | `20px` | | `ui.space.6` | `--okr-ui-space-6` | `24px` | | `ui.space.8` | `--okr-ui-space-8` | `32px` | | `ui.space.10` | `--okr-ui-space-10` | `40px` | | `ui.space.12` | `--okr-ui-space-12` | `48px` | | `ui.space.16` | `--okr-ui-space-16` | `64px` | | `ui.space.20` | `--okr-ui-space-20` | `80px` | | `ui.space.24` | `--okr-ui-space-24` | `96px` | | `ui.space.32` | `--okr-ui-space-32` | `128px` | | `ui.space.42` | `--okr-ui-space-42` | `168px` | | `ui.space.0-5` | `--okr-ui-space-0-5` | `2px` | | `ui.space.section` | `--okr-ui-space-section` | `clamp(96px, 5rem + 5vw, 168px)` | | `ui.space.hero-top` | `--okr-ui-space-hero-top` | `clamp(40px, 2rem + 4vw, 104px)` | ## Radius | Token | CSS variable | Value | | ---------------- | ---------------------- | -------- | | `ui.radius.xs` | `--okr-ui-radius-xs` | `4px` | | `ui.radius.sm` | `--okr-ui-radius-sm` | `6px` | | `ui.radius.md` | `--okr-ui-radius-md` | `8px` | | `ui.radius.lg` | `--okr-ui-radius-lg` | `10px` | | `ui.radius.xl` | `--okr-ui-radius-xl` | `14px` | | `ui.radius.2xl` | `--okr-ui-radius-2xl` | `16px` | | `ui.radius.full` | `--okr-ui-radius-full` | `9999px` | ## Type sizes | Token | CSS variable | Value | | ------------------ | ------------------------ | ------ | | `ui.font.size.xs` | `--okr-ui-font-size-xs` | `12px` | | `ui.font.size.sm` | `--okr-ui-font-size-sm` | `13px` | | `ui.font.size.md` | `--okr-ui-font-size-md` | `14px` | | `ui.font.size.lg` | `--okr-ui-font-size-lg` | `16px` | | `ui.font.size.xl` | `--okr-ui-font-size-xl` | `20px` | | `ui.font.size.2xl` | `--okr-ui-font-size-2xl` | `24px` | | `ui.font.size.3xl` | `--okr-ui-font-size-3xl` | `32px` | ## Layout | Token | CSS variable | Value | | ------------------------------ | ------------------------------------ | -------------------------- | | `ui.layout.content-max` | `--okr-ui-layout-content-max` | `1280px` | | `ui.layout.gutter` | `--okr-ui-layout-gutter` | `24px` | | `ui.layout.columns` | `--okr-ui-layout-columns` | `12` | | `ui.layout.margin` | `--okr-ui-layout-margin` | `clamp(20px, 4.2vw, 80px)` | | `ui.layout.header` | `--okr-ui-layout-header` | `68px` | | `ui.layout.sidebar` | `--okr-ui-layout-sidebar` | `216px` | | `ui.layout.inspector` | `--okr-ui-layout-inspector` | `340px` | | `ui.layout.topbar` | `--okr-ui-layout-topbar` | `48px` | | `ui.layout.icon-rail` | `--okr-ui-layout-icon-rail` | `48px` | | `ui.layout.sidebar-min` | `--okr-ui-layout-sidebar-min` | `200px` | | `ui.layout.sidebar-max` | `--okr-ui-layout-sidebar-max` | `320px` | | `ui.layout.form-max` | `--okr-ui-layout-form-max` | `640px` | | `ui.layout.dashboard-max` | `--okr-ui-layout-dashboard-max` | `1440px` | | `ui.layout.page-inline-sm` | `--okr-ui-layout-page-inline-sm` | `16px` | | `ui.layout.page-inline` | `--okr-ui-layout-page-inline` | `24px` | | `ui.layout.page-top` | `--okr-ui-layout-page-top` | `24px` | | `ui.layout.section-gap` | `--okr-ui-layout-section-gap` | `32px` | | `ui.layout.reading-max` | `--okr-ui-layout-reading-max` | `68ch` | | `ui.layout.header-toolbar-gap` | `--okr-ui-layout-header-toolbar-gap` | `12px` | | `ui.layout.dialog-sm` | `--okr-ui-layout-dialog-sm` | `440px` | | `ui.layout.dialog-md` | `--okr-ui-layout-dialog-md` | `560px` | | `ui.layout.dialog-lg` | `--okr-ui-layout-dialog-lg` | `720px` | | `ui.layout.drawer-sm` | `--okr-ui-layout-drawer-sm` | `340px` | | `ui.layout.drawer-md` | `--okr-ui-layout-drawer-md` | `480px` | | `ui.layout.drawer-lg` | `--okr-ui-layout-drawer-lg` | `640px` | | `ui.layout.sheet-snap-half` | `--okr-ui-layout-sheet-snap-half` | `0.5` | | `ui.layout.sheet-snap-full` | `--okr-ui-layout-sheet-snap-full` | `0.9` | ## Layers | Token | CSS variable | Value | | -------------- | -------------------- | ----- | | `ui.z.sticky` | `--okr-ui-z-sticky` | `10` | | `ui.z.sheet` | `--okr-ui-z-sheet` | `40` | | `ui.z.dialog` | `--okr-ui-z-dialog` | `50` | | `ui.z.popover` | `--okr-ui-z-popover` | `60` | | `ui.z.toast` | `--okr-ui-z-toast` | `70` | | `ui.z.tooltip` | `--okr-ui-z-tooltip` | `80` | | `ui.z.skip` | `--okr-ui-z-skip` | `90` | ## Motion | Token | CSS variable | Value | | ---------------------------------- | ---------------------------------------- | -------- | | `ui.motion.duration.instant` | `--okr-ui-motion-duration-instant` | `0ms` | | `ui.motion.duration.micro` | `--okr-ui-motion-duration-micro` | `120ms` | | `ui.motion.duration.standard` | `--okr-ui-motion-duration-standard` | `200ms` | | `ui.motion.duration.panel` | `--okr-ui-motion-duration-panel` | `320ms` | | `ui.motion.duration.write` | `--okr-ui-motion-duration-write` | `500ms` | | `ui.motion.duration.loop` | `--okr-ui-motion-duration-loop` | `1600ms` | | `ui.motion.duration.fast` | `--okr-ui-motion-duration-fast` | `120ms` | | `ui.motion.duration.base` | `--okr-ui-motion-duration-base` | `200ms` | | `ui.motion.duration.slow` | `--okr-ui-motion-duration-slow` | `320ms` | | `ui.motion.duration.micro-exit` | `--okr-ui-motion-duration-micro-exit` | `96ms` | | `ui.motion.duration.standard-exit` | `--okr-ui-motion-duration-standard-exit` | `160ms` | | `ui.motion.duration.panel-exit` | `--okr-ui-motion-duration-panel-exit` | `256ms` | | Token | CSS variable | Value | | ------------------------- | ------------------------------- | --------------------------------- | | `ui.motion.ease.standard` | `--okr-ui-motion-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | | `ui.motion.ease.enter` | `--okr-ui-motion-ease-enter` | `cubic-bezier(0.16, 1, 0.3, 1)` | | `ui.motion.ease.exit` | `--okr-ui-motion-ease-exit` | `cubic-bezier(0.3, 0, 0.8, 0.15)` | | `ui.motion.ease.linear` | `--okr-ui-motion-ease-linear` | `cubic-bezier(0, 0, 1, 1)` | | `ui.motion.ease.panel` | `--okr-ui-motion-ease-panel` | `cubic-bezier(0.32, 0.72, 0, 1)` | ## Elevation | Token | Paper | Night | | -------------- | ------------------------------------------------------------------------------ | ------------------------------------- | | `ui.shadow.e1` | `0px 1px 0px 0px rgba(13,16,21,0.04), 0px 12px 32px -12px rgba(13,16,21,0.14)` | `0px 0px 0px 0px rgba(0,0,0,0)` | | `ui.shadow.e2` | `0px 4px 12px 0px rgba(13,16,21,0.08), 0px 1px 3px 0px rgba(13,16,21,0.06)` | `0px 24px 48px -16px rgba(0,0,0,0.6)` | | `ui.shadow.e3` | `0px 12px 32px 0px rgba(13,16,21,0.12), 0px 2px 6px 0px rgba(13,16,21,0.06)` | `0px 24px 48px -16px rgba(0,0,0,0.6)` |