Tokens

Reference

DTCG token source compiles to CSS variables, a typed export, and a contrast report.

Contrast

Context	Pairs in use	Lowest	Where
`light`	44	3.46	control edge on a hovered ground
`dark`	44	3.01	tile hover border
`light-deep`	11	3.72	tile hover border
`dark-deep`	11	3.49	control edge on the page
`light-deep-panel`	34	3.46	control edge on a hovered ground
`dark-deep-panel`	34	3.5	control edge on a hovered ground
`light-tone`	7	3.09	control edge on the page
`dark-tone`	7	3.12	tile hover border
`light-beni`	13	5.41	descriptions, the hero intro, the footer
`dark-beni`	13	6.3	descriptions, the hero intro, the footer

color

Token	Variable	Value
`color.paper.0`	`--kb-color-paper-0`	`"#ffffff"`
`color.paper.100`	`--kb-color-paper-100`	`"#fbf8f3"`
`color.paper.200`	`--kb-color-paper-200`	`"#f3ede4"`
`color.paper.300`	`--kb-color-paper-300`	`"#f1eae2"`
`color.paper.400`	`--kb-color-paper-400`	`"#e7dfd3"`
`color.paper.500`	`--kb-color-paper-500`	`"#ddd3c4"`
`color.paper.600`	`--kb-color-paper-600`	`"#d9d0c6"`
`color.paper.700`	`--kb-color-paper-700`	`"#d9cfc0"`
`color.paper.800`	`--kb-color-paper-800`	`"#d5cdc2"`
`color.paper.900`	`--kb-color-paper-900`	`"#c1b6aa"`
`color.kurobeni.425`	`--kb-color-kurobeni-425`	`"#65515b"`
`color.kurobeni.450`	`--kb-color-kurobeni-450`	`"#58444e"`
`color.kurobeni.475`	`--kb-color-kurobeni-475`	`"#54404a"`
`color.kurobeni.500`	`--kb-color-kurobeni-500`	`"#4b3841"`
`color.kurobeni.525`	`--kb-color-kurobeni-525`	`"#4a3a44"`
`color.kurobeni.550`	`--kb-color-kurobeni-550`	`"#463239"`
`color.kurobeni.575`	`--kb-color-kurobeni-575`	`"#412b34"`
`color.kurobeni.600`	`--kb-color-kurobeni-600`	`"#3f2d36"`
`color.kurobeni.625`	`--kb-color-kurobeni-625`	`"#3c2e36"`
`color.kurobeni.650`	`--kb-color-kurobeni-650`	`"#3a2e35"`
`color.kurobeni.675`	`--kb-color-kurobeni-675`	`"#3a2830"`
`color.kurobeni.700`	`--kb-color-kurobeni-700`	`"#362a33"`
`color.kurobeni.750`	`--kb-color-kurobeni-750`	`"#2d2128"`
`color.kurobeni.775`	`--kb-color-kurobeni-775`	`"#2c2228"`
`color.kurobeni.800`	`--kb-color-kurobeni-800`	`"#2b1b21"`
`color.kurobeni.825`	`--kb-color-kurobeni-825`	`"#2a1f25"`
`color.kurobeni.850`	`--kb-color-kurobeni-850`	`"#221a1e"`
`color.kurobeni.875`	`--kb-color-kurobeni-875`	`"#1f1720"`
`color.kurobeni.900`	`--kb-color-kurobeni-900`	`"#1e161a"`
`color.kurobeni.925`	`--kb-color-kurobeni-925`	`"#160f13"`
`color.kurobeni.950`	`--kb-color-kurobeni-950`	`"#130d10"`
`color.grey.250`	`--kb-color-grey-250`	`"#3a2f35"`
`color.grey.300`	`--kb-color-grey-300`	`"#c6b9be"`
`color.grey.350`	`--kb-color-grey-350`	`"#b8adb0"`
`color.grey.400`	`--kb-color-grey-400`	`"#ab9ea3"`
`color.grey.450`	`--kb-color-grey-450`	`"#9c9195"`
`color.grey.500`	`--kb-color-grey-500`	`"#948890"`
`color.grey.550`	`--kb-color-grey-550`	`"#8f8288"`
`color.grey.575`	`--kb-color-grey-575`	`"#7f7378"`
`color.grey.600`	`--kb-color-grey-600`	`"#7d7378"`
`color.grey.650`	`--kb-color-grey-650`	`"#68606a"`
`color.grey.700`	`--kb-color-grey-700`	`"#5a5156"`
`color.beni.50`	`--kb-color-beni-50`	`"#ffe4e6"`
`color.beni.200`	`--kb-color-beni-200`	`"#d9868b"`
`color.beni.350`	`--kb-color-beni-350`	`"#f07e85"`
`color.beni.400`	`--kb-color-beni-400`	`"#e8646c"`
`color.beni.450`	`--kb-color-beni-450`	`"#dc525a"`
`color.beni.600`	`--kb-color-beni-600`	`"#b3262d"`
`color.beni.650`	`--kb-color-beni-650`	`"#a1222a"`
`color.beni.700`	`--kb-color-beni-700`	`"#951f26"`
`color.beni.750`	`--kb-color-beni-750`	`"#9c2027"`
`color.beni.775`	`--kb-color-beni-775`	`"#8c1d24"`
`color.beni.800`	`--kb-color-beni-800`	`"#7a191e"`
`color.beni.825`	`--kb-color-beni-825`	`"#861b21"`
`color.beni.850`	`--kb-color-beni-850`	`"#78181f"`
`color.green.300`	`--kb-color-green-300`	`"#86c9a4"`
`color.green.600`	`--kb-color-green-600`	`"#25664a"`
`color.amber.300`	`--kb-color-amber-300`	`"#e2b75f"`
`color.amber.700`	`--kb-color-amber-700`	`"#805307"`
`color.white`	`--kb-color-white`	`"#ffffff"`
`color.scrim`	`--kb-color-scrim`	`"rgba(19, 13, 16, 0.6)"`
`color.dim`	`--kb-color-dim`	`"rgba(127, 127, 127, 0.35)"`
`color.dimPressed`	`--kb-color-dim-pressed`	`"rgba(127, 127, 127, 0.55)"`

