Skip to main content

Summer Breeze

Token set summer-breeze: 47 declared by this set, 169 from the defaults layer.

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

Colours (Kleuren)​

TokenValueDark modeSourcePaints
--nldesign-color-background-dark #e0e1e2 #2c2e2fdefaultsBackground dark, Table header background
--nldesign-color-background-darker #d0d1d2 #3a3b3cdefaultsBackground darker
--nldesign-color-background-hover #e8e9ea #252728defaults--color-main-background
--nldesign-color-border #b4b4b4 #535353defaultsBorder color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color
--nldesign-color-border-dark #696969 #929292defaultsBorder dark, Border max contrast
--nldesign-color-button-primary-background #154273 #81afe2defaults
--nldesign-color-button-primary-border #154273 #81afe2defaults
--nldesign-color-button-primary-hover #1d5499 #6397dadefaults
--nldesign-color-button-primary-text #ffffff #9e9e9edefaults
--nldesign-color-error #d52b1e #d83d32defaultsBorder error, Element error, Error color, Text error, Text input invalid
--nldesign-color-error-hover #8b1a15 #e2726ddefaultsError hover
--nldesign-color-error-rgb213, 43, 30216, 61, 50defaults--color-error-text
--nldesign-color-favorite #e17000 #f48c25defaults--filter-background-blur
--nldesign-color-focus rgba(0, 123, 199, 0.5) #39adf580defaultsButton focus ring
--nldesign-color-focus-rgb0, 123, 19957, 173, 245defaults
--nldesign-color-header-background #ffffff #141414defaults
--nldesign-color-header-text #333333 #ccccccdefaults
--nldesign-color-info #007bc7 #39adf5defaultsInfo color, Text input focus, --color-info-hover
--nldesign-color-info-rgb0, 123, 19957, 173, 245defaults
--nldesign-color-link #154273 #81afe2defaultsLink colour
--nldesign-color-link-hover #007bc7 #39adf5defaultsLink hover colour
--nldesign-color-link-visited #42145f #c392e3defaults--nldesign-component-link-visited-color
--nldesign-color-logo-backgroundtransparentdefaults
--nldesign-color-nav-background #ffffff #141414defaults
--nldesign-color-placeholder-dark #cccccc #3f3f3fdefaultsPlaceholder dark
--nldesign-color-placeholder-light #e5e5e5 #2a2a2adefaultsPlaceholder light
--nldesign-color-primary #154273 #2f80d9defaultsBadge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more
--nldesign-color-primary-hover #1d5499 #1d5499defaultsPrimary button hover, Primary element hover, Primary hover color
--nldesign-color-primary-light #e8f0f8 #112131defaultsPrimary element light, Tertiary button hover, --color-primary-element-text-dark
--nldesign-color-primary-light-hover #d4e4f2 #172d41defaultsPrimary element light hover, Primary light hover, Tertiary button pressed
--nldesign-color-primary-text #ffffff #111111defaultsBadge number, Primary button label, Primary element text, Primary text color
--nldesign-color-success #39870c #9ceb6fdefaultsBorder success, Element success, Success color, Text success
--nldesign-color-success-rgb57, 135, 12156, 235, 111defaults--color-success-hover
--nldesign-color-text #333333 #ccccccdefaultsBody 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 #9e9e9edefaults--color-text-maxcontrast-default
--nldesign-color-text-muted #696969 #9e9e9edefaultsText lighter, Text max contrast
--nldesign-color-warning #e17000 #f48c25defaultsElement warning, Text warning, Warning color
--nldesign-color-warning-rgb225, 112, 0244, 140, 37defaults--color-warning-hover
--nldesign-component-badge-background-color`var(
--nldesign-color-primary
)` #81afe2defaults
--nldesign-component-badge-color`var(
--nldesign-color-primary-text
)` #9e9e9edefaults
--nldesign-component-button-active-background-color`var(
--nldesign-color-primary-light-hover
)` #172d41defaults
--nldesign-component-button-active-color`var(
--nldesign-color-primary
)` #8cb9eadefaults
--nldesign-component-button-background-colortransparentdefaults
--nldesign-component-button-border-color`var(
--nldesign-color-primary
)` #81afe2defaults
--nldesign-component-button-colorvar(--nldesign-color-primary) #8cb9eadefaults
--nldesign-component-button-disabled-background-color #e5e5e5 #2a2a2adefaults
--nldesign-component-button-disabled-border-color #b4b4b4 #535353defaults
--nldesign-component-button-disabled-color #696969 #9e9e9edefaults
--nldesign-component-button-focus-border-color`var(
--nldesign-color-focus
)` #39adf580defaults
--nldesign-component-button-hover-background-color`var(
--nldesign-color-primary-light
)` #112131defaults
--nldesign-component-button-hover-border-color`var(
--nldesign-color-primary-hover
)` #6397dadefaults
--nldesign-component-button-hover-color`var(
--nldesign-color-primary
)` #8cb9eadefaults
--nldesign-component-button-primary-action-background-color`var(
--nldesign-color-primary
)` #81afe2defaults
--nldesign-component-button-primary-action-border-color`var(
--nldesign-color-primary
)` #81afe2defaults
--nldesign-component-button-primary-action-color`var(
--nldesign-color-primary-text
)` #9e9e9edefaults
--nldesign-component-button-primary-action-hover-background-color`var(
--nldesign-color-primary-hover
)` #6397dadefaults
--nldesign-component-button-primary-action-hover-color`var(
--nldesign-color-primary-text
)` #9e9e9edefaults
--nldesign-component-button-secondary-action-background-colortransparentdefaults
--nldesign-component-button-secondary-action-border-color`var(
--nldesign-color-primary
)` #81afe2defaults
--nldesign-component-button-secondary-action-color`var(
--nldesign-color-primary
)` #8cb9eadefaults
--nldesign-component-button-secondary-action-hover-background-color`var(
--nldesign-color-primary-light
)` #112131defaults
--nldesign-component-form-field-label-colorvar(--nldesign-color-text) #ccccccdefaults
--nldesign-component-form-fieldset-border-color`var(
--nldesign-color-border
)` #535353defaults
--nldesign-component-form-select-border-colorvar(--nldesign-color-border) #535353defaults
--nldesign-component-form-select-focus-border-colorvar(--nldesign-color-info) #39adf5defaults
--nldesign-component-heading-1-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-2-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-3-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-4-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-5-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-6-colorvar(--nldesign-component-heading-color) #ccccccdefaults
--nldesign-component-heading-colorvar(--nldesign-color-text) #ccccccdefaults
--nldesign-component-link-colorvar(--nldesign-color-link) #8cb9eadefaults
--nldesign-component-link-hover-colorvar(--nldesign-color-link-hover) #3db5ffdefaults
--nldesign-component-link-visited-colorvar(--nldesign-color-link-visited) #cea0ebdefaults
--nldesign-component-ordered-list-color`var(
--nldesign-color-text
)` #ccccccdefaults
--nldesign-component-paragraph-colorvar(--nldesign-color-text) #ccccccdefaults
--nldesign-component-separator-border-colorvar(--nldesign-color-border) #535353defaults
--nldesign-component-table-border-colorvar(--nldesign-color-border) #535353defaults
--nldesign-component-table-header-background-color`var(
--nldesign-color-background-dark
)` #2c2e2fdefaults
--nldesign-component-table-header-colorvar(--nldesign-color-text) #ccccccdefaults
--nldesign-component-table-row-hover-background-color`var(
--nldesign-color-background-hover
)` #252728defaults
--nldesign-component-textbox-background-color #ffffff #9e9e9edefaults
--nldesign-component-textbox-border-colorvar(--nldesign-color-border) #9e9e9edefaults
--nldesign-component-textbox-colorvar(--nldesign-color-text) #ccccccdefaults
--nldesign-component-textbox-disabled-background-color #e5e5e5 #9e9e9edefaults
--nldesign-component-textbox-disabled-color #696969 #9e9e9edefaults
--nldesign-component-textbox-focus-border-colorvar(--nldesign-color-info) #3db5ffdefaults
--nldesign-component-textbox-hover-border-color`var(
--nldesign-color-border-dark
)` #9e9e9edefaults
--nldesign-component-textbox-invalid-border-colorvar(--nldesign-color-error) #e75f55defaults
--nldesign-component-unordered-list-color`var(
--nldesign-color-text
)` #ccccccdefaults

