La Frankendesk
Token set frankendesk: 109 declared by this set, 148 from the defaults layer.
Contrast: primary text on primary 7.76:1, primary on background 7.76:1 (pass).
Colours (Kleuren)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-color-background-dark |  #e2e2ea |  #23232f | this set | Background dark, Table header background |
--nldesign-color-background-darker |  #c5c6d5 |  #353747 | this set | Background darker |
--nldesign-color-background-hover |  #f0f0f3 |  #1d1d23 | this set | --color-main-background |
--nldesign-color-border | #c5c6d5 | #353747 | this set | Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color |
--nldesign-color-border-dark |  #75758a |  #767689 | this set | 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 | #ffffff |  #141414 | this set | |
--nldesign-color-header-text |  #1b1b23 |  #dcdce4 | 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 | #154273 | #81afe2 | defaults | 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 | #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 |  #4844ad |  #9c99d7 | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more |
--nldesign-color-primary-hover |  #36347d | #36347d | this set | Primary button hover, Primary element hover, Primary hover color |
--nldesign-color-primary-light |  #eef1fa |  #0f162c | this set | Primary element light, Tertiary button hover, --color-primary-element-text-dark |
--nldesign-color-primary-light-hover |  #dde2f5 |  #141c3a | 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 |  #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 | #1b1b23 | #dcdce4 | 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 | --color-text-maxcontrast-default |
--nldesign-color-text-muted | #75758a |  #9696a6 | 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 | ||||
| )` |  #5956b5 | defaults | ||
--nldesign-component-badge-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #9e9e9e | defaults | ||
--nldesign-component-button-active-background-color | `var( | |||
| --nldesign-color-primary-light-hover | ||||
| )` | #141c3a | defaults | ||
--nldesign-component-button-active-color | `var( | |||
| --nldesign-color-primary | ||||
| )` |  #7774c8 | defaults | ||
--nldesign-component-button-background-color | transparent | defaults | ||
--nldesign-component-button-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #5956b5 | defaults | ||
--nldesign-component-button-color | var(--nldesign-color-primary) | #7774c8 | 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 | ||||
| )` | #0f162c | defaults | ||
--nldesign-component-button-hover-border-color | `var( | |||
| --nldesign-color-primary-hover | ||||
| )` |  #7f7dc3 | defaults | ||
--nldesign-component-button-hover-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #7774c8 | defaults | ||
--nldesign-component-button-primary-action-background-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #5956b5 | defaults | ||
--nldesign-component-button-primary-action-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #5956b5 | 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 | ||||
| )` | #7f7dc3 | 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 | ||||
| )` | #5956b5 | defaults | ||
--nldesign-component-button-secondary-action-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #7774c8 | defaults | ||
--nldesign-component-button-secondary-action-hover-background-color | `var( | |||
| --nldesign-color-primary-light | ||||
| )` | #0f162c | defaults | ||
--nldesign-component-form-field-label-color | var(--nldesign-color-text) | #dcdce4 | defaults | |
--nldesign-component-form-fieldset-border-color | `var( | |||
| --nldesign-color-border | ||||
| )` | #353747 | defaults | ||
--nldesign-component-form-select-border-color | var(--nldesign-color-border) | #353747 | defaults | |
--nldesign-component-form-select-focus-border-color | var(--nldesign-color-info) | #39adf5 | defaults | |
--nldesign-component-heading-1-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-2-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-3-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-4-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-5-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-6-color | var(--nldesign-component-heading-color) | #dcdce4 | defaults | |
--nldesign-component-heading-color | var(--nldesign-color-text) | #dcdce4 | defaults | |
--nldesign-component-link-color | var(--nldesign-color-link) |  #8cb9ea | 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 | ||||
| )` | #dcdce4 | defaults | ||
--nldesign-component-paragraph-color | var(--nldesign-color-text) | #dcdce4 | defaults | |
--nldesign-component-separator-border-color | var(--nldesign-color-border) | #353747 | defaults | |
--nldesign-component-table-border-color | var(--nldesign-color-border) | #353747 | defaults | |
--nldesign-component-table-header-background-color | `var( | |||
| --nldesign-color-background-dark | ||||
| )` | #23232f | defaults | ||
--nldesign-component-table-header-color | var(--nldesign-color-text) | #dcdce4 | defaults | |
--nldesign-component-table-row-hover-background-color | `var( | |||
| --nldesign-color-background-hover | ||||
| )` | #1d1d23 | defaults | ||
--nldesign-component-textbox-background-color | #ffffff | #9e9e9e | defaults | |
--nldesign-component-textbox-border-color | var(--nldesign-color-border) |  #8f91ae | defaults | |
--nldesign-component-textbox-color | var(--nldesign-color-text) | #dcdce4 | 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 | ||||
| )` | #9696a6 | defaults | ||
--nldesign-component-textbox-invalid-border-color | var(--nldesign-color-error) |  #e75f55 | defaults | |
--nldesign-component-unordered-list-color | `var( | |||
| --nldesign-color-text | ||||
| )` | #dcdce4 | 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 | Inter, system-ui, -apple-system, 'Segoe UI', 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 | 4px | this set | Border radius element, Button corner, Select corner, Text input corner, --border-width-input | |
--nldesign-border-radius-large | 4px | this set | --border-radius-container | |
--nldesign-border-radius-pill | 100px | defaults | Badge shape, Border radius pill | |
--nldesign-border-radius-rounded | 4px | 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 | 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-body-font-family | Inter, system-ui, -apple-system, 'Segoe UI', sans-serif | this set | ||
--nldesign-card-background | #ffffff | #141414 | this set | |
--nldesign-card-body-color |  #6b6b80 |  #9595a7 | this set | |
--nldesign-card-body-line-height | 22px | this set | ||
--nldesign-card-body-size | 15px | this set | ||
--nldesign-card-border-color | #e2e2ea | #23232f | this set | |
--nldesign-card-border-width | 1px | this set | ||
--nldesign-card-gap | 8px | this set | ||
--nldesign-card-heading-color | #1b1b23 | #dcdce4 | this set | |
--nldesign-card-heading-size | 18px | this set | ||
--nldesign-card-heading-weight | 600 | this set | ||
--nldesign-card-padding | 24px | this set | ||
--nldesign-card-radius | 8px | this set | ||
--nldesign-card-shadow | none | this set | ||
--nldesign-card-shadow-hover | 0 2px 8px rgba(27, 27, 35, 0.10) | this set | ||
--nldesign-color-footer-background | #1b1b23 |  #cbcbd6 | this set | |
--nldesign-color-footer-text | #ffffff | #9e9e9e | this set | |
--nldesign-container-max | 1200px | this set | ||
--nldesign-container-padding-inline | 24px | this set | ||
--nldesign-footer-brand-color |  rgba(255, 255, 255, 0.75) |  #9e9e9ebf | this set | |
--nldesign-footer-brand-line-height | 22px | this set | ||
--nldesign-footer-brand-margin-block | 12px 0 | this set | ||
--nldesign-footer-brand-measure | 320px | this set | ||
--nldesign-footer-brand-size | 14px | this set | ||
--nldesign-footer-column-gap | 40px | this set | ||
--nldesign-footer-grid-columns | 320px repeat(auto-fill, 200px) | this set | ||
--nldesign-footer-heading-color |  rgba(255, 255, 255, 0.6) |  #9e9e9e99 | this set | |
--nldesign-footer-heading-line-height | 18px | this set | ||
--nldesign-footer-heading-margin-block-end | 14px | this set | ||
--nldesign-footer-heading-size | 13px | this set | ||
--nldesign-footer-heading-spacing | 0.8px | this set | ||
--nldesign-footer-heading-transform | uppercase | this set | ||
--nldesign-footer-heading-weight | 600 | this set | ||
--nldesign-footer-item-margin-block-end | 10px | this set | ||
--nldesign-footer-item-marker | none | this set | ||
--nldesign-footer-legal-color |  rgba(255, 255, 255, 0.55) |  #9e9e9e8c | this set | |
--nldesign-footer-legal-gap | 16px | this set | ||
--nldesign-footer-legal-line-height | 20px | this set | ||
--nldesign-footer-legal-link-color | rgba(255, 255, 255, 0.75) | #9e9e9ebf | this set | |
--nldesign-footer-legal-link-decoration | underline | 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.12) |  #9e9e9e1f | this set | |
--nldesign-footer-legal-rule-width | 1px | this set | ||
--nldesign-footer-legal-size | 13px | this set | ||
--nldesign-footer-link-color | #c5c6d5 | #8f91ae | this set | |
--nldesign-footer-link-line-height | 22px | this set | ||
--nldesign-footer-link-size | 15px | this set | ||
--nldesign-footer-padding-block | 56px | this set | ||
--nldesign-footer-padding-block-end | 32px | this set | ||
--nldesign-footer-social-border-color |  rgba(255, 255, 255, 0.2) |  #14141433 | this set | |
--nldesign-footer-social-border-width | 1px | this set | ||
--nldesign-footer-social-color |  rgba(255, 255, 255, 0.85) |  #9e9e9ed9 | this set | |
--nldesign-footer-social-gap | 8px | this set | ||
--nldesign-footer-social-margin-block | 24px 0 | this set | ||
--nldesign-footer-social-radius | 8px | this set | ||
--nldesign-footer-social-size | 40px | this set | ||
--nldesign-footer-wordmark-color | #ffffff | #9e9e9e | this set | |
--nldesign-footer-wordmark-line-height | 28px | this set | ||
--nldesign-footer-wordmark-size | 20px | this set | ||
--nldesign-footer-wordmark-weight | 700 | this set | ||
--nldesign-header-background | #ffffff | #141414 | this set | |
--nldesign-header-border-color | #e2e2ea | #23232f | this set | |
--nldesign-header-border-width | 1px | this set | ||
--nldesign-header-padding-inline | 40px | this set | ||
--nldesign-hero-body-color | #eef1fa |  #6984d3 | this set | |
--nldesign-hero-body-gap | 32px | this set | ||
--nldesign-hero-body-line-height | 1.5 | this set | ||
--nldesign-hero-body-measure | 62ch | this set | ||
--nldesign-hero-body-size | 20px | this set | ||
--nldesign-hero-body-weight | 400 | 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 | #ffffff | #9e9e9e | this set | |
--nldesign-hero-title-gap | 12px | this set | ||
--nldesign-hero-title-line-height | 1.1 | this set | ||
--nldesign-hero-title-size | 48px | this set | ||
--nldesign-hero-title-weight | 700 | this set | ||
--nldesign-list-gap | 16px | this set | ||
--nldesign-list-rule-color | #e2e2ea |  #8f8fae | this set | |
--nldesign-list-rule-width | 1px | this set | ||
--nldesign-logo-url | url('../../img/logos/frankendesk.svg') | 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 | #1b1b23 | #dcdce4 | this set | |
--nldesign-section-gap | 48px | this set |