Skip to content
Pixelbits
Docs / Tokens

Tokens

Every value is a CSS variable (--pb-*) with a dark and a light theme, and every color is written in oklch(), and a Tailwind v4 utility (bg-pb-surface, rounded-pb-md, text-pb-h2…). All text and accent colors pass WCAG AA; a test checks it.

Colors

bgoklch(0.16 0.004 286)oklch(0.967 0.007 89)
surfaceoklch(0.193 0.006 286)oklch(0.985 0.004 91)
raisedoklch(0.224 0.008 286)oklch(1 0 0)
overlayoklch(0.254 0.009 286)oklch(1 0 0)
borderoklch(0.271 0.009 286)oklch(0.905 0.015 85)
border-strongoklch(0.351 0.012 286)oklch(0.828 0.021 85)
textoklch(0.953 0.01 87)oklch(0.195 0.002 107)
mutedoklch(0.654 0.013 85)oklch(0.483 0.014 85)
faintoklch(0.46 0.01 90)oklch(0.713 0.018 88)
successoklch(0.78 0.09 165)oklch(0.47 0.08 165)
warningoklch(0.82 0.1 75)oklch(0.5 0.09 70)
dangeroklch(0.72 0.12 18)oklch(0.5 0.14 15)
infooklch(0.76 0.075 245)oklch(0.47 0.1 250)
scrimoklch(0.12 0.004 286 / 0.7)oklch(0.3 0.02 80 / 0.32)

Accents

goldoklch(0.75 0.12 85)oklch(0.5 0.097 79)
platinumoklch(0.82 0.015 250)oklch(0.45 0.015 250)
emeraldoklch(0.76 0.1 162)oklch(0.47 0.09 163)
sapphireoklch(0.74 0.09 255)oklch(0.46 0.13 262)
rubyoklch(0.72 0.12 12)oklch(0.49 0.15 15)
amethystoklch(0.74 0.1 305)oklch(0.48 0.13 305)

Type

displayPixels, crafted
h1Pixels, crafted
h2Pixels, crafted
h3Pixels, crafted
h4Pixels, crafted
body-lgPixels, crafted
bodyPixels, crafted
smallPixels, crafted
captionPixels, crafted
labelPixels, crafted

Fonts: "Geist" and "Geist Mono".

Radius

xs · 2px
sm · 4px
md · 6px
lg · 10px
xl · 16px

Motion

  • duration-pb-instant · 80ms
  • duration-pb-fast · 120ms
  • duration-pb-base · 200ms
  • duration-pb-slow · 320ms
  • duration-pb-pixel · 400ms
  • duration-pb-page · 640ms
  • ease-pb-out · cubic-bezier(0.22, 1, 0.36, 1)
  • ease-pb-in-out · cubic-bezier(0.65, 0, 0.35, 1)