Token reference
Every token, its CSS custom property and its value. The same data ships as @jsonresume/ui/tokens.json for tools that aren't React.
In TypeScript, import vars from @jsonresume/ui/tokens: vars.color.text.default is var(--jr-color-text-default).
| Token | CSS variable | Value | Dark |
|---|---|---|---|
| color.surface.page | --jr-color-surface-page | #ffffff | #121212 |
| color.surface.subtle | --jr-color-surface-subtle | #f9f9f9 | #1c1c1c |
| color.surface.muted | --jr-color-surface-muted | #f2f2f2 | #242424 |
| color.surface.brand | --jr-color-surface-brand | #fff18f | |
| color.surface.brandSubtle | --jr-color-surface-brand-subtle | #fffdf0 | #26230f |
| color.surface.raised | --jr-color-surface-raised | #ffffff | #1c1c1c |
| color.surface.inverse | --jr-color-surface-inverse | #1a1a1a | #ffffff |
| color.text.default | --jr-color-text-default | #222222 | #ededed |
| color.text.strong | --jr-color-text-strong | #1a1a1a | #ffffff |
| color.text.muted | --jr-color-text-muted | #6b6b6b | #a3a3a3 |
| color.text.inverse | --jr-color-text-inverse | #ffffff | #1a1a1a |
| color.text.onBrand | --jr-color-text-on-brand | #1a1a1a | |
| color.text.link | --jr-color-text-link | #a92525 | #ff7b7b |
| color.text.linkHover | --jr-color-text-link-hover | #8a1d1d | #ffa3a3 |
| color.border.default | --jr-color-border-default | #dddddd | #333333 |
| color.border.subtle | --jr-color-border-subtle | #eeeeee | #2a2a2a |
| color.border.strong | --jr-color-border-strong | #cccccc | #555555 |
| color.action.primary | --jr-color-action-primary | #d23a3a | |
| color.action.primaryHover | --jr-color-action-primary-hover | #ce2424 | |
| color.action.primaryText | --jr-color-action-primary-text | #ffffff | |
| color.action.ink | --jr-color-action-ink | #1a1a1a | #ffffff |
| color.action.inkHover | --jr-color-action-ink-hover | #333333 | #dddddd |
| color.action.inkText | --jr-color-action-ink-text | #ffffff | #1a1a1a |
| color.action.neutral | --jr-color-action-neutral | #ffffff | #1c1c1c |
| color.action.neutralHover | --jr-color-action-neutral-hover | #f9f9f9 | #242424 |
| color.action.neutralText | --jr-color-action-neutral-text | #555555 | #d4d4d4 |
| color.action.neutralBorder | --jr-color-action-neutral-border | #dddddd | #333333 |
| color.action.neutralBorderHover | --jr-color-action-neutral-border-hover | #999999 | |
| color.status.info | --jr-color-status-info | #1f4f9e | #8db6ff |
| color.status.infoSurface | --jr-color-status-info-surface | #eff5ff | #14213a |
| color.status.success | --jr-color-status-success | #1f6b3e | #6fd39a |
| color.status.successSurface | --jr-color-status-success-surface | #effaf3 | #12291c |
| color.status.warning | --jr-color-status-warning | #8a5200 | #ffc966 |
| color.status.warningSurface | --jr-color-status-warning-surface | #fff8eb | #2e2211 |
| color.status.danger | --jr-color-status-danger | #a92525 | #ff7b7b |
| color.status.dangerSurface | --jr-color-status-danger-surface | #fdf3f3 | #2e1515 |
| color.focus | --jr-color-focus | #1a1a1a | #fff18f |
| color.overlay | --jr-color-overlay | rgba(17, 17, 17, 0.45) | rgba(0, 0, 0, 0.6) |
| font.family.sans | --jr-font-family-sans | 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
| font.family.wordmark | --jr-font-family-wordmark | 'Ubuntu', 'Open Sans', system-ui, sans-serif | |
| font.family.mono | --jr-font-family-mono | ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace | |
| font.weight.light | --jr-font-weight-light | 300 | |
| font.weight.regular | --jr-font-weight-regular | 400 | |
| font.weight.semibold | --jr-font-weight-semibold | 600 | |
| font.weight.bold | --jr-font-weight-bold | 700 | |
| font.size.2xs | --jr-font-size-2xs | 0.6875rem | |
| font.size.xs | --jr-font-size-xs | 0.75rem | |
| font.size.sm | --jr-font-size-sm | 0.875rem | |
| font.size.md | --jr-font-size-md | 1rem | |
| font.size.lg | --jr-font-size-lg | 1.125rem | |
| font.size.xl | --jr-font-size-xl | 1.375rem | |
| font.size.2xl | --jr-font-size-2xl | 1.75rem | |
| font.size.3xl | --jr-font-size-3xl | 2.5rem | |
| font.size.4xl | --jr-font-size-4xl | 3.25rem | |
| font.lineHeight.tight | --jr-font-line-height-tight | 1.15 | |
| font.lineHeight.snug | --jr-font-line-height-snug | 1.35 | |
| font.lineHeight.normal | --jr-font-line-height-normal | 1.6 | |
| font.tracking.normal | --jr-font-tracking-normal | 0 | |
| font.tracking.caps | --jr-font-tracking-caps | 0.09em | |
| space.0 | --jr-space-0 | 0 | |
| space.1 | --jr-space-1 | 0.25rem | |
| space.2 | --jr-space-2 | 0.5rem | |
| space.3 | --jr-space-3 | 0.75rem | |
| space.4 | --jr-space-4 | 1rem | |
| space.5 | --jr-space-5 | 1.25rem | |
| space.6 | --jr-space-6 | 1.5rem | |
| space.8 | --jr-space-8 | 2rem | |
| space.10 | --jr-space-10 | 2.5rem | |
| space.12 | --jr-space-12 | 3rem | |
| space.16 | --jr-space-16 | 4rem | |
| space.20 | --jr-space-20 | 5rem | |
| space.30 | --jr-space-30 | 7.5rem | |
| space.px | --jr-space-px | 1px | |
| radius.none | --jr-radius-none | 0 | |
| radius.sm | --jr-radius-sm | 2px | |
| radius.md | --jr-radius-md | 3px | |
| radius.lg | --jr-radius-lg | 6px | |
| radius.full | --jr-radius-full | 9999px | |
| shadow.none | --jr-shadow-none | none | |
| shadow.sm | --jr-shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.06) | |
| shadow.md | --jr-shadow-md | 0 4px 12px rgba(0, 0, 0, 0.08) | |
| shadow.lg | --jr-shadow-lg | 0 12px 32px rgba(0, 0, 0, 0.14) | |
| motion.duration.instant | --jr-motion-duration-instant | 0ms | |
| motion.duration.fast | --jr-motion-duration-fast | 100ms | |
| motion.duration.base | --jr-motion-duration-base | 250ms | |
| motion.duration.slow | --jr-motion-duration-slow | 400ms | |
| motion.easing.standard | --jr-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) | |
| motion.easing.out | --jr-motion-easing-out | cubic-bezier(0, 0, 0.2, 1) | |
| layout.container | --jr-layout-container | 970px | |
| layout.wide | --jr-layout-wide | 1200px | |
| layout.prose | --jr-layout-prose | 72ch | |
| layout.gutter | --jr-layout-gutter | 30px | |
| layout.gutterNarrow | --jr-layout-gutter-narrow | 16px | |
| zIndex.dropdown | --jr-z-index-dropdown | 1000 | |
| zIndex.sticky | --jr-z-index-sticky | 1100 | |
| zIndex.overlay | --jr-z-index-overlay | 1300 | |
| zIndex.modal | --jr-z-index-modal | 1400 | |
| zIndex.toast | --jr-z-index-toast | 1500 | |
| zIndex.tooltip | --jr-z-index-tooltip | 1600 |