brand

Token	Variable	Value
`brand.accent.50`	`--kb-brand-accent-50`	`"{color.beni.50}"`
`brand.accent.200`	`--kb-brand-accent-200`	`"{color.beni.200}"`
`brand.accent.350`	`--kb-brand-accent-350`	`"{color.beni.350}"`
`brand.accent.400`	`--kb-brand-accent-400`	`"{color.beni.400}"`
`brand.accent.450`	`--kb-brand-accent-450`	`"{color.beni.450}"`
`brand.accent.600`	`--kb-brand-accent-600`	`"{color.beni.600}"`
`brand.accent.650`	`--kb-brand-accent-650`	`"{color.beni.650}"`
`brand.accent.700`	`--kb-brand-accent-700`	`"{color.beni.700}"`
`brand.accent.750`	`--kb-brand-accent-750`	`"{color.beni.750}"`
`brand.accent.775`	`--kb-brand-accent-775`	`"{color.beni.775}"`
`brand.accent.800`	`--kb-brand-accent-800`	`"{color.beni.800}"`
`brand.accent.825`	`--kb-brand-accent-825`	`"{color.beni.825}"`
`brand.accent.850`	`--kb-brand-accent-850`	`"{color.beni.850}"`
`brand.fill.475`	`--kb-brand-fill-475`	`"{color.kurobeni.475}"`
`brand.fill.575`	`--kb-brand-fill-575`	`"{color.kurobeni.575}"`
`brand.fill.800`	`--kb-brand-fill-800`	`"{color.kurobeni.800}"`

fg

Token	Variable	Value
`fg.default`	`--kb-fg-default`	`"{color.kurobeni.850}"`
`fg.secondary`	`--kb-fg-secondary`	`"{color.grey.700}"`
`fg.muted`	`--kb-fg-muted`	`"{color.grey.650}"`
`fg.onAccent`	`--kb-fg-on-accent`	`"{color.white}"`
`fg.onFill`	`--kb-fg-on-fill`	`"{color.paper.200}"`
`fg.toast`	`--kb-fg-toast`	`"{color.kurobeni.850}"`
`fg.toastOk`	`--kb-fg-toast-ok`	`"{color.green.600}"`
`fg.toastErr`	`--kb-fg-toast-err`	`"{color.beni.600}"`

