Hoog contrast (WCAG AAA)

Token set hoog-contrast: 29 declared by this set, 141 from the defaults layer.

Contrast: primary text on primary 21.00:1, primary on background 21.00:1 (pass).

Colours (Kleuren)

Token	Value	Dark mode	Source	Paints
--nldesign-color-background-dark	#cccccc		this set	Background dark, Table header background
--nldesign-color-background-darker	#999999		this set	Background darker
--nldesign-color-background-hover	#e6e6e6		this set	--color-main-background
--nldesign-color-border	#000000		this set	Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color
--nldesign-color-border-dark	#000000		this set	Border dark, Border max contrast
--nldesign-color-button-primary-background	#154273		defaults
--nldesign-color-button-primary-border	#154273		defaults
--nldesign-color-button-primary-hover	#1d5499		defaults
--nldesign-color-button-primary-text	#ffffff		defaults
--nldesign-color-error	#b30000		this set	Border error, Element error, Error color, Text error, Text input invalid
--nldesign-color-error-hover	#8b1a15		defaults	Error hover
--nldesign-color-error-rgb	213, 43, 30		defaults	--color-error-text
--nldesign-color-favorite	#e17000		defaults	--filter-background-blur
--nldesign-color-focus	#000000		this set	Button focus ring
--nldesign-color-focus-rgb	0, 123, 199		defaults
--nldesign-color-header-background	#000000		this set
--nldesign-color-header-text	#ffffff		this set
--nldesign-color-info	#003a99		this set	Info color, Text input focus, --color-info-hover
--nldesign-color-info-rgb	0, 123, 199		defaults
--nldesign-color-link	#154273		defaults	Link colour
--nldesign-color-link-hover	#007bc7		defaults	Link hover colour
--nldesign-color-link-visited	#42145f		defaults	--nldesign-component-link-visited-color
--nldesign-color-logo-background	transparent		defaults
--nldesign-color-nav-background	#ffffff		this set
--nldesign-color-placeholder-dark	#1a1a1a		this set	Placeholder dark
--nldesign-color-placeholder-light	#e5e5e5		defaults	Placeholder light
--nldesign-color-primary	#000000		this set	Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more
--nldesign-color-primary-hover	#333333		this set	Primary button hover, Primary element hover, Primary hover color
--nldesign-color-primary-light	#ffffff		this set	Primary element light, Tertiary button hover, --color-primary-element-text-dark
--nldesign-color-primary-light-hover	#e6e6e6		this set	Primary element light hover, Primary light hover, Tertiary button pressed
--nldesign-color-primary-text	#ffffff		this set	Badge number, Primary button label, Primary element text, Primary text color
--nldesign-color-success	#00591a		this set	Border success, Element success, Success color, Text success
--nldesign-color-success-rgb	57, 135, 12		defaults	--color-success-hover
--nldesign-color-text	#000000		this set	Body text colour, Main text color, Table header label, --nldesign-component-form-field-label-color, --nldesign-component-heading-1-color and 8 more
--nldesign-color-text-light	#000000		this set	--color-text-maxcontrast-default
--nldesign-color-text-muted	#1a1a1a		this set	Text lighter, Text max contrast
--nldesign-color-warning	#7a3d00		this set	Element warning, Text warning, Warning color
--nldesign-color-warning-rgb	225, 112, 0		defaults	--color-warning-hover
--nldesign-component-badge-background-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-badge-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-active-background-color	`var(
--nldesign-color-primary-light-hover
)`		defaults
--nldesign-component-button-active-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-background-color	transparent		defaults
--nldesign-component-button-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-color	var(--nldesign-color-primary)		defaults
--nldesign-component-button-disabled-background-color	#e5e5e5		defaults
--nldesign-component-button-disabled-border-color	#b4b4b4		defaults
--nldesign-component-button-disabled-color	#696969		defaults
--nldesign-component-button-focus-border-color	`var(
--nldesign-color-focus
)`		defaults
--nldesign-component-button-hover-background-color	`var(
--nldesign-color-primary-light
)`		defaults
--nldesign-component-button-hover-border-color	`var(
--nldesign-color-primary-hover
)`		defaults
--nldesign-component-button-hover-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-background-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-primary-action-hover-background-color	`var(
--nldesign-color-primary-hover
)`		defaults
--nldesign-component-button-primary-action-hover-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-secondary-action-background-color	transparent		defaults
--nldesign-component-button-secondary-action-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-secondary-action-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-secondary-action-hover-background-color	`var(
--nldesign-color-primary-light
)`		defaults
--nldesign-component-form-field-label-color	var(--nldesign-color-text)		defaults
--nldesign-component-form-fieldset-border-color	`var(
--nldesign-color-border
)`		defaults
--nldesign-component-form-select-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-form-select-focus-border-color	var(--nldesign-color-info)		defaults
--nldesign-component-heading-1-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-2-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-3-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-4-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-5-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-6-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-color	var(--nldesign-color-text)		defaults
--nldesign-component-link-color	var(--nldesign-color-link)		defaults
--nldesign-component-link-hover-color	var(--nldesign-color-link-hover)		defaults
--nldesign-component-link-visited-color	var(--nldesign-color-link-visited)		defaults
--nldesign-component-ordered-list-color	`var(
--nldesign-color-text
)`		defaults
--nldesign-component-paragraph-color	var(--nldesign-color-text)		defaults
--nldesign-component-separator-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-table-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-table-header-background-color	`var(
--nldesign-color-background-dark
)`		defaults
--nldesign-component-table-header-color	var(--nldesign-color-text)		defaults
--nldesign-component-table-row-hover-background-color	`var(
--nldesign-color-background-hover
)`		defaults
--nldesign-component-textbox-background-color	#ffffff		defaults
--nldesign-component-textbox-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-textbox-color	var(--nldesign-color-text)		defaults
--nldesign-component-textbox-disabled-background-color	#e5e5e5		defaults
--nldesign-component-textbox-disabled-color	#696969		defaults
--nldesign-component-textbox-focus-border-color	var(--nldesign-color-info)		defaults
--nldesign-component-textbox-hover-border-color	`var(
--nldesign-color-border-dark
)`		defaults
--nldesign-component-textbox-invalid-border-color	var(--nldesign-color-error)		defaults
--nldesign-component-unordered-list-color	`var(
--nldesign-color-text
)`		defaults

