Foundations

Color

Motion color tokens. Each swatch shows the light value on the left and the dark value on the right.

Contrast

Text tokens meet WCAG AA (4.5:1) on the surfaces they are used on, in both themes: text-secondary, text-tertiary and every palette text color (<color>-text-secondary, <color>-text-accent-primary, checked on bg-primary, bg-secondary and the color's own tints) are tuned for it, and white text sits on the *-bg-solid fills (blue-bg-solid, red-bg-solid, green-bg-solid, orange-bg-solid, gray-bg-solid) with text-on-solid. text-disabled is exempt, as WCAG allows.

Background
bg-accent-primary
var(--n-bg-accent-primary)
#2c2c2b#2c2c2b
bg-accent-secondary
var(--n-bg-accent-secondary)
#a19e99#a19e99
bg-elevated
var(--n-bg-elevated)
#fff#202020
bg-interactive
var(--n-bg-interactive)
#f4f3f3#262626
bg-primary
var(--n-bg-primary)
#fff#191919
bg-secondary
var(--n-bg-secondary)
#f9f8f7#202020
bg-tertiary
var(--n-bg-tertiary)
#f0efed#383836
bg-interactive-translucent-a
var(--n-bg-interactive-translucent-a)
rgba(33,27,23,.05)rgba(255,255,255,.055)
bg-primary-translucent-a
var(--n-bg-primary-translucent-a)
rgba(255,255,255,0)rgba(25,25,25,0)
bg-secondary-translucent-a
var(--n-bg-secondary-translucent-a)
rgba(66,35,3,.03)rgba(252,252,252,.03)
bg-tertiary-translucent-a
var(--n-bg-tertiary-translucent-a)
rgba(42,28,0,.07)rgba(255,255,243,.082)
Text
text-accent-primary
var(--n-text-accent-primary)
#5f5e59#bcbab6
text-disabled
var(--n-text-disabled)
#bcbab6#5f5e59
text-inverse-primary
var(--n-text-inverse-primary)
#f0efed#f0efed
text-inverse-secondary
var(--n-text-inverse-secondary)
#ada9a3#ada9a3
text-primary
var(--n-text-primary)
#2c2c2b#f0efed
text-secondary
var(--n-text-secondary)
#6d6b66#ada9a3
text-tertiary
var(--n-text-tertiary)
#73706c#8b8883
text-disabled-translucent-a
var(--n-text-disabled-translucent-a)
rgba(21,14,0,.286)rgba(255,252,235,.306)
Icon
icon-accent-primary
var(--n-icon-accent-primary)
#7d7a75#bcbab6
icon-disabled
var(--n-icon-disabled)
#bcbab6#5f5e59
icon-inverse-primary
var(--n-icon-inverse-primary)
#f0efed#f0efed
icon-inverse-secondary
var(--n-icon-inverse-secondary)
#ada9a3#ada9a3
icon-primary
var(--n-icon-primary)
#383836#e6e5e3
icon-secondary
var(--n-icon-secondary)
#8e8b86#ada9a3
icon-tertiary
var(--n-icon-tertiary)
#ada9a3#7d7a75
Border
border-accent-primary
var(--n-border-accent-primary)
#8e8b86#8e8b86
border-inverse-primary
var(--n-border-inverse-primary)
#5f5e59#5f5e59
border-primary
var(--n-border-primary)
#e6e5e3#383836
border-secondary
var(--n-border-secondary)
#f0efed#2c2c2b
border-strong
var(--n-border-strong)
#d4d3cf#5f5e59
border-primary-translucent-a
var(--n-border-primary-translucent-a)
rgba(28,19,1,.11)rgba(255,255,235,.1)
border-secondary-translucent-a
var(--n-border-secondary-translucent-a)
rgba(42,28,0,.07)rgba(255,255,243,.082)
border-strong-translucent-a
var(--n-border-strong-translucent-a)
rgba(27,21,0,.19)rgba(255,252,235,.306)
Button
button-group-bg
var(--n-button-group-bg)
#fff#2f2f2f
button-hover-bg-a
var(--n-button-hover-bg-a)
rgba(55,53,47,.06)rgba(255,255,255,.055)
button-pressed-bg-a
var(--n-button-pressed-bg-a)
rgba(55,53,47,.16)rgba(255,255,255,.03)
button-pressed-bg-light-a
var(--n-button-pressed-bg-light-a)
rgba(55,53,47,.1)rgba(255,255,255,.03)
Other UI
ui-use-ava-idl-outline
var(--n-ui-use-ava-idl-outline)
#f1f1ef#555553
assistant-corner-button-bg
var(--n-assistant-corner-button-bg)
#fff#d3d3d3
assistant-corner-button-bg-hover
var(--n-assistant-corner-button-bg-hover)
#efefee#efefee
assistant-corner-button-bg-pressed
var(--n-assistant-corner-button-bg-pressed)
#dfdfde#dfdfde
beige-banner-bg
var(--n-beige-banner-bg)
#fbf8f3#373c3f
calendar-item-bg
var(--n-calendar-item-bg)
#fff#2f2f2f
code-sticky-block-bg
var(--n-code-sticky-block-bg)
#f7f6f3#272727
creator-profile-in-review-bg
var(--n-creator-profile-in-review-bg)
#fde6d9#fde6d9
creator-profile-in-review-hover-text
var(--n-creator-profile-in-review-hover-text)
#c76224#c76224
creator-profile-in-review-text
var(--n-creator-profile-in-review-text)
#f97b2d#fde6d9
dark-banner-bg
var(--n-dark-banner-bg)
#eae9e7#373c3f
home-scroll-button-bg-base
var(--n-home-scroll-button-bg-base)
#fff#252525
hover-marker-disabled-bg
var(--n-hover-marker-disabled-bg)
#f9f9f8#202020
key-act-bar-bg
var(--n-key-act-bar-bg)
#fff#272829
key-don-bar-bg
var(--n-key-don-bar-bg)
#f0f1f2#27292b
marker-editor-bg-hover-red
var(--n-marker-editor-bg-hover-red)
#fdebec#522e2a
marker-editor-bg-hover-yellow
var(--n-marker-editor-bg-hover-yellow)
#fbf3db#564328
marker-editor-icon-blue
var(--n-marker-editor-icon-blue)
#2383e2#2383e2
marker-editor-icon-red
var(--n-marker-editor-icon-red)
#f64932#f64932
marker-editor-icon-yellow
var(--n-marker-editor-icon-yellow)
#ffb110#ffb110
marker-editor-illustration-blue-2
var(--n-marker-editor-illustration-blue-2)
#f64932#f64932
marker-editor-illustration-red-2
var(--n-marker-editor-illustration-red-2)
#f64932#f64932
marker-editor-illustration-white-2
var(--n-marker-editor-illustration-white-2)
#f64932#f64932
marker-editor-illustration-yellow-2
var(--n-marker-editor-illustration-yellow-2)
#f64932#f64932
marker-status-selection
var(--n-marker-status-selection)
#ffb110#ffb110
marker-top-text-dropdown-view-all-blue
var(--n-marker-top-text-dropdown-view-all-blue)
#2383e2#2383e2
marker-top-text-dropdown-view-all-red
var(--n-marker-top-text-dropdown-view-all-red)
#cd3c3a#de5550
marker-top-text-dropdown-view-all-white
var(--n-marker-top-text-dropdown-view-all-white)
#000#7f7f7f
marker-top-text-dropdown-view-all-yellow
var(--n-marker-top-text-dropdown-view-all-yellow)
#d99e35#cb912f
marker-top-text-hover-blue
var(--n-marker-top-text-hover-blue)
#2383e2#2383e2
marker-top-text-hover-red
var(--n-marker-top-text-hover-red)
#f64932#f64932
marker-top-text-hover-yellow
var(--n-marker-top-text-hover-yellow)
#ffb110#ffb110
marker-top-text-pressed-blue
var(--n-marker-top-text-pressed-blue)
#1761ab#1761ab
marker-top-text-pressed-red
var(--n-marker-top-text-pressed-red)
#ba1d08#ba1d08
marker-top-text-pressed-white
var(--n-marker-top-text-pressed-white)
#000#7f7f7f
marker-top-text-pressed-yellow
var(--n-marker-top-text-pressed-yellow)
#db9400#db9400
peek-timeline-bg
var(--n-peek-timeline-bg)
#fdfdfd#202020
pill-border-red
var(--n-pill-border-red)
#fdebec#362422
pill-hover-bg-red
var(--n-pill-hover-bg-red)
#fdebec#362422
pill-hover-bg-yellow
var(--n-pill-hover-bg-yellow)
#fbf3db#392e1e
pill-hover-text-blue
var(--n-pill-hover-text-blue)
#2383e2#2383e2
pill-hover-text-red
var(--n-pill-hover-text-red)
#cd3c3a#de5550
pill-hover-text-white
var(--n-pill-hover-text-white)
#73726e#7f7f7f
pill-icon-blue
var(--n-pill-icon-blue)
#2383e2#2383e2
pill-icon-red
var(--n-pill-icon-red)
#cd3c3a#de5550
pill-icon-yellow
var(--n-pill-icon-yellow)
#ffb110#ffb110
pill-selection-bg-red
var(--n-pill-selection-bg-red)
#fdebec#362422
pill-selection-pressed-bg-yellow
var(--n-pill-selection-pressed-bg-yellow)
#fce2ab#564328
popover-bg
var(--n-popover-bg)
#fff#252525
primary-black
var(--n-primary-black)
#000#fff
regular-emoji-color
var(--n-regular-emoji-color)
#000#fff
selection-marker-disabled-bg
var(--n-selection-marker-disabled-bg)
#fff#252525
seo-pressed-title
var(--n-seo-pressed-title)
#1d13a3#9ebdf4
sidebar-secondary-color
var(--n-sidebar-secondary-color)
#91918e#9b9b9b
site-builder-bg
var(--n-site-builder-bg)
#fcfcfc#1f1f1f
site-page-pressed-win-chr-bar
var(--n-site-page-pressed-win-chr-bar)
#f5f5f5#141414
table-frozen-fill-divider-color
var(--n-table-frozen-fill-divider-color)
#d5d4d2#464646
table-frozen-selection-divider-color
var(--n-table-frozen-selection-divider-color)
#cad4e1#2f3a48
timeline-bg
var(--n-timeline-bg)
#fdfdfd#191919
top-fav
var(--n-top-fav)
#f6c050#ca984d
white
var(--n-white)
#fff#000
white-button-bg
var(--n-white-button-bg)
#fff#252525
white-button-hover-bg
var(--n-white-button-hover-bg)
#efefee#2f2f2f
white-button-pressed-bg
var(--n-white-button-pressed-bg)
#dfdfde#252525
ui-use-ava-inner-outline-a
var(--n-ui-use-ava-inner-outline-a)
rgba(255,255,255,.3)rgba(25,25,25,.3)
ai-chat-button-unselected-a
var(--n-ai-chat-button-unselected-a)
transparenttransparent
ai-chat-button-unselected-hover-a
var(--n-ai-chat-button-unselected-hover-a)
transparenttransparent
calendar-event-hover-bg-a
var(--n-calendar-event-hover-bg-a)
rgba(55,53,47,.02)rgba(55,53,47,.02)
card-content-bg-translucent-a
var(--n-card-content-bg-translucent-a)
rgba(255,255,255,0)rgba(227,226,224,0)
content-bg-translucent-a
var(--n-content-bg-translucent-a)
rgba(255,255,255,0)rgba(241,241,239,0)
embed-block-resizer-inner-bg-a
var(--n-embed-block-resizer-inner-bg-a)
rgba(15,15,15,.6)rgba(15,15,15,.6)
equation-template-placeholder-bg-a
var(--n-equation-template-placeholder-bg-a)
rgba(35,131,226,.14)rgba(255,255,255,.03)
find-highlight-match-selection-bg-a
var(--n-find-highlight-match-selection-bg-a)
rgba(255,205,56,.9)rgba(255,205,56,.9)
glass-page-a
var(--n-glass-page-a)
rgba(255,255,255,.8)rgba(25,25,25,.8)
glass-wash-a
var(--n-glass-wash-a)
rgba(249,249,248,.8)rgba(32,32,32,.8)
home-card-bg-pressed-a
var(--n-home-card-bg-pressed-a)
rgba(84,72,49,.08)rgba(255,255,255,.07)
home-card-cover-photo-base-a
var(--n-home-card-cover-photo-base-a)
rgba(84,72,49,.04)rgba(255,255,255,.03)
home-card-template-card-bg-pressed-a
var(--n-home-card-template-card-bg-pressed-a)
rgba(0,0,0,.024)rgba(255,255,255,.07)
home-tile-bg-a
var(--n-home-tile-bg-a)
rgba(255,255,255,.9)rgba(32,32,32,.9)
light-gray-button-hover-bg-a
var(--n-light-gray-button-hover-bg-a)
rgba(227,226,224,.7)rgba(255,255,255,.055)
light-gray-button-pressed-bg-a
var(--n-light-gray-button-pressed-bg-a)
rgba(84,72,49,.15)rgba(255,255,255,.094)
marker-editor-bg-blue-a
var(--n-marker-editor-bg-blue-a)
rgba(35,131,226,.035)rgba(35,131,226,.14)
marker-editor-bg-hover-white-a
var(--n-marker-editor-bg-hover-white-a)
rgba(0,0,0,.08)rgba(255,255,255,.094)
marker-editor-bg-pressed-white-a
var(--n-marker-editor-bg-pressed-white-a)
rgba(84,72,49,.15)rgba(255,255,255,.03)
marker-editor-bg-red-a
var(--n-marker-editor-bg-red-a)
rgba(243,136,118,.07)rgba(222,85,85,.25)
marker-editor-bg-white-a
var(--n-marker-editor-bg-white-a)
rgba(84,72,49,.04)rgba(255,255,255,.055)
marker-editor-bg-yellow-a
var(--n-marker-editor-bg-yellow-a)
rgba(215,177,24,.07)rgba(179,129,61,.2)
marker-editor-border-hover-red-a
var(--n-marker-editor-border-hover-red-a)
rgba(244,171,159,.4)rgba(255,255,255,.03)
marker-editor-border-hover-white-a
var(--n-marker-editor-border-hover-white-a)
rgba(0,0,0,.05)rgba(255,255,255,.055)
marker-editor-border-hover-yellow-a
var(--n-marker-editor-border-hover-yellow-a)
rgba(236,191,66,.39)rgba(255,255,255,.03)
marker-editor-border-pressed-blue-a
var(--n-marker-editor-border-pressed-blue-a)
transparentrgba(255,255,255,.03)
marker-editor-border-pressed-red-a
var(--n-marker-editor-border-pressed-red-a)
transparentrgba(255,255,255,.03)
marker-editor-border-pressed-white-a
var(--n-marker-editor-border-pressed-white-a)
transparentrgba(255,255,255,.055)
marker-editor-border-pressed-yellow-a
var(--n-marker-editor-border-pressed-yellow-a)
transparentrgba(255,255,255,.03)
marker-editor-border-white-a
var(--n-marker-editor-border-white-a)
rgba(0,0,0,.024)rgba(255,255,255,.055)
marker-status-default-a
var(--n-marker-status-default-a)
rgba(255,177,16,.3)rgba(255,177,16,.3)
modal-underlay-bg-a
var(--n-modal-underlay-bg-a)
rgba(15,15,15,.6)rgba(15,15,15,.8)
opaque-link-decoration-color-a
var(--n-opaque-link-decoration-color-a)
rgba(55,53,47,.4)rgba(255,255,255,.282)
outline-button-hover-bg-a
var(--n-outline-button-hover-bg-a)
rgba(55,53,47,.06)rgba(255,255,255,.055)
overlay-smoke-a
var(--n-overlay-smoke-a)
rgba(15,15,15,.6)rgba(15,15,15,.8)
pill-bg-blue-a
var(--n-pill-bg-blue-a)
rgba(35,131,226,.035)rgba(51,126,169,.08)
pill-bg-red-a
var(--n-pill-bg-red-a)
rgba(243,136,118,.07)rgba(222,85,88,.1)
pill-bg-yellow-a
var(--n-pill-bg-yellow-a)
rgba(215,177,24,.07)rgba(162,105,50,.1)
pill-border-blue-a
var(--n-pill-border-blue-a)
rgba(35,131,226,.07)rgba(35,131,226,.07)
pill-border-white-a
var(--n-pill-border-white-a)
rgba(84,72,49,.08)rgba(255,255,255,.055)
pill-hover-bg-blue-a
var(--n-pill-hover-bg-blue-a)
rgba(35,131,226,.14)rgba(35,131,226,.14)
pill-hover-bg-white-a
var(--n-pill-hover-bg-white-a)
rgba(0,0,0,.1)rgba(0,0,0,.1)
pill-hover-border-blue-a
var(--n-pill-hover-border-blue-a)
rgba(35,131,226,.07)rgba(35,131,226,.07)
pill-hover-border-red-a
var(--n-pill-hover-border-red-a)
rgba(244,171,159,.4)rgba(222,85,85,.25)
pill-hover-border-white-a
var(--n-pill-hover-border-white-a)
rgba(84,72,49,.15)rgba(255,255,255,.094)
pill-outline-blue-a
var(--n-pill-outline-blue-a)
rgba(35,131,226,.14)rgba(35,131,226,.35)
pill-outline-red-a
var(--n-pill-outline-red-a)
rgba(244,171,159,.4)rgba(222,85,83,.45)
pill-outline-yellow-a
var(--n-pill-outline-yellow-a)
rgba(236,191,66,.39)rgba(250,177,67,.5)
pill-pressed-bg-blue-a
var(--n-pill-pressed-bg-blue-a)
rgba(35,131,226,.21)rgba(35,131,226,.2)
pill-pressed-bg-red-a
var(--n-pill-pressed-bg-red-a)
rgba(244,171,159,.4)rgba(222,85,85,.25)
pill-pressed-bg-white-a
var(--n-pill-pressed-bg-white-a)
rgba(0,0,0,.2)rgba(0,0,0,.2)
pill-pressed-bg-yellow-a
var(--n-pill-pressed-bg-yellow-a)
rgba(236,191,66,.39)rgba(179,129,61,.2)
pill-pressed-border-blue-a
var(--n-pill-pressed-border-blue-a)
rgba(35,131,226,.07)rgba(35,131,226,.07)
pill-pressed-border-white-a
var(--n-pill-pressed-border-white-a)
rgba(81,73,60,.32)rgba(255,255,255,.094)
pill-selection-border-red-a
var(--n-pill-selection-border-red-a)
rgba(215,38,21,.5)rgba(222,85,82,.6)
pill-selection-border-white-a
var(--n-pill-selection-border-white-a)
rgba(71,70,68,.6)rgba(255,255,255,.18)
pill-selection-border-yellow-a
var(--n-pill-selection-border-yellow-a)
rgba(255,177,16,.5)rgba(255,177,16,.5)
pill-selection-hover-bg-blue-a
var(--n-pill-selection-hover-bg-blue-a)
rgba(35,131,226,.14)rgba(35,131,226,.14)
pill-selection-hover-bg-red-a
var(--n-pill-selection-hover-bg-red-a)
rgba(244,171,159,.4)rgba(222,85,85,.25)
pill-selection-hover-bg-white-a
var(--n-pill-selection-hover-bg-white-a)
rgba(84,72,49,.15)rgba(0,0,0,.1)
pill-selection-hover-border-red-a
var(--n-pill-selection-hover-border-red-a)
rgba(215,38,21,.5)rgba(222,85,82,.6)
pill-selection-hover-border-white-a
var(--n-pill-selection-hover-border-white-a)
rgba(71,70,68,.6)rgba(255,255,255,.18)
pill-selection-hover-border-yellow-a
var(--n-pill-selection-hover-border-yellow-a)
rgba(255,177,16,.5)rgba(255,177,16,.5)
pill-selection-pressed-bg-blue-a
var(--n-pill-selection-pressed-bg-blue-a)
rgba(35,131,226,.21)rgba(35,131,226,.35)
pill-selection-pressed-bg-white-a
var(--n-pill-selection-pressed-bg-white-a)
rgba(81,73,60,.32)rgba(0,0,0,.2)
pill-selection-pressed-border-red-a
var(--n-pill-selection-pressed-border-red-a)
rgba(215,38,21,.5)rgba(222,85,82,.6)
pill-selection-pressed-border-white-a
var(--n-pill-selection-pressed-border-white-a)
rgba(71,70,68,.6)rgba(255,255,255,.18)
pill-selection-pressed-border-yellow-a
var(--n-pill-selection-pressed-border-yellow-a)
rgba(255,177,16,.5)rgba(255,177,16,.5)
popover-overlay-bg-a
var(--n-popover-overlay-bg-a)
rgba(15,15,15,.6)rgba(15,15,15,.6)
popover-wax-paper-bg-a
var(--n-popover-wax-paper-bg-a)
rgba(255,255,255,.9)rgba(32,32,32,.9)
sidebar-item-selection-bg-a
var(--n-sidebar-item-selection-bg-a)
rgba(0,0,0,.03)rgba(255,255,255,.055)
sidebar-secondary-bg-a
var(--n-sidebar-secondary-bg-a)
rgba(0,0,0,.024)rgba(0,0,0,.024)
status-hover-a
var(--n-status-hover-a)
rgba(55,53,47,.04)rgba(255,255,255,.055)
status-pressed-a
var(--n-status-pressed-a)
rgba(55,53,47,.1)rgba(255,255,255,.13)
switch-button-teal-bg-a
var(--n-switch-button-teal-bg-a)
rgba(135,131,120,.3)rgba(120,129,135,.3)
switch-toggle-desaturated-translucent-bg-a
var(--n-switch-toggle-desaturated-translucent-bg-a)
rgba(135,131,120,.4)rgba(120,129,135,.4)
switch-toggle-desaturated-translucent-bg-var-a
var(--n-switch-toggle-desaturated-translucent-bg-var-a)
rgba(206,205,202,.3)rgba(202,204,206,.3)
table-row-hover-bg-a
var(--n-table-row-hover-bg-a)
rgba(55,53,47,.024)rgba(255,255,255,.055)
token-input-menu-item-bg-a
var(--n-token-input-menu-item-bg-a)
rgba(242,241,238,.6)rgba(255,255,255,.03)
ai-chat-button-pressed
var(--n-ai-chat-button-pressed)
#fffrgba(255,255,255,.12)
ai-chat-button-selection
var(--n-ai-chat-button-selection)
#fffrgba(255,255,255,.04)
ai-chat-button-selection-hover
var(--n-ai-chat-button-selection-hover)
#fffrgba(255,255,255,.06)
board-item-default-bg
var(--n-board-item-default-bg)
#fffrgba(255,255,255,.055)
code-block-bg
var(--n-code-block-bg)
#f7f6f3rgba(255,255,255,.03)
color-gallery-pressed-card-bg
var(--n-color-gallery-pressed-card-bg)
#fffrgba(255,255,255,.055)
embed-placeholder-bg
var(--n-embed-placeholder-bg)
#f2f1eergba(255,255,255,.03)
home-card-bg-base
var(--n-home-card-bg-base)
#fffrgba(255,255,255,.05)
home-card-bg-hover
var(--n-home-card-bg-hover)
#fffrgba(255,255,255,.05)
home-card-template-card-bg-base
var(--n-home-card-template-card-bg-base)
#fffrgba(255,255,255,.05)
home-card-template-card-bg-hover
var(--n-home-card-template-card-bg-hover)
#fffrgba(255,255,255,.05)
marker-editor-bg-hover-blue
var(--n-marker-editor-bg-hover-blue)
#f0f6fdrgba(35,131,226,.2)
marker-editor-bg-pressed-blue
var(--n-marker-editor-bg-pressed-blue)
#d1e5f9rgba(35,131,226,.07)
marker-editor-border-blue
var(--n-marker-editor-border-blue)
#f0f6fdrgba(255,255,255,.03)
marker-editor-border-hover-blue
var(--n-marker-editor-border-hover-blue)
#e0eefbrgba(255,255,255,.03)
marker-editor-border-red
var(--n-marker-editor-border-red)
#fdebecrgba(255,255,255,.03)
marker-editor-border-yellow
var(--n-marker-editor-border-yellow)
#fbf3dbrgba(255,255,255,.03)
pill-border-yellow
var(--n-pill-border-yellow)
#fbf3dbrgba(152,102,48,.15)
pill-hover-text-yellow
var(--n-pill-hover-text-yellow)
#402c1brgba(255,255,255,.87)
pill-selection-bg-yellow
var(--n-pill-selection-bg-yellow)
#fbf3dbrgba(152,102,48,.15)
table-hea-row-color-bg
var(--n-table-hea-row-color-bg)
#f7f6f3rgba(255,255,255,.03)
timeline-dark-bg
var(--n-timeline-dark-bg)
#f7f7f7rgba(255,255,255,.03)
calendar-item-hover-bg
var(--n-calendar-item-hover-bg)
rgba(84,72,49,.08)#373737
card-hover-bg
var(--n-card-hover-bg)
rgba(55,53,47,.04)#2f2f2f
card-pressed-bg
var(--n-card-pressed-bg)
rgba(55,53,47,.06)#252525
find-highlight-match-unselected-bg
var(--n-find-highlight-match-unselected-bg)
rgba(255,205,56,.4)#444137
home-emp-status-pressed-calendar-ind
var(--n-home-emp-status-pressed-calendar-ind)
rgba(84,72,49,.08)#2f2f2f
home-emp-status-pressed-joi-button-bg
var(--n-home-emp-status-pressed-joi-button-bg)
rgba(84,72,49,.04)#252525
home-scroll-button-bg-pressed
var(--n-home-scroll-button-bg-pressed)
rgba(84,72,49,.08)#2f2f2f
hover-disabled-bg
var(--n-hover-disabled-bg)
rgba(55,53,47,.03)#202020
link-decoration-color
var(--n-link-decoration-color)
rgba(55,53,47,.25)#373737
marker-editor-bg-pressed-red
var(--n-marker-editor-bg-pressed-red)
rgba(244,171,159,.4)#362422
marker-editor-bg-pressed-yellow
var(--n-marker-editor-bg-pressed-yellow)
rgba(236,191,66,.39)#392e1e
marker-editor-icon-white
var(--n-marker-editor-icon-white)
rgba(71,70,68,.6)#373737
marker-editor-illustration-blue
var(--n-marker-editor-illustration-blue)
transparent#e0eefb
marker-editor-illustration-red
var(--n-marker-editor-illustration-red)
transparent#fdebec
marker-editor-illustration-white
var(--n-marker-editor-illustration-white)
transparent#fff
marker-editor-illustration-yellow
var(--n-marker-editor-illustration-yellow)
transparent#fdecc8
marker-top-text-hover-white
var(--n-marker-top-text-hover-white)
rgba(0,0,0,.65)#5a5a5a
outline-button-pressed-bg
var(--n-outline-button-pressed-bg)
rgba(55,53,47,.16)#252525
page-title-placeholder-text-color
var(--n-page-title-placeholder-text-color)
rgba(55,53,47,.15)#373737
per-home-bg-photo
var(--n-per-home-bg-photo)
rgba(84,72,49,.04)#191919
pill-bg-white
var(--n-pill-bg-white)
rgba(84,72,49,.04)#202020
pill-hover-border-yellow
var(--n-pill-hover-border-yellow)
rgba(236,191,66,.39)#392e1e
pill-icon-white
var(--n-pill-icon-white)
rgba(71,70,68,.6)#7f7f7f
pill-outline-white
var(--n-pill-outline-white)
rgba(84,72,49,.08)#1c1c1c
pill-pressed-border-red
var(--n-pill-pressed-border-red)
rgba(244,171,159,.4)#522e2a
pill-pressed-border-yellow
var(--n-pill-pressed-border-yellow)
rgba(236,191,66,.39)#392e1e
pill-selection-bg-blue
var(--n-pill-selection-bg-blue)
rgba(35,131,226,.07)#1d282e
pill-selection-bg-white
var(--n-pill-selection-bg-white)
rgba(84,72,49,.08)#373737
pill-selection-border-blue
var(--n-pill-selection-border-blue)
rgba(35,131,226,.35)#2383e2
pill-selection-hover-bg-yellow
var(--n-pill-selection-hover-bg-yellow)
rgba(236,191,66,.39)#392e1e
pill-selection-hover-border-blue
var(--n-pill-selection-hover-border-blue)
rgba(35,131,226,.35)#2383e2
pill-selection-pressed-bg-red
var(--n-pill-selection-pressed-bg-red)
rgba(215,38,21,.32)#522e2a
pill-selection-pressed-border-blue
var(--n-pill-selection-pressed-border-blue)
rgba(35,131,226,.35)#2383e2
selection-light-gray-100
var(--n-selection-light-gray-100)
rgba(227,226,224,.5)#202020
selection-light-gray-200
var(--n-selection-light-gray-200)
rgba(199,198,196,.5)#252525
selection-light-gray-30
var(--n-selection-light-gray-30)
rgba(249,249,245,.5)#151515
selection-light-gray-300
var(--n-selection-light-gray-300)
rgba(172,171,169,.5)#2f2f2f
selection-light-gray-400
var(--n-selection-light-gray-400)
rgba(145,145,142,.5)#373737
selection-light-gray-50
var(--n-selection-light-gray-50)
rgba(241,241,239,.5)#191919
selection-light-gray-500
var(--n-selection-light-gray-500)
rgba(120,119,116,.5)#5a5a5a
selection-light-gray-700
var(--n-selection-light-gray-700)
rgba(72,71,67,.5)#9b9b9b
site-ins-ste
var(--n-site-ins-ste)
rgba(84,72,49,.08)#373737
sus-ui-use-ava-bg
var(--n-sus-ui-use-ava-bg)
rgba(84,72,49,.08)#373737
Tone text

Money and status text by contract tone: text-n-text-success ("+$1,240.00"), text-n-text-danger ("Overdue", "−$80.00"), text-n-text-warning, text-n-text-info. They are aliases of the tuned green / red / orange / blue -text-secondary colors and pass 4.5:1 on bg-primary, bg-secondary, bg-elevated and the popover background in both themes. From code that takes a tone, use the toneText map: <span className={toneText[tone]}>…</span>.

text-success
var(--n-text-success)
#407658#6eb18b
text-danger
var(--n-text-danger)
#b94139#df8983
text-warning
var(--n-text-warning)
#9b5b21#dd9b5f
text-info
var(--n-text-info)
#306eb2#76a6da
Solid fills
blue-bg-solid
var(--n-blue-bg-solid)
#2377c9#2377c9
blue-bg-solid-hover
var(--n-blue-bg-solid-hover)
#206bb5#206bb5
blue-bg-solid-pressed
var(--n-blue-bg-solid-pressed)
#1c5fa1#1c5fa1
red-bg-solid
var(--n-red-bg-solid)
#be5349#be5349
red-bg-solid-hover
var(--n-red-bg-solid-hover)
#ab4b42#ab4b42
red-bg-solid-pressed
var(--n-red-bg-solid-pressed)
#98423a#98423a
green-bg-solid
var(--n-green-bg-solid)
#39825c#39825c
orange-bg-solid
var(--n-orange-bg-solid)
#a7642e#a7642e
gray-bg-solid
var(--n-gray-bg-solid)
#777571#777571
text-on-solid
var(--n-text-on-solid)
#fff#fff
Gray
bg-accent-primary
var(--n-gray-bg-accent-primary)
#8e8b86#8e8b86
bg-accent-secondary
var(--n-gray-bg-accent-secondary)
#a19e99#a19e99
bg-elevated
var(--n-gray-bg-elevated)
#fff#2c2c2b
bg-interactive
var(--n-gray-bg-interactive)
#f4f3f3#262626
bg-primary
var(--n-gray-bg-primary)
#f9f8f7#202020
bg-secondary
var(--n-gray-bg-secondary)
#f0efed#383836
bg-tertiary
var(--n-gray-bg-tertiary)
#e6e5e3#5f5e59
border-accent-primary
var(--n-gray-border-accent-primary)
#8e8b86#8e8b86
border-inverse-primary
var(--n-gray-border-inverse-primary)
#5f5e59#5f5e59
border-primary
var(--n-gray-border-primary)
#e6e5e3#383836
border-secondary
var(--n-gray-border-secondary)
#f0efed#2c2c2b
border-strong
var(--n-gray-border-strong)
#d4d3cf#5f5e59
icon-accent-primary
var(--n-gray-icon-accent-primary)
#8e8b86#8e8b86
icon-disabled
var(--n-gray-icon-disabled)
#bcbab6#494846
icon-inverse-primary
var(--n-gray-icon-inverse-primary)
#f9f8f7#f9f8f7
icon-inverse-secondary
var(--n-gray-icon-inverse-secondary)
#d4d3cf#d4d3cf
icon-primary
var(--n-gray-icon-primary)
#494846#f0efed
icon-secondary
var(--n-gray-icon-secondary)
#7d7a75#7d7a75
icon-tertiary
var(--n-gray-icon-tertiary)
#ada9a3#5f5e59
text-accent-primary
var(--n-gray-text-accent-primary)
#6e6b66#a4a29e
text-disabled
var(--n-gray-text-disabled)
#bcbab6#494846
text-inverse-primary
var(--n-gray-text-inverse-primary)
#f9f8f7#f9f8f7
text-inverse-secondary
var(--n-gray-text-inverse-secondary)
#d4d3cf#d4d3cf
text-primary
var(--n-gray-text-primary)
#494846#f0efed
text-secondary
var(--n-gray-text-secondary)
#6d6b66#a5a39f
text-tertiary
var(--n-gray-text-tertiary)
#ada9a3#5f5e59
gray translucent
bg-interactive-translucent-a
var(--n-gray-bg-interactive-translucent-a)
rgba(33,27,23,.05)rgba(255,255,255,.055)
bg-primary-translucent-a
var(--n-gray-bg-primary-translucent-a)
rgba(66,35,3,.03)rgba(252,252,252,.03)
bg-secondary-translucent-a
var(--n-gray-bg-secondary-translucent-a)
rgba(42,28,0,.07)rgba(255,255,235,.1)
bg-tertiary-translucent-a
var(--n-gray-bg-tertiary-translucent-a)
rgba(28,19,1,.11)rgba(255,252,235,.306)
border-primary-translucent-a
var(--n-gray-border-primary-translucent-a)
rgba(28,19,1,.11)rgba(255,255,235,.1)
border-secondary-translucent-a
var(--n-gray-border-secondary-translucent-a)
rgba(42,28,0,.07)rgba(255,255,243,.082)
border-strong-translucent-a
var(--n-gray-border-strong-translucent-a)
rgba(27,21,0,.19)rgba(255,252,235,.306)
text-disabled-translucent-a
var(--n-gray-text-disabled-translucent-a)
rgba(21,14,0,.286)rgba(254,250,240,.208)
Brown
bg-accent-primary
var(--n-brown-bg-accent-primary)
#b68965#b68965
bg-accent-secondary
var(--n-brown-bg-accent-secondary)
#bd9576#bd9576
bg-elevated
var(--n-brown-bg-elevated)
#fff#382d26
bg-interactive
var(--n-brown-bg-interactive)
#f7f2f0#2f2722
bg-primary
var(--n-brown-bg-primary)
#faf8f6#25201d
bg-secondary
var(--n-brown-bg-secondary)
#f5ede9#45362d
bg-tertiary
var(--n-brown-bg-tertiary)
#ebdfd7#6d5340
border-accent-primary
var(--n-brown-border-accent-primary)
#b68965#b68965
border-inverse-primary
var(--n-brown-border-inverse-primary)
#6d5340#6d5340
border-primary
var(--n-brown-border-primary)
#ebdfd7#45362d
border-secondary
var(--n-brown-border-secondary)
#f5ede9#382d26
border-strong
var(--n-brown-border-strong)
#e0cdc0#6d5340
icon-accent-primary
var(--n-brown-icon-accent-primary)
#b68965#b68965
icon-disabled
var(--n-brown-icon-disabled)
#cfb8a8#584437
icon-inverse-primary
var(--n-brown-icon-inverse-primary)
#faf8f6#faf8f6
icon-inverse-secondary
var(--n-brown-icon-inverse-secondary)
#e0cdc0#e0cdc0
icon-primary
var(--n-brown-icon-primary)
#584437#f5ede9
icon-secondary
var(--n-brown-icon-secondary)
#9f765a#bca290
icon-tertiary
var(--n-brown-icon-tertiary)
#bca290#9f765a
text-accent-primary
var(--n-brown-text-accent-primary)
#8a6242#c29d7f
text-disabled
var(--n-brown-text-disabled)
#cfb8a8#584437
text-inverse-primary
var(--n-brown-text-inverse-primary)
#faf8f6#faf8f6
text-inverse-secondary
var(--n-brown-text-inverse-secondary)
#e0cdc0#e0cdc0
text-primary
var(--n-brown-text-primary)
#584437#f5ede9
text-secondary
var(--n-brown-text-secondary)
#85634b#bc9e89
text-tertiary
var(--n-brown-text-tertiary)
#bca290#6d5340
brown translucent
bg-interactive-translucent-a
var(--n-brown-bg-interactive-translucent-a)
rgba(119,34,0,.06)rgba(255,171,119,.094)
bg-primary-translucent-a
var(--n-brown-bg-primary-translucent-a)
rgba(115,59,3,.035)rgba(253,158,101,.05)
bg-secondary-translucent-a
var(--n-brown-bg-secondary-translucent-a)
rgba(139,46,0,.086)rgba(255,177,129,.192)
bg-tertiary-translucent-a
var(--n-brown-bg-tertiary-translucent-a)
rgba(127,51,0,.157)rgba(255,184,132,.365)
border-primary-translucent-a
var(--n-brown-border-primary-translucent-a)
rgba(127,51,0,.157)rgba(255,177,129,.192)
border-secondary-translucent-a
var(--n-brown-border-secondary-translucent-a)
rgba(139,46,0,.086)rgba(255,174,122,.133)
border-strong-translucent-a
var(--n-brown-border-strong-translucent-a)
rgba(129,52,0,.247)rgba(255,184,132,.365)
text-disabled-translucent-a
var(--n-brown-text-disabled-translucent-a)
rgba(114,47,0,.34)rgba(255,182,135,.275)
Orange
bg-accent-primary
var(--n-orange-bg-accent-primary)
#d5803b#d5803b
bg-accent-secondary
var(--n-orange-bg-accent-secondary)
#de9255#de9255
bg-elevated
var(--n-orange-bg-elevated)
#fff#3d2a1d
bg-interactive
var(--n-orange-bg-interactive)
#fdf1e8#30241c
bg-primary
var(--n-orange-bg-primary)
#fcf7f4#231e1b
bg-secondary
var(--n-orange-bg-secondary)
#fbebde#53361f
bg-tertiary
var(--n-orange-bg-tertiary)
#f3ddcb#88522f
border-accent-primary
var(--n-orange-border-accent-primary)
#d5803b#d5803b
border-inverse-primary
var(--n-orange-border-inverse-primary)
#88522f#88522f
border-primary
var(--n-orange-border-primary)
#f3ddcb#53361f
border-secondary
var(--n-orange-border-secondary)
#fbebde#3d2a1d
border-strong
var(--n-orange-border-strong)
#eaccb2#88522f
icon-accent-primary
var(--n-orange-icon-accent-primary)
#d5803b#d5803b
icon-disabled
var(--n-orange-icon-disabled)
#dab798#6a4222
icon-inverse-primary
var(--n-orange-icon-inverse-primary)
#fcf7f4#fcf7f4
icon-inverse-secondary
var(--n-orange-icon-inverse-secondary)
#eaccb2#eaccb2
icon-primary
var(--n-orange-icon-primary)
#6a4222#fbebde
icon-secondary
var(--n-orange-icon-secondary)
#d27b2d#cba27d
icon-tertiary
var(--n-orange-icon-tertiary)
#cba27d#d27b2d
text-accent-primary
var(--n-orange-text-accent-primary)
#9d5922#de9a63
text-disabled
var(--n-orange-text-disabled)
#dab798#6a4222
text-inverse-primary
var(--n-orange-text-inverse-primary)
#fcf7f4#fcf7f4
text-inverse-secondary
var(--n-orange-text-inverse-secondary)
#eaccb2#eaccb2
text-primary
var(--n-orange-text-primary)
#6a4222#fbebde
text-secondary
var(--n-orange-text-secondary)
#9b5b21#dd9b5f
text-tertiary
var(--n-orange-text-tertiary)
#cba27d#88522f
orange translucent
bg-interactive-translucent-a
var(--n-orange-bg-interactive-translucent-a)
rgba(233,100,0,.09)rgba(255,135,55,.1)
bg-primary-translucent-a
var(--n-orange-bg-primary-translucent-a)
rgba(186,72,3,.043)rgba(254,139,71,.043)
bg-secondary-translucent-a
var(--n-orange-bg-secondary-translucent-a)
rgba(224,101,1,.13)rgba(255,147,75,.28)
bg-tertiary-translucent-a
var(--n-orange-bg-tertiary-translucent-a)
rgba(196,88,0,.204)rgba(255,143,71,.482)
border-primary-translucent-a
var(--n-orange-border-primary-translucent-a)
rgba(196,88,0,.204)rgba(255,147,75,.28)
border-secondary-translucent-a
var(--n-orange-border-secondary-translucent-a)
rgba(224,101,1,.13)rgba(255,134,51,.157)
border-strong-translucent-a
var(--n-orange-border-strong-translucent-a)
rgba(186,86,0,.3)rgba(255,143,71,.482)
text-disabled-translucent-a
var(--n-orange-text-disabled-translucent-a)
rgba(163,77,0,.404)rgba(187,107,43,.5)
Yellow
bg-accent-primary
var(--n-yellow-bg-accent-primary)
#d8a32f#d8a32f
bg-accent-secondary
var(--n-yellow-bg-accent-secondary)
#eac26b#eac26b
bg-elevated
var(--n-yellow-bg-elevated)
#fff#373325
bg-interactive
var(--n-yellow-bg-interactive)
#fdf6e6#2d2b20
bg-primary
var(--n-yellow-bg-primary)
#fcfaef#23221a
bg-secondary
var(--n-yellow-bg-secondary)
#f9f3dc#504425
bg-tertiary
var(--n-yellow-bg-tertiary)
#f2e3b7#836426
border-accent-primary
var(--n-yellow-border-accent-primary)
#d8a32f#d8a32f
border-inverse-primary
var(--n-yellow-border-inverse-primary)
#836426#836426
border-primary
var(--n-yellow-border-primary)
#f2e3b7#504425
border-secondary
var(--n-yellow-border-secondary)
#f9f3dc#373325
border-strong
var(--n-yellow-border-strong)
#e8d497#836426
icon-accent-primary
var(--n-yellow-icon-accent-primary)
#d8a32f#d8a32f
icon-disabled
var(--n-yellow-icon-disabled)
#e8d497#655121
icon-inverse-primary
var(--n-yellow-icon-inverse-primary)
#fcfaef#fcfaef
icon-inverse-secondary
var(--n-yellow-icon-inverse-secondary)
#e8d497#d8c283
icon-primary
var(--n-yellow-icon-primary)
#655121#f9f3dc
icon-secondary
var(--n-yellow-icon-secondary)
#cb9434#d8c283
icon-tertiary
var(--n-yellow-icon-tertiary)
#d8c283#cb9434
text-accent-primary
var(--n-yellow-text-accent-primary)
#8a671a#dcad47
text-disabled
var(--n-yellow-text-disabled)
#e2ca88#655121
text-inverse-primary
var(--n-yellow-text-inverse-primary)
#fcfaef#fcfaef
text-inverse-secondary
var(--n-yellow-text-inverse-secondary)
#e8d497#e8d497
text-primary
var(--n-yellow-text-primary)
#655121#f9f3dc
text-secondary
var(--n-yellow-text-secondary)
#8c6624#d7ae65
text-tertiary
var(--n-yellow-text-tertiary)
#d8c283#836426
yellow translucent
bg-interactive-translucent-a
var(--n-yellow-bg-interactive-translucent-a)
rgba(235,163,0,.098)rgba(255,232,106,.086)
bg-primary-translucent-a
var(--n-yellow-bg-primary-translucent-a)
rgba(207,175,0,.063)rgba(255,232,48,.043)
bg-secondary-translucent-a
var(--n-yellow-bg-secondary-translucent-a)
rgba(211,168,0,.137)rgba(255,205,75,.24)
bg-tertiary-translucent-a
var(--n-yellow-bg-tertiary-translucent-a)
rgba(209,156,0,.282)rgba(255,188,53,.46)
border-primary-translucent-a
var(--n-yellow-border-primary-translucent-a)
rgba(209,156,0,.282)rgba(255,205,75,.24)
border-secondary-translucent-a
var(--n-yellow-border-secondary-translucent-a)
rgba(211,168,0,.137)rgba(255,225,117,.13)
border-strong-translucent-a
var(--n-yellow-border-strong-translucent-a)
rgba(199,150,0,.408)rgba(255,188,53,.46)
text-disabled-translucent-a
var(--n-yellow-text-disabled-translucent-a)
rgba(193,141,0,.467)rgba(255,194,49,.33)
Green
bg-accent-primary
var(--n-green-bg-accent-primary)
#46a171#46a171
bg-accent-secondary
var(--n-green-bg-accent-secondary)
#72bc8f#72bc8f
bg-elevated
var(--n-green-bg-elevated)
#fff#24342b
bg-interactive
var(--n-green-bg-interactive)
#eff5f1#202b24
bg-primary
var(--n-green-bg-primary)
#f6f9f7#1b211d
bg-secondary
var(--n-green-bg-secondary)
#e8f1ec#263d30
bg-tertiary
var(--n-green-bg-tertiary)
#d7e6dd#37674c
border-accent-primary
var(--n-green-border-accent-primary)
#46a171#46a171
border-inverse-primary
var(--n-green-border-inverse-primary)
#37674c#37674c
border-primary
var(--n-green-border-primary)
#d7e6dd#263d30
border-secondary
var(--n-green-border-secondary)
#e8f1ec#24342b
border-strong
var(--n-green-border-strong)
#bed9c9#37674c
icon-accent-primary
var(--n-green-icon-accent-primary)
#46a171#46a171
icon-disabled
var(--n-green-icon-disabled)
#a6c7b4#2a533c
icon-inverse-primary
var(--n-green-icon-inverse-primary)
#f6f9f7#f6f9f7
icon-inverse-secondary
var(--n-green-icon-inverse-secondary)
#bed9c9#bed9c9
icon-primary
var(--n-green-icon-primary)
#2a533c#e8f1ec
icon-secondary
var(--n-green-icon-secondary)
#50946e#8bb79d
icon-tertiary
var(--n-green-icon-tertiary)
#8bb79d#50946e
text-accent-primary
var(--n-green-text-accent-primary)
#347854#55b583
text-disabled
var(--n-green-text-disabled)
#a6c7b4#2a533c
text-inverse-primary
var(--n-green-text-inverse-primary)
#f6f9f7#f6f9f7
text-inverse-secondary
var(--n-green-text-inverse-secondary)
#bed9c9#bed9c9
text-primary
var(--n-green-text-primary)
#2a533c#e8f1ec
text-secondary
var(--n-green-text-secondary)
#407658#6eb18b
text-tertiary
var(--n-green-text-tertiary)
#8bb79d#37674c
green translucent
bg-interactive-translucent-a
var(--n-green-bg-interactive-translucent-a)
rgba(0,96,32,.063)rgba(114,255,166,.08)
bg-primary-translucent-a
var(--n-green-bg-primary-translucent-a)
rgba(3,87,31,.035)rgba(83,255,140,.035)
bg-secondary-translucent-a
var(--n-green-bg-secondary-translucent-a)
rgba(0,100,45,.09)rgba(108,255,172,.157)
bg-tertiary-translucent-a
var(--n-green-bg-tertiary-translucent-a)
rgba(0,96,38,.157)rgba(113,255,175,.337)
border-primary-translucent-a
var(--n-green-border-primary-translucent-a)
rgba(0,96,38,.157)rgba(108,255,172,.157)
border-secondary-translucent-a
var(--n-green-border-secondary-translucent-a)
rgba(0,100,45,.09)rgba(119,255,179,.118)
border-strong-translucent-a
var(--n-green-border-strong-translucent-a)
rgba(0,106,43,.255)rgba(113,255,175,.337)
text-disabled-translucent-a
var(--n-green-text-disabled-translucent-a)
rgba(0,95,40,.35)rgba(93,255,164,.25)
Blue
bg-accent-primary
var(--n-blue-bg-accent-primary)
#2783de#2783de
bg-accent-secondary
var(--n-blue-bg-accent-secondary)
#5e9fe8#5e9fe8
bg-elevated
var(--n-blue-bg-elevated)
#fff#213041
bg-interactive
var(--n-blue-bg-interactive)
#ecf5fd#1e2834
bg-primary
var(--n-blue-bg-primary)
#f3f9fd#1a2027
bg-secondary
var(--n-blue-bg-secondary)
#e5f2fc#233850
bg-tertiary
var(--n-blue-bg-tertiary)
#cee3f7#355f8b
border-accent-primary
var(--n-blue-border-accent-primary)
#2783de#2783de
border-inverse-primary
var(--n-blue-border-inverse-primary)
#355f8b#355f8b
border-primary
var(--n-blue-border-primary)
#cee3f7#233850
border-secondary
var(--n-blue-border-secondary)
#e5f2fc#213041
border-strong
var(--n-blue-border-strong)
#b6d4f3#355f8b
button-hover-bg
var(--n-blue-button-hover-bg)
#0077d4#0077d4
button-pressed-bg
var(--n-blue-button-pressed-bg)
#006bc7#006bc7
icon-accent-primary
var(--n-blue-icon-accent-primary)
#2783de#2783de
icon-disabled
var(--n-blue-icon-disabled)
#9dc0ea#264a72
icon-inverse-primary
var(--n-blue-icon-inverse-primary)
#f3f9fd#f3f9fd
icon-inverse-secondary
var(--n-blue-icon-inverse-secondary)
#b6d4f3#b6d4f3
icon-primary
var(--n-blue-icon-primary)
#264a72#e5f2fc
icon-secondary
var(--n-blue-icon-secondary)
#387dc9#83abe1
icon-tertiary
var(--n-blue-icon-tertiary)
#83abe1#387dc9
text-accent-primary
var(--n-blue-text-accent-primary)
#206eba#63a5e7
text-disabled
var(--n-blue-text-disabled)
#9dc0ea#264a72
text-inverse-primary
var(--n-blue-text-inverse-primary)
#f3f9fd#f3f9fd
text-inverse-secondary
var(--n-blue-text-inverse-secondary)
#b6d4f3#b6d4f3
text-primary
var(--n-blue-text-primary)
#264a72#e5f2fc
text-secondary
var(--n-blue-text-secondary)
#306eb2#76a6da
text-tertiary
var(--n-blue-text-tertiary)
#83abe1#355f8b
blue translucent
bg-interactive-translucent-a
var(--n-blue-bg-interactive-translucent-a)
rgba(0,121,228,.075)rgba(68,153,255,.118)
bg-primary-translucent-a
var(--n-blue-bg-primary-translucent-a)
rgba(0,128,213,.047)rgba(41,139,253,.063)
bg-secondary-translucent-a
var(--n-blue-bg-secondary-translucent-a)
rgba(0,124,215,.094)rgba(67,155,255,.24)
bg-tertiary-translucent-a
var(--n-blue-bg-tertiary-translucent-a)
rgba(0,118,217,.204)rgba(81,166,255,.494)
border-primary-translucent-a
var(--n-blue-border-primary-translucent-a)
rgba(0,118,217,.204)rgba(67,155,255,.24)
border-secondary-translucent-a
var(--n-blue-border-secondary-translucent-a)
rgba(0,124,215,.094)rgba(71,157,255,.173)
border-strong-translucent-a
var(--n-blue-border-strong-translucent-a)
rgba(0,112,219,.286)rgba(81,166,255,.494)
text-disabled-translucent-a
var(--n-blue-text-disabled-translucent-a)
rgba(0,91,200,.384)rgba(59,152,255,.384)
Purple
bg-accent-primary
var(--n-purple-bg-accent-primary)
#b577d6#b577d6
bg-accent-secondary
var(--n-purple-bg-accent-secondary)
#bf8eda#bf8eda
bg-elevated
var(--n-purple-bg-elevated)
#fff#36293f
bg-interactive
var(--n-purple-bg-interactive)
#f6f0fb#2c2332
bg-primary
var(--n-purple-bg-primary)
#faf7fc#221d25
bg-secondary
var(--n-purple-bg-secondary)
#f3ebf9#3c2d47
bg-tertiary
var(--n-purple-bg-tertiary)
#e8dbf2#674d7b
border-accent-primary
var(--n-purple-border-accent-primary)
#b577d6#b577d6
border-inverse-primary
var(--n-purple-border-inverse-primary)
#674d7b#674d7b
border-primary
var(--n-purple-border-primary)
#e8dbf2#3c2d47
border-secondary
var(--n-purple-border-secondary)
#f3ebf9#36293f
border-strong
var(--n-purple-border-strong)
#dbc8e8#674d7b
icon-accent-primary
var(--n-purple-icon-accent-primary)
#b577d6#b577d6
icon-disabled
var(--n-purple-icon-disabled)
#c7b3d5#553b69
icon-inverse-primary
var(--n-purple-icon-inverse-primary)
#faf7fc#faf7fc
icon-inverse-secondary
var(--n-purple-icon-inverse-secondary)
#dbc8e8#dbc8e8
icon-primary
var(--n-purple-icon-primary)
#553b69#f3ebf9
icon-secondary
var(--n-purple-icon-secondary)
#9a6bb4#9a6bb4
icon-tertiary
var(--n-purple-icon-tertiary)
#b49cc6#9a6bb4
text-accent-primary
var(--n-purple-text-accent-primary)
#9740c5#be87db
text-disabled
var(--n-purple-text-disabled)
#c7b3d5#553b69
text-inverse-primary
var(--n-purple-text-inverse-primary)
#faf7fc#faf7fc
text-inverse-secondary
var(--n-purple-text-inverse-secondary)
#dbc8e8#dbc8e8
text-primary
var(--n-purple-text-primary)
#553b69#f3ebf9
text-secondary
var(--n-purple-text-secondary)
#8955a7#b28fc6
text-tertiary
var(--n-purple-text-tertiary)
#b49cc6#674d7b
purple translucent
bg-interactive-translucent-a
var(--n-purple-bg-interactive-translucent-a)
rgba(102,0,187,.06)rgba(200,117,255,.11)
bg-primary-translucent-a
var(--n-purple-bg-primary-translucent-a)
rgba(98,3,161,.03)rgba(196,101,253,.05)
bg-secondary-translucent-a
var(--n-purple-bg-secondary-translucent-a)
rgba(102,0,178,.08)rgba(200,125,255,.2)
bg-tertiary-translucent-a
var(--n-purple-bg-tertiary-translucent-a)
rgba(92,0,163,.14)rgba(208,147,255,.427)
border-primary-translucent-a
var(--n-purple-border-primary-translucent-a)
rgba(92,0,163,.14)rgba(200,125,255,.2)
border-secondary-translucent-a
var(--n-purple-border-secondary-translucent-a)
rgba(102,0,178,.08)rgba(201,122,255,.165)
border-strong-translucent-a
var(--n-purple-border-strong-translucent-a)
rgba(88,1,149,.216)rgba(208,147,255,.427)
text-disabled-translucent-a
var(--n-purple-text-disabled-translucent-a)
rgba(67,0,114,.298)rgba(197,123,255,.345)
Pink
bg-accent-primary
var(--n-pink-bg-accent-primary)
#db6999#db6999
bg-accent-secondary
var(--n-pink-bg-accent-secondary)
#df84a8#df84a8
bg-elevated
var(--n-pink-bg-elevated)
#fff#3f2631
bg-interactive
var(--n-pink-bg-interactive)
#fbeff5#332129
bg-primary
var(--n-pink-bg-primary)
#fcf7f9#261c20
bg-secondary
var(--n-pink-bg-secondary)
#fae9f1#4e2b3c
bg-tertiary
var(--n-pink-bg-tertiary)
#f4d8e4#7b4760
border-accent-primary
var(--n-pink-border-accent-primary)
#db6999#db6999
border-inverse-primary
var(--n-pink-border-inverse-primary)
#7b4760#7b4760
border-primary
var(--n-pink-border-primary)
#f4d8e4#4e2b3c
border-secondary
var(--n-pink-border-secondary)
#fae9f1#3f2631
border-strong
var(--n-pink-border-strong)
#eac4d5#7b4760
icon-accent-primary
var(--n-pink-icon-accent-primary)
#db6999#db6999
icon-disabled
var(--n-pink-icon-disabled)
#d8afc1#68354e
icon-inverse-primary
var(--n-pink-icon-inverse-primary)
#fcf7f9#fcf7f9
icon-inverse-secondary
var(--n-pink-icon-inverse-secondary)
#eac4d5#eac4d5
icon-primary
var(--n-pink-icon-primary)
#68354e#fae9f1
icon-secondary
var(--n-pink-icon-secondary)
#c14c8a#c897ad
icon-tertiary
var(--n-pink-icon-tertiary)
#c897ad#c14c8a
text-accent-primary
var(--n-pink-text-accent-primary)
#c12e6c#e184ab
text-disabled
var(--n-pink-text-disabled)
#d8afc1#68354e
text-inverse-primary
var(--n-pink-text-inverse-primary)
#fcf7f9#fcf7f9
text-inverse-secondary
var(--n-pink-text-inverse-secondary)
#eac4d5#eac4d5
text-primary
var(--n-pink-text-primary)
#68354e#fae9f1
text-secondary
var(--n-pink-text-secondary)
#b33e7c#d689b2
text-tertiary
var(--n-pink-text-tertiary)
#c897ad#7b4760
pink translucent
bg-interactive-translucent-a
var(--n-pink-bg-interactive-translucent-a)
rgba(191,0,96,.063)rgba(255,96,167,.114)
bg-primary-translucent-a
var(--n-pink-bg-primary-translucent-a)
rgba(161,3,66,.03)rgba(255,78,149,.055)
bg-secondary-translucent-a
var(--n-pink-bg-secondary-translucent-a)
rgba(197,0,93,.086)rgba(255,103,177,.23)
bg-tertiary-translucent-a
var(--n-pink-bg-tertiary-translucent-a)
rgba(183,0,78,.153)rgba(255,133,192,.427)
border-primary-translucent-a
var(--n-pink-border-primary-translucent-a)
rgba(183,0,78,.153)rgba(255,103,177,.23)
border-secondary-translucent-a
var(--n-pink-border-secondary-translucent-a)
rgba(197,0,93,.086)rgba(255,104,171,.165)
border-strong-translucent-a
var(--n-pink-border-strong-translucent-a)
rgba(164,0,73,.23)rgba(255,133,192,.427)
text-disabled-translucent-a
var(--n-pink-text-disabled-translucent-a)
rgba(131,0,57,.314)rgba(255,107,180,.34)
Red
bg-accent-primary
var(--n-red-bg-accent-primary)
#e56458#e56458
bg-accent-secondary
var(--n-red-bg-accent-secondary)
#e97366#e56458
bg-elevated
var(--n-red-bg-elevated)
#fff#412725
bg-interactive
var(--n-red-bg-interactive)
#fdf0ef#332221
bg-primary
var(--n-red-bg-primary)
#fdf6f6#241d1d
bg-secondary
var(--n-red-bg-secondary)
#fce9e7#502c29
bg-tertiary
var(--n-red-bg-tertiary)
#f7d9d5#924943
border-accent-primary
var(--n-red-border-accent-primary)
#e56458#e56458
border-inverse-primary
var(--n-red-border-inverse-primary)
#924943#924943
border-primary
var(--n-red-border-primary)
#f7d9d5#502c29
border-secondary
var(--n-red-border-secondary)
#fce9e7#412725
border-strong
var(--n-red-border-strong)
#f0c5be#924943
icon-accent-primary
var(--n-red-icon-accent-primary)
#e56458#e56458
icon-disabled
var(--n-red-icon-disabled)
#e0aea6#6d3531
icon-inverse-primary
var(--n-red-icon-inverse-primary)
#fdf6f6#fdf6f6
icon-inverse-secondary
var(--n-red-icon-inverse-secondary)
#f0c5be#f0c5be
icon-primary
var(--n-red-icon-primary)
#6d3531#fce9e7
icon-secondary
var(--n-red-icon-secondary)
#cf5148#d0988d
icon-tertiary
var(--n-red-icon-tertiary)
#d0988d#cf5148
text-accent-primary
var(--n-red-text-accent-primary)
#c92e1f#ea8379
text-disabled
var(--n-red-text-disabled)
#e0aea6#6d3531
text-inverse-primary
var(--n-red-text-inverse-primary)
#fdf6f6#fdf6f6
text-inverse-secondary
var(--n-red-text-inverse-secondary)
#f0c5be#f0c5be
text-primary
var(--n-red-text-primary)
#6d3531#fce9e7
text-secondary
var(--n-red-text-secondary)
#b94139#df8983
text-tertiary
var(--n-red-text-tertiary)
#d0988d#924943
red translucent
bg-interactive-translucent-a
var(--n-red-bg-interactive-translucent-a)
rgba(223,16,0,.063)rgba(255,105,96,.114)
bg-primary-translucent-a
var(--n-red-bg-primary-translucent-a)
rgba(199,3,3,.035)rgba(251,107,107,.047)
bg-secondary-translucent-a
var(--n-red-bg-secondary-translucent-a)
rgba(223,22,0,.094)rgba(255,104,92,.24)
bg-tertiary-translucent-a
var(--n-red-bg-tertiary-translucent-a)
rgba(206,24,0,.165)rgba(255,116,105,.525)
border-primary-translucent-a
var(--n-red-border-primary-translucent-a)
rgba(206,24,0,.165)rgba(255,104,92,.24)
border-secondary-translucent-a
var(--n-red-border-secondary-translucent-a)
rgba(223,22,0,.094)rgba(255,106,94,.173)
border-strong-translucent-a
var(--n-red-border-strong-translucent-a)
rgba(196,27,0,.255)rgba(255,116,105,.525)
text-disabled-translucent-a
var(--n-red-text-disabled-translucent-a)
rgba(166,23,0,.35)rgba(255,102,91,.365)
Teal
bg-accent-primary
var(--n-teal-bg-accent-primary)
#37a4b4#37a4b4
bg-accent-secondary
var(--n-teal-bg-accent-secondary)
#4fb9c9#4fb9c9
bg-elevated
var(--n-teal-bg-elevated)
#fff#193439
bg-interactive
var(--n-teal-bg-interactive)
#e8f6f9#182b2f
bg-primary
var(--n-teal-bg-primary)
#f3fafb#172124
bg-secondary
var(--n-teal-bg-secondary)
#e0f3f7#143d45
bg-tertiary
var(--n-teal-bg-tertiary)
#cae9f0#226471
border-accent-primary
var(--n-teal-border-accent-primary)
#37a4b4#37a4b4
border-inverse-primary
var(--n-teal-border-inverse-primary)
#226471#226471
border-primary
var(--n-teal-border-primary)
#cae9f0#143d45
border-secondary
var(--n-teal-border-secondary)
#e0f3f7#193439
border-strong
var(--n-teal-border-strong)
#b0dbe4#226471
icon-accent-primary
var(--n-teal-icon-accent-primary)
#37a4b4#37a4b4
icon-disabled
var(--n-teal-icon-disabled)
#99c8d3#18505b
icon-inverse-primary
var(--n-teal-icon-inverse-primary)
#f3fafb#f3fafb
icon-inverse-secondary
var(--n-teal-icon-inverse-secondary)
#b0dbe4#b0dbe4
icon-primary
var(--n-teal-icon-primary)
#18505b#e0f3f7
icon-secondary
var(--n-teal-icon-secondary)
#2c8b9e#7eb6c2
icon-tertiary
var(--n-teal-icon-tertiary)
#7eb6c2#2c8b9e
text-accent-primary
var(--n-teal-text-accent-primary)
#27747f#3cb2c3
text-disabled
var(--n-teal-text-disabled)
#99c8d3#18505b
text-inverse-primary
var(--n-teal-text-inverse-primary)
#f3fafb#f3fafb
text-inverse-secondary
var(--n-teal-text-inverse-secondary)
#b0dbe4#b0dbe4
text-primary
var(--n-teal-text-primary)
#18505b#e0f3f7
text-secondary
var(--n-teal-text-secondary)
#257484#38b0c8
text-tertiary
var(--n-teal-text-tertiary)
#7eb6c2#226471
teal translucent
bg-interactive-translucent-a
var(--n-teal-bg-interactive-translucent-a)
rgba(0,155,188,.09)rgba(15,213,255,.094)
bg-primary-translucent-a
var(--n-teal-bg-primary-translucent-a)
rgba(3,150,171,.047)rgba(0,126,164,.08)
bg-secondary-translucent-a
var(--n-teal-bg-secondary-translucent-a)
rgba(1,157,189,.12)rgba(0,205,245,.2)
bg-tertiary-translucent-a
var(--n-teal-bg-tertiary-translucent-a)
rgba(0,149,183,.208)rgba(49,221,255,.38)
border-primary-translucent-a
var(--n-teal-border-primary-translucent-a)
rgba(0,149,183,.208)rgba(0,205,245,.2)
border-secondary-translucent-a
var(--n-teal-border-secondary-translucent-a)
rgba(1,157,189,.12)rgba(25,219,255,.137)
border-strong-translucent-a
var(--n-teal-border-strong-translucent-a)
rgba(0,139,168,.31)rgba(49,221,255,.38)
text-disabled-translucent-a
var(--n-teal-text-disabled-translucent-a)
rgba(0,118,145,.4)rgba(22,217,255,.286)
Palette · blue
blue-800
var(--n-palette-blue-800)
#183347#388ebf
blue-900
var(--n-palette-blue-900)
#0c1d2b#379ad3
blue-50
var(--n-palette-blue-50)
#e7f3f8rgba(51,126,169,.08)
blue-500
var(--n-palette-blue-500)
#337ea9rgba(51,126,169,.65)
blue-600
var(--n-palette-blue-600)
#2d6387rgba(51,126,169,.82)
blue-700
var(--n-palette-blue-700)
#1f4a68rgba(51,126,169,.91)
blue-75
var(--n-palette-blue-75)
rgba(51,126,169,.12)rgba(51,126,169,.12)
blue-100
var(--n-palette-blue-100)
rgba(93,165,206,.27)#1d282e
blue-30
var(--n-palette-blue-30)
rgba(91,166,209,.07)#cbe6f7
blue-300
var(--n-palette-blue-300)
rgba(63,137,184,.65)#143a4e
Palette · brown
brown-800
var(--n-palette-brown-800)
#442a1e#b27e67
brown-900
var(--n-palette-brown-900)
#2d1506#ba856f
brown-50
var(--n-palette-brown-50)
#f4eeeergba(184,101,72,.08)
brown-500
var(--n-palette-brown-500)
#9f6b53rgba(239,153,118,.6)
brown-600
var(--n-palette-brown-600)
#80543frgba(209,138,109,.75)
brown-700
var(--n-palette-brown-700)
#613e2ergba(187,125,100,.91)
brown-75
var(--n-palette-brown-75)
rgba(184,101,71,.15)rgba(184,101,71,.15)
brown-100
var(--n-palette-brown-100)
rgba(210,162,141,.35)#2f2723
brown-30
var(--n-palette-brown-30)
rgba(210,162,141,.07)#f4f4d3
brown-300
var(--n-palette-brown-300)
rgba(156,76,40,.5)#4a3228
Palette · gray
gray-0
var(--n-palette-gray-0)
#fff#000
gray-50
var(--n-palette-gray-50)
#f8f8f7#191919
gray-500
var(--n-palette-gray-500)
#73726e#5a5a5a
gray-600
var(--n-palette-gray-600)
#5f5e5b#7f7f7f
gray-700
var(--n-palette-gray-700)
#484743#9b9b9b
gray-800
var(--n-palette-gray-800)
#32302c#d3d3d3
gray-850
var(--n-palette-gray-850)
#e1e1e1#e1e1e1
gray-900
var(--n-palette-gray-900)
#1d1b16#fff
gray-100
var(--n-palette-gray-100)
rgba(84,72,49,.15)#202020
gray-200
var(--n-palette-gray-200)
rgba(81,73,60,.32)#252525
gray-30
var(--n-palette-gray-30)
rgba(84,72,49,.04)#151515
gray-300
var(--n-palette-gray-300)
rgba(70,68,64,.45)#2f2f2f
gray-400
var(--n-palette-gray-400)
rgba(71,70,68,.6)#373737
gray-75
var(--n-palette-gray-75)
rgba(84,72,49,.08)#1c1c1c
gray-90
var(--n-palette-gray-90)
rgba(227,226,224,.7)#1e1e1e
Palette · green
green-800
var(--n-palette-green-800)
#1c3829#3c9d6a
green-900
var(--n-palette-green-900)
#102416#529e72
green-50
var(--n-palette-green-50)
#edf3ecrgba(45,153,100,.08)
green-500
var(--n-palette-green-500)
#448361rgba(44,167,106,.65)
green-600
var(--n-palette-green-600)
#33684ergba(44,167,106,.82)
green-700
var(--n-palette-green-700)
#1f4f3brgba(44,167,106,.91)
green-75
var(--n-palette-green-75)
rgba(45,153,100,.12)rgba(45,153,100,.12)
green-100
var(--n-palette-green-100)
rgba(123,183,129,.27)#222b26
green-30
var(--n-palette-green-30)
rgba(123,183,129,.07)#d7e8d9
green-300
var(--n-palette-green-300)
rgba(80,144,103,.65)#243d30
Palette · orange
orange-800
var(--n-palette-orange-800)
#49290e#e48539
orange-900
var(--n-palette-orange-900)
#281809#c77d48
orange-50
var(--n-palette-orange-50)
#fbecddrgba(233,126,40,.06)
orange-500
var(--n-palette-orange-500)
#d9730drgba(233,126,34,.6)
orange-600
var(--n-palette-orange-600)
#8d4e17rgba(233,126,33,.8)
orange-700
var(--n-palette-orange-700)
#6a3b12rgba(233,126,32,.91)
orange-75
var(--n-palette-orange-75)
rgba(233,126,39,.15)rgba(233,126,39,.15)
orange-100
var(--n-palette-orange-100)
rgba(224,124,57,.27)#38281e
orange-30
var(--n-palette-orange-30)
rgba(224,124,57,.07)#f0e0c8
orange-300
var(--n-palette-orange-300)
rgba(217,95,13,.65)#5c3b23
Palette · pink
pink-800
var(--n-palette-pink-800)
#4c2337#c94b8c
pink-900
var(--n-palette-pink-900)
#2c1420#d15796
pink-50
var(--n-palette-pink-50)
#fcf1f6rgba(220,76,145,.06)
pink-500
var(--n-palette-pink-500)
#c14c8argba(220,76,145,.6)
pink-600
var(--n-palette-pink-600)
#a2336frgba(220,76,145,.82)
pink-700
var(--n-palette-pink-700)
#6f3151rgba(216,87,149,.91)
pink-75
var(--n-palette-pink-75)
rgba(220,76,145,.09)rgba(220,76,145,.09)
pink-100
var(--n-palette-pink-100)
rgba(225,136,179,.27)#302228
pink-30
var(--n-palette-pink-30)
rgba(231,147,188,.07)#f6daf7
pink-300
var(--n-palette-pink-300)
rgba(209,91,148,.65)#4e2c3c
Palette · purple
purple-800
var(--n-palette-purple-800)
#412454#9d67d2
purple-900
var(--n-palette-purple-900)
#26152e#9d68d3
purple-50
var(--n-palette-purple-50)
#f8f3fcrgba(155,97,211,.08)
purple-500
var(--n-palette-purple-500)
#9065b0rgba(155,97,211,.65)
purple-600
var(--n-palette-purple-600)
#754d92rgba(155,97,211,.82)
purple-700
var(--n-palette-purple-700)
#5a3872rgba(155,97,211,.91)
purple-75
var(--n-palette-purple-75)
rgba(155,97,211,.1)rgba(155,97,211,.1)
purple-100
var(--n-palette-purple-100)
rgba(168,129,197,.27)#2b2431
purple-30
var(--n-palette-purple-30)
rgba(206,175,229,.07)#e8def6
purple-300
var(--n-palette-purple-300)
rgba(154,114,185,.65)#3c2d49
Palette · red
red-800
var(--n-palette-red-800)
#5d1715#de5550
red-900
var(--n-palette-red-900)
#30130f#e65b58
red-50
var(--n-palette-red-50)
#fdebecrgba(222,85,88,.1)
red-500
var(--n-palette-red-500)
#cd3c3argba(222,85,82,.6)
red-600
var(--n-palette-red-600)
#ae2f2ergba(222,85,81,.8)
red-700
var(--n-palette-red-700)
#862120rgba(222,85,80,.91)
red-75
var(--n-palette-red-75)
rgba(222,85,87,.15)rgba(222,85,87,.15)
red-100
var(--n-palette-red-100)
rgba(244,171,159,.4)#362422
red-30
var(--n-palette-red-30)
rgba(243,136,118,.07)#fddada
red-300
var(--n-palette-red-300)
rgba(215,38,21,.5)#522e2a
Palette · ui-blue
ui-blue-600
var(--n-palette-ui-blue-600)
#2383e2#2383e2
ui-blue-700
var(--n-palette-ui-blue-700)
#105fad#4fa7ff
ui-blue-150
var(--n-palette-ui-blue-150)
rgba(35,131,226,.1)rgba(35,131,226,.1)
Palette · yellow
yellow-800
var(--n-palette-yellow-800)
#402c1b#d99e35
yellow-900
var(--n-palette-yellow-900)
#251910#ca984d
yellow-50
var(--n-palette-yellow-50)
#fbf3dbrgba(162,105,50,.1)
yellow-500
var(--n-palette-yellow-500)
#cb912frgba(240,166,51,.6)
yellow-600
var(--n-palette-yellow-600)
#835e33rgba(232,162,37,.8)
yellow-700
var(--n-palette-yellow-700)
#5f4023rgba(221,154,34,.91)
yellow-75
var(--n-palette-yellow-75)
rgba(152,102,48,.15)rgba(152,102,48,.15)
yellow-100
var(--n-palette-yellow-100)
rgba(236,191,66,.39)#392e1e
yellow-30
var(--n-palette-yellow-30)
rgba(215,177,24,.07)#f0e2cb
yellow-300
var(--n-palette-yellow-300)
rgba(215,150,9,.75)#564328
Palette · blue-200-a
blue-200-a
var(--n-palette-blue-200-a)
rgba(57,135,184,.4)rgba(51,126,169,.2)
Palette · blue-400-a
blue-400-a
var(--n-palette-blue-400-a)
rgba(54,129,177,.82)rgba(51,126,169,.5)
Palette · brown-200-a
brown-200-a
var(--n-palette-brown-200-a)
rgba(156,76,40,.32)rgba(184,101,69,.25)
Palette · brown-400-a
brown-400-a
var(--n-palette-brown-400-a)
rgba(156,76,40,.68)rgba(184,101,67,.45)
Palette · green-200-a
green-200-a
var(--n-palette-green-200-a)
rgba(80,144,103,.4)rgba(45,153,100,.2)
Palette · green-400-a
green-400-a
var(--n-palette-green-400-a)
rgba(66,133,90,.82)rgba(45,153,100,.5)
Palette · orange-200-a
orange-200-a
var(--n-palette-orange-200-a)
rgba(217,95,13,.4)rgba(233,126,37,.2)
Palette · orange-400-a
orange-400-a
var(--n-palette-orange-400-a)
rgba(217,95,13,.82)rgba(233,126,35,.45)
Palette · page-glass-0-a
page-glass-0-a
var(--n-palette-page-glass-0-a)
rgba(255,255,255,.8)rgba(25,25,25,.8)
Palette · pink-200-a
pink-200-a
var(--n-palette-pink-200-a)
rgba(204,92,146,.4)rgba(220,76,145,.22)
Palette · pink-400-a
pink-400-a
var(--n-palette-pink-400-a)
rgba(196,84,138,.82)rgba(220,76,145,.4)
Palette · purple-200-a
purple-200-a
var(--n-palette-purple-200-a)
rgba(141,98,174,.4)rgba(155,97,211,.18)
Palette · purple-400-a
purple-400-a
var(--n-palette-purple-400-a)
rgba(148,103,182,.82)rgba(168,91,242,.34)
Palette · red-200-a
red-200-a
var(--n-palette-red-200-a)
rgba(215,38,21,.32)rgba(222,85,85,.25)
Palette · red-400-a
red-400-a
var(--n-palette-red-400-a)
rgba(215,38,21,.68)rgba(222,85,83,.45)
Palette · translucent-gray-100-a
translucent-gray-100-a
var(--n-palette-translucent-gray-100-a)
rgba(0,0,0,.06)rgba(255,255,255,.03)
Palette · translucent-gray-200-a
translucent-gray-200-a
var(--n-palette-translucent-gray-200-a)
rgba(0,0,0,.07)rgba(255,255,255,.055)
Palette · translucent-gray-300-a
translucent-gray-300-a
var(--n-palette-translucent-gray-300-a)
rgba(0,0,0,.11)rgba(255,255,255,.094)
Palette · translucent-gray-400-a
translucent-gray-400-a
var(--n-palette-translucent-gray-400-a)
rgba(0,0,0,.157)rgba(255,255,255,.13)
Palette · translucent-gray-500-a
translucent-gray-500-a
var(--n-palette-translucent-gray-500-a)
rgba(0,0,0,.333)rgba(255,255,255,.282)
Palette · translucent-gray-600-a
translucent-gray-600-a
var(--n-palette-translucent-gray-600-a)
rgba(0,0,0,.46)rgba(255,255,255,.46)
Palette · translucent-gray-700-a
translucent-gray-700-a
var(--n-palette-translucent-gray-700-a)
rgba(0,0,0,.62)rgba(255,255,255,.565)
Palette · translucent-gray-75-a
translucent-gray-75-a
var(--n-palette-translucent-gray-75-a)
rgba(0,0,0,.05)rgba(255,255,255,.016)
Palette · translucent-gray-800-a
translucent-gray-800-a
var(--n-palette-translucent-gray-800-a)
rgba(0,0,0,.816)rgba(255,255,255,.81)
Palette · translucent-gray-850-a
translucent-gray-850-a
var(--n-palette-translucent-gray-850-a)
rgba(0,0,0,.89)rgba(255,255,255,.87)
Palette · translucent-gray-900-a
translucent-gray-900-a
var(--n-palette-translucent-gray-900-a)
rgba(0,0,0,.99)rgba(255,255,255,.96)
Palette · ui-blue-100-a
ui-blue-100-a
var(--n-palette-ui-blue-100-a)
rgba(35,131,226,.07)rgba(35,131,226,.07)
Palette · ui-blue-200-a
ui-blue-200-a
var(--n-palette-ui-blue-200-a)
rgba(35,131,226,.14)rgba(35,131,226,.14)
Palette · ui-blue-300-a
ui-blue-300-a
var(--n-palette-ui-blue-300-a)
rgba(35,131,226,.21)rgba(35,131,226,.2)
Palette · ui-blue-400-a
ui-blue-400-a
var(--n-palette-ui-blue-400-a)
rgba(35,131,226,.35)rgba(35,131,226,.35)
Palette · ui-blue-50-a
ui-blue-50-a
var(--n-palette-ui-blue-50-a)
rgba(35,131,226,.035)rgba(35,131,226,.035)
Palette · ui-blue-500-a
ui-blue-500-a
var(--n-palette-ui-blue-500-a)
rgba(35,131,226,.57)rgba(35,131,226,.57)
Palette · ui-blue-75-a
ui-blue-75-a
var(--n-palette-ui-blue-75-a)
rgba(35,131,226,.05)rgba(35,131,226,.05)
Palette · wash-glass-0-a
wash-glass-0-a
var(--n-palette-wash-glass-0-a)
rgba(249,249,248,.8)rgba(32,32,32,.8)
Palette · yellow-200-a
yellow-200-a
var(--n-palette-yellow-200-a)
rgba(229,175,25,.55)rgba(179,129,61,.2)
Palette · yellow-400-a
yellow-400-a
var(--n-palette-yellow-400-a)
rgba(192,125,0,.82)rgba(250,177,67,.5)
Palette · translucent-gray
translucent-gray-30
var(--n-palette-translucent-gray-30)
rgba(0,0,0,.01)#151515
translucent-gray-50
var(--n-palette-translucent-gray-50)
rgba(0,0,0,.04)#191919
© 2026 Motion. Internal documentation.