Nature Portfolio
- Name:
color-white
- Type:
- literal
- Value:
- #fff
- Will effect:
-
background-color
-
neutral-white
-
palette-default-white
- Name:
color-black
- Type:
- literal
- Value:
- #000
- Will effect:
-
neutral-black
-
palette-default-black
- Name:
color-greyscale-100
- Type:
- literal
- Value:
- #eeeeee
- Will effect:
-
palette-default-greyscale-100
- Name:
color-greyscale-200
- Type:
- literal
- Value:
- #f8f8f8
- Will effect:
-
palette-default-greyscale-200
- Name:
color-greyscale-300
- Type:
- literal
- Value:
- #f3f3f3
- Will effect:
-
neutral-lightest
-
palette-default-greyscale-300
- Name:
color-greyscale-400
- Type:
- literal
- Value:
- #dadada
- Will effect:
-
border-color-indent
-
neutral-lighter
-
palette-default-greyscale-400
- Name:
color-greyscale-500
- Type:
- literal
- Value:
- #d5d5d5
- Will effect:
-
palette-default-greyscale-500
- Name:
color-greyscale-600
- Type:
- literal
- Value:
- #666
- Will effect:
-
neutral-dark
-
palette-default-greyscale-600
-
surface-table-heading
- Name:
color-greyscale-700
- Type:
- literal
- Value:
- #555
- Will effect:
-
neutral-darker
-
palette-default-greyscale-700
- Name:
color-greyscale-800
- Type:
- literal
- Value:
- #222
- Will effect:
-
border-color
-
icon-color
-
neutral-darkest
-
palette-default-greyscale-800
- Name:
color-blue-100
- Type:
- literal
- Value:
- #ebf6ff
- Will effect:
-
palette-default-blue-lightest
- Name:
color-blue-200
- Type:
- literal
- Value:
- #f0f7fc
- Will effect:
-
palette-default-blue-light-200
- Name:
color-blue-300
- Type:
- literal
- Value:
- #C5E0F4
- Will effect:
-
palette-default-blue-light-300
- Name:
color-blue-400
- Type:
- literal
- Value:
- #0088CC
- Will effect:
-
palette-default-blue-light-400
- Name:
color-blue-500
- Type:
- literal
- Value:
- #069
- Name:
color-blue-600
- Type:
- literal
- Value:
- #004b83
- Will effect:
-
palette-default-blue-medium-600
- Name:
color-blue-700
- Type:
- literal
- Value:
- #025E8D
- Will effect:
-
palette-default-blue-medium-700
- Name:
color-blue-900
- Type:
- literal
- Value:
- #01324B
- Will effect:
-
palette-interaction-hover
-
palette-default-blue-dark-900
- Name:
color-orange-200
- Type:
- literal
- Value:
- #FFEFDF
- Will effect:
-
palette-default-orange-light-200
- Name:
color-orange-300
- Type:
- literal
- Value:
- #ffe0bf
- Name:
color-orange-400
- Type:
- literal
- Value:
- #F58220
- Will effect:
-
palette-default-orange-medium-400
- Name:
color-orange-500
- Type:
- literal
- Value:
- #C75301
- Will effect:
-
palette-default-orange-medium-500
- Name:
color-orange-700
- Type:
- literal
- Value:
- #c04300
- Name:
color-orange-900
- Type:
- literal
- Value:
- #b74616
- Will effect:
-
palette-default-orange-dark
- Name:
color-green-200
- Type:
- literal
- Value:
- #E4F5E6
- Will effect:
-
palette-default-green-light-200
-
state-success-surface
-
status-success-surface
- Name:
color-green-300
- Type:
- literal
- Value:
- #cdedd1
- Will effect:
-
state-success-border
-
status-success-border
- Name:
color-green-400
- Type:
- literal
- Value:
- #00A69D
- Will effect:
-
palette-default-green-medium-400
- Name:
color-green-500
- Type:
- literal
- Value:
- #007373
- Will effect:
-
palette-default-green-medium-500
- Name:
color-green-700
- Type:
- literal
- Value:
- #007A4B
- Will effect:
-
state-success
-
status-success-foreground
-
status-success-accent
- Name:
color-yellow-500
- Type:
- literal
- Value:
- #fece3e
- Name:
color-purple-500
- Type:
- literal
- Value:
- #785BA7
- Name:
color-red-300
- Type:
- literal
- Value:
- #f15a40
- Name:
color-red-400
- Type:
- literal
- Value:
- #ff0000
- Will effect:
-
palette-default-red
- Name:
color-red-500
- Type:
- literal
- Value:
- #ed1C24
- Will effect:
-
palette-default-red-medium
-
status-error-surface
-
status-error-border
-
status-error-foreground
-
status-error-accent
- Name:
color-red-800
- Type:
- literal
- Value:
- #940720
- Name:
color-cerulean-200
- Type:
- literal
- Value:
- #e0f5fa
- Will effect:
-
state-information-surface
-
status-information-surface
- Name:
color-cerulean-300
- Type:
- literal
- Value:
- #c1ecf6
- Will effect:
-
state-information-border
-
status-information-border
- Name:
color-cerulean-700
- Type:
- literal
- Value:
- #17758c
- Will effect:
-
state-information
-
status-information-foreground
-
status-information-accent
- Name:
color-goldenrod-200
- Type:
- literal
- Value:
- #faf1dc
- Will effect:
-
state-warning-surface
-
status-warning-surface
- Name:
color-goldenrod-300
- Type:
- literal
- Value:
- #f4e3b8
- Will effect:
-
state-warning-border
-
status-warning-border
- Name:
color-goldenrod-400
- Type:
- literal
- Value:
- #daa520
- Will effect:
-
state-warning
-
status-warning-accent
- Name:
color-goldenrod-700
- Type:
- literal
- Value:
- #905e14
- Will effect:
-
status-warning-foreground
- Name:
color-gunmetal-200
- Type:
- literal
- Value:
- #f3f4f7
- Will effect:
-
brand-color-pale
- Name:
color-gunmetal-300
- Type:
- literal
- Value:
- #dbdfe6
- Will effect:
-
brand-color-subtle
-
illustration-background-003
- Name:
color-gunmetal-400
- Type:
- literal
- Value:
- #6d7e9c
- Will effect:
-
brand-color-accent
- Name:
color-gunmetal-600
- Type:
- literal
- Value:
- #536179
- Will effect:
-
illustration-background-002
- Name:
color-gunmetal-700
- Type:
- literal
- Value:
- #424d61
- Will effect:
-
brand-color-default
- Name:
color-gunmetal-800
- Type:
- literal
- Value:
- #29303c
- Will effect:
-
brand-color-strong
-
illustration-background-001
- Name:
background-color
- Type:
- alias
- Effected by:
- color-white
- Name:
border-color
- Type:
- alias
- Effected by:
- color-greyscale-800
- Name:
border-color-indent
- Type:
- alias
- Effected by:
- color-greyscale-400
- Name:
brand-color-default
- Type:
- alias
- Effected by:
- color-gunmetal-700
- Will effect:
-
state-resting-color
- Name:
brand-color-strong
- Type:
- alias
- Effected by:
- color-gunmetal-800
- Will effect:
-
state-active-color
-
state-hover-color
-
state-visited-color
- Name:
brand-color-accent
- Type:
- alias
- Effected by:
- color-gunmetal-400
- Will effect:
-
state-focus
-
state-focus-outline-color
- Name:
brand-color-subtle
- Type:
- alias
- Effected by:
- color-gunmetal-300
- Name:
brand-color-pale
- Type:
- alias
- Effected by:
- color-gunmetal-200
- Name:
icon-color
- Type:
- alias
- Effected by:
- color-greyscale-800
- Name:
neutral-white
- Type:
- alias
- Effected by:
- color-white
- Name:
neutral-black
- Type:
- alias
- Effected by:
- color-black
- Name:
neutral-lightest
- Type:
- alias
- Effected by:
- color-greyscale-300
- Name:
neutral-lighter
- Type:
- alias
- Effected by:
- color-greyscale-400
- Name:
neutral-dark
- Type:
- alias
- Effected by:
- color-greyscale-600
- Name:
neutral-darker
- Type:
- alias
- Effected by:
- color-greyscale-700
- Name:
neutral-darkest
- Type:
- alias
- Effected by:
- color-greyscale-800
- Name:
palette-interaction-hover
- Type:
- alias
- Effected by:
- color-blue-900
- Name:
palette-default-blue-light-400
- Type:
- alias
- Effected by:
- color-blue-400
- Name:
palette-default-blue-medium-600
- Type:
- alias
- Effected by:
- color-blue-600
- Will effect:
-
state-hover-border-color
- Name:
palette-default-blue-medium-700
- Type:
- alias
- Effected by:
- color-blue-700
- Will effect:
-
state-active-surface-color
-
state-active-border-color
- Name:
palette-default-blue-dark-900
- Type:
- alias
- Effected by:
- color-blue-900
- Will effect:
-
state-visited-surface-color
- Name:
palette-default-blue-light-200
- Type:
- alias
- Effected by:
- color-blue-200
- Will effect:
-
state-highlight
-
surface-table-heading-row-even
- Name:
palette-default-blue-light-300
- Type:
- alias
- Effected by:
- color-blue-300
- Will effect:
-
state-highlight-hover
-
surface-table-heading-row-odd
- Name:
palette-default-orange-light-200
- Type:
- alias
- Effected by:
- color-orange-200
- Name:
palette-default-orange-medium-400
- Type:
- alias
- Effected by:
- color-orange-400
- Name:
palette-default-orange-medium-500
- Type:
- alias
- Effected by:
- color-orange-500
- Name:
palette-default-orange-dark
- Type:
- alias
- Effected by:
- color-orange-900
- Name:
palette-default-green-light-200
- Type:
- alias
- Effected by:
- color-green-200
- Name:
palette-default-green-medium-400
- Type:
- alias
- Effected by:
- color-green-400
- Name:
palette-default-green-medium-500
- Type:
- alias
- Effected by:
- color-green-500
- Name:
palette-default-red
- Type:
- alias
- Effected by:
- color-red-400
- Name:
palette-default-red-medium
- Type:
- alias
- Effected by:
- color-red-500
- Will effect:
-
state-error
- Name:
palette-default-greyscale-200
- Type:
- alias
- Effected by:
- color-greyscale-200
- Name:
palette-default-greyscale-300
- Type:
- alias
- Effected by:
- color-greyscale-300
- Name:
palette-default-greyscale-400
- Type:
- alias
- Effected by:
- color-greyscale-400
- Name:
palette-default-greyscale-500
- Type:
- alias
- Effected by:
- color-greyscale-500
- Name:
palette-default-greyscale-600
- Type:
- alias
- Effected by:
- color-greyscale-600
- Will effect:
-
text-secondary
- Name:
palette-default-greyscale-700
- Type:
- alias
- Effected by:
- color-greyscale-700
- Name:
palette-default-greyscale-800
- Type:
- alias
- Effected by:
- color-greyscale-800
- Will effect:
-
text-primary
- Name:
palette-default-black
- Type:
- alias
- Effected by:
- color-black
- Name:
palette-default-white
- Type:
- alias
- Effected by:
- color-white
- Will effect:
-
state-active-icon-color
- Name:
palette-default-greyscale-100
- Type:
- alias
- Effected by:
- color-greyscale-100
- Name:
palette-default-blue-lightest
- Type:
- alias
- Effected by:
- color-blue-100
- Name:
state-focus
- Type:
- alias
- Effected by:
- brand-color-accent
- Name:
state-focus-outline-color
- Type:
- alias
- Effected by:
- brand-color-accent
- Name:
state-error
- Type:
- alias
- Effected by:
- palette-default-red-medium
- Name:
state-warning
- Type:
- alias
- Effected by:
- color-goldenrod-400
- Name:
state-warning-surface
- Type:
- alias
- Effected by:
- color-goldenrod-200
- Name:
state-warning-border
- Type:
- alias
- Effected by:
- color-goldenrod-300
- Name:
state-success
- Type:
- alias
- Effected by:
- color-green-700
- Name:
state-success-surface
- Type:
- alias
- Effected by:
- color-green-200
- Name:
state-success-border
- Type:
- alias
- Effected by:
- color-green-300
- Name:
state-information
- Type:
- alias
- Effected by:
- color-cerulean-700
- Name:
state-information-surface
- Type:
- alias
- Effected by:
- color-cerulean-200
- Name:
state-information-border
- Type:
- alias
- Effected by:
- color-cerulean-300
- Name:
state-active-color
- Type:
- alias
- Effected by:
- brand-color-strong
- Name:
state-active-surface-color
- Type:
- alias
- Effected by:
- palette-default-blue-medium-700
- Name:
state-active-border-color
- Type:
- alias
- Effected by:
- palette-default-blue-medium-700
- Name:
state-active-icon-color
- Type:
- alias
- Effected by:
- palette-default-white
- Name:
state-resting-color
- Type:
- alias
- Effected by:
- brand-color-default
- Name:
state-hover-color
- Type:
- alias
- Effected by:
- brand-color-strong
- Name:
state-hover-border-color
- Type:
- alias
- Effected by:
- palette-default-blue-medium-600
- Name:
state-visited-color
- Type:
- alias
- Effected by:
- brand-color-strong
- Name:
state-visited-surface-color
- Type:
- alias
- Effected by:
- palette-default-blue-dark-900
- Name:
state-highlight
- Type:
- alias
- Effected by:
- palette-default-blue-light-200
- Name:
state-highlight-hover
- Type:
- alias
- Effected by:
- palette-default-blue-light-300
- Name:
status-error-surface
- Type:
- alias
- Effected by:
- color-red-500
- Name:
status-error-border
- Type:
- alias
- Effected by:
- color-red-500
- Name:
status-error-foreground
- Type:
- alias
- Effected by:
- color-red-500
- Name:
status-error-accent
- Type:
- alias
- Effected by:
- color-red-500
- Name:
status-warning-surface
- Type:
- alias
- Effected by:
- color-goldenrod-200
- Name:
status-warning-border
- Type:
- alias
- Effected by:
- color-goldenrod-300
- Name:
status-warning-foreground
- Type:
- alias
- Effected by:
- color-goldenrod-700
- Name:
status-warning-accent
- Type:
- alias
- Effected by:
- color-goldenrod-400
- Name:
status-success-surface
- Type:
- alias
- Effected by:
- color-green-200
- Name:
status-success-border
- Type:
- alias
- Effected by:
- color-green-300
- Name:
status-success-foreground
- Type:
- alias
- Effected by:
- color-green-700
- Name:
status-success-accent
- Type:
- alias
- Effected by:
- color-green-700
- Name:
status-information-surface
- Type:
- alias
- Effected by:
- color-cerulean-200
- Name:
status-information-border
- Type:
- alias
- Effected by:
- color-cerulean-300
- Name:
status-information-foreground
- Type:
- alias
- Effected by:
- color-cerulean-700
- Name:
status-information-accent
- Type:
- alias
- Effected by:
- color-cerulean-700
- Name:
surface-table-heading
- Type:
- alias
- Effected by:
- color-greyscale-600
- Name:
surface-table-heading-row-odd
- Type:
- alias
- Effected by:
- palette-default-blue-light-300
- Name:
surface-table-heading-row-even
- Type:
- alias
- Effected by:
- palette-default-blue-light-200
- Name:
text-primary
- Type:
- alias
- Effected by:
- palette-default-greyscale-800
- Name:
text-secondary
- Type:
- alias
- Effected by:
- palette-default-greyscale-600
- Name:
illustration-background-001
- Type:
- alias
- Effected by:
- color-gunmetal-800
- Name:
illustration-background-002
- Type:
- alias
- Effected by:
- color-gunmetal-600
- Name:
illustration-background-003
- Type:
- alias
- Effected by:
- color-gunmetal-300