Typography (Typografie)

Token	Value	Dark mode	Source	Paints
--nldesign-component-badge-font-size	0.875rem		defaults
--nldesign-component-badge-font-weight	700		defaults
--nldesign-component-button-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-button-font-size	1rem		defaults
--nldesign-component-button-font-weight	700		defaults
--nldesign-component-form-field-label-font-weight	700		defaults
--nldesign-component-heading-1-font-size	2.5rem		defaults
--nldesign-component-heading-1-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-1-line-height	1.2		defaults
--nldesign-component-heading-2-font-size	2rem		defaults
--nldesign-component-heading-2-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-2-line-height	1.25		defaults
--nldesign-component-heading-3-font-size	1.5rem		defaults
--nldesign-component-heading-3-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-3-line-height	1.3		defaults
--nldesign-component-heading-4-font-size	1.25rem		defaults
--nldesign-component-heading-4-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-4-line-height	1.35		defaults
--nldesign-component-heading-5-font-size	1.125rem		defaults
--nldesign-component-heading-5-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-5-line-height	1.4		defaults
--nldesign-component-heading-6-font-size	1rem		defaults
--nldesign-component-heading-6-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-6-line-height	1.5		defaults
--nldesign-component-heading-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-heading-font-weight	var(--nldesign-font-weight-heading)		defaults
--nldesign-component-link-font-weight	`var(
--nldesign-font-weight-default
)`		defaults
--nldesign-component-link-text-decoration	underline		defaults
--nldesign-component-ordered-list-font-size	1rem		defaults
--nldesign-component-ordered-list-line-height	1.5		defaults
--nldesign-component-paragraph-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-paragraph-font-size	1rem		defaults
--nldesign-component-paragraph-font-weight	var(--nldesign-font-weight-default)		defaults
--nldesign-component-paragraph-line-height	1.5		defaults
--nldesign-component-table-header-font-weight	700		defaults
--nldesign-component-textbox-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-textbox-font-size	1rem		defaults
--nldesign-component-unordered-list-font-size	1rem		defaults
--nldesign-component-unordered-list-line-height	1.5		defaults
--nldesign-font-family	'Fira Sans', sans-serif		this set	Font family, --nldesign-component-button-font-family, --nldesign-component-textbox-font-family
--nldesign-font-weight-default	400		defaults	--default-font-size
--nldesign-font-weight-element	500		defaults	Control font weight
--nldesign-font-weight-heading	700		defaults	Heading font weight

Spacing and shape (Ruimte en vorm)

Token	Value	Dark mode	Source	Paints
--nldesign-border-radius	0		this set	Border radius element, Button corner, Select corner, Text input corner, --border-width-input
--nldesign-border-radius-large	0		this set	--border-radius-container
--nldesign-border-radius-pill	0		this set	Badge shape, Border radius pill
--nldesign-border-radius-rounded	0		this set	Border radius rounded
--nldesign-border-radius-small	0		this set	Border radius small
--nldesign-component-badge-border-radius	`var(
--nldesign-border-radius-pill
)`		defaults
--nldesign-component-badge-padding-block	0.125rem		defaults
--nldesign-component-badge-padding-inline	0.5rem		defaults
--nldesign-component-button-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-button-border-width	1px		defaults
--nldesign-component-button-padding-block	0.5rem		defaults
--nldesign-component-button-padding-inline	1rem		defaults
--nldesign-component-form-fieldset-border-width	1px		defaults
--nldesign-component-form-select-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-separator-border-width	1px		defaults
--nldesign-component-table-border-width	1px		defaults
--nldesign-component-table-cell-padding-block	0.5rem		defaults
--nldesign-component-table-cell-padding-inline	0.75rem		defaults
--nldesign-component-textbox-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-textbox-border-width	1px		defaults
--nldesign-component-textbox-padding-block	0.5rem		defaults
--nldesign-component-textbox-padding-inline	0.75rem		defaults
--nldesign-header-border-bottom	0		defaults
--nldesign-logo-height	auto		defaults
--nldesign-logo-width	62px		defaults
--nldesign-size-lint	0px		defaults
--nldesign-size-lint-height	0px		defaults

Other tokens (Overige tokens)

Token	Value	Dark mode	Source	Paints
--nldesign-animation-quick	100ms		defaults	--header-menu-item-height
--nldesign-animation-slow	300ms		defaults	Animation slow
--nldesign-header-icon-filter	invert(1) brightness(0) contrast(100)		defaults
--nldesign-logo-bottom	1px		defaults
--nldesign-logo-center	50%		defaults
--nldesign-logo-filter	none		defaults
--nldesign-logo-inset	12px		defaults
--nldesign-logo-top	1px		defaults

Tokens nothing reads (Tokens die niets leest)

Token	Value	Dark mode	Source	Paints
--nldesign-color-background	#ffffff		this set