Typography (Typografie)​

TokenValueDark modeSourcePaints
--nldesign-component-badge-font-size0.875remdefaults
--nldesign-component-badge-font-weight700defaults
--nldesign-component-button-font-familyvar(--nldesign-font-family)defaults
--nldesign-component-button-font-size1remdefaults
--nldesign-component-button-font-weight700defaults
--nldesign-component-form-field-label-font-weight700defaults
--nldesign-component-heading-1-font-size2.5remdefaults
--nldesign-component-heading-1-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-1-line-height1.2defaults
--nldesign-component-heading-2-font-size2remdefaults
--nldesign-component-heading-2-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-2-line-height1.25defaults
--nldesign-component-heading-3-font-size1.5remdefaults
--nldesign-component-heading-3-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-3-line-height1.3defaults
--nldesign-component-heading-4-font-size1.25remdefaults
--nldesign-component-heading-4-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-4-line-height1.35defaults
--nldesign-component-heading-5-font-size1.125remdefaults
--nldesign-component-heading-5-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-5-line-height1.4defaults
--nldesign-component-heading-6-font-size1remdefaults
--nldesign-component-heading-6-font-weight`var(
--nldesign-component-heading-font-weight
)`defaults
--nldesign-component-heading-6-line-height1.5defaults
--nldesign-component-heading-font-familyvar(--nldesign-font-family)defaults
--nldesign-component-heading-font-weightvar(--nldesign-font-weight-heading)defaults
--nldesign-component-link-font-weight`var(
--nldesign-font-weight-default
)`defaults
--nldesign-component-link-text-decorationunderlinedefaults
--nldesign-component-ordered-list-font-size1remdefaults
--nldesign-component-ordered-list-line-height1.5defaults
--nldesign-component-paragraph-font-familyvar(--nldesign-font-family)defaults
--nldesign-component-paragraph-font-size1remdefaults
--nldesign-component-paragraph-font-weightvar(--nldesign-font-weight-default)defaults
--nldesign-component-paragraph-line-height1.5defaults
--nldesign-component-table-header-font-weight700defaults
--nldesign-component-textbox-font-familyvar(--nldesign-font-family)defaults
--nldesign-component-textbox-font-size1remdefaults
--nldesign-component-unordered-list-font-size1remdefaults
--nldesign-component-unordered-list-line-height1.5defaults
--nldesign-font-family`'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif`defaultsFont family, --nldesign-component-button-font-family, --nldesign-component-textbox-font-family
--nldesign-font-weight-default400defaults--default-font-size
--nldesign-font-weight-element500defaultsControl font weight
--nldesign-font-weight-heading700defaultsHeading font weight

