Skip to content
garn

Color

224 semantic color tokens. Each is mode-aware — the same token resolves to a different value in light and dark. Components reference these (e.g. bg-brand-solid), never raw colors.

Light

background
Ag
foreground
card
Ag
card-foreground
popover
Ag
popover-foreground
surface-sunken
surface-raised
surface-overlay
surface-soft
surface-muted
surface-thumb
surface-thumb-edge
brand
brand-solid
Ag
brand-solid-foreground
brand-strong
brand-graphic
Ag
muted-foreground
state-rest
state-hover
state-active
state-selected
edge-rest
edge-hover
edge-strong
alpha-4
alpha-10
alpha-15
alpha-30
alpha-50
selected-surface
danger-solid
Ag
danger-solid-foreground
border
input
ring
disabled
Ag
disabled-foreground
link
link-hover
inverse
Ag
inverse-foreground
skeleton
neutral-solid
Ag
neutral-solid-foreground
brand-soft
Ag
brand-soft-foreground
success-solid
Ag
success-solid-foreground
warning-solid
Ag
warning-solid-foreground
info-solid
Ag
info-solid-foreground
brand-solid-hover
brand-solid-active
neutral-solid-hover
neutral-solid-active
danger-solid-hover
danger-solid-active
success-solid-hover
success-solid-active
warning-solid-hover
warning-solid-active
info-solid-hover
info-solid-active
brand-soft-hover
brand-soft-active
info-soft-hover
info-soft-active
success-soft-hover
success-soft-active
warning-soft-hover
warning-soft-active
danger-soft-hover
danger-soft-active
info
info-soft
Ag
info-foreground
success
success-soft
Ag
success-foreground
warning
warning-soft
Ag
warning-foreground
danger
danger-soft
Ag
danger-foreground
chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
chart-grid
chart-axis
chart-positive
chart-negative
chart-seq-1
chart-seq-2
chart-seq-3
chart-seq-4
chart-seq-5
chart-div-neg-2
chart-div-neg-1
chart-div-zero
chart-div-pos-1
chart-div-pos-2
tone-neutral-soft
tone-neutral-soft-fg
tone-neutral-solid
tone-neutral-solid-fg
tone-neutral-edge
tone-brand-soft
tone-brand-soft-fg
tone-brand-solid
tone-brand-solid-fg
tone-brand-edge
tone-info-soft
tone-info-soft-fg
tone-info-solid
tone-info-solid-fg
tone-info-edge
tone-success-soft
tone-success-soft-fg
tone-success-solid
tone-success-solid-fg
tone-success-edge
tone-warning-soft
tone-warning-soft-fg
tone-warning-solid
tone-warning-solid-fg
tone-warning-edge
tone-danger-soft
tone-danger-soft-fg
tone-danger-solid
tone-danger-solid-fg
tone-danger-edge
tone-discovery-soft
tone-discovery-soft-fg
tone-discovery-solid
tone-discovery-solid-fg
tone-discovery-edge
tone-orange-soft
tone-orange-soft-fg
tone-orange-solid
tone-orange-solid-fg
tone-orange-edge
tone-neutral-soft-hover
tone-neutral-soft-active
tone-neutral-solid-hover
tone-brand-soft-hover
tone-brand-solid-hover
tone-info-soft-hover
tone-info-solid-hover
tone-success-soft-hover
tone-success-solid-hover
tone-warning-soft-hover
tone-warning-solid-hover
tone-danger-soft-hover
tone-danger-solid-hover
tone-discovery-soft-hover
tone-discovery-solid-hover
tone-orange-soft-hover
tone-orange-solid-hover
avatar-online
avatar-busy
avatar-focus
avatar-offline
avatar-locked
badge-neutral-bg
badge-neutral-fg
badge-neutral-solid
badge-neutral-solid-fg
badge-neutral-edge
badge-brand-bg
badge-brand-fg
badge-brand-solid
badge-brand-solid-fg
badge-brand-edge
badge-info-bg
badge-info-fg
badge-info-solid
badge-info-solid-fg
badge-info-edge
badge-success-bg
badge-success-fg
badge-success-solid
badge-success-solid-fg
badge-success-edge
badge-warning-bg
badge-warning-fg
badge-warning-solid
badge-warning-solid-fg
badge-warning-edge
badge-danger-bg
badge-danger-fg
badge-danger-solid
badge-danger-solid-fg
badge-danger-edge
badge-discovery-bg
badge-discovery-fg
badge-discovery-solid
badge-discovery-solid-fg
badge-discovery-edge
tabs-chip
tabs-chip-edge
tabs-chip-hover
tabs-menu-hover
tabs-menu-selected
gallery-placeholder
alpha-black-90
alpha-black-70
alpha-black-50
alpha-black-30
alpha-black-10
alpha-white-90
alpha-white-70
alpha-white-50
alpha-white-10
overlay
sticky-surface

