Skip to content
ikada

Theming and tokens

Every value on this page is read from tokens/tokens.ts at build time. Colours are OKLCH; light is the default and dark is a `dark` class on the html element.

ikada is light unless a dark class is set on <html>, the shadcn and next-themes convention, for the npm theme and the shadcn theme alike.data-theme="dark|light" still works as a deprecated alias for one release. Use the theme switch in the header to compare.

Colours

TokenLightDark
--sb-canvasoklch(0.965 0 0)oklch(0.18 0.014 255)
--sb-surfaceoklch(0.995 0 0)oklch(0.23 0.016 255)
--sb-welloklch(0.962 0 0)oklch(0.2 0.015 255)
--sb-hoveroklch(0.925 0 0)oklch(0.295 0.018 255)
--sb-raisedoklch(1 0 0)oklch(0.34 0.02 255)
--sb-hairlineoklch(0.9 0 0)oklch(0.3 0.018 255)
--sb-hairline-strongoklch(0.82 0 0)oklch(0.4 0.02 255)
--sb-control-edgeoklch(0.6 0 0)oklch(0.62 0.02 255)
--sb-focusoklch(0.22 0 0)oklch(0.95 0.01 255)
--sb-fgoklch(0.22 0 0)oklch(0.95 0.01 255)
--sb-fg-mutedoklch(0.44 0 0)oklch(0.76 0.018 255)
--sb-brandoklch(0.47 0.12 152)oklch(0.72 0.12 152)
--sb-brand-hoveroklch(0.42 0.105 152)oklch(0.77 0.12 152)
--sb-on-brandoklch(0.99 0.005 150)oklch(0.2 0.03 152)
--sb-brand-fgoklch(0.42 0.11 152)oklch(0.82 0.13 152)
--sb-brand-softoklch(0.94 0.05 150)oklch(0.31 0.045 152)
--sb-brand-dotoklch(0.62 0.16 150)oklch(0.74 0.15 152)
--sb-warn-fgoklch(0.43 0.09 70)oklch(0.88 0.1 85)
--sb-warn-softoklch(0.95 0.06 85)oklch(0.35 0.06 80)
--sb-warn-dotoklch(0.63 0.14 72)oklch(0.8 0.14 80)
--sb-dangeroklch(0.48 0.18 25)oklch(0.68 0.14 25)
--sb-danger-hoveroklch(0.43 0.18 25)oklch(0.73 0.13 25)
--sb-on-dangeroklch(1 0 0)oklch(0.18 0.04 25)
--sb-danger-fgoklch(0.46 0.18 25)oklch(0.85 0.1 25)
--sb-danger-softoklch(0.95 0.035 25)oklch(0.34 0.08 25)
--sb-danger-dotoklch(0.58 0.2 25)oklch(0.74 0.16 25)
--sb-info-fgoklch(0.42 0.14 255)oklch(0.84 0.1 255)
--sb-info-softoklch(0.94 0.04 255)oklch(0.33 0.07 255)
--sb-info-dotoklch(0.58 0.15 255)oklch(0.76 0.13 255)
--sb-neutral-fgoklch(0.42 0 0)oklch(0.85 0.012 255)
--sb-neutral-softoklch(0.93 0 0)oklch(0.33 0.012 255)
--sb-neutral-dotoklch(0.55 0 0)oklch(0.72 0.012 255)
--sb-code-bgoklch(0.955 0 0)oklch(0.155 0.012 255)
--sb-diff-addoklch(0.94 0.05 150)oklch(0.27 0.05 152)
--sb-diff-deloklch(0.95 0.04 25)oklch(0.27 0.06 25)
--sb-chart-requestsoklch(0.55 0.15 255)oklch(0.76 0.13 255)
--sb-chart-errorsoklch(0.58 0.2 25)oklch(0.74 0.16 25)
--sb-chart-deployoklch(0.4 0 0)oklch(0.83 0.015 255)
--sb-chart-gridoklch(0.88 0 0)oklch(0.34 0.018 255)
--sb-chart-2xxoklch(0.6 0.16 150)oklch(0.76 0.16 152)
--sb-chart-3xxoklch(0.6 0.12 235)oklch(0.78 0.1 235)
--sb-chart-4xxoklch(0.62 0.135 75)oklch(0.8 0.13 80)
--sb-chart-5xxoklch(0.58 0.2 25)oklch(0.74 0.16 25)
--sb-chart-otheroklch(0.55 0 0)oklch(0.72 0.012 255)
--sb-chart-seriesoklch(0.55 0.12 300)oklch(0.76 0.1 300)
--sb-scrimoklch(0.25 0 260 / 0.34)oklch(0.06 0.012 255 / 0.62)

Type scale

  • xsDeploy robin to production12/16
  • smDeploy robin to production13/20
  • baseDeploy robin to production14/20
  • mdDeploy robin to production15/22
  • lgDeploy robin to production18/26
  • xlDeploy robin to production24/32
  • 2xlDeploy robin to production28/36
  • metricDeploy robin to production28/36

Radius

Layers

Stacking order for everything that floats, lowest first.

Motion tokens have a page of their own: Motion.