Spacing and shape (Ruimte en vorm)​

TokenValueDark modeSourcePaints
--nldesign-border-radius0defaultsBorder radius element, Button corner, Select corner, Text input corner, --border-width-input
--nldesign-border-radius-large4pxdefaults--border-radius-container
--nldesign-border-radius-pill100pxdefaultsBadge shape, Border radius pill
--nldesign-border-radius-rounded0defaultsBorder radius rounded
--nldesign-border-radius-small0defaultsBorder radius small
--nldesign-component-badge-border-radius`var(
--nldesign-border-radius-pill
)`defaults
--nldesign-component-badge-padding-block0.125remdefaults
--nldesign-component-badge-padding-inline0.5remdefaults
--nldesign-component-button-border-radiusvar(--nldesign-border-radius)defaults
--nldesign-component-button-border-width1pxdefaults
--nldesign-component-button-padding-block0.5remdefaults
--nldesign-component-button-padding-inline1remdefaults
--nldesign-component-form-fieldset-border-width1pxdefaults
--nldesign-component-form-select-border-radiusvar(--nldesign-border-radius)defaults
--nldesign-component-separator-border-width1pxdefaults
--nldesign-component-table-border-width1pxdefaults
--nldesign-component-table-cell-padding-block0.5remdefaults
--nldesign-component-table-cell-padding-inline0.75remdefaults
--nldesign-component-textbox-border-radiusvar(--nldesign-border-radius)defaults
--nldesign-component-textbox-border-width1pxdefaults
--nldesign-component-textbox-padding-block0.5remdefaults
--nldesign-component-textbox-padding-inline0.75remdefaults
--nldesign-header-border-bottom0defaults
--nldesign-logo-heightautodefaults
--nldesign-logo-width62pxdefaults
--nldesign-size-lint0pxdefaults
--nldesign-size-lint-height0pxdefaults

