Conduction 2026

Token set conduction-new: 385 declared by this set, 155 from the defaults layer.

Contrast: primary text on primary not evaluated, primary on background not evaluated (unevaluated).

Colours (Kleuren)

Token	Value	Dark mode	Source	Paints
--nldesign-color-background-dark	var(--c-cobalt-100)	#1a2538	this set	Background dark, Table header background
--nldesign-color-background-darker	#d0d1d2	#3a3b3c	defaults	Background darker
--nldesign-color-background-hover	var(--conduction-color-background-muted)	#131c2a	this set	--color-main-background
--nldesign-color-border	#b4b4b4	#535353	defaults	Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color
--nldesign-color-border-dark	#696969	#929292	defaults	Border dark, Border max contrast
--nldesign-color-button-primary-background	#154273	#81afe2	defaults
--nldesign-color-button-primary-border	#154273	#81afe2	defaults
--nldesign-color-button-primary-hover	#1d5499	#6397da	defaults
--nldesign-color-button-primary-text	#ffffff	#9e9e9e	defaults
--nldesign-color-error	#d52b1e	#d83d32	defaults	Border error, Element error, Error color, Text error, Text input invalid
--nldesign-color-error-hover	#8b1a15	#e2726d	defaults	Error hover
--nldesign-color-error-rgb	213, 43, 30	216, 61, 50	defaults	--color-error-text
--nldesign-color-favorite	#e17000	#f48c25	defaults	--filter-background-blur
--nldesign-color-focus	rgba(0, 123, 199, 0.5)	#39adf580	defaults	Button focus ring
--nldesign-color-focus-rgb	0, 123, 199	57, 173, 245	defaults
--nldesign-color-header-background	var(--c-white)	#141414	this set
--nldesign-color-header-text	var(--c-blue-cobalt)	#7499de	this set
--nldesign-color-info	#007bc7	#39adf5	defaults	Info color, Text input focus, --color-info-hover
--nldesign-color-info-rgb	0, 123, 199	57, 173, 245	defaults
--nldesign-color-link	var(--conduction-color-link-default)	#6f93d6	this set	Link colour
--nldesign-color-link-hover	#007bc7	#39adf5	defaults	Link hover colour
--nldesign-color-link-visited	#42145f	#c392e3	defaults	--nldesign-component-link-visited-color
--nldesign-color-logo-background	transparent		defaults
--nldesign-color-nav-background	var(--c-white)	#141414	this set
--nldesign-color-placeholder-dark	#cccccc	#3f3f3f	defaults	Placeholder dark
--nldesign-color-placeholder-light	#e5e5e5	#2a2a2a	defaults	Placeholder light
--nldesign-color-primary	var(--conduction-color-brand-primary)	#5582d7	this set	Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more
--nldesign-color-primary-hover	var(--c-cobalt-600)	#1b3a75	this set	Primary button hover, Primary element hover, Primary hover color
--nldesign-color-primary-light	var(--c-cobalt-50)	#131c2a	this set	Primary element light, Tertiary button hover, --color-primary-element-text-dark
--nldesign-color-primary-light-hover	#d4e4f2	#172d41	defaults	Primary element light hover, Primary light hover, Tertiary button pressed
--nldesign-color-primary-text	var(--conduction-color-text-inverse)	#111111	this set	Badge number, Primary button label, Primary element text, Primary text color
--nldesign-color-success	#39870c	#9ceb6f	defaults	Border success, Element success, Success color, Text success
--nldesign-color-success-rgb	57, 135, 12	156, 235, 111	defaults	--color-success-hover
--nldesign-color-text	var(--conduction-color-text-default)	#7499de	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	var(--conduction-color-text-inverse)	#9e9e9e	this set	--color-text-maxcontrast-default
--nldesign-color-text-muted	var(--conduction-color-text-muted)	#7b92c1	this set	Text lighter, Text max contrast
--nldesign-color-warning	#e17000	#f48c25	defaults	Element warning, Text warning, Warning color
--nldesign-color-warning-rgb	225, 112, 0	244, 140, 37	defaults	--color-warning-hover
--nldesign-component-badge-background-color	`var(
--nldesign-color-primary
)`	#6f93d6	defaults
--nldesign-component-badge-color	`var(
--nldesign-color-primary-text
)`	#9e9e9e	defaults
--nldesign-component-button-active-background-color	`var(
--nldesign-color-primary-light-hover
)`	#172d41	defaults
--nldesign-component-button-active-color	`var(
--nldesign-color-primary
)`	#7499de	defaults
--nldesign-component-button-background-color	transparent		defaults
--nldesign-component-button-border-color	`var(
--nldesign-color-primary
)`	#6f93d6	defaults
--nldesign-component-button-color	var(--nldesign-color-primary)	#7499de	defaults
--nldesign-component-button-disabled-background-color	#e5e5e5	#2a2a2a	defaults
--nldesign-component-button-disabled-border-color	#b4b4b4	#535353	defaults
--nldesign-component-button-disabled-color	#696969	#9e9e9e	defaults
--nldesign-component-button-focus-border-color	`var(
--nldesign-color-focus
)`	#39adf580	defaults
--nldesign-component-button-hover-background-color	`var(
--nldesign-color-primary-light
)`	#131c2a	defaults
--nldesign-component-button-hover-border-color	`var(
--nldesign-color-primary-hover
)`	#81a0dc	defaults
--nldesign-component-button-hover-color	`var(
--nldesign-color-primary
)`	#7499de	defaults
--nldesign-component-button-primary-action-background-color	`var(
--nldesign-color-primary
)`	#6f93d6	defaults
--nldesign-component-button-primary-action-border-color	`var(
--nldesign-color-primary
)`	#6f93d6	defaults
--nldesign-component-button-primary-action-color	`var(
--nldesign-color-primary-text
)`	#9e9e9e	defaults
--nldesign-component-button-primary-action-hover-background-color	`var(
--nldesign-color-primary-hover
)`	#81a0dc	defaults
--nldesign-component-button-primary-action-hover-color	`var(
--nldesign-color-primary-text
)`	#9e9e9e	defaults
--nldesign-component-button-secondary-action-background-color	transparent		defaults
--nldesign-component-button-secondary-action-border-color	`var(
--nldesign-color-primary
)`	#6f93d6	defaults
--nldesign-component-button-secondary-action-color	`var(
--nldesign-color-primary
)`	#7499de	defaults
--nldesign-component-button-secondary-action-hover-background-color	`var(
--nldesign-color-primary-light
)`	#131c2a	defaults
--nldesign-component-form-field-label-color	var(--nldesign-color-text)	#7499de	defaults
--nldesign-component-form-fieldset-border-color	`var(
--nldesign-color-border
)`	#535353	defaults
--nldesign-component-form-select-border-color	var(--nldesign-color-border)	#535353	defaults
--nldesign-component-form-select-focus-border-color	var(--nldesign-color-info)	#39adf5	defaults
--nldesign-component-heading-1-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-2-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-3-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-4-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-5-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-6-color	var(--nldesign-component-heading-color)	#7499de	defaults
--nldesign-component-heading-color	var(--nldesign-color-text)	#7499de	defaults
--nldesign-component-link-color	var(--nldesign-color-link)	#7499de	defaults
--nldesign-component-link-hover-color	var(--nldesign-color-link-hover)	#3db5ff	defaults
--nldesign-component-link-visited-color	var(--nldesign-color-link-visited)	#cea0eb	defaults
--nldesign-component-ordered-list-color	`var(
--nldesign-color-text
)`	#7499de	defaults
--nldesign-component-paragraph-color	var(--nldesign-color-text)	#7499de	defaults
--nldesign-component-separator-border-color	var(--nldesign-color-border)	#535353	defaults
--nldesign-component-table-border-color	var(--nldesign-color-border)	#535353	defaults
--nldesign-component-table-header-background-color	`var(
--nldesign-color-background-dark
)`	#1a2538	defaults
--nldesign-component-table-header-color	var(--nldesign-color-text)	#7499de	defaults
--nldesign-component-table-row-hover-background-color	`var(
--nldesign-color-background-hover
)`	#131c2a	defaults
--nldesign-component-textbox-background-color	#ffffff	#9e9e9e	defaults
--nldesign-component-textbox-border-color	var(--nldesign-color-border)	#9e9e9e	defaults
--nldesign-component-textbox-color	var(--nldesign-color-text)	#7499de	defaults
--nldesign-component-textbox-disabled-background-color	#e5e5e5	#9e9e9e	defaults
--nldesign-component-textbox-disabled-color	#696969	#9e9e9e	defaults
--nldesign-component-textbox-focus-border-color	var(--nldesign-color-info)	#3db5ff	defaults
--nldesign-component-textbox-hover-border-color	`var(
--nldesign-color-border-dark
)`	#9e9e9e	defaults
--nldesign-component-textbox-invalid-border-color	var(--nldesign-color-error)	#e75f55	defaults
--nldesign-component-unordered-list-color	`var(
--nldesign-color-text
)`	#7499de	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	var(--conduction-typography-font-family-body)		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		defaults	Border radius element, Button corner, Select corner, Text input corner, --border-width-input
--nldesign-border-radius-large	4px		defaults	--border-radius-container
--nldesign-border-radius-pill	100px		defaults	Badge shape, Border radius pill
--nldesign-border-radius-rounded	0		defaults	Border radius rounded
--nldesign-border-radius-small	0		defaults	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
--c-blue-cobalt	#21468B	#6f93d6	this set
--c-cobalt-100	#DCE3F0	#1a2538	this set
--c-cobalt-200	#B6C2DD	#2c3957	this set
--c-cobalt-300	#8095BD	#495c82	this set
--c-cobalt-400	#4D69A4	#5e77ad	this set
--c-cobalt-50	#EEF2F8	#131c2a	this set
--c-cobalt-500	#21468B	#6f93d6	this set
--c-cobalt-600	#1B3A75	#81a0dc	this set
--c-cobalt-700	#152D5C	#95afe2	this set
--c-cobalt-800	#102246	#a7bce6	this set
--c-cobalt-900	#0A172F	#b9cbed	this set
--c-commonground-yellow	#F6AD00	#f3b114	this set
--c-coral-300	#FAB29C	#74240c	this set
--c-coral-500	#F36C21	#d75b17	this set
--c-forest-300	#7DAA7C	#5b845a	this set
--c-forest-500	#3D7C3A	#81be7f	this set
--c-gold-300	#ECC668	#9c771c	this set
--c-gold-500	#C99A1F	#d7ac3b	this set
--c-gray-300	#B7BDC9	#404653	this set
--c-gray-500	#6B7280	#7e8591	this set
--c-lavender-300	#B7A7E3	#362565	this set
--c-lavender-500	#7E66C9	#543d9a	this set
--c-mint-300	#87CFA8	#387e58	this set
--c-mint-500	#2E9866	#66c99a	this set
--c-nextcloud-blue	#0082C9	#38b2f5	this set
--c-nextcloud-cyan	#1CAFFF	#0c92dc	this set
--c-orange-knvb	#F36C21	#d75b17	this set
--c-red-vermillion	#AE1C28	#da515d	this set
--c-terracotta-300	#DA9D8A	#7d402d	this set
--c-terracotta-500	#B25E48	#b16652	this set
--c-white	#FFFFFF	#141414	this set
--c-workspaceblue-300	#67BEEA	#1e729c	this set
--c-workspaceblue-500	#0082C9	#38b2f5	this set
--conduction-color-background-default	var(--c-white)	#141414	this set
--conduction-color-background-inverse	var(--c-blue-cobalt)	#6f93d6	this set
--conduction-color-background-muted	var(--c-cobalt-50)	#131c2a	this set
--conduction-color-border-default	var(--c-cobalt-200)	#2c3957	this set
--conduction-color-border-strong	var(--c-blue-cobalt)	#6f93d6	this set
--conduction-color-brand-primary	var(--c-blue-cobalt)	#6f93d6	this set
--conduction-color-brand-secondary	var(--c-orange-knvb)	#d75b17	this set
--conduction-color-brand-tertiary	var(--c-red-vermillion)	#da515d	this set
--conduction-color-link-default	var(--c-blue-cobalt)	#6f93d6	this set
--conduction-color-link-hover	var(--c-orange-knvb)	#d75b17	this set
--conduction-color-status-error	var(--c-red-vermillion)	#da515d	this set
--conduction-color-text-accent	var(--c-orange-knvb)	#f58547	this set
--conduction-color-text-default	var(--c-blue-cobalt)	#7499de	this set
--conduction-color-text-inverse	var(--c-white)	#9e9e9e	this set
--conduction-color-text-muted	var(--c-cobalt-400)	#7b92c1	this set
--conduction-primary-top-nav-background-color	var(--nldesign-color-nav-background)	#141414	this set
--conduction-primary-top-nav-color	var(--nldesign-color-nav-text)	#7499de	this set
--conduction-primary-top-nav-current-background-color	var(--c-cobalt-50)	#131c2a	this set
--conduction-primary-top-nav-current-color	var(--c-blue-cobalt)	#7499de	this set
--conduction-primary-top-nav-hover-background-color	var(--c-cobalt-50)	#131c2a	this set
--conduction-primary-top-nav-hover-color	var(--c-blue-cobalt)	#7499de	this set
--conduction-typography-font-family-body	'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif		this set
--conduction-typography-font-family-code	'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace		this set
--conduction-typography-font-family-heading	'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif		this set
--fs-2xl	24px		this set
--fs-3xl	32px		this set
--fs-4xl	40px		this set
--fs-5xl	48px		this set
--fs-base	16px		this set
--fs-lg	18px		this set
--fs-sm	14px		this set
--fs-xl	20px		this set
--fs-xs	12px		this set
--hex-pointy-top	polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)		this set
--lh-normal	1.5		this set
--lh-relaxed	1.75		this set
--lh-tight	1.2		this set
--nldesign-body-font-family	var(--conduction-typography-font-family-body)		this set
--nldesign-card-background	var(--c-white)	#141414	this set
--nldesign-card-body-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-card-body-font	var(--conduction-typography-font-family-body)		this set
--nldesign-card-body-line-height	22.8px		this set
--nldesign-card-body-size	15.2px		this set
--nldesign-card-border-color	#EBEDF0	#1f2228	this set
--nldesign-card-border-width	1px		this set
--nldesign-card-gap	0px		this set
--nldesign-card-heading-align	flex-start		this set
--nldesign-card-heading-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-card-heading-direction	column		this set
--nldesign-card-heading-font	var(--conduction-typography-font-family-heading)		this set
--nldesign-card-heading-margin-block-end	6px		this set
--nldesign-card-heading-size	19.2px		this set
--nldesign-card-heading-weight	700		this set
--nldesign-card-icon-background	var(--c-blue-cobalt)	#6f93d6	this set
--nldesign-card-icon-block-size	50px		this set
--nldesign-card-icon-clip	var(--hex-pointy-top)		this set
--nldesign-card-icon-color	var(--c-white)	#9e9e9e	this set
--nldesign-card-icon-gap	14px		this set
--nldesign-card-icon-padding	11px		this set
--nldesign-card-icon-size	44px		this set
--nldesign-card-padding	24px		this set
--nldesign-card-radius	12px		this set
--nldesign-card-shadow	none		this set
--nldesign-card-shadow-hover	var(--shadow-2)		this set
--nldesign-color-background	var(--conduction-color-background-default)	#141414	this set
--nldesign-color-footer-background	var(--c-cobalt-900)	#b9cbed	this set
--nldesign-color-footer-text	var(--c-white)	#9e9e9e	this set
--nldesign-color-nav-text	var(--c-blue-cobalt)	#7499de	this set
--nldesign-container-max	1280px		this set
--nldesign-container-padding-inline	24px		this set
--nldesign-footer-badge-border-color	rgba(255, 255, 255, 0.25)	#14141440	this set
--nldesign-footer-badge-border-width	1px		this set
--nldesign-footer-badge-color	rgba(255, 255, 255, 0.85)	#9e9e9ed9	this set
--nldesign-footer-badge-font	var(--conduction-typography-font-family-code)		this set
--nldesign-footer-badge-gap	20px		this set
--nldesign-footer-badge-inner-gap	6px		this set
--nldesign-footer-badge-line-height	17px		this set
--nldesign-footer-badge-mark-spacing	0.88px		this set
--nldesign-footer-badge-mark-weight	700		this set
--nldesign-footer-badge-padding	5px 9px		this set
--nldesign-footer-badge-radius	4px		this set
--nldesign-footer-badge-size	11px		this set
--nldesign-footer-badge-value-spacing	0.44px		this set
--nldesign-footer-badge-value-weight	400		this set
--nldesign-footer-boat-color	var(--c-orange-knvb)	#f58547	this set
--nldesign-footer-boat-mark-color	var(--c-white)	#9e9e9e	this set
--nldesign-footer-boat-offset	6px		this set
--nldesign-footer-brand-color	rgba(255, 255, 255, 0.7)	#9e9e9eb3	this set
--nldesign-footer-brand-font	var(--conduction-typography-font-family-body)		this set
--nldesign-footer-brand-line-height	21.7px		this set
--nldesign-footer-brand-margin-block	12px 0		this set
--nldesign-footer-brand-measure	288px		this set
--nldesign-footer-brand-size	14px		this set
--nldesign-footer-column-gap	48px		this set
--nldesign-footer-flag-bottom-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-footer-flag-middle-color	var(--c-white)	#9e9e9e	this set
--nldesign-footer-flag-top-color	var(--c-red-vermillion)	#e45864	this set
--nldesign-footer-grid-columns	297px repeat(auto-fill, 198px)		this set
--nldesign-footer-heading-color	rgba(255, 255, 255, 0.55)	#9e9e9e8c	this set
--nldesign-footer-heading-font	var(--conduction-typography-font-family-code)		this set
--nldesign-footer-heading-line-height	13px		this set
--nldesign-footer-heading-margin-block-end	16px		this set
--nldesign-footer-heading-size	11px		this set
--nldesign-footer-heading-spacing	1.54px		this set
--nldesign-footer-heading-transform	uppercase		this set
--nldesign-footer-heading-weight	500		this set
--nldesign-footer-item-margin-block-end	13px		this set
--nldesign-footer-item-marker	none		this set
--nldesign-footer-legal-background	var(--c-cobalt-900)	#b9cbed	this set
--nldesign-footer-legal-color	rgba(255, 255, 255, 0.55)	#9e9e9e8c	this set
--nldesign-footer-legal-font	var(--conduction-typography-font-family-code)		this set
--nldesign-footer-legal-gap	16px		this set
--nldesign-footer-legal-line-height	18px		this set
--nldesign-footer-legal-link-color	rgba(255, 255, 255, 0.65)	#9e9e9ea6	this set
--nldesign-footer-legal-link-decoration	none		this set
--nldesign-footer-legal-link-gap	8px		this set
--nldesign-footer-legal-padding-block-start	24px		this set
--nldesign-footer-legal-rule-color	rgba(255, 255, 255, 0.1)	#9e9e9e1a	this set
--nldesign-footer-legal-rule-width	1px		this set
--nldesign-footer-legal-size	12px		this set
--nldesign-footer-link-color	rgba(255, 255, 255, 0.85)	#9e9e9ed9	this set
--nldesign-footer-link-font	var(--conduction-typography-font-family-body)		this set
--nldesign-footer-link-line-height	21px		this set
--nldesign-footer-link-size	14px		this set
--nldesign-footer-padding-block	88px		this set
--nldesign-footer-padding-block-end	28px		this set
--nldesign-footer-quay-accent-color	#c8482f	#c8543e	this set
--nldesign-footer-quay-color	#9b9da3	#9a9ca2	this set
--nldesign-footer-quay-height	30px		this set
--nldesign-footer-quay-highlight-color	rgba(255, 255, 255, 0.5)	#9e9e9e80	this set
--nldesign-footer-quay-ink-color	var(--c-cobalt-900)	#d0ddf5	this set
--nldesign-footer-ripple-image	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='2'%3E%3Cpath d='M 0,96 L 140,82 L 280,96 L 420,82 L 560,96 L 700,82 L 840,96 L 980,82 L 1120,96 L 1260,82 L 1400,96'/%3E%3Cpath d='M 0,206 L 180,182 L 360,206 L 540,182 L 720,206 L 900,182 L 1080,206 L 1260,182 L 1400,200'/%3E%3Cpath d='M 0,362 L 220,332 L 440,362 L 660,332 L 880,362 L 1100,332 L 1320,362 L 1400,348'/%3E%3C/g%3E%3C/svg%3E")		this set
--nldesign-footer-skyline-color	var(--c-orange-knvb)	#f58547	this set
--nldesign-footer-skyline-height	152px		this set
--nldesign-footer-social-border-color	rgba(255, 255, 255, 0.18)	#1414142e	this set
--nldesign-footer-social-border-width	1px		this set
--nldesign-footer-social-color	rgba(255, 255, 255, 0.78)	#9e9e9ec7	this set
--nldesign-footer-social-gap	10px		this set
--nldesign-footer-social-margin-block	24px 0		this set
--nldesign-footer-social-radius	8px		this set
--nldesign-footer-social-size	34px		this set
--nldesign-footer-water-background	var(--c-cobalt-900)	#b9cbed	this set
--nldesign-footer-water-height	76px		this set
--nldesign-footer-window-dark-color	var(--c-cobalt-900)	#d0ddf5	this set
--nldesign-footer-window-lit-color	#fff7d2	#ffdd3d	this set
--nldesign-footer-wordmark-color	var(--c-white)	#9e9e9e	this set
--nldesign-footer-wordmark-font	`var(
--conduction-typography-font-family-heading
)`		this set
--nldesign-footer-wordmark-line-height	33px		this set
--nldesign-footer-wordmark-size	22px		this set
--nldesign-footer-wordmark-spacing	-0.44px		this set
--nldesign-footer-wordmark-weight	700		this set
--nldesign-header-action-border-width	1px		this set
--nldesign-header-action-decoration	none		this set
--nldesign-header-action-font-size	14px		this set
--nldesign-header-action-font-weight	500		this set
--nldesign-header-action-line-height	20px		this set
--nldesign-header-action-padding	8px 16px		this set
--nldesign-header-action-primary-background	var(--c-blue-cobalt)	#6f93d6	this set
--nldesign-header-action-primary-color	var(--c-white)	#9e9e9e	this set
--nldesign-header-action-radius	6px		this set
--nldesign-header-action-secondary-border-color	var(--c-cobalt-200)	#2c3957	this set
--nldesign-header-action-secondary-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-header-background	var(--c-white)	#141414	this set
--nldesign-header-border-color	var(--c-cobalt-100)	#1a2538	this set
--nldesign-header-border-width	1px		this set
--nldesign-header-height	60px		this set
--nldesign-header-link-color	var(--nldesign-color-header-text)	#7499de	this set
--nldesign-header-logo-background	var(--c-blue-cobalt)	#6f93d6	this set
--nldesign-header-logo-clip	var(--hex-pointy-top)		this set
--nldesign-header-logo-color	var(--c-white)	#9e9e9e	this set
--nldesign-header-logo-font	var(--conduction-typography-font-family-heading)		this set
--nldesign-header-logo-font-size	18px		this set
--nldesign-header-logo-font-weight	700		this set
--nldesign-header-logo-gap	10px		this set
--nldesign-header-logo-inset	0px		this set
--nldesign-header-logo-size	32px		this set
--nldesign-header-nav-gap	0px		this set
--nldesign-header-padding-inline	56px		this set
--nldesign-header-position	sticky		this set
--nldesign-header-wordmark-font	`var(
--conduction-typography-font-family-heading
)`		this set
--nldesign-header-wordmark-size	22px		this set
--nldesign-header-wordmark-spacing	-0.44px		this set
--nldesign-header-wordmark-transform	none		this set
--nldesign-header-wordmark-weight	700		this set
--nldesign-header-z-index	100		this set
--nldesign-hero-action-border-width	1px		this set
--nldesign-hero-action-decoration	none		this set
--nldesign-hero-action-font-size	15px		this set
--nldesign-hero-action-font-weight	500		this set
--nldesign-hero-action-gap	16px		this set
--nldesign-hero-action-line-height	22.5px		this set
--nldesign-hero-action-padding	13px 22px		this set
--nldesign-hero-action-primary-background	var(--c-orange-knvb)	#d75b17	this set
--nldesign-hero-action-primary-color	var(--c-cobalt-900)	#d0ddf5	this set
--nldesign-hero-action-radius	6px		this set
--nldesign-hero-action-secondary-background	var(--c-white)	#141414	this set
--nldesign-hero-action-secondary-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-hero-body-color	var(--c-cobalt-100)	#7792c5	this set
--nldesign-hero-body-gap	32px		this set
--nldesign-hero-body-line-height	33px		this set
--nldesign-hero-body-measure	840px		this set
--nldesign-hero-body-size	22px		this set
--nldesign-hero-body-weight	400		this set
--nldesign-hero-cell-accent-background	var(--c-orange-knvb)	#d75b17	this set
--nldesign-hero-cell-accent-color	var(--c-cobalt-900)	#b9cbed	this set
--nldesign-hero-cell-background	rgba(255, 255, 255, 0.08)	#14141414	this set
--nldesign-hero-cell-block-size	106px		this set
--nldesign-hero-cell-clip	var(--hex-pointy-top)		this set
--nldesign-hero-cell-color	var(--c-white)	#9e9e9e	this set
--nldesign-hero-cell-font-size	22px		this set
--nldesign-hero-cell-font-weight	700		this set
--nldesign-hero-cell-size	92px		this set
--nldesign-hero-cell-step-block	78px		this set
--nldesign-hero-column-gap	64px		this set
--nldesign-hero-padding-block-end	64px		this set
--nldesign-hero-padding-block-start	56px		this set
--nldesign-hero-radius	0px		this set
--nldesign-hero-title-color	var(--conduction-color-text-inverse)	#9e9e9e	this set
--nldesign-hero-title-font	var(--conduction-typography-font-family-heading)		this set
--nldesign-hero-title-gap	20px		this set
--nldesign-hero-title-icon-background	var(--c-orange-knvb)	#d75b17	this set
--nldesign-hero-title-icon-block-size	92px		this set
--nldesign-hero-title-icon-clip	var(--hex-pointy-top)		this set
--nldesign-hero-title-icon-color	var(--c-white)	#9e9e9e	this set
--nldesign-hero-title-icon-gap	22px		this set
--nldesign-hero-title-icon-size	80px		this set
--nldesign-hero-title-line-height	1.05		this set
--nldesign-hero-title-size	clamp(32px, 28px + 2.5vw, 64px)		this set
--nldesign-hero-title-weight	700		this set
--nldesign-list-gap	16px		this set
--nldesign-nav-font-size	14px		this set
--nldesign-nav-font-weight	500		this set
--nldesign-nav-item-padding-inline	12px		this set
--nldesign-nav-link-color	var(--c-blue-cobalt)	#7499de	this set
--nldesign-section-gap	48px		this set
--radius-lg	10px		this set
--radius-md	6px		this set
--radius-pill	999px		this set
--radius-sm	4px		this set
--radius-xl	16px		this set
--shadow-1	0 1px 2px rgba(33, 70, 139, 0.08)		this set
--shadow-2	0 2px 8px rgba(33, 70, 139, 0.10)		this set
--shadow-3	0 8px 24px rgba(33, 70, 139, 0.12)		this set
--space-1	4px		this set
--space-10	40px		this set
--space-12	48px		this set
--space-16	64px		this set
--space-2	8px		this set
--space-3	12px		this set
--space-4	16px		this set
--space-5	20px		this set
--space-6	24px		this set
--space-8	32px		this set
--tilburg-color-black	var(--c-cobalt-900)	#b9cbed	this set
--tilburg-color-black-txt	var(--conduction-color-text-default)	#6f93d6	this set
--tilburg-color-blue-100	var(--c-cobalt-100)	#1a2538	this set
--tilburg-color-blue-200	var(--c-cobalt-200)	#2c3957	this set
--tilburg-color-blue-300	var(--c-cobalt-300)	#495c82	this set
--tilburg-color-blue-400	var(--c-cobalt-400)	#5e77ad	this set
--tilburg-color-blue-500	var(--c-cobalt-500)	#6f93d6	this set
--tilburg-color-gray-100	var(--c-cobalt-50)	#131c2a	this set
--tilburg-color-gray-200	var(--c-cobalt-50)	#131c2a	this set
--tilburg-color-gray-300	var(--c-cobalt-100)	#1a2538	this set
--tilburg-color-gray-400	var(--c-cobalt-200)	#2c3957	this set
--tilburg-color-gray-50	var(--conduction-color-background-default)	#141414	this set
--tilburg-color-gray-500	var(--c-cobalt-300)	#495c82	this set
--tilburg-color-gray-600	var(--c-cobalt-400)	#5e77ad	this set
--tilburg-color-gray-700	var(--c-cobalt-600)	#81a0dc	this set
--tilburg-color-gray-800	var(--c-cobalt-700)	#95afe2	this set
--tilburg-color-gray-900	var(--c-cobalt-800)	#a7bce6	this set
--tilburg-color-gray-950	var(--c-cobalt-900)	#b9cbed	this set
--tilburg-color-white	var(--c-white)	#141414	this set
--tilburg-document-font-family	var(--conduction-typography-font-family-body)		this set
--tilburg-focus-background-color	var(--conduction-color-brand-secondary)	#d75b17	this set
--tilburg-footer-background-color	var(--c-cobalt-900)	#b9cbed	this set
--tilburg-footer-color	var(--conduction-color-text-inverse)	#9e9e9e	this set
--tilburg-footer-icon-color	var(--conduction-color-text-inverse)	#9e9e9e	this set
--tilburg-footer-link-color	var(--conduction-color-text-inverse)	#9e9e9e	this set
--tilburg-footer-link-hover-color	var(--conduction-color-text-accent)	#f58547	this set
--tilburg-footer-link-hover-text-decoration	underline		this set
--tilburg-footer-link-text-decoration	none		this set
--tilburg-footer-marker-color	var(--conduction-color-brand-secondary)	#d75b17	this set
--tilburg-header-background-color	var(--nldesign-color-header-background)	#141414	this set
--tilburg-header-logo-text-color	var(--nldesign-color-header-text)	#7499de	this set
--tilburg-heading-font-family	var(--conduction-typography-font-family-heading)		this set
--tilburg-logo-color	var(--nldesign-color-header-text)	#7499de	this set
--tilburg-navigation-font-family	var(--conduction-typography-font-family-heading)		this set
--tilburg-search-card-background-color	var(--conduction-color-background-default)	#141414	this set
--tilburg-search-card-blue-background-color	var(--conduction-color-background-muted)	#131c2a	this set
--tilburg-search-card-border-color	var(--conduction-color-border-default)	#2c3957	this set
--tilburg-search-card-hover-border-color	var(--conduction-color-border-strong)	#6f93d6	this set
--tilburg-typography-font-family-primary	var(--conduction-typography-font-family-heading)		this set
--tilburg-typography-font-family-secondary	var(--conduction-typography-font-family-body)		this set
--utrecht-alert-error-color	var(--conduction-color-status-error)	#e45864	this set
--utrecht-alert-ok-color	var(--c-mint-500)	#6ad2a1	this set
--utrecht-alert-warning-color	var(--c-gold-500)	#e5be57	this set
--utrecht-button-border-radius	var(--radius-md)		this set
--utrecht-button-font-family	var(--conduction-typography-font-family-body)		this set
--utrecht-button-primary-action-background-color	var(--conduction-color-brand-primary)	#6f93d6	this set
--utrecht-button-primary-action-color	var(--conduction-color-text-inverse)	#9e9e9e	this set
--utrecht-button-primary-action-hover-background-color	var(--c-cobalt-600)	#81a0dc	this set
--utrecht-button-secondary-action-background-color	var(--conduction-color-background-default)	#141414	this set
--utrecht-button-secondary-action-color	var(--conduction-color-brand-primary)	#7499de	this set
--utrecht-card-heading-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-document-background-color	var(--conduction-color-background-default)	#141414	this set
--utrecht-document-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-document-font-family	var(--conduction-typography-font-family-body)		this set
--utrecht-document-font-size	var(--fs-base)		this set
--utrecht-document-line-height	var(--lh-normal)		this set
--utrecht-focus-outline-color	var(--conduction-color-brand-secondary)	#d75b17	this set
--utrecht-heading-1-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-1-font-family	var(--conduction-typography-font-family-heading)		this set
--utrecht-heading-1-font-size	var(--fs-5xl)		this set
--utrecht-heading-1-line-height	var(--lh-tight)		this set
--utrecht-heading-2-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-2-font-family	var(--conduction-typography-font-family-heading)		this set
--utrecht-heading-2-font-size	var(--fs-3xl)		this set
--utrecht-heading-3-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-3-font-family	var(--conduction-typography-font-family-heading)		this set
--utrecht-heading-3-font-size	var(--fs-2xl)		this set
--utrecht-heading-4-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-5-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-6-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-heading-font-family	var(--conduction-typography-font-family-heading)		this set
--utrecht-link-color	var(--conduction-color-link-default)	#7499de	this set
--utrecht-link-hover-color	var(--conduction-color-link-hover)	#f58547	this set
--utrecht-link-text-decoration	underline		this set
--utrecht-link-visited-color	var(--conduction-color-link-default)	#7499de	this set
--utrecht-page-footer-background-color	var(--c-cobalt-900)	#b9cbed	this set
--utrecht-page-header-background-color	var(--nldesign-color-header-background)	#141414	this set
--utrecht-page-header-color	var(--nldesign-color-header-text)	#7499de	this set
--utrecht-paragraph-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-paragraph-font-family	var(--conduction-typography-font-family-body)		this set
--utrecht-textbox-border-color	var(--conduction-color-border-default)	#7b91c1	this set
--utrecht-textbox-border-radius	var(--radius-md)		this set
--utrecht-textbox-color	var(--conduction-color-text-default)	#7499de	this set
--utrecht-textbox-font-family	var(--conduction-typography-font-family-body)		this set