bg

Token	Variable	Value
`bg.page`	`--kb-bg-page`	`"{color.paper.200}"`
`bg.surface`	`--kb-bg-surface`	`"{color.paper.100}"`
`bg.raised`	`--kb-bg-raised`	`"{color.paper.400}"`
`bg.pressed`	`--kb-bg-pressed`	`"{color.paper.700}"`
`bg.tile`	`--kb-bg-tile`	`"{color.paper.0}"`
`bg.toast`	`--kb-bg-toast`	`"{color.paper.100}"`
`bg.scrim`	`--kb-bg-scrim`	`"{color.scrim}"`
`bg.dim`	`--kb-bg-dim`	`"{color.dim}"`
`bg.dimPressed`	`--kb-bg-dim-pressed`	`"{color.dimPressed}"`

border

Token	Variable	Value
`border.control`	`--kb-border-control`	`"{color.grey.600}"`
`border.strong`	`--kb-border-strong`	`"{color.kurobeni.850}"`
`border.hairline`	`--kb-border-hairline`	`"{color.paper.800}"`
`border.toast`	`--kb-border-toast`	`"{color.grey.600}"`

accent

Token	Variable	Value
`accent.default`	`--kb-accent-default`	`"{brand.accent.600}"`
`accent.hover`	`--kb-accent-hover`	`"{brand.accent.700}"`
`accent.active`	`--kb-accent-active`	`"{brand.accent.800}"`

fill

Token	Variable	Value
`fill.default`	`--kb-fill-default`	`"{brand.fill.800}"`
`fill.hover`	`--kb-fill-hover`	`"{brand.fill.575}"`
`fill.active`	`--kb-fill-active`	`"{brand.fill.475}"`

status

Token	Variable	Value
`status.ok`	`--kb-status-ok`	`"{color.green.600}"`
`status.warn`	`--kb-status-warn`	`"{color.amber.700}"`
`status.err`	`--kb-status-err`	`"{brand.accent.600}"`

focus

Token	Variable	Value
`focus.color`	`--kb-focus-color`	`"{brand.accent.600}"`
`focus.width`	`--kb-focus-width`	`"2px"`
`focus.offset`	`--kb-focus-offset`	`"2px"`

shadow

Token	Variable	Value
`shadow.raised`	`--kb-shadow-raised`	`"0 16px 48px rgba(34, 26, 30, 0.18)"`
`shadow.bar`	`--kb-shadow-bar`	`"0 8px 32px rgba(34, 26, 30, 0.16)"`

font

Token	Variable	Value
`font.family.sans`	`--kb-font-family-sans`	`"\"IBM Plex Sans\", \"IBM Plex Sans JP\", system-ui, sans-serif"`
`font.family.mono`	`--kb-font-family-mono`	`"\"IBM Plex Mono\", Consolas, monospace"`
`font.weight.regular`	`--kb-font-weight-regular`	`400`
`font.weight.medium`	`--kb-font-weight-medium`	`500`
`font.weight.semibold`	`--kb-font-weight-semibold`	`600`

type

Token	Variable	Value
`type.12.size`	`--kb-type-12-size`	`"0.75rem"`
`type.12.leading`	`--kb-type-12-leading`	`1.5`
`type.12.tracking`	`--kb-type-12-tracking`	`"0"`
`type.14.size`	`--kb-type-14-size`	`"0.875rem"`
`type.14.leading`	`--kb-type-14-leading`	`1.5`
`type.14.tracking`	`--kb-type-14-tracking`	`"0"`
`type.16.size`	`--kb-type-16-size`	`"1rem"`
`type.16.leading`	`--kb-type-16-leading`	`1.55`
`type.16.tracking`	`--kb-type-16-tracking`	`"0"`
`type.18.size`	`--kb-type-18-size`	`"1.125rem"`
`type.18.leading`	`--kb-type-18-leading`	`1.5`
`type.18.tracking`	`--kb-type-18-tracking`	`"0"`
`type.20.size`	`--kb-type-20-size`	`"1.25rem"`
`type.20.leading`	`--kb-type-20-leading`	`1.4`
`type.20.tracking`	`--kb-type-20-tracking`	`"0"`
`type.24.size`	`--kb-type-24-size`	`"1.5rem"`
`type.24.leading`	`--kb-type-24-leading`	`1.25`
`type.24.tracking`	`--kb-type-24-tracking`	`"-0.01em"`
`type.32.size`	`--kb-type-32-size`	`"2rem"`
`type.32.leading`	`--kb-type-32-leading`	`1.15`
`type.32.tracking`	`--kb-type-32-tracking`	`"-0.015em"`
`type.40.size`	`--kb-type-40-size`	`"2.5rem"`
`type.40.leading`	`--kb-type-40-leading`	`1.1`
`type.40.tracking`	`--kb-type-40-tracking`	`"-0.02em"`
`type.72.size`	`--kb-type-72-size`	`"4.5rem"`
`type.72.leading`	`--kb-type-72-leading`	`1`
`type.72.tracking`	`--kb-type-72-tracking`	`"-0.025em"`