Other tokens (Overige tokens)​

TokenValueDark modeSourcePaints
--nldesign-animation-quick100msdefaults--header-menu-item-height
--nldesign-animation-slow300msdefaultsAnimation slow
--nldesign-header-icon-filterinvert(1) brightness(0) contrast(100)defaults
--nldesign-logo-bottom1pxdefaults
--nldesign-logo-center50%defaults
--nldesign-logo-filternonedefaults
--nldesign-logo-inset12pxdefaults
--nldesign-logo-top1pxdefaults

Tokens nothing reads (Tokens die niets leest)​

TokenValueDark modeSourcePaints
--summer-animation-quick120msthis set
--summer-animation-slow280msthis set
--summer-color-background-dark #e7eef6 #142130this set
--summer-color-background-darker #dbe6f2 #18283athis set
--summer-color-background-hover #eef5fb #0d1e2dthis set
--summer-color-background-plain #f7f7f7 #1b1b1bthis set
--summer-color-border #e3e9f0 #1c2631this set
--summer-color-border-dark #c7d3e0 #2a3848this set
--summer-color-error #c0392b #cc5144this set
--summer-color-error-border #f2cac6 #4e1b16this set
--summer-color-error-light #fbe7e5 #370f0bthis set
--summer-color-focus rgba(40, 116, 209, 0.5) #367ace80this set
--summer-color-info #1f5fb0 #508cd7this set
--summer-color-info-border #c3dbf5 #123152this set
--summer-color-info-light #e1eefa #0d243athis set
--summer-color-primary #21468b #6f93d6this set
--summer-color-primary-badge-border #c3dbf5 #123152this set
--summer-color-primary-hover #1b3a75 #81a0dcthis set
--summer-color-primary-light #eef2f8 #131c2athis set
--summer-color-primary-light-hover #dce3f0 #1a2538this set
--summer-color-primary-text #ffffff #9e9e9ethis set
--summer-color-success #2e7d4f #7cc99cthis set
--summer-color-success-border #b5dcc0 #2d5739this set
--summer-color-success-light #e3f4e7 #16331dthis set
--summer-color-surface #ffffff #141414this set
--summer-color-text #02162e #d1e5fdthis set
--summer-color-text-light #ffffff #9e9e9ethis set
--summer-color-text-muted #5b6b7b #909eadthis set
--summer-color-toggle-track #ededed #242424this set
--summer-color-warning #8a6d00 #f7da6athis set
--summer-color-warning-border #efd68b #806618this set
--summer-color-warning-light #fbf0cf #4a3a0athis set
--summer-font-family'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serifthis set
--summer-font-weight-body400this set
--summer-font-weight-heading600this set
--summer-gradient-navlinear-gradient(180deg, #dcebfa 0%, #eaf2fb 55%, #f4f9fd 100%)this set
--summer-radius12pxthis set
--summer-radius-badge6pxthis set
--summer-radius-large16pxthis set
--summer-radius-panel20pxthis set
--summer-radius-pill999pxthis set
--summer-radius-rounded50%this set
--summer-radius-small8pxthis set
--summer-shadow-panel0 4px 22px -3px rgba(20, 60, 110, 0.10)this set
--summer-shadow-panel-hover0 8px 28px -4px rgba(20, 60, 110, 0.16)this set
--summer-shadow-popout0 0 10px 0 rgba(20, 60, 110, 0.12), 0 0 2px 0 rgba(20, 60, 110, 0.20)this set
--summer-shadow-thumb0 1px 2px rgba(0, 0, 0, 0.12)this set