Theme tokens¶

Every value the theme renders comes from one of these CSS custom properties. They are the public styling API: set any of them from the stylesheet you point css at, and the whole site follows.

Overriding¶

Your stylesheet loads after the theme's, and the theme's own CSS is wrapped in a @layer ocx cascade layer. Any rule you write is unlayered, and an unlayered rule beats a layered one at any specificity — so you never need !important and never need to out-specify an internal selector.

:root {
  --ocx-color-accent: #2563eb;
  --ocx-radius-lg: 0; /* square corners everywhere */
}

.dark {
  --ocx-color-accent: #60a5fa;
}

Set both blocks. :root and .dark have the same specificity and both match <html>, so a :root-only override wins in dark mode too and pins that token to its light value. Overriding only :root is the single most common way to accidentally break dark mode.

A token whose default is shown as var(--ocx-…) is an alias: it follows whatever that token resolves to, in both colour schemes, so it needs no .dark entry of its own.

Surfaces and borders¶

Token	Light	Dark
`--ocx-color-bg`	`#f6f7f9`	`#0e1116`
`--ocx-color-surface`	`#ffffff`	`#151a22`
`--ocx-color-surface-subtle`	`#eff2f5`	`#1c232d`
`--ocx-color-border`	`#e2e6ec`	`#252d39`
`--ocx-color-overlay`	`rgba(15, 18, 23, 0.55)`	`—`

Foreground¶

Token	Light	Dark
`--ocx-color-fg`	`#1b2129`	`#e7ebf1`
`--ocx-color-fg-muted`	`#4b5665`	`#9aa5b3`
`--ocx-color-fg-subtle`	`#636e7f`	`#606c7c`

Accent¶

Token	Light	Dark
`--ocx-color-accent`	`#ff6047`	`#ff6047`
`--ocx-color-accent-hover`	`#ff8570`	`#ff8570`
`--ocx-color-accent-fg`	`#d11c00`	`#ff6047`
`--ocx-color-accent-tint`	`rgba(255, 96, 71, 0.1)`	`rgba(255, 96, 71, 0.1)`
`--ocx-color-accent-tint-border`	`rgba(255, 96, 71, 0.55)`	`rgba(255, 96, 71, 0.55)`

Status¶

Token	Light	Dark
`--ocx-color-success`	`#0a7652`	`#3edea6`
`--ocx-color-warning`	`#926512`	`#fab833`
`--ocx-color-warning-tint`	`rgba(250, 184, 51, 0.16)`	`rgba(250, 184, 51, 0.1)`
`--ocx-color-keyword`	`#6a55ce`	`#c0b3ff`
`--ocx-color-keyword-tint`	`rgba(111, 91, 208, 0.09)`	`rgba(192, 179, 255, 0.1)`

Code¶

Token	Light	Dark
`--ocx-color-code-bg`	`#f6f8fa`	`#14181f`
`--ocx-color-code-fg`	`#1b2129`	`#c8d0da`
`--ocx-color-code-comment`	`var(--ocx-color-fg-subtle)` (alias)	`—`
`--ocx-color-code-keyword`	`var(--ocx-color-keyword)` (alias)	`—`
`--ocx-color-code-string`	`var(--ocx-color-success)` (alias)	`—`
`--ocx-color-code-number`	`var(--ocx-color-warning)` (alias)	`—`
`--ocx-color-code-function`	`var(--ocx-color-fg)` (alias)	`—`
`--ocx-color-code-variable`	`var(--ocx-color-fg-muted)` (alias)	`—`
`--ocx-color-code-deleted`	`var(--ocx-color-accent-fg)` (alias)	`—`

Monogram¶

Token	Light	Dark
`--ocx-color-monogram-0`	`#c53a24`	`#ff8570`
`--ocx-color-monogram-0-tint`	`rgba(255, 96, 71, 0.1)`	`rgba(255, 96, 71, 0.14)`
`--ocx-color-monogram-1`	`#0a7652`	`#3edea6`
`--ocx-color-monogram-1-tint`	`rgba(14, 159, 110, 0.1)`	`rgba(62, 222, 166, 0.12)`
`--ocx-color-monogram-2`	`#6f5bd0`	`#c0b3ff`
`--ocx-color-monogram-2-tint`	`rgba(111, 91, 208, 0.1)`	`rgba(192, 179, 255, 0.12)`
`--ocx-color-monogram-3`	`#8f610f`	`#fab833`
`--ocx-color-monogram-3-tint`	`rgba(250, 184, 51, 0.16)`	`rgba(250, 184, 51, 0.12)`

Type¶

Token	Value
`--ocx-font-sans`	`'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif`
`--ocx-font-mono`	`'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
`--ocx-text-2xl`	`26px`
`--ocx-text-xl`	`23px`
`--ocx-text-lg`	`18px`
`--ocx-text-md`	`14.5px`
`--ocx-text-base`	`13px`
`--ocx-text-sm`	`12.5px`
`--ocx-text-xs`	`11.5px`
`--ocx-text-2xs`	`10.5px`
`--ocx-font-weight-regular`	`400`
`--ocx-font-weight-medium`	`500`
`--ocx-font-weight-semibold`	`600`
`--ocx-font-weight-bold`	`700`

Shape and space¶

Token	Value
`--ocx-radius-sm`	`4px`
`--ocx-radius-md`	`6px`
`--ocx-radius-lg`	`8px`
`--ocx-radius-full`	`999px`
`--ocx-space-1`	`2px`
`--ocx-space-2`	`4px`
`--ocx-space-3`	`8px`
`--ocx-space-4`	`12px`
`--ocx-space-5`	`16px`
`--ocx-space-6`	`24px`
`--ocx-space-7`	`32px`
`--ocx-space-8`	`40px`
`--ocx-space-9`	`48px`
`--ocx-space-10`	`64px`
`--ocx-space-11`	`80px`
`--ocx-header-height`	`54px`
`--ocx-shadow-overlay`	`0 4px 16px rgb(0 0 0 / 0.12)`
`--ocx-border-width`	`1px`
`--ocx-border-width-emphasis`	`1.5px`
`--ocx-border-width-strong`	`2px`
`--ocx-border-width-marker`	`3px`

Motion¶

Token	Value
`--ocx-duration-fast`	`0.1s`
`--ocx-duration-enter`	`0.12s`
`--ocx-duration-base`	`0.15s`
`--ocx-duration-moderate`	`0.2s`
`--ocx-duration-slow`	`0.3s`
`--ocx-duration-shimmer`	`1.6s`

Stacking¶

Token	Value
`--ocx-z-drawer-backdrop`	`40`
`--ocx-z-drawer`	`44`
`--ocx-z-drawer-close`	`45`
`--ocx-z-popover`	`100`
`--ocx-z-modal`	`101`
`--ocx-z-toast`	`200`
`--ocx-z-skip-link`	`300`