Dark

background
Ag
foreground
card
Ag
card-foreground
popover
Ag
popover-foreground
surface-sunken
surface-raised
surface-overlay
surface-soft
surface-muted
surface-thumb
surface-thumb-edge
brand
brand-solid
Ag
brand-solid-foreground
brand-strong
brand-graphic
Ag
muted-foreground
state-rest
state-hover
state-active
state-selected
edge-rest
edge-hover
edge-strong
alpha-4
alpha-10
alpha-15
alpha-30
alpha-50
selected-surface
danger-solid
Ag
danger-solid-foreground
border
input
ring
disabled
Ag
disabled-foreground
link
link-hover
inverse
Ag
inverse-foreground
skeleton
neutral-solid
Ag
neutral-solid-foreground
brand-soft
Ag
brand-soft-foreground
success-solid
Ag
success-solid-foreground
warning-solid
Ag
warning-solid-foreground
info-solid
Ag
info-solid-foreground
brand-solid-hover
brand-solid-active
neutral-solid-hover
neutral-solid-active
danger-solid-hover
danger-solid-active
success-solid-hover
success-solid-active
warning-solid-hover
warning-solid-active
info-solid-hover
info-solid-active
brand-soft-hover
brand-soft-active
info-soft-hover
info-soft-active
success-soft-hover
success-soft-active
warning-soft-hover
warning-soft-active
danger-soft-hover
danger-soft-active
info
info-soft
Ag
info-foreground
success
success-soft
Ag
success-foreground
warning
warning-soft
Ag
warning-foreground
danger
danger-soft
Ag
danger-foreground
chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
chart-grid
chart-axis
chart-positive
chart-negative
chart-seq-1
chart-seq-2
chart-seq-3
chart-seq-4
chart-seq-5
chart-div-neg-2
chart-div-neg-1
chart-div-zero
chart-div-pos-1
chart-div-pos-2
tone-neutral-soft
tone-neutral-soft-fg
tone-neutral-solid
tone-neutral-solid-fg
tone-neutral-edge
tone-brand-soft
tone-brand-soft-fg
tone-brand-solid
tone-brand-solid-fg
tone-brand-edge
tone-info-soft
tone-info-soft-fg
tone-info-solid
tone-info-solid-fg
tone-info-edge
tone-success-soft
tone-success-soft-fg
tone-success-solid
tone-success-solid-fg
tone-success-edge
tone-warning-soft
tone-warning-soft-fg
tone-warning-solid
tone-warning-solid-fg
tone-warning-edge
tone-danger-soft
tone-danger-soft-fg
tone-danger-solid
tone-danger-solid-fg
tone-danger-edge
tone-discovery-soft
tone-discovery-soft-fg
tone-discovery-solid
tone-discovery-solid-fg
tone-discovery-edge
tone-orange-soft
tone-orange-soft-fg
tone-orange-solid
tone-orange-solid-fg
tone-orange-edge
tone-neutral-soft-hover
tone-neutral-soft-active
tone-neutral-solid-hover
tone-brand-soft-hover
tone-brand-solid-hover
tone-info-soft-hover
tone-info-solid-hover
tone-success-soft-hover
tone-success-solid-hover
tone-warning-soft-hover
tone-warning-solid-hover
tone-danger-soft-hover
tone-danger-solid-hover
tone-discovery-soft-hover
tone-discovery-solid-hover
tone-orange-soft-hover
tone-orange-solid-hover
avatar-online
avatar-busy
avatar-focus
avatar-offline
avatar-locked
badge-neutral-bg
badge-neutral-fg
badge-neutral-solid
badge-neutral-solid-fg
badge-neutral-edge
badge-brand-bg
badge-brand-fg
badge-brand-solid
badge-brand-solid-fg
badge-brand-edge
badge-info-bg
badge-info-fg
badge-info-solid
badge-info-solid-fg
badge-info-edge
badge-success-bg
badge-success-fg
badge-success-solid
badge-success-solid-fg
badge-success-edge
badge-warning-bg
badge-warning-fg
badge-warning-solid
badge-warning-solid-fg
badge-warning-edge
badge-danger-bg
badge-danger-fg
badge-danger-solid
badge-danger-solid-fg
badge-danger-edge
badge-discovery-bg
badge-discovery-fg
badge-discovery-solid
badge-discovery-solid-fg
badge-discovery-edge
tabs-chip
tabs-chip-edge
tabs-chip-hover
tabs-menu-hover
tabs-menu-selected
gallery-placeholder
alpha-black-90
alpha-black-70
alpha-black-50
alpha-black-30
alpha-black-10
alpha-white-90
alpha-white-70
alpha-white-50
alpha-white-10
overlay
sticky-surface