space

Token	Variable	Value
`space.4`	`--kb-space-4`	`"4px"`
`space.8`	`--kb-space-8`	`"8px"`
`space.12`	`--kb-space-12`	`"12px"`
`space.16`	`--kb-space-16`	`"16px"`
`space.24`	`--kb-space-24`	`"24px"`
`space.32`	`--kb-space-32`	`"32px"`
`space.40`	`--kb-space-40`	`"40px"`
`space.48`	`--kb-space-48`	`"48px"`
`space.64`	`--kb-space-64`	`"64px"`
`space.96`	`--kb-space-96`	`"96px"`
`space.128`	`--kb-space-128`	`"128px"`
`space.160`	`--kb-space-160`	`"160px"`

radius

Token	Variable	Value
`radius.block`	`--kb-radius-block`	`"24px"`

borderWidth

Token	Variable	Value
`borderWidth.hairline`	`--kb-border-width-hairline`	`"1px"`

control

Token	Variable	Value
`control.sm`	`--kb-control-sm`	`"32px"`
`control.md`	`--kb-control-md`	`"40px"`
`control.lg`	`--kb-control-lg`	`"48px"`

layout

Token	Variable	Value
`layout.col`	`--kb-layout-col`	`"1200px"`
`layout.gutter`	`--kb-layout-gutter`	`"{space.24}"`
`layout.measure`	`--kb-layout-measure`	`"66ch"`

motion

Token	Variable	Value
`motion.duration`	`--kb-motion-duration`	`"120ms"`
`motion.ease`	`--kb-motion-ease`	`"cubic-bezier(0.2, 0, 0, 1)"`

breakpoint

Token	Variable	Value
`breakpoint.xs`	`--kb-breakpoint-xs`	`"375px"`
`breakpoint.sm`	`--kb-breakpoint-sm`	`"480px"`
`breakpoint.smd`	`--kb-breakpoint-smd`	`"520px"`
`breakpoint.md`	`--kb-breakpoint-md`	`"768px"`
`breakpoint.lg`	`--kb-breakpoint-lg`	`"1024px"`
`breakpoint.xl`	`--kb-breakpoint-xl`	`"1280px"`

layer

Token	Variable	Value
`layer.tooltip`	`--kb-layer-tooltip`	`10`
`layer.list`	`--kb-layer-list`	`50`
`layer.bar`	`--kb-layer-bar`	`200`
`layer.toast`	`--kb-layer-toast`	`250`
`layer.skip`	`--kb-layer-skip`	`300`

container

Token	Variable	Value
`container.lg`	`--kb-container-lg`	`"840px"`
`container.md`	`--kb-container-md`	`"700px"`
`container.sm`	`--kb-container-sm`	`"560px"`

code

Token	Variable	Value
`code.keyword`	`--kb-code-keyword`	`"{brand.accent.600}"`
`code.string`	`--kb-code-string`	`"{color.green.600}"`
`code.constant`	`--kb-code-constant`	`"{color.amber.700}"`
`code.function`	`--kb-code-function`	`"{color.kurobeni.850}"`
`code.parameter`	`--kb-code-parameter`	`"{color.grey.700}"`
`code.comment`	`--kb-code-comment`	`"{color.grey.650}"`
`code.punctuation`	`--kb-code-punctuation`	`"{color.grey.700}"`