Ga naar hoofdinhoud

Alle basis-tokens

Op deze pagina vind je een overzicht van alle beschikbare basis-tokens, inclusief de mogelijkheid om deze te kopiëren als JSON of CSS.

Meer informatie over basis-tokens

name type
basis.border-radius.lg dimension
basis.border-radius.md dimension
basis.border-radius.none dimension
basis.border-radius.round dimension
basis.border-radius.sm dimension
basis.border-width.lg dimension
basis.border-width.md dimension
basis.border-width.none dimension
basis.border-width.sm dimension
basis.box-shadow.lg boxShadow
basis.box-shadow.md boxShadow
basis.box-shadow.none boxShadow
basis.box-shadow.sm boxShadow
basis.color.transparent color
basis.focus.background-color color
basis.focus.color color
basis.focus.outline-color color
basis.focus.outline-offset dimension
basis.focus.outline-style dimension
basis.focus.outline-width dimension
basis.form-control.accent-color color
basis.form-control.background-color color
basis.form-control.border-color color
basis.form-control.border-radius dimension
basis.form-control.border-width dimension
basis.form-control.color color
basis.form-control.font-family fontFamily
basis.form-control.font-size dimension
basis.form-control.font-weight fontWeights
basis.form-control.line-height number
basis.form-control.max-inline-size dimension
basis.form-control.padding-block-end dimension
basis.form-control.padding-block-start dimension
basis.form-control.padding-inline-end dimension
basis.form-control.padding-inline-start dimension
basis.heading.color color
basis.heading.font-family fontFamily
basis.heading.font-weight number
basis.page.max-inline-size dimension
basis.pointer-target.min-block-size dimension
basis.pointer-target.min-inline-size dimension
basis.size.2xl dimension
basis.size.2xs dimension
basis.size.3xs dimension
basis.size.4xs dimension
basis.size.5xs dimension
basis.size.lg dimension
basis.size.md dimension
basis.size.sm dimension
basis.size.xl dimension
basis.size.xs dimension
basis.space.none dimension
basis.action.activate.cursor cursor
basis.action.submit.cursor cursor
basis.color.accent-1-inverse.bg-active color
basis.color.accent-1-inverse.bg-default color
basis.color.accent-1-inverse.bg-document color
basis.color.accent-1-inverse.bg-hover color
basis.color.accent-1-inverse.bg-subtle color
basis.color.accent-1-inverse.border-active color
basis.color.accent-1-inverse.border-default color
basis.color.accent-1-inverse.border-hover color
basis.color.accent-1-inverse.border-subtle color
basis.color.accent-1-inverse.color-active color
basis.color.accent-1-inverse.color-default color
basis.color.accent-1-inverse.color-document color
basis.color.accent-1-inverse.color-hover color
basis.color.accent-1-inverse.color-subtle color
basis.color.accent-1.bg-active color
basis.color.accent-1.bg-default color
basis.color.accent-1.bg-document color
basis.color.accent-1.bg-hover color
basis.color.accent-1.bg-subtle color
basis.color.accent-1.border-active color
basis.color.accent-1.border-default color
basis.color.accent-1.border-hover color
basis.color.accent-1.border-subtle color
basis.color.accent-1.color-active color
basis.color.accent-1.color-default color
basis.color.accent-1.color-document color
basis.color.accent-1.color-hover color
basis.color.accent-1.color-subtle color
basis.color.accent-2-inverse.bg-active color
basis.color.accent-2-inverse.bg-default color
basis.color.accent-2-inverse.bg-document color
basis.color.accent-2-inverse.bg-hover color
basis.color.accent-2-inverse.bg-subtle color
basis.color.accent-2-inverse.border-active color
basis.color.accent-2-inverse.border-default color
basis.color.accent-2-inverse.border-hover color
basis.color.accent-2-inverse.border-subtle color
basis.color.accent-2-inverse.color-active color
basis.color.accent-2-inverse.color-default color
basis.color.accent-2-inverse.color-document color
basis.color.accent-2-inverse.color-hover color
basis.color.accent-2-inverse.color-subtle color
basis.color.accent-2.bg-active color
basis.color.accent-2.bg-default color
basis.color.accent-2.bg-document color
basis.color.accent-2.bg-hover color
basis.color.accent-2.bg-subtle color
basis.color.accent-2.border-active color
basis.color.accent-2.border-default color
basis.color.accent-2.border-hover color
basis.color.accent-2.border-subtle color
basis.color.accent-2.color-active color
basis.color.accent-2.color-default color
basis.color.accent-2.color-document color
basis.color.accent-2.color-hover color
basis.color.accent-2.color-subtle color
basis.color.accent-3-inverse.bg-active color
basis.color.accent-3-inverse.bg-default color
basis.color.accent-3-inverse.bg-document color
basis.color.accent-3-inverse.bg-hover color
basis.color.accent-3-inverse.bg-subtle color
basis.color.accent-3-inverse.border-active color
basis.color.accent-3-inverse.border-default color
basis.color.accent-3-inverse.border-hover color
basis.color.accent-3-inverse.border-subtle color
basis.color.accent-3-inverse.color-active color
basis.color.accent-3-inverse.color-default color
basis.color.accent-3-inverse.color-document color
basis.color.accent-3-inverse.color-hover color
basis.color.accent-3-inverse.color-subtle color
basis.color.accent-3.bg-active color
basis.color.accent-3.bg-default color
basis.color.accent-3.bg-document color
basis.color.accent-3.bg-hover color
basis.color.accent-3.bg-subtle color
basis.color.accent-3.border-active color
basis.color.accent-3.border-default color
basis.color.accent-3.border-hover color
basis.color.accent-3.border-subtle color
basis.color.accent-3.color-active color
basis.color.accent-3.color-default color
basis.color.accent-3.color-document color
basis.color.accent-3.color-hover color
basis.color.accent-3.color-subtle color
basis.color.action-1-inverse.bg-active color
basis.color.action-1-inverse.bg-default color
basis.color.action-1-inverse.bg-document color
basis.color.action-1-inverse.bg-hover color
basis.color.action-1-inverse.bg-subtle color
basis.color.action-1-inverse.border-active color
basis.color.action-1-inverse.border-default color
basis.color.action-1-inverse.border-hover color
basis.color.action-1-inverse.border-subtle color
basis.color.action-1-inverse.color-active color
basis.color.action-1-inverse.color-default color
basis.color.action-1-inverse.color-document color
basis.color.action-1-inverse.color-hover color
basis.color.action-1-inverse.color-subtle color
basis.color.action-1.bg-active color
basis.color.action-1.bg-default color
basis.color.action-1.bg-document color
basis.color.action-1.bg-hover color
basis.color.action-1.bg-subtle color
basis.color.action-1.border-active color
basis.color.action-1.border-default color
basis.color.action-1.border-hover color
basis.color.action-1.border-subtle color
basis.color.action-1.color-active color
basis.color.action-1.color-default color
basis.color.action-1.color-document color
basis.color.action-1.color-hover color
basis.color.action-1.color-subtle color
basis.color.action-2-inverse.bg-active color
basis.color.action-2-inverse.bg-default color
basis.color.action-2-inverse.bg-document color
basis.color.action-2-inverse.bg-hover color
basis.color.action-2-inverse.bg-subtle color
basis.color.action-2-inverse.border-active color
basis.color.action-2-inverse.border-default color
basis.color.action-2-inverse.border-hover color
basis.color.action-2-inverse.border-subtle color
basis.color.action-2-inverse.color-active color
basis.color.action-2-inverse.color-default color
basis.color.action-2-inverse.color-document color
basis.color.action-2-inverse.color-hover color
basis.color.action-2-inverse.color-subtle color
basis.color.action-2.bg-active color
basis.color.action-2.bg-default color
basis.color.action-2.bg-document color
basis.color.action-2.bg-hover color
basis.color.action-2.bg-subtle color
basis.color.action-2.border-active color
basis.color.action-2.border-default color
basis.color.action-2.border-hover color
basis.color.action-2.border-subtle color
basis.color.action-2.color-active color
basis.color.action-2.color-default color
basis.color.action-2.color-document color
basis.color.action-2.color-hover color
basis.color.action-2.color-subtle color
basis.color.default-inverse.bg-active color
basis.color.default-inverse.bg-default color
basis.color.default-inverse.bg-document color
basis.color.default-inverse.bg-hover color
basis.color.default-inverse.bg-subtle color
basis.color.default-inverse.border-active color
basis.color.default-inverse.border-default color
basis.color.default-inverse.border-hover color
basis.color.default-inverse.border-subtle color
basis.color.default-inverse.color-active color
basis.color.default-inverse.color-default color
basis.color.default-inverse.color-document color
basis.color.default-inverse.color-hover color
basis.color.default-inverse.color-subtle color
basis.color.default.bg-active color
basis.color.default.bg-default color
basis.color.default.bg-document color
basis.color.default.bg-hover color
basis.color.default.bg-subtle color
basis.color.default.border-active color
basis.color.default.border-default color
basis.color.default.border-hover color
basis.color.default.border-subtle color
basis.color.default.color-active color
basis.color.default.color-default color
basis.color.default.color-document color
basis.color.default.color-hover color
basis.color.default.color-subtle color
basis.color.disabled-inverse.bg-active color
basis.color.disabled-inverse.bg-default color
basis.color.disabled-inverse.bg-document color
basis.color.disabled-inverse.bg-hover color
basis.color.disabled-inverse.bg-subtle color
basis.color.disabled-inverse.border-active color
basis.color.disabled-inverse.border-default color
basis.color.disabled-inverse.border-hover color
basis.color.disabled-inverse.border-subtle color
basis.color.disabled-inverse.color-active color
basis.color.disabled-inverse.color-default color
basis.color.disabled-inverse.color-document color
basis.color.disabled-inverse.color-hover color
basis.color.disabled-inverse.color-subtle color
basis.color.disabled.bg-active color
basis.color.disabled.bg-default color
basis.color.disabled.bg-document color
basis.color.disabled.bg-hover color
basis.color.disabled.bg-subtle color
basis.color.disabled.border-active color
basis.color.disabled.border-default color
basis.color.disabled.border-hover color
basis.color.disabled.border-subtle color
basis.color.disabled.color-active color
basis.color.disabled.color-default color
basis.color.disabled.color-document color
basis.color.disabled.color-hover color
basis.color.disabled.color-subtle color
basis.color.highlight-inverse.bg-active color
basis.color.highlight-inverse.bg-default color
basis.color.highlight-inverse.bg-document color
basis.color.highlight-inverse.bg-hover color
basis.color.highlight-inverse.bg-subtle color
basis.color.highlight-inverse.border-active color
basis.color.highlight-inverse.border-default color
basis.color.highlight-inverse.border-hover color
basis.color.highlight-inverse.border-subtle color
basis.color.highlight-inverse.color-active color
basis.color.highlight-inverse.color-default color
basis.color.highlight-inverse.color-document color
basis.color.highlight-inverse.color-hover color
basis.color.highlight-inverse.color-subtle color
basis.color.highlight.bg-active color
basis.color.highlight.bg-default color
basis.color.highlight.bg-document color
basis.color.highlight.bg-hover color
basis.color.highlight.bg-subtle color
basis.color.highlight.border-active color
basis.color.highlight.border-default color
basis.color.highlight.border-hover color
basis.color.highlight.border-subtle color
basis.color.highlight.color-active color
basis.color.highlight.color-default color
basis.color.highlight.color-document color
basis.color.highlight.color-hover color
basis.color.highlight.color-subtle color
basis.color.info-inverse.bg-active color
basis.color.info-inverse.bg-default color
basis.color.info-inverse.bg-document color
basis.color.info-inverse.bg-hover color
basis.color.info-inverse.bg-subtle color
basis.color.info-inverse.border-active color
basis.color.info-inverse.border-default color
basis.color.info-inverse.border-hover color
basis.color.info-inverse.border-subtle color
basis.color.info-inverse.color-active color
basis.color.info-inverse.color-default color
basis.color.info-inverse.color-document color
basis.color.info-inverse.color-hover color
basis.color.info-inverse.color-subtle color
basis.color.info.bg-active color
basis.color.info.bg-default color
basis.color.info.bg-document color
basis.color.info.bg-hover color
basis.color.info.bg-subtle color
basis.color.info.border-active color
basis.color.info.border-default color
basis.color.info.border-hover color
basis.color.info.border-subtle color
basis.color.info.color-active color
basis.color.info.color-default color
basis.color.info.color-document color
basis.color.info.color-hover color
basis.color.info.color-subtle color
basis.color.negative-inverse.bg-active color
basis.color.negative-inverse.bg-default color
basis.color.negative-inverse.bg-document color
basis.color.negative-inverse.bg-hover color
basis.color.negative-inverse.bg-subtle color
basis.color.negative-inverse.border-active color
basis.color.negative-inverse.border-default color
basis.color.negative-inverse.border-hover color
basis.color.negative-inverse.border-subtle color
basis.color.negative-inverse.color-active color
basis.color.negative-inverse.color-default color
basis.color.negative-inverse.color-document color
basis.color.negative-inverse.color-hover color
basis.color.negative-inverse.color-subtle color
basis.color.negative.bg-active color
basis.color.negative.bg-default color
basis.color.negative.bg-document color
basis.color.negative.bg-hover color
basis.color.negative.bg-subtle color
basis.color.negative.border-active color
basis.color.negative.border-default color
basis.color.negative.border-hover color
basis.color.negative.border-subtle color
basis.color.negative.color-active color
basis.color.negative.color-default color
basis.color.negative.color-document color
basis.color.negative.color-hover color
basis.color.negative.color-subtle color
basis.color.positive-inverse.bg-active color
basis.color.positive-inverse.bg-default color
basis.color.positive-inverse.bg-document color
basis.color.positive-inverse.bg-hover color
basis.color.positive-inverse.bg-subtle color
basis.color.positive-inverse.border-active color
basis.color.positive-inverse.border-default color
basis.color.positive-inverse.border-hover color
basis.color.positive-inverse.border-subtle color
basis.color.positive-inverse.color-active color
basis.color.positive-inverse.color-default color
basis.color.positive-inverse.color-document color
basis.color.positive-inverse.color-hover color
basis.color.positive-inverse.color-subtle color
basis.color.positive.bg-active color
basis.color.positive.bg-default color
basis.color.positive.bg-document color
basis.color.positive.bg-hover color
basis.color.positive.bg-subtle color
basis.color.positive.border-active color
basis.color.positive.border-default color
basis.color.positive.border-hover color
basis.color.positive.border-subtle color
basis.color.positive.color-active color
basis.color.positive.color-default color
basis.color.positive.color-document color
basis.color.positive.color-hover color
basis.color.positive.color-subtle color
basis.color.selected-inverse.bg-active color
basis.color.selected-inverse.bg-default color
basis.color.selected-inverse.bg-document color
basis.color.selected-inverse.bg-hover color
basis.color.selected-inverse.bg-subtle color
basis.color.selected-inverse.border-active color
basis.color.selected-inverse.border-default color
basis.color.selected-inverse.border-hover color
basis.color.selected-inverse.border-subtle color
basis.color.selected-inverse.color-active color
basis.color.selected-inverse.color-default color
basis.color.selected-inverse.color-document color
basis.color.selected-inverse.color-hover color
basis.color.selected-inverse.color-subtle color
basis.color.selected.bg-active color
basis.color.selected.bg-default color
basis.color.selected.bg-document color
basis.color.selected.bg-hover color
basis.color.selected.bg-subtle color
basis.color.selected.border-active color
basis.color.selected.border-default color
basis.color.selected.border-hover color
basis.color.selected.border-subtle color
basis.color.selected.color-active color
basis.color.selected.color-default color
basis.color.selected.color-document color
basis.color.selected.color-hover color
basis.color.selected.color-subtle color
basis.color.warning-inverse.bg-active color
basis.color.warning-inverse.bg-default color
basis.color.warning-inverse.bg-document color
basis.color.warning-inverse.bg-hover color
basis.color.warning-inverse.bg-subtle color
basis.color.warning-inverse.border-active color
basis.color.warning-inverse.border-default color
basis.color.warning-inverse.border-hover color
basis.color.warning-inverse.border-subtle color
basis.color.warning-inverse.color-active color
basis.color.warning-inverse.color-default color
basis.color.warning-inverse.color-document color
basis.color.warning-inverse.color-hover color
basis.color.warning-inverse.color-subtle color
basis.color.warning.bg-active color
basis.color.warning.bg-default color
basis.color.warning.bg-document color
basis.color.warning.bg-hover color
basis.color.warning.bg-subtle color
basis.color.warning.border-active color
basis.color.warning.border-default color
basis.color.warning.border-hover color
basis.color.warning.border-subtle color
basis.color.warning.color-active color
basis.color.warning.color-default color
basis.color.warning.color-document color
basis.color.warning.color-hover color
basis.color.warning.color-subtle color
basis.focus.inverse.outline-color color
basis.form-control.active.accent-color color
basis.form-control.active.background-color color
basis.form-control.active.border-color color
basis.form-control.active.border-width dimension
basis.form-control.active.color color
basis.form-control.disabled.accent-color color
basis.form-control.disabled.background-color color
basis.form-control.disabled.border-color color
basis.form-control.disabled.color color
basis.form-control.focus.accent-color color
basis.form-control.focus.background-color color
basis.form-control.focus.border-color color
basis.form-control.focus.border-width dimension
basis.form-control.focus.color color
basis.form-control.hover.accent-color color
basis.form-control.hover.background-color color
basis.form-control.hover.border-color color
basis.form-control.hover.border-width dimension
basis.form-control.hover.color color
basis.form-control.invalid.accent-color color
basis.form-control.invalid.background-color color
basis.form-control.invalid.border-color color
basis.form-control.invalid.border-width dimension
basis.form-control.invalid.color color
basis.form-control.placeholder.color color
basis.form-control.read-only.accent-color color
basis.form-control.read-only.background-color color
basis.form-control.read-only.border-color color
basis.form-control.read-only.color color
basis.size.icon.2xl dimension
basis.size.icon.3xl dimension
basis.size.icon.4xl dimension
basis.size.icon.lg dimension
basis.size.icon.md dimension
basis.size.icon.sm dimension
basis.size.icon.xl dimension
basis.space.block.2xl dimension
basis.space.block.2xs dimension
basis.space.block.3xl dimension
basis.space.block.4xl dimension
basis.space.block.5xl dimension
basis.space.block.6xl dimension
basis.space.block.lg dimension
basis.space.block.md dimension
basis.space.block.sm dimension
basis.space.block.xl dimension
basis.space.block.xs dimension
basis.space.column.2xl dimension
basis.space.column.2xs dimension
basis.space.column.3xl dimension
basis.space.column.4xl dimension
basis.space.column.5xl dimension
basis.space.column.6xl dimension
basis.space.column.lg dimension
basis.space.column.md dimension
basis.space.column.sm dimension
basis.space.column.xl dimension
basis.space.column.xs dimension
basis.space.inline.2xl dimension
basis.space.inline.2xs dimension
basis.space.inline.3xl dimension
basis.space.inline.4xl dimension
basis.space.inline.5xl dimension
basis.space.inline.6xl dimension
basis.space.inline.lg dimension
basis.space.inline.md dimension
basis.space.inline.sm dimension
basis.space.inline.xl dimension
basis.space.inline.xs dimension
basis.space.row.2xl dimension
basis.space.row.2xs dimension
basis.space.row.3xl dimension
basis.space.row.4xl dimension
basis.space.row.5xl dimension
basis.space.row.6xl dimension
basis.space.row.lg dimension
basis.space.row.md dimension
basis.space.row.sm dimension
basis.space.row.xl dimension
basis.space.row.xs dimension
basis.space.text.2xl dimension
basis.space.text.2xs dimension
basis.space.text.3xl dimension
basis.space.text.3xs dimension
basis.space.text.lg dimension
basis.space.text.md dimension
basis.space.text.sm dimension
basis.space.text.xl dimension
basis.space.text.xs dimension
basis.text.font-family.default fontFamily
basis.text.font-family.monospace fontFamily
basis.text.font-size.2xl dimension
basis.text.font-size.3xl dimension
basis.text.font-size.4xl dimension
basis.text.font-size.lg dimension
basis.text.font-size.md dimension
basis.text.font-size.sm dimension
basis.text.font-size.xl dimension
basis.text.font-weight.bold number
basis.text.font-weight.default number
basis.text.line-height.2xl number
basis.text.line-height.3xl number
basis.text.line-height.4xl number
basis.text.line-height.lg number
basis.text.line-height.md number
basis.text.line-height.sm number
basis.text.line-height.xl number
basis.space.block.max.2xl dimension
basis.space.block.max.2xs dimension
basis.space.block.max.3xl dimension
basis.space.block.max.4xl dimension
basis.space.block.max.5xl dimension
basis.space.block.max.6xl dimension
basis.space.block.max.lg dimension
basis.space.block.max.md dimension
basis.space.block.max.sm dimension
basis.space.block.max.xl dimension
basis.space.block.max.xs dimension
basis.space.block.min.2xl dimension
basis.space.block.min.2xs dimension
basis.space.block.min.3xl dimension
basis.space.block.min.4xl dimension
basis.space.block.min.5xl dimension
basis.space.block.min.6xl dimension
basis.space.block.min.lg dimension
basis.space.block.min.md dimension
basis.space.block.min.sm dimension
basis.space.block.min.xl dimension
basis.space.block.min.xs dimension
basis.space.column.max.2xl dimension
basis.space.column.max.2xs dimension
basis.space.column.max.3xl dimension
basis.space.column.max.4xl dimension
basis.space.column.max.5xl dimension
basis.space.column.max.6xl dimension
basis.space.column.max.lg dimension
basis.space.column.max.md dimension
basis.space.column.max.sm dimension
basis.space.column.max.xl dimension
basis.space.column.max.xs dimension
basis.space.column.min.2xl dimension
basis.space.column.min.2xs dimension
basis.space.column.min.3xl dimension
basis.space.column.min.4xl dimension
basis.space.column.min.5xl dimension
basis.space.column.min.6xl dimension
basis.space.column.min.lg dimension
basis.space.column.min.md dimension
basis.space.column.min.sm dimension
basis.space.column.min.xl dimension
basis.space.column.min.xs dimension
basis.space.inline.max.2xl dimension
basis.space.inline.max.2xs dimension
basis.space.inline.max.3xl dimension
basis.space.inline.max.4xl dimension
basis.space.inline.max.5xl dimension
basis.space.inline.max.6xl dimension
basis.space.inline.max.lg dimension
basis.space.inline.max.md dimension
basis.space.inline.max.sm dimension
basis.space.inline.max.xl dimension
basis.space.inline.max.xs dimension
basis.space.inline.min.2xl dimension
basis.space.inline.min.2xs dimension
basis.space.inline.min.3xl dimension
basis.space.inline.min.4xl dimension
basis.space.inline.min.5xl dimension
basis.space.inline.min.6xl dimension
basis.space.inline.min.lg dimension
basis.space.inline.min.md dimension
basis.space.inline.min.sm dimension
basis.space.inline.min.xl dimension
basis.space.inline.min.xs dimension
basis.space.row.max.2xl dimension
basis.space.row.max.2xs dimension
basis.space.row.max.3xl dimension
basis.space.row.max.4xl dimension
basis.space.row.max.5xl dimension
basis.space.row.max.6xl dimension
basis.space.row.max.lg dimension
basis.space.row.max.md dimension
basis.space.row.max.sm dimension
basis.space.row.max.xl dimension
basis.space.row.max.xs dimension
basis.space.row.min.2xl dimension
basis.space.row.min.2xs dimension
basis.space.row.min.3xl dimension
basis.space.row.min.4xl dimension
basis.space.row.min.5xl dimension
basis.space.row.min.6xl dimension
basis.space.row.min.lg dimension
basis.space.row.min.md dimension
basis.space.row.min.sm dimension
basis.space.row.min.xl dimension
basis.space.row.min.xs dimension


Help deze documentatie te verbeteren

Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via GitHub.

Vragen

Heb je een vraag? Twijfel niet en neem contact op met het kernteam.