Colors

primary

Essential readable content.

secondary

Supporting copy and metadata.

neutral

Quiet enabled text.

disabled

Disabled text only.

icon

Standalone icon ink.

default

Default chrome ink.

contrast

Text on contrasting fills.

strong

Rare maximum emphasis.

base

Deep app ground.

main

Desktop detail canvas.

surface

List and pane surface.

sidebar

Persistent navigation chrome.

card

Grouped content surface.

paper

MUI paper fill.

input

Input and composer wells.

tooltip

Compact transient help.

contrast

Raised contrast surface.

default

Legacy page fallback.

absolute

Mode absolute ground.

primary.main

One primary action or active selection.

primary.light

Light primary state.

primary.dark

Dark primary state.

primary.contrastText

Text on primary fill.

primary.gradient

Filled primary surface.

primary.hoverGradient

Hover primary surface.

secondary.main

Visible support action.

secondary.light

Light secondary state.

secondary.dark

Dark secondary state.

secondary.contrastText

Text on secondary fill.

secondary.gradient

Filled secondary surface.

secondary.hoverGradient

Hover secondary surface.

neutral.main

Muted control emphasis.

neutral.light

Light neutral state.

neutral.dark

Dark neutral state.

neutral.contrastText

Text on neutral fill.

neutral.gradient

Filled neutral surface.

neutral.hoverGradient

Hover neutral surface.

success.main

Successful state only.

success.light

Light success state.

success.dark

Dark success state.

success.contrastText

Text on success fill.

success.gradient

Filled success surface.

success.hoverGradient

Hover success surface.

info.main

Informational state only.

info.light

Light info state.

info.dark

Dark info state.

info.contrastText

Text on info fill.

info.gradient

Filled info surface.

info.hoverGradient

Hover info surface.

warning.main

Caution state only.

warning.light

Light warning state.

warning.dark

Dark warning state.

warning.contrastText

Text on warning fill.

warning.gradient

Filled warning surface.

warning.hoverGradient

Hover warning surface.

error.main

Error or destructive state.

error.light

Light error state.

error.dark

Dark error state.

error.contrastText

Text on error fill.

error.gradient

Filled error surface.

error.hoverGradient

Hover error surface.

pro.main

Pro meaning only.

pro.light

Light pro state.

pro.dark

Dark pro state.

pro.contrastText

Text on pro fill.

pro.gradient

Filled pro surface.

pro.hoverGradient

Hover pro surface.

standout.main

High-emphasis category.

standout.light

Light standout state.

standout.dark

Dark standout state.

standout.contrastText

Text on standout fill.

standout.gradient

Filled standout surface.

standout.hoverGradient

Hover standout surface.

yellow.main

Yellow category identity.

yellow.light

Light yellow state.

yellow.dark

Dark yellow state.

yellow.contrastText

Text on yellow fill.

yellow.gradient

Filled yellow surface.

yellow.hoverGradient

Hover yellow surface.

toolkit.main

Toolkit category identity.

toolkit.light

Light toolkit state.

toolkit.dark

Dark toolkit state.

toolkit.contrastText

Text on toolkit fill.

toolkit.gradient

Filled toolkit surface.

toolkit.hoverGradient

Hover toolkit surface.

sunrise.main

Sunrise category identity.

sunrise.light

Light sunrise state.

sunrise.dark

Dark sunrise state.

sunrise.contrastText

Text on sunrise fill.

sunrise.gradient

Filled sunrise surface.

sunrise.hoverGradient

Hover sunrise surface.

tokens.main

Token category identity.

tokens.light

Light tokens state.

tokens.dark

Dark tokens state.

tokens.contrastText

Text on tokens fill.

tokens.gradient

Filled tokens surface.

tokens.hoverGradient

Hover tokens surface.

position.main

Position category identity.

position.light

Light position state.

position.dark

Dark position state.

position.contrastText

Text on position fill.

position.gradient

Filled position surface.

position.hoverGradient

Hover position surface.

journey.main

Journey category identity.

journey.light

Light journey state.

journey.dark

Dark journey state.

journey.contrastText

Text on journey fill.

journey.gradient

Filled journey surface.

journey.hoverGradient

Hover journey surface.

highlight.main

Current-item emphasis.

highlight.light

Light highlight state.

highlight.dark

Dark highlight state.

highlight.contrastText

Text on highlight fill.

highlight.gradient

Filled highlight surface.

highlight.hoverGradient

Hover highlight surface.

nav.main

Navigation material identity.

nav.light

Light nav state.

nav.dark

Dark nav state.

nav.contrastText

Text on nav fill.

nav.gradient

Filled nav surface.

nav.hoverGradient

Hover nav surface.

active

Pressed or active control.

hover

Pointer hover fill.

selected

Selected state fill.

focus

Focused state fill.

disabled

Disabled foreground.

disabledBackground

Disabled filled surface.

divider

Thin structural separation.

50

Neutral ramp step.

100

Neutral ramp step.

200

Neutral ramp step.

300

Neutral ramp step.

400

Neutral ramp step.

500

Neutral ramp step.

600

Neutral ramp step.

700

Neutral ramp step.

800

Neutral ramp step.

900

Neutral ramp step.

A100

Neutral ramp step.

A200

Neutral ramp step.

A400

Neutral ramp step.

A700

Neutral ramp step.

atrule

Syntax atrule.

attr-name

Syntax attr name.

attr-value

Syntax attr value.

boolean

Syntax boolean.

builtin

Syntax builtin.

cdata

Syntax cdata.

char

Syntax char.

class-name

Syntax class name.

comment

Syntax comment.

constant

Syntax constant.

deleted

Syntax deleted.

doctype

Syntax doctype.

entity

Syntax entity.

function

Syntax function.

important

Syntax important.

inserted

Syntax inserted.

keyword

Syntax keyword.

namespace

Syntax namespace.

number

Syntax number.

operator

Syntax operator.

prolog

Syntax prolog.

property

Syntax property.

punctuation

Syntax punctuation.

regex

Syntax regex.

selector

Syntax selector.

string

Syntax string.

symbol

Syntax symbol.

tag

Syntax tag.

url

Syntax url.

variable

Syntax variable.