Basisschool De Wilgenboom
Token set wilgenboom: 92 declared by this set, 129 from the defaults layer.
Contrast: primary text on primary 6.32:1, primary on background 5.84:1 (pass).
Colours (Kleuren)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-color-background-dark |  #EDEFF2 |  #1d2026 | this set | Background dark, Table header background |
--nldesign-color-background-darker |  #D3D8DF |  #2d333c | this set | Background darker |
--nldesign-color-background-hover |  #F0F1F3 |  #1d1f23 | this set | Main background color |
--nldesign-color-border |  #E4E6EA |  #24272d | this set | Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color |
--nldesign-color-border-dark |  #8A929E |  #656c78 | this set | Border dark, Border max contrast |
--nldesign-color-button-primary-background |  #2F6B4A |  #8cc8a7 | this set | |
--nldesign-color-button-primary-border | #2F6B4A | #8cc8a7 | this set | |
--nldesign-color-button-primary-hover |  #1F4A33 |  #a7d6bd | this set | |
--nldesign-color-button-primary-text |  #ffffff |  #3e3e3e | this set | |
--nldesign-color-error |  #B30000 |  #f54949 | this set | Border error, Element error, Error color, Text error, Text input invalid |
--nldesign-color-error-hover |  #A30000 |  #f65656 | this set | Error hover |
--nldesign-color-error-rgb | 179, 0, 0 | 245, 73, 73 | this set | Error text color |
--nldesign-color-favorite |  #e17000 |  #f48c25 | defaults | Background blur filter |
--nldesign-color-focus |  rgba(47, 107, 74, 0.5) |  #8cc8a780 | this set | Button focus ring |
--nldesign-color-focus-rgb | 47, 107, 74 | 140, 200, 167 | this set | |
--nldesign-color-header-background | #ffffff |  #141414 | this set | |
--nldesign-color-header-text |  #1B1C1D |  #e2e3e4 | this set | |
--nldesign-color-info | #2F6B4A | #8cc8a7 | this set | Info color, Info hover color, Text input focus |
--nldesign-color-info-rgb | 47, 107, 74 | 140, 200, 167 | this set | |
--nldesign-color-link | #2F6B4A | #8cc8a7 | this set | Link colour |
--nldesign-color-link-hover | #1F4A33 | #a7d6bd | this set | 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 | #ffffff | #141414 | this set | |
--nldesign-color-placeholder-dark |  #cccccc |  #3f3f3f | defaults | Placeholder dark |
--nldesign-color-placeholder-light |  #e5e5e5 |  #2a2a2a | defaults | Placeholder light |
--nldesign-color-primary | #2F6B4A |  #60b988 | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more |
--nldesign-color-primary-hover | #1F4A33 |  #1f4a33 | this set | Primary button hover, Primary element hover, Primary hover color |
--nldesign-color-primary-light |  #E8F1EB |  #1c2c21 | this set | Primary element light, Tertiary button hover, --color-primary-element-text-dark |
--nldesign-color-primary-light-hover |  #DBE8E0 |  #24362b | this set | Primary element light hover, Primary light hover, Tertiary button pressed |
--nldesign-color-primary-text | #ffffff |  #111111 | this set | Badge number, Primary button label, Primary element text, Primary text color |
--nldesign-color-success |  #1E6B2A |  #8ad896 | this set | Border success, Element success, Success color, Text success |
--nldesign-color-success-rgb | 30, 107, 42 | 138, 216, 150 | this set | Success hover color |
--nldesign-color-text | #1B1C1D | #e2e3e4 | 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 | #ffffff |  #9e9e9e | this set | Muted text default color |
--nldesign-color-text-muted |  #5E6168 |  #999ca3 | this set | Text lighter, Text max contrast |
--nldesign-color-warning |  #7A4F00 |  #f8ca77 | this set | Element warning, Text warning, Warning color |
--nldesign-color-warning-rgb | 122, 79, 0 | 248, 202, 119 | this set | Warning hover color |
--nldesign-component-badge-background-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cc8a7 | defaults | ||
--nldesign-component-badge-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #3e3e3e | defaults | ||
--nldesign-component-button-active-background-color | `var( | |||
| --nldesign-color-primary-light-hover | ||||
| )` | #24362b | defaults | ||
--nldesign-component-button-active-color | `var( | |||
| --nldesign-color-primary | ||||
| )` |  #94d0af | defaults | ||
--nldesign-component-button-background-color | transparent | defaults | ||
--nldesign-component-button-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cc8a7 | defaults | ||
--nldesign-component-button-color | var(--nldesign-color-primary) | #94d0af | 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 | ||||
| )` | #8cc8a780 | defaults | ||
--nldesign-component-button-hover-background-color | `var( | |||
| --nldesign-color-primary-light | ||||
| )` | #1c2c21 | defaults | ||
--nldesign-component-button-hover-border-color | `var( | |||
| --nldesign-color-primary-hover | ||||
| )` | #a7d6bd | defaults | ||
--nldesign-component-button-hover-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #94d0af | defaults | ||
--nldesign-component-button-primary-action-background-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cc8a7 | defaults | ||
--nldesign-component-button-primary-action-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cc8a7 | defaults | ||
--nldesign-component-button-primary-action-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #3e3e3e | defaults | ||
--nldesign-component-button-primary-action-hover-background-color | `var( | |||
| --nldesign-color-primary-hover | ||||
| )` | #a7d6bd | defaults | ||
--nldesign-component-button-primary-action-hover-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #3e3e3e | defaults | ||
--nldesign-component-button-secondary-action-background-color | transparent | defaults | ||
--nldesign-component-button-secondary-action-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cc8a7 | defaults | ||
--nldesign-component-button-secondary-action-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #94d0af | defaults | ||
--nldesign-component-button-secondary-action-hover-background-color | `var( | |||
| --nldesign-color-primary-light | ||||
| )` | #1c2c21 | defaults | ||
--nldesign-component-form-field-label-color | var(--nldesign-color-text) | #e2e3e4 | defaults | |
--nldesign-component-form-fieldset-border-color | `var( | |||
| --nldesign-color-border | ||||
| )` | #24272d | defaults | ||
--nldesign-component-form-select-border-color | var(--nldesign-color-border) | #24272d | defaults | |
--nldesign-component-form-select-focus-border-color | var(--nldesign-color-info) | #8cc8a7 | defaults | |
--nldesign-component-heading-1-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-2-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-3-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-4-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-5-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-6-color | var(--nldesign-component-heading-color) | #e2e3e4 | defaults | |
--nldesign-component-heading-color | var(--nldesign-color-text) | #e2e3e4 | defaults | |
--nldesign-component-link-color | var(--nldesign-color-link) | #94d0af | defaults | |
--nldesign-component-link-hover-color | var(--nldesign-color-link-hover) |  #b5e0c9 | defaults | |
--nldesign-component-link-visited-color | var(--nldesign-color-link-visited) |  #cea0eb | defaults | |
--nldesign-component-ordered-list-color | `var( | |||
| --nldesign-color-text | ||||
| )` | #e2e3e4 | defaults | ||
--nldesign-component-paragraph-color | var(--nldesign-color-text) | #e2e3e4 | defaults | |
--nldesign-component-separator-border-color | var(--nldesign-color-border) | #24272d | defaults | |
--nldesign-component-table-border-color | var(--nldesign-color-border) | #24272d | defaults | |
--nldesign-component-table-header-background-color | `var( | |||
| --nldesign-color-background-dark | ||||
| )` | #1d2026 | defaults | ||
--nldesign-component-table-header-color | var(--nldesign-color-text) | #e2e3e4 | defaults | |
--nldesign-component-table-row-hover-background-color | `var( | |||
| --nldesign-color-background-hover | ||||
| )` | #1d1f23 | defaults | ||
--nldesign-component-textbox-background-color | #ffffff | #141414 | defaults | |
--nldesign-component-textbox-border-color | var(--nldesign-color-border) |  #5d6474 | defaults | |
--nldesign-component-textbox-color | var(--nldesign-color-text) | #e2e3e4 | defaults | |
--nldesign-component-textbox-disabled-background-color | #e5e5e5 | #2a2a2a | defaults | |
--nldesign-component-textbox-disabled-color | #696969 | #9e9e9e | defaults | |
--nldesign-component-textbox-focus-border-color | var(--nldesign-color-info) | #8cc8a7 | defaults | |
--nldesign-component-textbox-hover-border-color | `var( | |||
| --nldesign-color-border-dark | ||||
| )` | #656c78 | defaults | ||
--nldesign-component-textbox-invalid-border-color | var(--nldesign-color-error) | #f54949 | defaults | |
--nldesign-component-unordered-list-color | `var( | |||
| --nldesign-color-text | ||||
| )` | #e2e3e4 | 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 | 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif | this set | Font family, --nldesign-component-button-font-family, --nldesign-component-textbox-font-family | |
--nldesign-font-weight-default | 400 | defaults | Base 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 | 8px | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | |
--nldesign-border-radius-large | 12px | this set | Container radius | |
--nldesign-border-radius-pill | 100px | this set | Badge shape, Border radius pill | |
--nldesign-border-radius-rounded | 28px | this set | Border radius rounded | |
--nldesign-border-radius-small | 4px | 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 | 1px solid rgba(138, 146, 158, 0.25) | this set | ||
--nldesign-logo-height | auto | defaults | ||
--nldesign-logo-width | 153px | this set | ||
--nldesign-size-lint | 0px | defaults | ||
--nldesign-size-lint-height | 0px | defaults |
Other tokens (Overige tokens)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-animation-easing | ease | defaults | ||
--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-brand-stripe-color-1 | #2F6B4A | #8cc8a7 | this set | |
--nldesign-brand-stripe-color-2 |  #F5B82E |  #cc9414 | this set | |
--nldesign-brand-stripe-color-3 | #2F6B4A | #8cc8a7 | this set | |
--nldesign-brand-stripe-height | 17px | this set | ||
--nldesign-brand-stripe-image | url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='840' height='17'><rect width='840' height='3' fill='%232F6B4A'/><g transform='translate(0 3)'><path fill='%232F6B4A' d='M0 0h6v11a3 3 0 0 1-6 0zM12 0h6v5a3 3 0 0 1-6 0zM24 0h6v8a3 3 0 0 1-6 0zM36 0h6v3a3 3 0 0 1-6 0zM60 0h6v6a3 3 0 0 1-6 0zM72 0h6v2a3 3 0 0 1-6 0zM84 0h6v10a3 3 0 0 1-6 0zM96 0h6v4a3 3 0 0 1-6 0zM108 0h6v7a3 3 0 0 1-6 0zM120 0h6v11a3 3 0 0 1-6 0zM144 0h6v8a3 3 0 0 1-6 0zM156 0h6v3a3 3 0 0 1-6 0zM168 0h6v9a3 3 0 0 1-6 0zM180 0h6v6a3 3 0 0 1-6 0zM192 0h6v2a3 3 0 0 1-6 0zM204 0h6v10a3 3 0 0 1-6 0zM228 0h6v7a3 3 0 0 1-6 0zM240 0h6v11a3 3 0 0 1-6 0zM252 0h6v5a3 3 0 0 1-6 0zM264 0h6v8a3 3 0 0 1-6 0zM276 0h6v3a3 3 0 0 1-6 0zM288 0h6v9a3 3 0 0 1-6 0zM312 0h6v2a3 3 0 0 1-6 0zM324 0h6v10a3 3 0 0 1-6 0zM336 0h6v4a3 3 0 0 1-6 0zM348 0h6v7a3 3 0 0 1-6 0zM360 0h6v11a3 3 0 0 1-6 0zM372 0h6v5a3 3 0 0 1-6 0zM396 0h6v3a3 3 0 0 1-6 0zM408 0h6v9a3 3 0 0 1-6 0zM420 0h6v6a3 3 0 0 1-6 0zM432 0h6v2a3 3 0 0 1-6 0zM444 0h6v10a3 3 0 0 1-6 0zM456 0h6v4a3 3 0 0 1-6 0zM480 0h6v11a3 3 0 0 1-6 0zM492 0h6v5a3 3 0 0 1-6 0zM504 0h6v8a3 3 0 0 1-6 0zM516 0h6v3a3 3 0 0 1-6 0zM528 0h6v9a3 3 0 0 1-6 0zM540 0h6v6a3 3 0 0 1-6 0zM564 0h6v10a3 3 0 0 1-6 0zM576 0h6v4a3 3 0 0 1-6 0zM588 0h6v7a3 3 0 0 1-6 0zM600 0h6v11a3 3 0 0 1-6 0zM612 0h6v5a3 3 0 0 1-6 0zM624 0h6v8a3 3 0 0 1-6 0zM648 0h6v9a3 3 0 0 1-6 0zM660 0h6v6a3 3 0 0 1-6 0zM672 0h6v2a3 3 0 0 1-6 0zM684 0h6v10a3 3 0 0 1-6 0zM696 0h6v4a3 3 0 0 1-6 0zM708 0h6v7a3 3 0 0 1-6 0zM732 0h6v5a3 3 0 0 1-6 0zM744 0h6v8a3 3 0 0 1-6 0zM756 0h6v3a3 3 0 0 1-6 0zM768 0h6v9a3 3 0 0 1-6 0zM780 0h6v6a3 3 0 0 1-6 0zM792 0h6v2a3 3 0 0 1-6 0zM816 0h6v4a3 3 0 0 1-6 0zM828 0h6v7a3 3 0 0 1-6 0z'/><path fill='%23F5B82E' d='M48 0h6v9a3 3 0 0 1-6 0zM132 0h6v5a3 3 0 0 1-6 0zM216 0h6v4a3 3 0 0 1-6 0zM300 0h6v6a3 3 0 0 1-6 0zM384 0h6v8a3 3 0 0 1-6 0zM468 0h6v7a3 3 0 0 1-6 0zM552 0h6v2a3 3 0 0 1-6 0zM636 0h6v3a3 3 0 0 1-6 0zM720 0h6v11a3 3 0 0 1-6 0zM804 0h6v10a3 3 0 0 1-6 0z'/></g></svg>") | this set | ||
--nldesign-brand-stripe-image-inverse | url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='840' height='14'><path fill='%235F9A78' d='M0 0h6v11a3 3 0 0 1-6 0zM12 0h6v5a3 3 0 0 1-6 0zM24 0h6v8a3 3 0 0 1-6 0zM36 0h6v3a3 3 0 0 1-6 0zM60 0h6v6a3 3 0 0 1-6 0zM72 0h6v2a3 3 0 0 1-6 0zM84 0h6v10a3 3 0 0 1-6 0zM96 0h6v4a3 3 0 0 1-6 0zM108 0h6v7a3 3 0 0 1-6 0zM120 0h6v11a3 3 0 0 1-6 0zM144 0h6v8a3 3 0 0 1-6 0zM156 0h6v3a3 3 0 0 1-6 0zM168 0h6v9a3 3 0 0 1-6 0zM180 0h6v6a3 3 0 0 1-6 0zM192 0h6v2a3 3 0 0 1-6 0zM204 0h6v10a3 3 0 0 1-6 0zM228 0h6v7a3 3 0 0 1-6 0zM240 0h6v11a3 3 0 0 1-6 0zM252 0h6v5a3 3 0 0 1-6 0zM264 0h6v8a3 3 0 0 1-6 0zM276 0h6v3a3 3 0 0 1-6 0zM288 0h6v9a3 3 0 0 1-6 0zM312 0h6v2a3 3 0 0 1-6 0zM324 0h6v10a3 3 0 0 1-6 0zM336 0h6v4a3 3 0 0 1-6 0zM348 0h6v7a3 3 0 0 1-6 0zM360 0h6v11a3 3 0 0 1-6 0zM372 0h6v5a3 3 0 0 1-6 0zM396 0h6v3a3 3 0 0 1-6 0zM408 0h6v9a3 3 0 0 1-6 0zM420 0h6v6a3 3 0 0 1-6 0zM432 0h6v2a3 3 0 0 1-6 0zM444 0h6v10a3 3 0 0 1-6 0zM456 0h6v4a3 3 0 0 1-6 0zM480 0h6v11a3 3 0 0 1-6 0zM492 0h6v5a3 3 0 0 1-6 0zM504 0h6v8a3 3 0 0 1-6 0zM516 0h6v3a3 3 0 0 1-6 0zM528 0h6v9a3 3 0 0 1-6 0zM540 0h6v6a3 3 0 0 1-6 0zM564 0h6v10a3 3 0 0 1-6 0zM576 0h6v4a3 3 0 0 1-6 0zM588 0h6v7a3 3 0 0 1-6 0zM600 0h6v11a3 3 0 0 1-6 0zM612 0h6v5a3 3 0 0 1-6 0zM624 0h6v8a3 3 0 0 1-6 0zM648 0h6v9a3 3 0 0 1-6 0zM660 0h6v6a3 3 0 0 1-6 0zM672 0h6v2a3 3 0 0 1-6 0zM684 0h6v10a3 3 0 0 1-6 0zM696 0h6v4a3 3 0 0 1-6 0zM708 0h6v7a3 3 0 0 1-6 0zM732 0h6v5a3 3 0 0 1-6 0zM744 0h6v8a3 3 0 0 1-6 0zM756 0h6v3a3 3 0 0 1-6 0zM768 0h6v9a3 3 0 0 1-6 0zM780 0h6v6a3 3 0 0 1-6 0zM792 0h6v2a3 3 0 0 1-6 0zM816 0h6v4a3 3 0 0 1-6 0zM828 0h6v7a3 3 0 0 1-6 0z'/><path fill='%23F5B82E' d='M48 0h6v9a3 3 0 0 1-6 0zM132 0h6v5a3 3 0 0 1-6 0zM216 0h6v4a3 3 0 0 1-6 0zM300 0h6v6a3 3 0 0 1-6 0zM384 0h6v8a3 3 0 0 1-6 0zM468 0h6v7a3 3 0 0 1-6 0zM552 0h6v2a3 3 0 0 1-6 0zM636 0h6v3a3 3 0 0 1-6 0zM720 0h6v11a3 3 0 0 1-6 0zM804 0h6v10a3 3 0 0 1-6 0z'/></svg>") | this set | ||
--nldesign-brand-stripe-ratio-1 | 3 | this set | ||
--nldesign-brand-stripe-ratio-2 | 1 | this set | ||
--nldesign-brand-stripe-ratio-3 | 3 | this set | ||
--nldesign-color-accent | #F5B82E | #cc9414 | this set | |
--nldesign-color-accent-light |  #FDF3D7 |  #453507 | this set | |
--nldesign-color-accent-text |  #6B4A00 |  #ffde94 | this set | |
--nldesign-color-footer-background | #1F4A33 | #a7d6bd | this set | |
--nldesign-color-footer-text | #ffffff | #3e3e3e | this set | |
--nldesign-component-content-card-shadow-color |  rgba(27, 28, 29, 0.04) |  #d2d3d40a | this set | |
--nldesign-component-content-surface-background-color |  #F5F6F8 |  #171a20 | this set | |
--nldesign-component-navigation-active-background-color | #F5B82E | #cc9414 | this set | |
--nldesign-component-navigation-active-color | #6B4A00 | #ffde94 | this set | |
--nldesign-component-navigation-badge-background-color | #F5B82E | #cc9414 | this set | |
--nldesign-component-navigation-badge-color |  #1A1A1A | #111111 | this set | |
--nldesign-component-status-badge-error-background-color |  #FCEDEC |  #310d0a | this set | |
--nldesign-component-status-badge-error-color | #A30000 |  #ff5c5c | this set | |
--nldesign-component-status-badge-info-background-color | #E8F1EB | #1c2c21 | this set | |
--nldesign-component-status-badge-info-color | #1F4A33 | #b5e0c9 | this set | |
--nldesign-component-status-badge-success-background-color |  #E7F3EA |  #192e1e | this set | |
--nldesign-component-status-badge-success-color | #1E6B2A |  #94e1a0 | this set | |
--nldesign-component-status-badge-warning-background-color |  #FFF4DE |  #412d03 | this set | |
--nldesign-component-status-badge-warning-color | #7A4F00 |  #ffd485 | this set | |
--nldesign-hero-action-background-color | #2F6B4A | #8cc8a7 | this set | |
--nldesign-hero-action-color | #ffffff | #9e9e9e | this set | |
--nldesign-hero-background-color | #E8F1EB | #1c2c21 | this set | |
--nldesign-hero-body-color | #1B1C1D | #111111 | this set | |
--nldesign-hero-decoration-image | var(--nldesign-emblem-url) | this set | ||
--nldesign-hero-title-color | #1F4A33 | #111111 | this set | |
--nldesign-login-watermark-image | url('../../img/logos/wilgenboom-emblem-grey.svg') | this set | ||
--nldesign-logo-url | url('../../img/logos/wilgenboom.svg') | url('../../../img/logos/wilgenboom-dark.svg') | this set | |
--nldesign-website-border-radius | 10px | this set | ||
--nldesign-website-border-radius-large | 14px | this set | ||
--nldesign-website-logo-height | 50px | this set | ||
--nldesign-website-logo-text-size | 0 | this set | ||
--nldesign-website-logo-width | 238px | this set | ||
--wilgenboom-color-accent | #F5B82E | #cc9414 | this set | |
--wilgenboom-color-accent-light | #FDF3D7 | #453507 | this set | |
--wilgenboom-color-accent-text | #6B4A00 | #ffde94 | this set | |
--wilgenboom-color-ink | #1B1C1D |  #d2d3d4 | this set | |
--wilgenboom-color-line | #E4E6EA | #24272d | this set | |
--wilgenboom-color-main | #2F6B4A | #8cc8a7 | this set | |
--wilgenboom-color-main-deep | #1F4A33 | #a7d6bd | this set | |
--wilgenboom-color-main-light | #E8F1EB | #1c2c21 | this set | |
--wilgenboom-color-muted | #5E6168 |  #93969c | this set | |
--wilgenboom-color-surface | #F5F6F8 | #171a20 | this set |