CSS Tokens

CSS Tokens

Applies to 2.13.0 and later Updated 5 August 2026 Generated from the code

The canonical –kenii-* design tokens and their default values.

Generated from code at version 2.13.0. Do not edit by hand; run the reference generator to refresh.

The canonical --kenii-* design tokens. Override them via Settings > Branding or the Custom CSS box (base tokens > brand settings > custom CSS).

Token	Default value
`--kenii-primary`	`#7C3AED`
`--kenii-primary-interactive`	`#6D28D9`
`--kenii-primary-dark`	`#5B21B6`
`--kenii-accent`	`#1A1A1A`
`--kenii-accent-lime`	`#D4E157`
`--kenii-focus-ring`	`var(--kenii-primary)`
`--kenii-text`	`#1A1A1A`
`--kenii-text-secondary`	`#6B6B6B`
`--kenii-neutral-darkest`	`#1A1A1A`
`--kenii-neutral-light`	`#E8E8E4`
`--kenii-neutral-lighter`	`#F3F3F0`
`--kenii-neutral-lightest`	`#FAFAF8`
`--kenii-white`	`#ffffff`
`--kenii-border`	`rgba(26, 26, 26, 0.5)`
`--kenii-border-subtle`	`rgba(26, 26, 26, 0.08)`
`--kenii-text-muted`	`rgba(26, 26, 26, 0.7)`
`--kenii-success`	`#059669`
`--kenii-success-dark`	`#047857`
`--kenii-warning`	`#D97706`
`--kenii-warning-dark`	`#92400E`
`--kenii-error`	`#dc2626`
`--kenii-error-dark`	`#B91C1C`
`--kenii-toggle-bg`	`transparent`
`--kenii-heading-font`	`'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
`--kenii-body-font`	`'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
`--kenii-space-xs`	`8px`
`--kenii-space-sm`	`16px`
`--kenii-space-md`	`24px`
`--kenii-space-lg`	`32px`
`--kenii-space-xl`	`48px`
`--kenii-space-2xl`	`64px`
`--kenii-space-3xl`	`80px`
`--kenii-space-section`	`112px`
`--kenii-space-section-md`	`80px`
`--kenii-container-max`	`1280px`
`--kenii-page-padding`	`64px`
`--kenii-sidebar-width`	`300px`
`--kenii-content-gap`	`80px`
`--kenii-radius`	`6px`
`--kenii-shadow-sm`	`0px 1px 2px rgba(0,0,0,0.05)`
`--kenii-shadow-md`	`0px 4px 12px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.04)`
`--kenii-shadow-lg`	`0px 12px 24px -4px rgba(0,0,0,0.08), 0px 4px 8px -2px rgba(0,0,0,0.04)`
`--kenii-shadow-xxl`	`0px 20px 40px -8px rgba(0,0,0,0.12)`

Example

Override a token in the Custom CSS box (Settings > Branding) to restyle every catalog page at once:

:root {
  --kenii-primary: #0b5cad;
  --kenii-radius: 10px;
}