Tokens

This page renders the actual kernic export kernic-io -f json output. It's the same file a Figma or Style Dictionary pipeline reads. Change the system and this page changes.

Color ramps

--color-primary-*

--color-accent-*

--color-neutral-*

--color-semantic-*

--color-gradient-primary-*

--color-gradient-mesh-*

--color-gradient-text-*

Semantic tokens

Token	Light	Dark
`--background`	`var(--color-neutral-50)`	`var(--color-neutral-950)`
`--surface`	`var(--color-neutral-100)`	`var(--color-neutral-900)`
`--text`	`var(--color-neutral-950)`	`var(--color-neutral-50)`
`--muted-text`	`var(--color-neutral-600)`	`var(--color-neutral-400)`
`--border`	`var(--color-neutral-200)`	`var(--color-neutral-800)`
`--ring`	`var(--color-primary-500)`	`var(--color-primary-500)`

Typography

Type sizes use a 1.25 ratio scale:

--text-xsAa0.800rem

--text-smAa0.894rem

--text-baseAa1.000rem

--text-lgAa1.250rem

--text-xlAa1.563rem

--text-2xlAa1.953rem

--text-3xlAa3.052rem

--text-4xlAa4.768rem

--text-5xlAa7.451rem

Families

--font-heading: Inter
--font-body: Inter
--font-mono: IBM Plex Mono

Radius

0.25rem

0.375rem

0.5rem

0.75rem

Gradients

--gradient-primary

--gradient-mesh

--gradient-text