GPUI Box GitHub

Token reference

The JSON documents under crates/gpui-kit-tokens/tokens/ are the authority. These tables are a review aid, and every theme below is validated on each run.

Studio Dark (studio-dark)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#77ae9a
color.palette.agent.external#bd91b7
color.palette.agent.network#9fa1d2
color.palette.agent.read#7da8bf
color.palette.agent.shell#c19a69
color.palette.amber.500#ffb900
color.palette.ansi.0#242424
color.palette.ansi.1#f87171
color.palette.ansi.10#86efac
color.palette.ansi.11#fde047
color.palette.ansi.12#93c5fd
color.palette.ansi.13#d8b4fe
color.palette.ansi.14#67e8f9
color.palette.ansi.15#fafafa
color.palette.ansi.2#4ade80
color.palette.ansi.3#facc15
color.palette.ansi.4#60a5fa
color.palette.ansi.5#c084fc
color.palette.ansi.6#22d3ee
color.palette.ansi.7#d4d4d8
color.palette.ansi.8#52525b
color.palette.ansi.9#fca5a5
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#050505
color.palette.neutral.100#1b1b1b
color.palette.neutral.150#242424
color.palette.neutral.200#282828
color.palette.neutral.25#0a0a0a
color.palette.neutral.300#303030
color.palette.neutral.50#131313
color.palette.neutral.500#565656
color.palette.neutral.600#8f8f8f
color.palette.neutral.700#a1a1a1
color.palette.neutral.800#e9e9e9
color.palette.neutral.850#ebebeb
color.palette.neutral.900#ffffff
color.palette.neutral.ink#0e0e0e
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#c4b4ff
color.palette.syntax.inlineWash#a684ff
color.palette.syntax.keyword#e67e7f
color.palette.syntax.number#e0ae57
color.palette.syntax.string#65cba7
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#0a0a0a
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#303030#303030
color.surface.controlHover#333333#333333
color.surface.controlPressed#242424#242424
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#050505
color.surface.canvas{neutral.50}#131313
color.surface.sunken{neutral.25}#0a0a0a
color.surface.panel{neutral.100}#1b1b1b
color.surface.raised{neutral.200}#282828
color.surface.overlay{neutral.150}#242424
color.text.primary{neutral.800}#e9e9e9
color.text.muted{neutral.700}#a1a1a1
color.text.faint{neutral.600}#8f8f8f
color.text.placeholder#868686#868686
color.text.disabled#7d7d7d#7d7d7d
color.text.onAccent{neutral.ink}#0e0e0e
color.text.onPrimaryFill{neutral.ink}#0e0e0e
color.interactive.hover{neutral.850}/14#ebebeb14
color.interactive.active{neutral.850}/24#ebebeb24
color.interactive.selected{neutral.850}/1c#ebebeb1c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus{indigo.400}#7c86ff
color.interactive.primaryFill{neutral.800}#e9e9e9
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent{indigo.400}#7c86ff
color.semantic.accentStrong{indigo.600}#5865f2
color.semantic.danger{red.400}#ff6467
color.semantic.warning{amber.500}#ffb900
color.semantic.success{green.500}#57c47f
color.semantic.info{cyan.400}#7fb3cf
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#565656
color.node.portHover{indigo.400}#7c86ff
color.node.portConnected{indigo.600}#5865f2
color.node.edge{neutral.500}#565656
color.node.edgeTarget{indigo.600}#5865f2
color.node.edgeActive{indigo.400}#7c86ff
color.node.edgeFlowHighlight{indigo.600}#5865f2
color.node.edgeFeedback{amber.500}/b8#ffb900b8
color.node.edgeFeedbackActive{amber.500}#ffb900
color.node.auraActive{indigo.400}#7c86ff
color.node.auraSuccess{green.500}#57c47f
color.node.auraAttention{amber.500}#ffb900
color.node.auraDanger{red.400}#ff6467
color.node.labelWash{neutral.100}/f0#1b1b1bf0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark{indigo.400}#7c86ff
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#0a0a0a
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#242424
color.terminal.ansi.1{ansi.1}#f87171
color.terminal.ansi.2{ansi.2}#4ade80
color.terminal.ansi.3{ansi.3}#facc15
color.terminal.ansi.4{ansi.4}#60a5fa
color.terminal.ansi.5{ansi.5}#c084fc
color.terminal.ansi.6{ansi.6}#22d3ee
color.terminal.ansi.7{ansi.7}#d4d4d8
color.terminal.ansi.8{ansi.8}#52525b
color.terminal.ansi.9{ansi.9}#fca5a5
color.terminal.ansi.10{ansi.10}#86efac
color.terminal.ansi.11{ansi.11}#fde047
color.terminal.ansi.12{ansi.12}#93c5fd
color.terminal.ansi.13{ansi.13}#d8b4fe
color.terminal.ansi.14{ansi.14}#67e8f9
color.terminal.ansi.15{ansi.15}#fafafa

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control10.874.5
color.text.mutedcolor.surface.control5.114.5
color.text.placeholdercolor.surface.control3.633.0
color.text.disabledcolor.surface.control3.213.0
color.text.primarycolor.surface.controlHover10.414.5
color.text.mutedcolor.surface.controlHover4.894.5
color.text.placeholdercolor.surface.controlHover3.473.0
color.text.disabledcolor.surface.controlHover3.073.0
color.text.primarycolor.surface.controlPressed12.794.5
color.text.mutedcolor.surface.controlPressed6.014.5
color.text.placeholdercolor.surface.controlPressed4.263.0
color.text.disabledcolor.surface.controlPressed3.773.0
color.text.primarycolor.surface.backdrop16.794.5
color.text.mutedcolor.surface.backdrop7.894.5
color.text.faintcolor.surface.backdrop6.303.0
color.text.placeholdercolor.surface.backdrop5.603.0
color.text.disabledcolor.surface.backdrop4.953.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected13.694.5
color.semantic.accentcolor.surface.backdrop6.513.0
color.semantic.accentStrongcolor.surface.backdrop4.423.0
color.semantic.dangercolor.surface.backdrop7.063.0
color.semantic.warningcolor.surface.backdrop11.833.0
color.semantic.successcolor.surface.backdrop9.323.0
color.semantic.infocolor.surface.backdrop8.983.0
color.agent.readcolor.surface.backdrop7.984.5
color.agent.networkcolor.surface.backdrop8.254.5
color.agent.shellcolor.surface.backdrop7.864.5
color.agent.editcolor.surface.backdrop8.064.5
color.agent.externalcolor.surface.backdrop7.674.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash7.434.5
color.interactive.hairlineStrongcolor.surface.backdrop3.713.0
color.interactive.trackcolor.surface.backdrop3.713.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop3.613.0
color.text.primary @ opacity.disabledcolor.surface.backdrop6.583.0
color.loader.markcolor.surface.backdrop6.513.0
color.text.primarycolor.surface.canvas15.304.5
color.text.mutedcolor.surface.canvas7.194.5
color.text.faintcolor.surface.canvas5.753.0
color.text.placeholdercolor.surface.canvas5.103.0
color.text.disabledcolor.surface.canvas4.513.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected11.714.5
color.semantic.accentcolor.surface.canvas5.943.0
color.semantic.accentStrongcolor.surface.canvas4.033.0
color.semantic.dangercolor.surface.canvas6.433.0
color.semantic.warningcolor.surface.canvas10.793.0
color.semantic.successcolor.surface.canvas8.503.0
color.semantic.infocolor.surface.canvas8.193.0
color.agent.readcolor.surface.canvas7.284.5
color.agent.networkcolor.surface.canvas7.524.5
color.agent.shellcolor.surface.canvas7.164.5
color.agent.editcolor.surface.canvas7.354.5
color.agent.externalcolor.surface.canvas6.994.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash6.584.5
color.interactive.hairlineStrongcolor.surface.canvas3.833.0
color.interactive.trackcolor.surface.canvas3.833.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas3.503.0
color.text.primary @ opacity.disabledcolor.surface.canvas6.423.0
color.loader.markcolor.surface.canvas5.943.0
color.text.primarycolor.surface.sunken16.314.5
color.text.mutedcolor.surface.sunken7.664.5
color.text.faintcolor.surface.sunken6.123.0
color.text.placeholdercolor.surface.sunken5.443.0
color.text.disabledcolor.surface.sunken4.813.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected12.994.5
color.semantic.accentcolor.surface.sunken6.333.0
color.semantic.accentStrongcolor.surface.sunken4.303.0
color.semantic.dangercolor.surface.sunken6.853.0
color.semantic.warningcolor.surface.sunken11.493.0
color.semantic.successcolor.surface.sunken9.063.0
color.semantic.infocolor.surface.sunken8.723.0
color.agent.readcolor.surface.sunken7.754.5
color.agent.networkcolor.surface.sunken8.024.5
color.agent.shellcolor.surface.sunken7.634.5
color.agent.editcolor.surface.sunken7.834.5
color.agent.externalcolor.surface.sunken7.454.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash7.154.5
color.interactive.hairlineStrongcolor.surface.sunken3.773.0
color.interactive.trackcolor.surface.sunken3.773.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken3.593.0
color.text.primary @ opacity.disabledcolor.surface.sunken6.553.0
color.loader.markcolor.surface.sunken6.333.0
color.text.primarycolor.surface.panel14.194.5
color.text.mutedcolor.surface.panel6.674.5
color.text.faintcolor.surface.panel5.333.0
color.text.placeholdercolor.surface.panel4.733.0
color.text.disabledcolor.surface.panel4.183.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected10.594.5
color.semantic.accentcolor.surface.panel5.503.0
color.semantic.accentStrongcolor.surface.panel3.743.0
color.semantic.dangercolor.surface.panel5.963.0
color.semantic.warningcolor.surface.panel10.003.0
color.semantic.successcolor.surface.panel7.883.0
color.semantic.infocolor.surface.panel7.593.0
color.agent.readcolor.surface.panel6.754.5
color.agent.networkcolor.surface.panel6.974.5
color.agent.shellcolor.surface.panel6.644.5
color.agent.editcolor.surface.panel6.814.5
color.agent.externalcolor.surface.panel6.484.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash6.014.5
color.interactive.hairlineStrongcolor.surface.panel3.803.0
color.interactive.trackcolor.surface.panel3.803.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.363.0
color.text.primary @ opacity.disabledcolor.surface.panel6.183.0
color.loader.markcolor.surface.panel5.503.0
color.text.primarycolor.surface.raised12.144.5
color.text.mutedcolor.surface.raised5.714.5
color.text.faintcolor.surface.raised4.563.0
color.text.placeholdercolor.surface.raised4.053.0
color.text.disabledcolor.surface.raised3.583.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected8.894.5
color.semantic.accentcolor.surface.raised4.713.0
color.semantic.accentStrongcolor.surface.raised3.203.0
color.semantic.dangercolor.surface.raised5.103.0
color.semantic.warningcolor.surface.raised8.563.0
color.semantic.successcolor.surface.raised6.753.0
color.semantic.infocolor.surface.raised6.503.0
color.agent.readcolor.surface.raised5.774.5
color.agent.networkcolor.surface.raised5.974.5
color.agent.shellcolor.surface.raised5.684.5
color.agent.editcolor.surface.raised5.834.5
color.agent.externalcolor.surface.raised5.544.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash5.084.5
color.interactive.hairlineStrongcolor.surface.raised3.633.0
color.interactive.trackcolor.surface.raised3.633.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.043.0
color.text.primary @ opacity.disabledcolor.surface.raised5.613.0
color.loader.markcolor.surface.raised4.713.0
color.text.primarycolor.surface.overlay12.794.5
color.text.mutedcolor.surface.overlay6.014.5
color.text.faintcolor.surface.overlay4.803.0
color.text.placeholdercolor.surface.overlay4.263.0
color.text.disabledcolor.surface.overlay3.773.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected9.394.5
color.semantic.accentcolor.surface.overlay4.963.0
color.semantic.accentStrongcolor.surface.overlay3.373.0
color.semantic.dangercolor.surface.overlay5.373.0
color.semantic.warningcolor.surface.overlay9.013.0
color.semantic.successcolor.surface.overlay7.103.0
color.semantic.infocolor.surface.overlay6.843.0
color.agent.readcolor.surface.overlay6.084.5
color.agent.networkcolor.surface.overlay6.294.5
color.agent.shellcolor.surface.overlay5.984.5
color.agent.editcolor.surface.overlay6.144.5
color.agent.externalcolor.surface.overlay5.844.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash5.364.5
color.interactive.hairlineStrongcolor.surface.overlay3.703.0
color.interactive.trackcolor.surface.overlay3.703.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.153.0
color.text.primary @ opacity.disabledcolor.surface.overlay5.803.0
color.loader.markcolor.surface.overlay4.963.0
color.terminal.ansi.0color.terminal.background1.281.2
color.terminal.ansi.1color.terminal.background7.163.0
color.terminal.ansi.2color.terminal.background11.363.0
color.terminal.ansi.3color.terminal.background12.933.0
color.terminal.ansi.4color.terminal.background7.793.0
color.terminal.ansi.5color.terminal.background7.493.0
color.terminal.ansi.6color.terminal.background10.963.0
color.terminal.ansi.7color.terminal.background13.403.0
color.terminal.ansi.8color.terminal.background2.561.2
color.terminal.ansi.9color.terminal.background10.433.0
color.terminal.ansi.10color.terminal.background14.103.0
color.terminal.ansi.11color.terminal.background15.023.0
color.terminal.ansi.12color.terminal.background10.983.0
color.terminal.ansi.13color.terminal.background11.203.0
color.terminal.ansi.14color.terminal.background13.663.0
color.terminal.ansi.15color.terminal.background18.973.0
color.syntax.keywordcolor.surface.sunken7.224.5
color.syntax.stringcolor.surface.sunken10.044.5
color.syntax.numbercolor.surface.sunken9.774.5
color.syntax.inlinecolor.surface.sunken10.674.5
color.syntax.commentcolor.surface.sunken6.123.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash13.284.5
color.syntax.addedcolor.surface.sunken9.063.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash13.924.5
color.syntax.removedcolor.surface.sunken6.853.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash9.284.5
color.syntax.keywordcolor.surface.panel6.284.5
color.syntax.stringcolor.surface.panel8.744.5
color.syntax.numbercolor.surface.panel8.504.5
color.syntax.inlinecolor.surface.panel9.284.5
color.syntax.commentcolor.surface.panel5.333.0
color.text.primarycolor.surface.panel + color.syntax.addedWash10.974.5
color.syntax.addedcolor.surface.panel7.883.0
color.text.primarycolor.surface.panel + color.syntax.removedWash11.664.5
color.syntax.removedcolor.surface.panel5.963.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash7.744.5
color.sequence.categorical.0color.surface.canvas6.433.0
color.sequence.categorical.1color.surface.canvas9.413.0
color.sequence.categorical.2color.surface.canvas6.313.0
color.sequence.categorical.3color.surface.canvas6.423.0
color.sequence.categorical.4color.surface.canvas9.783.0
color.sequence.categorical.5color.surface.canvas7.653.0
color.sequence.categorical.6color.surface.canvas10.823.0
color.sequence.categorical.7color.surface.canvas6.883.0
color.sequence.categorical.0color.surface.panel5.963.0
color.sequence.categorical.1color.surface.panel8.723.0
color.sequence.categorical.2color.surface.panel5.853.0
color.sequence.categorical.3color.surface.panel5.953.0
color.sequence.categorical.4color.surface.panel9.073.0
color.sequence.categorical.5color.surface.panel7.103.0
color.sequence.categorical.6color.surface.panel10.033.0
color.sequence.categorical.7color.surface.panel6.383.0
color.sequence.categorical.0color.surface.raised5.103.0
color.sequence.categorical.1color.surface.raised7.463.0
color.sequence.categorical.2color.surface.raised5.013.0
color.sequence.categorical.3color.surface.raised5.103.0
color.sequence.categorical.4color.surface.raised7.763.0
color.sequence.categorical.5color.surface.raised6.073.0
color.sequence.categorical.6color.surface.raised8.583.0
color.sequence.categorical.7color.surface.raised5.463.0
color.node.portConnectedcolor.surface.canvas4.033.0
color.node.portHovercolor.surface.canvas5.943.0
color.node.edgeTargetcolor.surface.canvas4.033.0
color.node.edgeActivecolor.surface.canvas5.943.0
color.node.edgeFlowHighlightcolor.surface.canvas4.033.0
color.node.edgeFeedbackActivecolor.surface.canvas10.793.0
color.node.auraActivecolor.surface.canvas5.943.0
color.node.auraSuccesscolor.surface.canvas8.503.0
color.node.auraAttentioncolor.surface.canvas10.793.0
color.node.auraDangercolor.surface.canvas6.433.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.704.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash6.424.5
color.text.onAccentcolor.semantic.accent6.174.5
color.text.onPrimaryFillcolor.interactive.primaryFill15.904.5
color.interactive.primaryFillcolor.surface.backdrop16.793.0
color.interactive.primaryFillcolor.surface.canvas15.303.0
color.interactive.primaryFillcolor.surface.sunken16.313.0
color.interactive.primaryFillcolor.surface.panel14.193.0
color.interactive.primaryFillcolor.surface.raised12.143.0
color.interactive.primaryFillcolor.surface.overlay12.793.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop4.52.0
color.surface.panelcolor.surface.backdrop8.42.0
color.surface.canvascolor.surface.sunken3.12.0
color.surface.panelcolor.surface.canvas3.92.0
color.surface.panelcolor.surface.sunken7.02.0
color.surface.raisedcolor.surface.panel6.32.0
color.surface.overlaycolor.surface.panel4.42.0
color.surface.overlaycolor.surface.canvas8.32.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint6.83.0
color.text.faintcolor.text.placeholder3.53.0
color.text.placeholdercolor.text.disabled3.53.0
color.node.portConnectedcolor.node.portIdle12.73.0

Studio Light (studio-light)

Appearance: Light.

Palette

TokenValue
color.palette.agent.edit#2f6653
color.palette.agent.external#765676
color.palette.agent.network#565aa0
color.palette.agent.read#2b607d
color.palette.agent.shell#80591f
color.palette.amber.500#a76a00
color.palette.ansi.0#1f1f1f
color.palette.ansi.1#dc2626
color.palette.ansi.10#15803d
color.palette.ansi.11#92400e
color.palette.ansi.12#1d4ed8
color.palette.ansi.13#7e22ce
color.palette.ansi.14#155e75
color.palette.ansi.15#18181b
color.palette.ansi.2#16a34a
color.palette.ansi.3#b45309
color.palette.ansi.4#2563eb
color.palette.ansi.5#9333ea
color.palette.ansi.6#0e7490
color.palette.ansi.7#3f3f46
color.palette.ansi.8#71717a
color.palette.ansi.9#b91c1c
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#2a6f8f
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#237a48
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#4952c9
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#363fa8
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#dcdce2
color.palette.neutral.100#f5f5f8
color.palette.neutral.150#ffffff
color.palette.neutral.200#ffffff
color.palette.neutral.25#e0e0e5
color.palette.neutral.300#d4d4da
color.palette.neutral.50#ebebef
color.palette.neutral.500#9a9aa1
color.palette.neutral.600#78787f
color.palette.neutral.700#55555c
color.palette.neutral.800#17171a
color.palette.neutral.850#0a0a0c
color.palette.neutral.900#ffffff
color.palette.neutral.ink#ffffff
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#d5322f
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#6174d3
color.palette.series.2#9256ae
color.palette.series.3#c05279
color.palette.series.4#c15c24
color.palette.series.5#8c7000
color.palette.series.6#599532
color.palette.series.7#008a76
color.palette.series.8#0091bc
color.palette.syntax.inline#5b21b6
color.palette.syntax.inlineWash#7c3aed
color.palette.syntax.keyword#a83232
color.palette.syntax.number#8a5a00
color.palette.syntax.string#0f6b4f
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#fafafa
color.palette.terminal.wash#000000
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#f5f5f8#f5f5f8
color.surface.controlHover#fdfdff#fdfdff
color.surface.controlPressed#e8e8ed#e8e8ed
color.interactive.controlHairline#00000024#00000024
color.interactive.controlHighlight#ffffffcc#ffffffcc
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#dcdce2
color.surface.canvas{neutral.50}#ebebef
color.surface.sunken{neutral.25}#e0e0e5
color.surface.panel{neutral.100}#f5f5f8
color.surface.raised{neutral.200}#ffffff
color.surface.overlay{neutral.150}#ffffff
color.text.primary{neutral.800}#17171a
color.text.muted{neutral.700}#55555c
color.text.faint#64646b#64646b
color.text.placeholder#6f6f76#6f6f76
color.text.disabled#7a7a81#7a7a81
color.text.onAccent{neutral.ink}#ffffff
color.text.onPrimaryFill{neutral.ink}#ffffff
color.interactive.hover{neutral.850}/0f#0a0a0c0f
color.interactive.active{neutral.850}/1c#0a0a0c1c
color.interactive.selected{neutral.850}/14#0a0a0c14
color.interactive.hairline{neutral.850}/1a#0a0a0c1a
color.interactive.hairlineStrong{neutral.850}/8c#0a0a0c8c
color.interactive.track{neutral.850}/8c#0a0a0c8c
color.interactive.divider{neutral.850}/14#0a0a0c14
color.interactive.focus{indigo.400}#4952c9
color.interactive.primaryFill{neutral.800}#17171a
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent{indigo.400}#4952c9
color.semantic.accentStrong{indigo.600}#363fa8
color.semantic.danger{red.400}#d5322f
color.semantic.warning{amber.500}#a76a00
color.semantic.success{green.500}#237a48
color.semantic.info{cyan.400}#2a6f8f
color.sequence.categorical.0{series.1}#6174d3
color.sequence.categorical.1{series.2}#9256ae
color.sequence.categorical.2{series.3}#c05279
color.sequence.categorical.3{series.4}#c15c24
color.sequence.categorical.4{series.5}#8c7000
color.sequence.categorical.5{series.6}#599532
color.sequence.categorical.6{series.7}#008a76
color.sequence.categorical.7{series.8}#0091bc
color.node.headerWash{neutral.850}/0f#0a0a0c0f
color.node.portIdle{neutral.500}#9a9aa1
color.node.portHover{indigo.400}#4952c9
color.node.portConnected{indigo.600}#363fa8
color.node.edge{neutral.500}#9a9aa1
color.node.edgeTarget{indigo.600}#363fa8
color.node.edgeActive{indigo.400}#4952c9
color.node.edgeFlowHighlight{indigo.600}#363fa8
color.node.edgeFeedback{amber.500}/b8#a76a00b8
color.node.edgeFeedbackActive{amber.500}#a76a00
color.node.auraActive{indigo.400}#4952c9
color.node.auraSuccess{green.500}#237a48
color.node.auraAttention{amber.500}#a76a00
color.node.auraDanger{red.400}#d5322f
color.node.labelWash{neutral.150}/f0#fffffff0
color.node.grid{neutral.850}/14#0a0a0c14
color.node.gridStrong{neutral.850}/29#0a0a0c29
color.node.gridAxis{neutral.850}/4d#0a0a0c4d
color.loader.mark{indigo.400}#4952c9
color.loader.track{neutral.850}/1f#0a0a0c1f
color.loader.placeholder{neutral.850}/17#0a0a0c17
color.loader.sheen{neutral.900}/8c#ffffff8c
color.terminal.background{terminal.background}#fafafa
color.terminal.selection{terminal.wash}/29#00000029
color.terminal.ansi.0{ansi.0}#1f1f1f
color.terminal.ansi.1{ansi.1}#dc2626
color.terminal.ansi.2{ansi.2}#16a34a
color.terminal.ansi.3{ansi.3}#b45309
color.terminal.ansi.4{ansi.4}#2563eb
color.terminal.ansi.5{ansi.5}#9333ea
color.terminal.ansi.6{ansi.6}#0e7490
color.terminal.ansi.7{ansi.7}#3f3f46
color.terminal.ansi.8{ansi.8}#71717a
color.terminal.ansi.9{ansi.9}#b91c1c
color.terminal.ansi.10{ansi.10}#15803d
color.terminal.ansi.11{ansi.11}#92400e
color.terminal.ansi.12{ansi.12}#1d4ed8
color.terminal.ansi.13{ansi.13}#7e22ce
color.terminal.ansi.14{ansi.14}#155e75
color.terminal.ansi.15{ansi.15}#18181b

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#0000000c
raised126-1#00000014
overlay026-1#00000010
overlay1824-4#0000001a
modal0412-2#00000016
modal11648-8#00000024

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.5
opacity.muted0.68
opacity.scrim0.35

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.8
effect.glowAlpha0.18
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.78
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.55
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.05
effect.areaWashAlpha0.16
effect.headerTintAlpha0.14
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control16.444.5
color.text.mutedcolor.surface.control6.794.5
color.text.placeholdercolor.surface.control4.583.0
color.text.disabledcolor.surface.control3.923.0
color.text.primarycolor.surface.controlHover17.614.5
color.text.mutedcolor.surface.controlHover7.284.5
color.text.placeholdercolor.surface.controlHover4.913.0
color.text.disabledcolor.surface.controlHover4.193.0
color.text.primarycolor.surface.controlPressed14.654.5
color.text.mutedcolor.surface.controlPressed6.054.5
color.text.placeholdercolor.surface.controlPressed4.083.0
color.text.disabledcolor.surface.controlPressed3.493.0
color.text.primarycolor.surface.backdrop13.104.5
color.text.mutedcolor.surface.backdrop5.414.5
color.text.faintcolor.surface.backdrop4.303.0
color.text.placeholdercolor.surface.backdrop3.653.0
color.text.disabledcolor.surface.backdrop3.123.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected11.134.5
color.semantic.accentcolor.surface.backdrop4.613.0
color.semantic.accentStrongcolor.surface.backdrop6.323.0
color.semantic.dangercolor.surface.backdrop3.553.0
color.semantic.warningcolor.surface.backdrop3.273.0
color.semantic.successcolor.surface.backdrop3.893.0
color.semantic.infocolor.surface.backdrop4.083.0
color.agent.readcolor.surface.backdrop5.014.5
color.agent.networkcolor.surface.backdrop4.574.5
color.agent.shellcolor.surface.backdrop4.574.5
color.agent.editcolor.surface.backdrop4.894.5
color.agent.externalcolor.surface.backdrop4.574.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash5.084.5
color.interactive.hairlineStrongcolor.surface.backdrop4.023.0
color.interactive.trackcolor.surface.backdrop4.023.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop3.293.0
color.text.primary @ opacity.disabledcolor.surface.backdrop3.153.0
color.loader.markcolor.surface.backdrop4.613.0
color.text.primarycolor.surface.canvas15.054.5
color.text.mutedcolor.surface.canvas6.224.5
color.text.faintcolor.surface.canvas4.943.0
color.text.placeholdercolor.surface.canvas4.193.0
color.text.disabledcolor.surface.canvas3.583.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected12.754.5
color.semantic.accentcolor.surface.canvas5.303.0
color.semantic.accentStrongcolor.surface.canvas7.263.0
color.semantic.dangercolor.surface.canvas4.083.0
color.semantic.warningcolor.surface.canvas3.753.0
color.semantic.successcolor.surface.canvas4.473.0
color.semantic.infocolor.surface.canvas4.693.0
color.agent.readcolor.surface.canvas5.754.5
color.agent.networkcolor.surface.canvas5.254.5
color.agent.shellcolor.surface.canvas5.254.5
color.agent.editcolor.surface.canvas5.614.5
color.agent.externalcolor.surface.canvas5.254.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash5.834.5
color.interactive.hairlineStrongcolor.surface.canvas4.183.0
color.interactive.trackcolor.surface.canvas4.183.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas3.633.0
color.text.primary @ opacity.disabledcolor.surface.canvas3.273.0
color.loader.markcolor.surface.canvas5.303.0
color.text.primarycolor.surface.sunken13.604.5
color.text.mutedcolor.surface.sunken5.624.5
color.text.faintcolor.surface.sunken4.463.0
color.text.placeholdercolor.surface.sunken3.793.0
color.text.disabledcolor.surface.sunken3.243.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected11.554.5
color.semantic.accentcolor.surface.sunken4.793.0
color.semantic.accentStrongcolor.surface.sunken6.563.0
color.semantic.dangercolor.surface.sunken3.693.0
color.semantic.warningcolor.surface.sunken3.393.0
color.semantic.successcolor.surface.sunken4.043.0
color.semantic.infocolor.surface.sunken4.243.0
color.agent.readcolor.surface.sunken5.204.5
color.agent.networkcolor.surface.sunken4.744.5
color.agent.shellcolor.surface.sunken4.744.5
color.agent.editcolor.surface.sunken5.074.5
color.agent.externalcolor.surface.sunken4.754.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash5.274.5
color.interactive.hairlineStrongcolor.surface.sunken4.073.0
color.interactive.trackcolor.surface.sunken4.073.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken3.383.0
color.text.primary @ opacity.disabledcolor.surface.sunken3.183.0
color.loader.markcolor.surface.sunken4.793.0
color.text.primarycolor.surface.panel16.444.5
color.text.mutedcolor.surface.panel6.794.5
color.text.faintcolor.surface.panel5.403.0
color.text.placeholdercolor.surface.panel4.583.0
color.text.disabledcolor.surface.panel3.923.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected13.914.5
color.semantic.accentcolor.surface.panel5.793.0
color.semantic.accentStrongcolor.surface.panel7.933.0
color.semantic.dangercolor.surface.panel4.463.0
color.semantic.warningcolor.surface.panel4.103.0
color.semantic.successcolor.surface.panel4.893.0
color.semantic.infocolor.surface.panel5.123.0
color.agent.readcolor.surface.panel6.284.5
color.agent.networkcolor.surface.panel5.734.5
color.agent.shellcolor.surface.panel5.734.5
color.agent.editcolor.surface.panel6.134.5
color.agent.externalcolor.surface.panel5.744.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash6.364.5
color.interactive.hairlineStrongcolor.surface.panel4.293.0
color.interactive.trackcolor.surface.panel4.293.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.863.0
color.text.primary @ opacity.disabledcolor.surface.panel3.343.0
color.loader.markcolor.surface.panel5.793.0
color.text.primarycolor.surface.raised17.894.5
color.text.mutedcolor.surface.raised7.394.5
color.text.faintcolor.surface.raised5.873.0
color.text.placeholdercolor.surface.raised4.993.0
color.text.disabledcolor.surface.raised4.263.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected15.114.5
color.semantic.accentcolor.surface.raised6.303.0
color.semantic.accentStrongcolor.surface.raised8.633.0
color.semantic.dangercolor.surface.raised4.853.0
color.semantic.warningcolor.surface.raised4.463.0
color.semantic.successcolor.surface.raised5.323.0
color.semantic.infocolor.surface.raised5.573.0
color.agent.readcolor.surface.raised6.844.5
color.agent.networkcolor.surface.raised6.244.5
color.agent.shellcolor.surface.raised6.244.5
color.agent.editcolor.surface.raised6.674.5
color.agent.externalcolor.surface.raised6.244.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash6.924.5
color.interactive.hairlineStrongcolor.surface.raised4.383.0
color.interactive.trackcolor.surface.raised4.383.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised4.093.0
color.text.primary @ opacity.disabledcolor.surface.raised3.403.0
color.loader.markcolor.surface.raised6.303.0
color.text.primarycolor.surface.overlay17.894.5
color.text.mutedcolor.surface.overlay7.394.5
color.text.faintcolor.surface.overlay5.873.0
color.text.placeholdercolor.surface.overlay4.993.0
color.text.disabledcolor.surface.overlay4.263.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected15.114.5
color.semantic.accentcolor.surface.overlay6.303.0
color.semantic.accentStrongcolor.surface.overlay8.633.0
color.semantic.dangercolor.surface.overlay4.853.0
color.semantic.warningcolor.surface.overlay4.463.0
color.semantic.successcolor.surface.overlay5.323.0
color.semantic.infocolor.surface.overlay5.573.0
color.agent.readcolor.surface.overlay6.844.5
color.agent.networkcolor.surface.overlay6.244.5
color.agent.shellcolor.surface.overlay6.244.5
color.agent.editcolor.surface.overlay6.674.5
color.agent.externalcolor.surface.overlay6.244.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash6.924.5
color.interactive.hairlineStrongcolor.surface.overlay4.383.0
color.interactive.trackcolor.surface.overlay4.383.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay4.093.0
color.text.primary @ opacity.disabledcolor.surface.overlay3.403.0
color.loader.markcolor.surface.overlay6.303.0
color.terminal.ansi.0color.terminal.background15.791.2
color.terminal.ansi.1color.terminal.background4.633.0
color.terminal.ansi.2color.terminal.background3.163.0
color.terminal.ansi.3color.terminal.background4.813.0
color.terminal.ansi.4color.terminal.background4.953.0
color.terminal.ansi.5color.terminal.background5.163.0
color.terminal.ansi.6color.terminal.background5.133.0
color.terminal.ansi.7color.terminal.background10.013.0
color.terminal.ansi.8color.terminal.background4.631.2
color.terminal.ansi.9color.terminal.background6.203.0
color.terminal.ansi.10color.terminal.background4.813.0
color.terminal.ansi.11color.terminal.background6.793.0
color.terminal.ansi.12color.terminal.background6.423.0
color.terminal.ansi.13color.terminal.background6.693.0
color.terminal.ansi.14color.terminal.background6.963.0
color.terminal.ansi.15color.terminal.background16.973.0
color.syntax.keywordcolor.surface.sunken5.044.5
color.syntax.stringcolor.surface.sunken4.934.5
color.syntax.numbercolor.surface.sunken4.514.5
color.syntax.inlinecolor.surface.sunken6.834.5
color.syntax.commentcolor.surface.sunken4.463.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash11.474.5
color.syntax.addedcolor.surface.sunken4.043.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash11.244.5
color.syntax.removedcolor.surface.sunken3.693.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash5.804.5
color.syntax.keywordcolor.surface.panel6.094.5
color.syntax.stringcolor.surface.panel5.964.5
color.syntax.numbercolor.surface.panel5.454.5
color.syntax.inlinecolor.surface.panel8.254.5
color.syntax.commentcolor.surface.panel5.403.0
color.text.primarycolor.surface.panel + color.syntax.addedWash13.654.5
color.syntax.addedcolor.surface.panel4.893.0
color.text.primarycolor.surface.panel + color.syntax.removedWash13.404.5
color.syntax.removedcolor.surface.panel4.463.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash6.934.5
color.sequence.categorical.0color.surface.canvas3.573.0
color.sequence.categorical.1color.surface.canvas4.243.0
color.sequence.categorical.2color.surface.canvas3.743.0
color.sequence.categorical.3color.surface.canvas3.663.0
color.sequence.categorical.4color.surface.canvas3.983.0
color.sequence.categorical.5color.surface.canvas3.063.0
color.sequence.categorical.6color.surface.canvas3.613.0
color.sequence.categorical.7color.surface.canvas3.063.0
color.sequence.categorical.0color.surface.panel3.903.0
color.sequence.categorical.1color.surface.panel4.633.0
color.sequence.categorical.2color.surface.panel4.093.0
color.sequence.categorical.3color.surface.panel4.003.0
color.sequence.categorical.4color.surface.panel4.353.0
color.sequence.categorical.5color.surface.panel3.343.0
color.sequence.categorical.6color.surface.panel3.943.0
color.sequence.categorical.7color.surface.panel3.343.0
color.sequence.categorical.0color.surface.raised4.243.0
color.sequence.categorical.1color.surface.raised5.043.0
color.sequence.categorical.2color.surface.raised4.453.0
color.sequence.categorical.3color.surface.raised4.353.0
color.sequence.categorical.4color.surface.raised4.743.0
color.sequence.categorical.5color.surface.raised3.643.0
color.sequence.categorical.6color.surface.raised4.293.0
color.sequence.categorical.7color.surface.raised3.643.0
color.node.portConnectedcolor.surface.canvas7.263.0
color.node.portHovercolor.surface.canvas5.303.0
color.node.edgeTargetcolor.surface.canvas7.263.0
color.node.edgeActivecolor.surface.canvas5.303.0
color.node.edgeFlowHighlightcolor.surface.canvas7.263.0
color.node.edgeFeedbackActivecolor.surface.canvas3.753.0
color.node.auraActivecolor.surface.canvas5.303.0
color.node.auraSuccesscolor.surface.canvas4.473.0
color.node.auraAttentioncolor.surface.canvas3.753.0
color.node.auraDangercolor.surface.canvas4.083.0
color.text.mutedcolor.surface.canvas + color.node.labelWash7.324.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash7.034.5
color.text.onAccentcolor.semantic.accent6.304.5
color.text.onPrimaryFillcolor.interactive.primaryFill17.894.5
color.interactive.primaryFillcolor.surface.backdrop13.103.0
color.interactive.primaryFillcolor.surface.canvas15.053.0
color.interactive.primaryFillcolor.surface.sunken13.603.0
color.interactive.primaryFillcolor.surface.panel16.443.0
color.interactive.primaryFillcolor.surface.raised17.893.0
color.interactive.primaryFillcolor.surface.overlay17.893.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop5.20.0
color.surface.panelcolor.surface.backdrop8.70.0
color.surface.canvascolor.surface.sunken3.82.0
color.surface.panelcolor.surface.canvas3.50.0
color.surface.panelcolor.surface.sunken7.32.0
color.surface.raisedcolor.surface.panel3.40.0
color.surface.overlaycolor.surface.panel3.40.0
color.surface.overlaycolor.surface.canvas6.80.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint6.23.0
color.text.faintcolor.text.placeholder4.53.0
color.text.placeholdercolor.text.disabled4.43.0
color.node.portConnectedcolor.node.portIdle31.63.0

Catppuccin Mocha (catppuccin-mocha)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#94e2d5
color.palette.agent.external#cba6f7
color.palette.agent.network#b4befe
color.palette.agent.read#74c7ec
color.palette.agent.shell#fab387
color.palette.amber.500#ffb900
color.palette.ansi.0#45475a
color.palette.ansi.1#f38ba8
color.palette.ansi.10#a6e3a1
color.palette.ansi.11#f9e2af
color.palette.ansi.12#89b4fa
color.palette.ansi.13#f5c2e7
color.palette.ansi.14#94e2d5
color.palette.ansi.15#a6adc8
color.palette.ansi.2#a6e3a1
color.palette.ansi.3#f9e2af
color.palette.ansi.4#89b4fa
color.palette.ansi.5#f5c2e7
color.palette.ansi.6#94e2d5
color.palette.ansi.7#bac2de
color.palette.ansi.8#585b70
color.palette.ansi.9#f38ba8
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#11111b
color.palette.neutral.100#262636
color.palette.neutral.150#2c2d3e
color.palette.neutral.200#313244
color.palette.neutral.25#181825
color.palette.neutral.300#45475a
color.palette.neutral.50#1e1e2e
color.palette.neutral.500#6c7086
color.palette.neutral.600#9399b2
color.palette.neutral.700#a6adc8
color.palette.neutral.800#cdd6f4
color.palette.neutral.850#cdd6f4
color.palette.neutral.900#ffffff
color.palette.neutral.ink#11111b
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#f5c2e7
color.palette.syntax.inlineWash#cba6f7
color.palette.syntax.keyword#cba6f7
color.palette.syntax.number#fab387
color.palette.syntax.string#a6e3a1
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#11111b
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#333446#333446
color.surface.controlHover#353648#353648
color.surface.controlPressed#2c2d3e#2c2d3e
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#11111b
color.surface.canvas{neutral.50}#1e1e2e
color.surface.sunken{neutral.25}#181825
color.surface.panel{neutral.100}#262636
color.surface.raised{neutral.200}#313244
color.surface.overlay{neutral.150}#2c2d3e
color.text.primary{neutral.800}#cdd6f4
color.text.muted{neutral.700}#a6adc8
color.text.faint{neutral.600}#9399b2
color.text.placeholder#868cab#868cab
color.text.disabled#797fa0#797fa0
color.text.onAccent{neutral.ink}#11111b
color.text.onPrimaryFill{neutral.ink}#11111b
color.interactive.hover{neutral.850}/14#cdd6f414
color.interactive.active{neutral.850}/24#cdd6f424
color.interactive.selected{neutral.850}/1c#cdd6f41c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#89b4fa#89b4fa
color.interactive.primaryFill{neutral.800}#cdd6f4
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#89b4fa#89b4fa
color.semantic.accentStrong#b4befe#b4befe
color.semantic.danger#f38ba8#f38ba8
color.semantic.warning#f9e2af#f9e2af
color.semantic.success#a6e3a1#a6e3a1
color.semantic.info#89dceb#89dceb
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#6c7086
color.node.portHover#89b4fa#89b4fa
color.node.portConnected#b4befe#b4befe
color.node.edge{neutral.500}#6c7086
color.node.edgeTarget#b4befe#b4befe
color.node.edgeActive#89b4fa#89b4fa
color.node.edgeFlowHighlight#b4befe#b4befe
color.node.edgeFeedback#f9e2afb8#f9e2afb8
color.node.edgeFeedbackActive#f9e2af#f9e2af
color.node.auraActive#89b4fa#89b4fa
color.node.auraSuccess#a6e3a1#a6e3a1
color.node.auraAttention#f9e2af#f9e2af
color.node.auraDanger#f38ba8#f38ba8
color.node.labelWash{neutral.100}/f0#262636f0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#89b4fa#89b4fa
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#11111b
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#45475a
color.terminal.ansi.1{ansi.1}#f38ba8
color.terminal.ansi.2{ansi.2}#a6e3a1
color.terminal.ansi.3{ansi.3}#f9e2af
color.terminal.ansi.4{ansi.4}#89b4fa
color.terminal.ansi.5{ansi.5}#f5c2e7
color.terminal.ansi.6{ansi.6}#94e2d5
color.terminal.ansi.7{ansi.7}#bac2de
color.terminal.ansi.8{ansi.8}#585b70
color.terminal.ansi.9{ansi.9}#f38ba8
color.terminal.ansi.10{ansi.10}#a6e3a1
color.terminal.ansi.11{ansi.11}#f9e2af
color.terminal.ansi.12{ansi.12}#89b4fa
color.terminal.ansi.13{ansi.13}#f5c2e7
color.terminal.ansi.14{ansi.14}#94e2d5
color.terminal.ansi.15{ansi.15}#a6adc8

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control8.444.5
color.text.mutedcolor.surface.control5.484.5
color.text.placeholdercolor.surface.control3.693.0
color.text.disabledcolor.surface.control3.113.0
color.text.primarycolor.surface.controlHover8.194.5
color.text.mutedcolor.surface.controlHover5.324.5
color.text.placeholdercolor.surface.controlHover3.583.0
color.text.disabledcolor.surface.controlHover3.023.0
color.text.primarycolor.surface.controlPressed9.364.5
color.text.mutedcolor.surface.controlPressed6.084.5
color.text.placeholdercolor.surface.controlPressed4.093.0
color.text.disabledcolor.surface.controlPressed3.453.0
color.text.primarycolor.surface.backdrop12.974.5
color.text.mutedcolor.surface.backdrop8.424.5
color.text.faintcolor.surface.backdrop6.643.0
color.text.placeholdercolor.surface.backdrop5.673.0
color.text.disabledcolor.surface.backdrop4.783.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected10.274.5
color.semantic.accentcolor.surface.backdrop8.913.0
color.semantic.accentStrongcolor.surface.backdrop10.483.0
color.semantic.dangercolor.surface.backdrop8.103.0
color.semantic.warningcolor.surface.backdrop14.763.0
color.semantic.successcolor.surface.backdrop12.613.0
color.semantic.infocolor.surface.backdrop12.063.0
color.agent.readcolor.surface.backdrop9.934.5
color.agent.networkcolor.surface.backdrop10.484.5
color.agent.shellcolor.surface.backdrop10.594.5
color.agent.editcolor.surface.backdrop12.594.5
color.agent.externalcolor.surface.backdrop9.234.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash7.734.5
color.interactive.hairlineStrongcolor.surface.backdrop3.823.0
color.interactive.trackcolor.surface.backdrop3.823.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop4.903.0
color.text.primary @ opacity.disabledcolor.surface.backdrop5.563.0
color.loader.markcolor.surface.backdrop8.913.0
color.text.primarycolor.surface.canvas11.344.5
color.text.mutedcolor.surface.canvas7.374.5
color.text.faintcolor.surface.canvas5.813.0
color.text.placeholdercolor.surface.canvas4.963.0
color.text.disabledcolor.surface.canvas4.183.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected8.674.5
color.semantic.accentcolor.surface.canvas7.793.0
color.semantic.accentStrongcolor.surface.canvas9.173.0
color.semantic.dangercolor.surface.canvas7.083.0
color.semantic.warningcolor.surface.canvas12.913.0
color.semantic.successcolor.surface.canvas11.033.0
color.semantic.infocolor.surface.canvas10.543.0
color.agent.readcolor.surface.canvas8.694.5
color.agent.networkcolor.surface.canvas9.174.5
color.agent.shellcolor.surface.canvas9.274.5
color.agent.editcolor.surface.canvas11.014.5
color.agent.externalcolor.surface.canvas8.074.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash6.614.5
color.interactive.hairlineStrongcolor.surface.canvas3.753.0
color.interactive.trackcolor.surface.canvas3.753.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.533.0
color.text.primary @ opacity.disabledcolor.surface.canvas5.203.0
color.loader.markcolor.surface.canvas7.793.0
color.text.primarycolor.surface.sunken12.144.5
color.text.mutedcolor.surface.sunken7.894.5
color.text.faintcolor.surface.sunken6.223.0
color.text.placeholdercolor.surface.sunken5.313.0
color.text.disabledcolor.surface.sunken4.483.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected9.404.5
color.semantic.accentcolor.surface.sunken8.343.0
color.semantic.accentStrongcolor.surface.sunken9.813.0
color.semantic.dangercolor.surface.sunken7.583.0
color.semantic.warningcolor.surface.sunken13.813.0
color.semantic.successcolor.surface.sunken11.813.0
color.semantic.infocolor.surface.sunken11.293.0
color.agent.readcolor.surface.sunken9.304.5
color.agent.networkcolor.surface.sunken9.814.5
color.agent.shellcolor.surface.sunken9.924.5
color.agent.editcolor.surface.sunken11.794.5
color.agent.externalcolor.surface.sunken8.644.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash7.144.5
color.interactive.hairlineStrongcolor.surface.sunken3.813.0
color.interactive.trackcolor.surface.sunken3.813.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.733.0
color.text.primary @ opacity.disabledcolor.surface.sunken5.403.0
color.loader.markcolor.surface.sunken8.343.0
color.text.primarycolor.surface.panel10.284.5
color.text.mutedcolor.surface.panel6.684.5
color.text.faintcolor.surface.panel5.273.0
color.text.placeholdercolor.surface.panel4.503.0
color.text.disabledcolor.surface.panel3.793.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected7.794.5
color.semantic.accentcolor.surface.panel7.063.0
color.semantic.accentStrongcolor.surface.panel8.313.0
color.semantic.dangercolor.surface.panel6.423.0
color.semantic.warningcolor.surface.panel11.703.0
color.semantic.successcolor.surface.panel10.003.0
color.semantic.infocolor.surface.panel9.563.0
color.agent.readcolor.surface.panel7.874.5
color.agent.networkcolor.surface.panel8.314.5
color.agent.shellcolor.surface.panel8.404.5
color.agent.editcolor.surface.panel9.984.5
color.agent.externalcolor.surface.panel7.324.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash5.954.5
color.interactive.hairlineStrongcolor.surface.panel3.643.0
color.interactive.trackcolor.surface.panel3.643.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel4.243.0
color.text.primary @ opacity.disabledcolor.surface.panel4.903.0
color.loader.markcolor.surface.panel7.063.0
color.text.primarycolor.surface.raised8.694.5
color.text.mutedcolor.surface.raised5.654.5
color.text.faintcolor.surface.raised4.453.0
color.text.placeholdercolor.surface.raised3.803.0
color.text.disabledcolor.surface.raised3.213.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.614.5
color.semantic.accentcolor.surface.raised5.973.0
color.semantic.accentStrongcolor.surface.raised7.033.0
color.semantic.dangercolor.surface.raised5.433.0
color.semantic.warningcolor.surface.raised9.893.0
color.semantic.successcolor.surface.raised8.463.0
color.semantic.infocolor.surface.raised8.083.0
color.agent.readcolor.surface.raised6.664.5
color.agent.networkcolor.surface.raised7.034.5
color.agent.shellcolor.surface.raised7.104.5
color.agent.editcolor.surface.raised8.444.5
color.agent.externalcolor.surface.raised6.194.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash5.014.5
color.interactive.hairlineStrongcolor.surface.raised3.393.0
color.interactive.trackcolor.surface.raised3.393.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.763.0
color.text.primary @ opacity.disabledcolor.surface.raised4.383.0
color.loader.markcolor.surface.raised5.973.0
color.text.primarycolor.surface.overlay9.364.5
color.text.mutedcolor.surface.overlay6.084.5
color.text.faintcolor.surface.overlay4.793.0
color.text.placeholdercolor.surface.overlay4.093.0
color.text.disabledcolor.surface.overlay3.453.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected7.094.5
color.semantic.accentcolor.surface.overlay6.433.0
color.semantic.accentStrongcolor.surface.overlay7.563.0
color.semantic.dangercolor.surface.overlay5.843.0
color.semantic.warningcolor.surface.overlay10.653.0
color.semantic.successcolor.surface.overlay9.103.0
color.semantic.infocolor.surface.overlay8.703.0
color.agent.readcolor.surface.overlay7.174.5
color.agent.networkcolor.surface.overlay7.564.5
color.agent.shellcolor.surface.overlay7.644.5
color.agent.editcolor.surface.overlay9.084.5
color.agent.externalcolor.surface.overlay6.664.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash5.404.5
color.interactive.hairlineStrongcolor.surface.overlay3.503.0
color.interactive.trackcolor.surface.overlay3.503.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.963.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.613.0
color.loader.markcolor.surface.overlay6.433.0
color.terminal.ansi.0color.terminal.background2.061.2
color.terminal.ansi.1color.terminal.background8.103.0
color.terminal.ansi.2color.terminal.background12.613.0
color.terminal.ansi.3color.terminal.background14.763.0
color.terminal.ansi.4color.terminal.background8.913.0
color.terminal.ansi.5color.terminal.background12.283.0
color.terminal.ansi.6color.terminal.background12.593.0
color.terminal.ansi.7color.terminal.background10.593.0
color.terminal.ansi.8color.terminal.background2.811.2
color.terminal.ansi.9color.terminal.background8.103.0
color.terminal.ansi.10color.terminal.background12.613.0
color.terminal.ansi.11color.terminal.background14.763.0
color.terminal.ansi.12color.terminal.background8.913.0
color.terminal.ansi.13color.terminal.background12.283.0
color.terminal.ansi.14color.terminal.background12.593.0
color.terminal.ansi.15color.terminal.background8.423.0
color.syntax.keywordcolor.surface.sunken8.644.5
color.syntax.stringcolor.surface.sunken11.814.5
color.syntax.numbercolor.surface.sunken9.924.5
color.syntax.inlinecolor.surface.sunken11.504.5
color.syntax.commentcolor.surface.sunken6.223.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash8.724.5
color.syntax.addedcolor.surface.sunken11.813.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash9.524.5
color.syntax.removedcolor.surface.sunken7.583.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash9.134.5
color.syntax.keywordcolor.surface.panel7.324.5
color.syntax.stringcolor.surface.panel10.004.5
color.syntax.numbercolor.surface.panel8.404.5
color.syntax.inlinecolor.surface.panel9.734.5
color.syntax.commentcolor.surface.panel5.273.0
color.text.primarycolor.surface.panel + color.syntax.addedWash7.254.5
color.syntax.addedcolor.surface.panel10.003.0
color.text.primarycolor.surface.panel + color.syntax.removedWash7.974.5
color.syntax.removedcolor.surface.panel6.423.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash7.614.5
color.sequence.categorical.0color.surface.canvas5.683.0
color.sequence.categorical.1color.surface.canvas8.303.0
color.sequence.categorical.2color.surface.canvas5.573.0
color.sequence.categorical.3color.surface.canvas5.673.0
color.sequence.categorical.4color.surface.canvas8.643.0
color.sequence.categorical.5color.surface.canvas6.763.0
color.sequence.categorical.6color.surface.canvas9.553.0
color.sequence.categorical.7color.surface.canvas6.073.0
color.sequence.categorical.0color.surface.panel5.143.0
color.sequence.categorical.1color.surface.panel7.533.0
color.sequence.categorical.2color.surface.panel5.053.0
color.sequence.categorical.3color.surface.panel5.143.0
color.sequence.categorical.4color.surface.panel7.833.0
color.sequence.categorical.5color.surface.panel6.123.0
color.sequence.categorical.6color.surface.panel8.653.0
color.sequence.categorical.7color.surface.panel5.503.0
color.sequence.categorical.0color.surface.raised4.353.0
color.sequence.categorical.1color.surface.raised6.373.0
color.sequence.categorical.2color.surface.raised4.273.0
color.sequence.categorical.3color.surface.raised4.353.0
color.sequence.categorical.4color.surface.raised6.623.0
color.sequence.categorical.5color.surface.raised5.183.0
color.sequence.categorical.6color.surface.raised7.323.0
color.sequence.categorical.7color.surface.raised4.653.0
color.node.portConnectedcolor.surface.canvas9.173.0
color.node.portHovercolor.surface.canvas7.793.0
color.node.edgeTargetcolor.surface.canvas9.173.0
color.node.edgeActivecolor.surface.canvas7.793.0
color.node.edgeFlowHighlightcolor.surface.canvas9.173.0
color.node.edgeFeedbackActivecolor.surface.canvas12.913.0
color.node.auraActivecolor.surface.canvas7.793.0
color.node.auraSuccesscolor.surface.canvas11.033.0
color.node.auraAttentioncolor.surface.canvas12.913.0
color.node.auraDangercolor.surface.canvas7.083.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.724.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash6.304.5
color.text.onAccentcolor.semantic.accent8.914.5
color.text.onPrimaryFillcolor.interactive.primaryFill12.974.5
color.interactive.primaryFillcolor.surface.backdrop12.973.0
color.interactive.primaryFillcolor.surface.canvas11.343.0
color.interactive.primaryFillcolor.surface.sunken12.143.0
color.interactive.primaryFillcolor.surface.panel10.283.0
color.interactive.primaryFillcolor.surface.raised8.693.0
color.interactive.primaryFillcolor.surface.overlay9.363.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop6.62.0
color.surface.panelcolor.surface.backdrop10.42.0
color.surface.canvascolor.surface.sunken3.12.0
color.surface.panelcolor.surface.canvas3.92.0
color.surface.panelcolor.surface.sunken7.02.0
color.surface.raisedcolor.surface.panel5.62.0
color.surface.overlaycolor.surface.panel3.22.0
color.surface.overlaycolor.surface.canvas7.12.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint7.53.0
color.text.faintcolor.text.placeholder4.83.0
color.text.placeholdercolor.text.disabled5.03.0
color.node.portConnectedcolor.node.portIdle30.73.0

Catppuccin Latte (catppuccin-latte)

Appearance: Light.

Palette

TokenValue
color.palette.agent.edit#0f6a64
color.palette.agent.external#7b3fd0
color.palette.agent.network#4b53c9
color.palette.agent.read#096076
color.palette.agent.shell#7d4e08
color.palette.amber.500#a76a00
color.palette.ansi.0#6c6f85
color.palette.ansi.1#d20f39
color.palette.ansi.10#3a9126
color.palette.ansi.11#b0740a
color.palette.ansi.12#1e66f5
color.palette.ansi.13#c73da3
color.palette.ansi.14#179299
color.palette.ansi.15#4c4f69
color.palette.ansi.2#3a9126
color.palette.ansi.3#b0740a
color.palette.ansi.4#1e66f5
color.palette.ansi.5#c73da3
color.palette.ansi.6#179299
color.palette.ansi.7#5c5f77
color.palette.ansi.8#9ca0b0
color.palette.ansi.9#d20f39
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#2a6f8f
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#237a48
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#4952c9
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#363fa8
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#dce0e8
color.palette.neutral.100#f7f8fc
color.palette.neutral.150#ffffff
color.palette.neutral.200#ffffff
color.palette.neutral.25#e6e9ef
color.palette.neutral.300#ccd0da
color.palette.neutral.50#eff1f5
color.palette.neutral.500#9ca0b0
color.palette.neutral.600#666983
color.palette.neutral.700#595c73
color.palette.neutral.800#4c4f69
color.palette.neutral.850#232537
color.palette.neutral.900#ffffff
color.palette.neutral.ink#ffffff
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#d5322f
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#6174d3
color.palette.series.2#9256ae
color.palette.series.3#c05279
color.palette.series.4#c15c24
color.palette.series.5#8c7000
color.palette.series.6#599532
color.palette.series.7#008a76
color.palette.series.8#0091bc
color.palette.syntax.inline#4249b5
color.palette.syntax.inlineWash#7287fd
color.palette.syntax.keyword#8032e6
color.palette.syntax.number#9c4a04
color.palette.syntax.string#2a7019
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#eff1f5
color.palette.terminal.wash#000000
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#f7f8fc#f7f8fc
color.surface.controlHover#ffffff#ffffff
color.surface.controlPressed#eff1f5#eff1f5
color.interactive.controlHairline#00000024#00000024
color.interactive.controlHighlight#ffffffcc#ffffffcc
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#dce0e8
color.surface.canvas{neutral.50}#eff1f5
color.surface.sunken{neutral.25}#e6e9ef
color.surface.panel{neutral.100}#f7f8fc
color.surface.raised{neutral.200}#ffffff
color.surface.overlay{neutral.150}#ffffff
color.text.primary{neutral.800}#4c4f69
color.text.muted{neutral.700}#595c73
color.text.faint{neutral.600}#666983
color.text.placeholder#6f7289#6f7289
color.text.disabled#797c92#797c92
color.text.onAccent{neutral.ink}#ffffff
color.text.onPrimaryFill{neutral.ink}#ffffff
color.interactive.hover{neutral.850}/0f#2325370f
color.interactive.active{neutral.850}/1c#2325371c
color.interactive.selected{neutral.850}/14#23253714
color.interactive.hairline{neutral.850}/1a#2325371a
color.interactive.hairlineStrong{neutral.850}/8c#2325378c
color.interactive.track{neutral.850}/8c#2325378c
color.interactive.divider{neutral.850}/14#23253714
color.interactive.focus#1e66f5#1e66f5
color.interactive.primaryFill{neutral.800}#4c4f69
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#1e66f5#1e66f5
color.semantic.accentStrong#8032e6#8032e6
color.semantic.danger#d20f39#d20f39
color.semantic.warning#9c6608#9c6608
color.semantic.success#34851f#34851f
color.semantic.info#12797f#12797f
color.sequence.categorical.0{series.1}#6174d3
color.sequence.categorical.1{series.2}#9256ae
color.sequence.categorical.2{series.3}#c05279
color.sequence.categorical.3{series.4}#c15c24
color.sequence.categorical.4{series.5}#8c7000
color.sequence.categorical.5{series.6}#599532
color.sequence.categorical.6{series.7}#008a76
color.sequence.categorical.7{series.8}#0091bc
color.node.headerWash{neutral.850}/0f#2325370f
color.node.portIdle{neutral.500}#9ca0b0
color.node.portHover#1e66f5#1e66f5
color.node.portConnected#8032e6#8032e6
color.node.edge{neutral.500}#9ca0b0
color.node.edgeTarget#8032e6#8032e6
color.node.edgeActive#1e66f5#1e66f5
color.node.edgeFlowHighlight#8032e6#8032e6
color.node.edgeFeedback#9c6608b8#9c6608b8
color.node.edgeFeedbackActive#9c6608#9c6608
color.node.auraActive#1e66f5#1e66f5
color.node.auraSuccess#34851f#34851f
color.node.auraAttention#9c6608#9c6608
color.node.auraDanger#d20f39#d20f39
color.node.labelWash{neutral.150}/f0#fffffff0
color.node.grid{neutral.850}/14#23253714
color.node.gridStrong{neutral.850}/29#23253729
color.node.gridAxis{neutral.850}/4d#2325374d
color.loader.mark#1e66f5#1e66f5
color.loader.track{neutral.850}/1f#2325371f
color.loader.placeholder{neutral.850}/17#23253717
color.loader.sheen{neutral.900}/8c#ffffff8c
color.terminal.background{terminal.background}#eff1f5
color.terminal.selection{terminal.wash}/29#00000029
color.terminal.ansi.0{ansi.0}#6c6f85
color.terminal.ansi.1{ansi.1}#d20f39
color.terminal.ansi.2{ansi.2}#3a9126
color.terminal.ansi.3{ansi.3}#b0740a
color.terminal.ansi.4{ansi.4}#1e66f5
color.terminal.ansi.5{ansi.5}#c73da3
color.terminal.ansi.6{ansi.6}#179299
color.terminal.ansi.7{ansi.7}#5c5f77
color.terminal.ansi.8{ansi.8}#9ca0b0
color.terminal.ansi.9{ansi.9}#d20f39
color.terminal.ansi.10{ansi.10}#3a9126
color.terminal.ansi.11{ansi.11}#b0740a
color.terminal.ansi.12{ansi.12}#1e66f5
color.terminal.ansi.13{ansi.13}#c73da3
color.terminal.ansi.14{ansi.14}#179299
color.terminal.ansi.15{ansi.15}#4c4f69

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#0000000c
raised126-1#00000014
overlay026-1#00000010
overlay1824-4#0000001a
modal0412-2#00000016
modal11648-8#00000024

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.75
opacity.muted0.68
opacity.scrim0.35

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha1
effect.glowAlpha0.18
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.78
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.55
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.05
effect.areaWashAlpha0.16
effect.headerTintAlpha0.14
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control7.524.5
color.text.mutedcolor.surface.control6.184.5
color.text.placeholdercolor.surface.control4.453.0
color.text.disabledcolor.surface.control3.873.0
color.text.primarycolor.surface.controlHover7.994.5
color.text.mutedcolor.surface.controlHover6.564.5
color.text.placeholdercolor.surface.controlHover4.733.0
color.text.disabledcolor.surface.controlHover4.113.0
color.text.primarycolor.surface.controlPressed7.064.5
color.text.mutedcolor.surface.controlPressed5.804.5
color.text.placeholdercolor.surface.controlPressed4.183.0
color.text.disabledcolor.surface.controlPressed3.633.0
color.text.primarycolor.surface.backdrop6.044.5
color.text.mutedcolor.surface.backdrop4.954.5
color.text.faintcolor.surface.backdrop4.063.0
color.text.placeholdercolor.surface.backdrop3.573.0
color.text.disabledcolor.surface.backdrop3.113.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected5.244.5
color.semantic.accentcolor.surface.backdrop3.713.0
color.semantic.accentStrongcolor.surface.backdrop4.513.0
color.semantic.dangercolor.surface.backdrop4.103.0
color.semantic.warningcolor.surface.backdrop3.683.0
color.semantic.successcolor.surface.backdrop3.513.0
color.semantic.infocolor.surface.backdrop3.903.0
color.agent.readcolor.surface.backdrop5.394.5
color.agent.networkcolor.surface.backdrop4.704.5
color.agent.shellcolor.surface.backdrop5.354.5
color.agent.editcolor.surface.backdrop4.864.5
color.agent.externalcolor.surface.backdrop4.584.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash4.694.5
color.interactive.hairlineStrongcolor.surface.backdrop3.253.0
color.interactive.trackcolor.surface.backdrop3.253.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop3.713.0
color.text.primary @ opacity.disabledcolor.surface.backdrop3.523.0
color.loader.markcolor.surface.backdrop3.713.0
color.text.primarycolor.surface.canvas7.064.5
color.text.mutedcolor.surface.canvas5.804.5
color.text.faintcolor.surface.canvas4.753.0
color.text.placeholdercolor.surface.canvas4.183.0
color.text.disabledcolor.surface.canvas3.633.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected6.104.5
color.semantic.accentcolor.surface.canvas4.343.0
color.semantic.accentStrongcolor.surface.canvas5.283.0
color.semantic.dangercolor.surface.canvas4.803.0
color.semantic.warningcolor.surface.canvas4.303.0
color.semantic.successcolor.surface.canvas4.113.0
color.semantic.infocolor.surface.canvas4.573.0
color.agent.readcolor.surface.canvas6.304.5
color.agent.networkcolor.surface.canvas5.494.5
color.agent.shellcolor.surface.canvas6.264.5
color.agent.editcolor.surface.canvas5.694.5
color.agent.externalcolor.surface.canvas5.364.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash5.474.5
color.interactive.hairlineStrongcolor.surface.canvas3.423.0
color.interactive.trackcolor.surface.canvas3.423.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.343.0
color.text.primary @ opacity.disabledcolor.surface.canvas3.873.0
color.loader.markcolor.surface.canvas4.343.0
color.text.primarycolor.surface.sunken6.574.5
color.text.mutedcolor.surface.sunken5.394.5
color.text.faintcolor.surface.sunken4.413.0
color.text.placeholdercolor.surface.sunken3.893.0
color.text.disabledcolor.surface.sunken3.383.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected5.694.5
color.semantic.accentcolor.surface.sunken4.043.0
color.semantic.accentStrongcolor.surface.sunken4.913.0
color.semantic.dangercolor.surface.sunken4.463.0
color.semantic.warningcolor.surface.sunken4.003.0
color.semantic.successcolor.surface.sunken3.823.0
color.semantic.infocolor.surface.sunken4.253.0
color.agent.readcolor.surface.sunken5.864.5
color.agent.networkcolor.surface.sunken5.114.5
color.agent.shellcolor.surface.sunken5.824.5
color.agent.editcolor.surface.sunken5.294.5
color.agent.externalcolor.surface.sunken4.984.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash5.094.5
color.interactive.hairlineStrongcolor.surface.sunken3.353.0
color.interactive.trackcolor.surface.sunken3.353.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.043.0
color.text.primary @ opacity.disabledcolor.surface.sunken3.713.0
color.loader.markcolor.surface.sunken4.043.0
color.text.primarycolor.surface.panel7.524.5
color.text.mutedcolor.surface.panel6.184.5
color.text.faintcolor.surface.panel5.063.0
color.text.placeholdercolor.surface.panel4.453.0
color.text.disabledcolor.surface.panel3.873.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected6.494.5
color.semantic.accentcolor.surface.panel4.633.0
color.semantic.accentStrongcolor.surface.panel5.633.0
color.semantic.dangercolor.surface.panel5.123.0
color.semantic.warningcolor.surface.panel4.583.0
color.semantic.successcolor.surface.panel4.383.0
color.semantic.infocolor.surface.panel4.873.0
color.agent.readcolor.surface.panel6.724.5
color.agent.networkcolor.surface.panel5.854.5
color.agent.shellcolor.surface.panel6.674.5
color.agent.editcolor.surface.panel6.064.5
color.agent.externalcolor.surface.panel5.714.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash5.834.5
color.interactive.hairlineStrongcolor.surface.panel3.493.0
color.interactive.trackcolor.surface.panel3.493.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel4.633.0
color.text.primary @ opacity.disabledcolor.surface.panel4.023.0
color.loader.markcolor.surface.panel4.633.0
color.text.primarycolor.surface.raised7.994.5
color.text.mutedcolor.surface.raised6.564.5
color.text.faintcolor.surface.raised5.373.0
color.text.placeholdercolor.surface.raised4.733.0
color.text.disabledcolor.surface.raised4.113.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.884.5
color.semantic.accentcolor.surface.raised4.913.0
color.semantic.accentStrongcolor.surface.raised5.973.0
color.semantic.dangercolor.surface.raised5.433.0
color.semantic.warningcolor.surface.raised4.863.0
color.semantic.successcolor.surface.raised4.653.0
color.semantic.infocolor.surface.raised5.163.0
color.agent.readcolor.surface.raised7.134.5
color.agent.networkcolor.surface.raised6.214.5
color.agent.shellcolor.surface.raised7.084.5
color.agent.editcolor.surface.raised6.434.5
color.agent.externalcolor.surface.raised6.064.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash6.184.5
color.interactive.hairlineStrongcolor.surface.raised3.553.0
color.interactive.trackcolor.surface.raised3.553.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised4.913.0
color.text.primary @ opacity.disabledcolor.surface.raised4.173.0
color.loader.markcolor.surface.raised4.913.0
color.text.primarycolor.surface.overlay7.994.5
color.text.mutedcolor.surface.overlay6.564.5
color.text.faintcolor.surface.overlay5.373.0
color.text.placeholdercolor.surface.overlay4.733.0
color.text.disabledcolor.surface.overlay4.113.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected6.884.5
color.semantic.accentcolor.surface.overlay4.913.0
color.semantic.accentStrongcolor.surface.overlay5.973.0
color.semantic.dangercolor.surface.overlay5.433.0
color.semantic.warningcolor.surface.overlay4.863.0
color.semantic.successcolor.surface.overlay4.653.0
color.semantic.infocolor.surface.overlay5.163.0
color.agent.readcolor.surface.overlay7.134.5
color.agent.networkcolor.surface.overlay6.214.5
color.agent.shellcolor.surface.overlay7.084.5
color.agent.editcolor.surface.overlay6.434.5
color.agent.externalcolor.surface.overlay6.064.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash6.184.5
color.interactive.hairlineStrongcolor.surface.overlay3.553.0
color.interactive.trackcolor.surface.overlay3.553.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay4.913.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.173.0
color.loader.markcolor.surface.overlay4.913.0
color.terminal.ansi.0color.terminal.background4.371.2
color.terminal.ansi.1color.terminal.background4.803.0
color.terminal.ansi.2color.terminal.background3.533.0
color.terminal.ansi.3color.terminal.background3.473.0
color.terminal.ansi.4color.terminal.background4.343.0
color.terminal.ansi.5color.terminal.background4.023.0
color.terminal.ansi.6color.terminal.background3.313.0
color.terminal.ansi.7color.terminal.background5.533.0
color.terminal.ansi.8color.terminal.background2.301.2
color.terminal.ansi.9color.terminal.background4.803.0
color.terminal.ansi.10color.terminal.background3.533.0
color.terminal.ansi.11color.terminal.background3.473.0
color.terminal.ansi.12color.terminal.background4.343.0
color.terminal.ansi.13color.terminal.background4.023.0
color.terminal.ansi.14color.terminal.background3.313.0
color.terminal.ansi.15color.terminal.background7.063.0
color.syntax.keywordcolor.surface.sunken4.914.5
color.syntax.stringcolor.surface.sunken5.034.5
color.syntax.numbercolor.surface.sunken5.094.5
color.syntax.inlinecolor.surface.sunken6.054.5
color.syntax.commentcolor.surface.sunken4.413.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash5.434.5
color.syntax.addedcolor.surface.sunken5.033.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash5.214.5
color.syntax.removedcolor.surface.sunken4.463.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash5.454.5
color.syntax.keywordcolor.surface.panel5.634.5
color.syntax.stringcolor.surface.panel5.774.5
color.syntax.numbercolor.surface.panel5.834.5
color.syntax.inlinecolor.surface.panel6.944.5
color.syntax.commentcolor.surface.panel5.063.0
color.text.primarycolor.surface.panel + color.syntax.addedWash6.164.5
color.syntax.addedcolor.surface.panel5.773.0
color.text.primarycolor.surface.panel + color.syntax.removedWash5.924.5
color.syntax.removedcolor.surface.panel5.123.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash6.174.5
color.sequence.categorical.0color.surface.canvas3.753.0
color.sequence.categorical.1color.surface.canvas4.463.0
color.sequence.categorical.2color.surface.canvas3.933.0
color.sequence.categorical.3color.surface.canvas3.853.0
color.sequence.categorical.4color.surface.canvas4.193.0
color.sequence.categorical.5color.surface.canvas3.223.0
color.sequence.categorical.6color.surface.canvas3.793.0
color.sequence.categorical.7color.surface.canvas3.213.0
color.sequence.categorical.0color.surface.panel4.003.0
color.sequence.categorical.1color.surface.panel4.753.0
color.sequence.categorical.2color.surface.panel4.193.0
color.sequence.categorical.3color.surface.panel4.103.0
color.sequence.categorical.4color.surface.panel4.463.0
color.sequence.categorical.5color.surface.panel3.433.0
color.sequence.categorical.6color.surface.panel4.043.0
color.sequence.categorical.7color.surface.panel3.433.0
color.sequence.categorical.0color.surface.raised4.243.0
color.sequence.categorical.1color.surface.raised5.043.0
color.sequence.categorical.2color.surface.raised4.453.0
color.sequence.categorical.3color.surface.raised4.353.0
color.sequence.categorical.4color.surface.raised4.743.0
color.sequence.categorical.5color.surface.raised3.643.0
color.sequence.categorical.6color.surface.raised4.293.0
color.sequence.categorical.7color.surface.raised3.643.0
color.node.portConnectedcolor.surface.canvas5.283.0
color.node.portHovercolor.surface.canvas4.343.0
color.node.edgeTargetcolor.surface.canvas5.283.0
color.node.edgeActivecolor.surface.canvas4.343.0
color.node.edgeFlowHighlightcolor.surface.canvas5.283.0
color.node.edgeFeedbackActivecolor.surface.canvas4.303.0
color.node.auraActivecolor.surface.canvas4.343.0
color.node.auraSuccesscolor.surface.canvas4.113.0
color.node.auraAttentioncolor.surface.canvas4.303.0
color.node.auraDangercolor.surface.canvas4.803.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.514.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash6.254.5
color.text.onAccentcolor.semantic.accent4.914.5
color.text.onPrimaryFillcolor.interactive.primaryFill7.994.5
color.interactive.primaryFillcolor.surface.backdrop6.043.0
color.interactive.primaryFillcolor.surface.canvas7.063.0
color.interactive.primaryFillcolor.surface.sunken6.573.0
color.interactive.primaryFillcolor.surface.panel7.523.0
color.interactive.primaryFillcolor.surface.raised7.993.0
color.interactive.primaryFillcolor.surface.overlay7.993.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop6.00.0
color.surface.panelcolor.surface.backdrop8.50.0
color.surface.canvascolor.surface.sunken2.82.0
color.surface.panelcolor.surface.canvas2.50.0
color.surface.panelcolor.surface.sunken5.32.0
color.surface.raisedcolor.surface.panel2.40.0
color.surface.overlaycolor.surface.panel2.40.0
color.surface.overlaycolor.surface.canvas4.90.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint5.43.0
color.text.faintcolor.text.placeholder3.53.0
color.text.placeholdercolor.text.disabled3.93.0
color.node.portConnectedcolor.node.portIdle23.93.0

Nord (nord)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#a3be8c
color.palette.agent.external#cba8c5
color.palette.agent.network#b3bde0
color.palette.agent.read#9dc1de
color.palette.agent.shell#e0a793
color.palette.amber.500#ffb900
color.palette.ansi.0#3b4252
color.palette.ansi.1#bf616a
color.palette.ansi.10#a3be8c
color.palette.ansi.11#ebcb8b
color.palette.ansi.12#81a1c1
color.palette.ansi.13#b48ead
color.palette.ansi.14#8fbcbb
color.palette.ansi.15#eceff4
color.palette.ansi.2#a3be8c
color.palette.ansi.3#ebcb8b
color.palette.ansi.4#81a1c1
color.palette.ansi.5#b48ead
color.palette.ansi.6#88c0d0
color.palette.ansi.7#e5e9f0
color.palette.ansi.8#4c566a
color.palette.ansi.9#bf616a
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#1c2027
color.palette.neutral.100#2e3440
color.palette.neutral.150#363c49
color.palette.neutral.200#3b4252
color.palette.neutral.25#22262e
color.palette.neutral.300#434c5e
color.palette.neutral.50#272c35
color.palette.neutral.500#4c566a
color.palette.neutral.600#aab6c8
color.palette.neutral.700#d8dee9
color.palette.neutral.800#eceff4
color.palette.neutral.850#e5e9f0
color.palette.neutral.900#ffffff
color.palette.neutral.ink#1c2027
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#8fbcbb
color.palette.syntax.inlineWash#81a1c1
color.palette.syntax.keyword#81a1c1
color.palette.syntax.number#bd97b6
color.palette.syntax.string#a3be8c
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#2b303b
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#3d4454#3d4454
color.surface.controlHover#404757#404757
color.surface.controlPressed#363c49#363c49
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#1c2027
color.surface.canvas{neutral.50}#272c35
color.surface.sunken{neutral.25}#22262e
color.surface.panel{neutral.100}#2e3440
color.surface.raised{neutral.200}#3b4252
color.surface.overlay{neutral.150}#363c49
color.text.primary{neutral.800}#eceff4
color.text.muted{neutral.700}#d8dee9
color.text.faint{neutral.600}#aab6c8
color.text.placeholder#98a4b8#98a4b8
color.text.disabled#8794a9#8794a9
color.text.onAccent{neutral.ink}#1c2027
color.text.onPrimaryFill{neutral.ink}#1c2027
color.interactive.hover{neutral.850}/14#e5e9f014
color.interactive.active{neutral.850}/24#e5e9f024
color.interactive.selected{neutral.850}/1c#e5e9f01c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#88c0d0#88c0d0
color.interactive.primaryFill{neutral.800}#eceff4
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#88c0d0#88c0d0
color.semantic.accentStrong#7595c4#7595c4
color.semantic.danger#cf7c85#cf7c85
color.semantic.warning#ebcb8b#ebcb8b
color.semantic.success#a3be8c#a3be8c
color.semantic.info#81a1c1#81a1c1
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#4c566a
color.node.portHover#88c0d0#88c0d0
color.node.portConnected#7595c4#7595c4
color.node.edge{neutral.500}#4c566a
color.node.edgeTarget#7595c4#7595c4
color.node.edgeActive#88c0d0#88c0d0
color.node.edgeFlowHighlight#7595c4#7595c4
color.node.edgeFeedback#ebcb8bb8#ebcb8bb8
color.node.edgeFeedbackActive#ebcb8b#ebcb8b
color.node.auraActive#88c0d0#88c0d0
color.node.auraSuccess{green.500}#57c47f
color.node.auraAttention#ebcb8b#ebcb8b
color.node.auraDanger#cf7c85#cf7c85
color.node.labelWash{neutral.100}/f0#2e3440f0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#88c0d0#88c0d0
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#2b303b
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#3b4252
color.terminal.ansi.1{ansi.1}#bf616a
color.terminal.ansi.2{ansi.2}#a3be8c
color.terminal.ansi.3{ansi.3}#ebcb8b
color.terminal.ansi.4{ansi.4}#81a1c1
color.terminal.ansi.5{ansi.5}#b48ead
color.terminal.ansi.6{ansi.6}#88c0d0
color.terminal.ansi.7{ansi.7}#e5e9f0
color.terminal.ansi.8{ansi.8}#4c566a
color.terminal.ansi.9{ansi.9}#bf616a
color.terminal.ansi.10{ansi.10}#a3be8c
color.terminal.ansi.11{ansi.11}#ebcb8b
color.terminal.ansi.12{ansi.12}#81a1c1
color.terminal.ansi.13{ansi.13}#b48ead
color.terminal.ansi.14{ansi.14}#8fbcbb
color.terminal.ansi.15{ansi.15}#eceff4

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control8.464.5
color.text.mutedcolor.surface.control7.224.5
color.text.placeholdercolor.surface.control3.873.0
color.text.disabledcolor.surface.control3.183.0
color.text.primarycolor.surface.controlHover8.074.5
color.text.mutedcolor.surface.controlHover6.894.5
color.text.placeholdercolor.surface.controlHover3.693.0
color.text.disabledcolor.surface.controlHover3.033.0
color.text.primarycolor.surface.controlPressed9.594.5
color.text.mutedcolor.surface.controlPressed8.184.5
color.text.placeholdercolor.surface.controlPressed4.393.0
color.text.disabledcolor.surface.controlPressed3.603.0
color.text.primarycolor.surface.backdrop14.184.5
color.text.mutedcolor.surface.backdrop12.094.5
color.text.faintcolor.surface.backdrop7.963.0
color.text.placeholdercolor.surface.backdrop6.493.0
color.text.disabledcolor.surface.backdrop5.323.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected10.524.5
color.semantic.accentcolor.surface.backdrop8.173.0
color.semantic.accentStrongcolor.surface.backdrop5.333.0
color.semantic.dangercolor.surface.backdrop5.353.0
color.semantic.warningcolor.surface.backdrop10.463.0
color.semantic.successcolor.surface.backdrop8.013.0
color.semantic.infocolor.surface.backdrop6.073.0
color.agent.readcolor.surface.backdrop8.654.5
color.agent.networkcolor.surface.backdrop8.774.5
color.agent.shellcolor.surface.backdrop7.874.5
color.agent.editcolor.surface.backdrop8.014.5
color.agent.externalcolor.surface.backdrop7.744.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash10.844.5
color.interactive.hairlineStrongcolor.surface.backdrop3.753.0
color.interactive.trackcolor.surface.backdrop3.753.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop4.723.0
color.text.primary @ opacity.disabledcolor.surface.backdrop6.253.0
color.loader.markcolor.surface.backdrop8.173.0
color.text.primarycolor.surface.canvas12.164.5
color.text.mutedcolor.surface.canvas10.384.5
color.text.faintcolor.surface.canvas6.833.0
color.text.placeholdercolor.surface.canvas5.573.0
color.text.disabledcolor.surface.canvas4.573.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected8.934.5
color.semantic.accentcolor.surface.canvas7.013.0
color.semantic.accentStrongcolor.surface.canvas4.573.0
color.semantic.dangercolor.surface.canvas4.593.0
color.semantic.warningcolor.surface.canvas8.983.0
color.semantic.successcolor.surface.canvas6.883.0
color.semantic.infocolor.surface.canvas5.213.0
color.agent.readcolor.surface.canvas7.424.5
color.agent.networkcolor.surface.canvas7.534.5
color.agent.shellcolor.surface.canvas6.754.5
color.agent.editcolor.surface.canvas6.884.5
color.agent.externalcolor.surface.canvas6.644.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash9.224.5
color.interactive.hairlineStrongcolor.surface.canvas3.563.0
color.interactive.trackcolor.surface.canvas3.563.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.243.0
color.text.primary @ opacity.disabledcolor.surface.canvas5.663.0
color.loader.markcolor.surface.canvas7.013.0
color.text.primarycolor.surface.sunken13.164.5
color.text.mutedcolor.surface.sunken11.234.5
color.text.faintcolor.surface.sunken7.393.0
color.text.placeholdercolor.surface.sunken6.023.0
color.text.disabledcolor.surface.sunken4.943.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected9.694.5
color.semantic.accentcolor.surface.sunken7.583.0
color.semantic.accentStrongcolor.surface.sunken4.953.0
color.semantic.dangercolor.surface.sunken4.963.0
color.semantic.warningcolor.surface.sunken9.713.0
color.semantic.successcolor.surface.sunken7.443.0
color.semantic.infocolor.surface.sunken5.633.0
color.agent.readcolor.surface.sunken8.034.5
color.agent.networkcolor.surface.sunken8.144.5
color.agent.shellcolor.surface.sunken7.314.5
color.agent.editcolor.surface.sunken7.444.5
color.agent.externalcolor.surface.sunken7.184.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash10.004.5
color.interactive.hairlineStrongcolor.surface.sunken3.673.0
color.interactive.trackcolor.surface.sunken3.673.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.483.0
color.text.primary @ opacity.disabledcolor.surface.sunken5.973.0
color.loader.markcolor.surface.sunken7.583.0
color.text.primarycolor.surface.panel10.844.5
color.text.mutedcolor.surface.panel9.254.5
color.text.faintcolor.surface.panel6.093.0
color.text.placeholdercolor.surface.panel4.963.0
color.text.disabledcolor.surface.panel4.073.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected7.984.5
color.semantic.accentcolor.surface.panel6.243.0
color.semantic.accentStrongcolor.surface.panel4.083.0
color.semantic.dangercolor.surface.panel4.093.0
color.semantic.warningcolor.surface.panel8.003.0
color.semantic.successcolor.surface.panel6.133.0
color.semantic.infocolor.surface.panel4.643.0
color.agent.readcolor.surface.panel6.614.5
color.agent.networkcolor.surface.panel6.704.5
color.agent.shellcolor.surface.panel6.024.5
color.agent.editcolor.surface.panel6.134.5
color.agent.externalcolor.surface.panel5.924.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash8.204.5
color.interactive.hairlineStrongcolor.surface.panel3.383.0
color.interactive.trackcolor.surface.panel3.383.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.903.0
color.text.primary @ opacity.disabledcolor.surface.panel5.233.0
color.loader.markcolor.surface.panel6.243.0
color.text.primarycolor.surface.raised8.734.5
color.text.mutedcolor.surface.raised7.454.5
color.text.faintcolor.surface.raised4.903.0
color.text.placeholdercolor.surface.raised3.993.0
color.text.disabledcolor.surface.raised3.283.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.554.5
color.semantic.accentcolor.surface.raised5.033.0
color.semantic.accentStrongcolor.surface.raised3.283.0
color.semantic.dangercolor.surface.raised3.293.0
color.semantic.warningcolor.surface.raised6.443.0
color.semantic.successcolor.surface.raised4.943.0
color.semantic.infocolor.surface.raised3.743.0
color.agent.readcolor.surface.raised5.334.5
color.agent.networkcolor.surface.raised5.404.5
color.agent.shellcolor.surface.raised4.854.5
color.agent.editcolor.surface.raised4.944.5
color.agent.externalcolor.surface.raised4.774.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash6.634.5
color.interactive.hairlineStrongcolor.surface.raised3.053.0
color.interactive.trackcolor.surface.raised3.053.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.313.0
color.text.primary @ opacity.disabledcolor.surface.raised4.483.0
color.loader.markcolor.surface.raised5.033.0
color.text.primarycolor.surface.overlay9.594.5
color.text.mutedcolor.surface.overlay8.184.5
color.text.faintcolor.surface.overlay5.393.0
color.text.placeholdercolor.surface.overlay4.393.0
color.text.disabledcolor.surface.overlay3.603.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected7.134.5
color.semantic.accentcolor.surface.overlay5.533.0
color.semantic.accentStrongcolor.surface.overlay3.613.0
color.semantic.dangercolor.surface.overlay3.623.0
color.semantic.warningcolor.surface.overlay7.083.0
color.semantic.successcolor.surface.overlay5.423.0
color.semantic.infocolor.surface.overlay4.113.0
color.agent.readcolor.surface.overlay5.854.5
color.agent.networkcolor.surface.overlay5.934.5
color.agent.shellcolor.surface.overlay5.334.5
color.agent.editcolor.surface.overlay5.424.5
color.agent.externalcolor.surface.overlay5.244.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash7.274.5
color.interactive.hairlineStrongcolor.surface.overlay3.203.0
color.interactive.trackcolor.surface.overlay3.203.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.563.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.803.0
color.loader.markcolor.surface.overlay5.533.0
color.terminal.ansi.0color.terminal.background1.311.2
color.terminal.ansi.1color.terminal.background3.233.0
color.terminal.ansi.2color.terminal.background6.483.0
color.terminal.ansi.3color.terminal.background8.463.0
color.terminal.ansi.4color.terminal.background4.913.0
color.terminal.ansi.5color.terminal.background4.673.0
color.terminal.ansi.6color.terminal.background6.613.0
color.terminal.ansi.7color.terminal.background10.863.0
color.terminal.ansi.8color.terminal.background1.791.2
color.terminal.ansi.9color.terminal.background3.233.0
color.terminal.ansi.10color.terminal.background6.483.0
color.terminal.ansi.11color.terminal.background8.463.0
color.terminal.ansi.12color.terminal.background4.913.0
color.terminal.ansi.13color.terminal.background4.673.0
color.terminal.ansi.14color.terminal.background6.343.0
color.terminal.ansi.15color.terminal.background11.473.0
color.syntax.keywordcolor.surface.sunken5.634.5
color.syntax.stringcolor.surface.sunken7.444.5
color.syntax.numbercolor.surface.sunken5.974.5
color.syntax.inlinecolor.surface.sunken7.284.5
color.syntax.commentcolor.surface.sunken7.393.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash9.874.5
color.syntax.addedcolor.surface.sunken7.443.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash10.704.5
color.syntax.removedcolor.surface.sunken4.963.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash5.944.5
color.syntax.keywordcolor.surface.panel4.644.5
color.syntax.stringcolor.surface.panel6.134.5
color.syntax.numbercolor.surface.panel4.924.5
color.syntax.inlinecolor.surface.panel5.994.5
color.syntax.commentcolor.surface.panel6.093.0
color.text.primarycolor.surface.panel + color.syntax.addedWash8.204.5
color.syntax.addedcolor.surface.panel6.133.0
color.text.primarycolor.surface.panel + color.syntax.removedWash8.924.5
color.syntax.removedcolor.surface.panel4.093.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash4.934.5
color.sequence.categorical.0color.surface.canvas4.853.0
color.sequence.categorical.1color.surface.canvas7.103.0
color.sequence.categorical.2color.surface.canvas4.763.0
color.sequence.categorical.3color.surface.canvas4.853.0
color.sequence.categorical.4color.surface.canvas7.383.0
color.sequence.categorical.5color.surface.canvas5.783.0
color.sequence.categorical.6color.surface.canvas8.163.0
color.sequence.categorical.7color.surface.canvas5.193.0
color.sequence.categorical.0color.surface.panel4.323.0
color.sequence.categorical.1color.surface.panel6.323.0
color.sequence.categorical.2color.surface.panel4.243.0
color.sequence.categorical.3color.surface.panel4.323.0
color.sequence.categorical.4color.surface.panel6.583.0
color.sequence.categorical.5color.surface.panel5.143.0
color.sequence.categorical.6color.surface.panel7.273.0
color.sequence.categorical.7color.surface.panel4.623.0
color.sequence.categorical.0color.surface.raised3.483.0
color.sequence.categorical.1color.surface.raised5.093.0
color.sequence.categorical.2color.surface.raised3.423.0
color.sequence.categorical.3color.surface.raised3.483.0
color.sequence.categorical.4color.surface.raised5.303.0
color.sequence.categorical.5color.surface.raised4.143.0
color.sequence.categorical.6color.surface.raised5.863.0
color.sequence.categorical.7color.surface.raised3.723.0
color.node.portConnectedcolor.surface.canvas4.573.0
color.node.portHovercolor.surface.canvas7.013.0
color.node.edgeTargetcolor.surface.canvas4.573.0
color.node.edgeActivecolor.surface.canvas7.013.0
color.node.edgeFlowHighlightcolor.surface.canvas4.573.0
color.node.edgeFeedbackActivecolor.surface.canvas8.983.0
color.node.auraActivecolor.surface.canvas7.013.0
color.node.auraSuccesscolor.surface.canvas6.413.0
color.node.auraAttentioncolor.surface.canvas8.983.0
color.node.auraDangercolor.surface.canvas4.593.0
color.text.mutedcolor.surface.canvas + color.node.labelWash9.314.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash8.984.5
color.text.onAccentcolor.semantic.accent8.174.5
color.text.onPrimaryFillcolor.interactive.primaryFill14.184.5
color.interactive.primaryFillcolor.surface.backdrop14.183.0
color.interactive.primaryFillcolor.surface.canvas12.163.0
color.interactive.primaryFillcolor.surface.sunken13.163.0
color.interactive.primaryFillcolor.surface.panel10.843.0
color.interactive.primaryFillcolor.surface.raised8.733.0
color.interactive.primaryFillcolor.surface.overlay9.593.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop5.72.0
color.surface.panelcolor.surface.backdrop9.52.0
color.surface.canvascolor.surface.sunken2.82.0
color.surface.panelcolor.surface.canvas3.72.0
color.surface.panelcolor.surface.sunken6.52.0
color.surface.raisedcolor.surface.panel6.32.0
color.surface.overlaycolor.surface.panel3.62.0
color.surface.overlaycolor.surface.canvas7.42.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint14.73.0
color.text.faintcolor.text.placeholder6.63.0
color.text.placeholdercolor.text.disabled6.13.0
color.node.portConnectedcolor.node.portIdle24.63.0

Tokyo Night (tokyo-night)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#9ece6a
color.palette.agent.external#bb9af7
color.palette.agent.network#7dcfff
color.palette.agent.read#7aa2f7
color.palette.agent.shell#ff9e64
color.palette.amber.500#ffb900
color.palette.ansi.0#292e42
color.palette.ansi.1#f7768e
color.palette.ansi.10#b9f27c
color.palette.ansi.11#ff9e64
color.palette.ansi.12#7da6ff
color.palette.ansi.13#bb9af7
color.palette.ansi.14#0db9d7
color.palette.ansi.15#c0caf5
color.palette.ansi.2#9ece6a
color.palette.ansi.3#e0af68
color.palette.ansi.4#7aa2f7
color.palette.ansi.5#bb9af7
color.palette.ansi.6#7dcfff
color.palette.ansi.7#a9b1d6
color.palette.ansi.8#414868
color.palette.ansi.9#ff7a93
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#0f0f14
color.palette.neutral.100#24283b
color.palette.neutral.150#292e42
color.palette.neutral.200#2c3145
color.palette.neutral.25#16161e
color.palette.neutral.300#3b4261
color.palette.neutral.50#1a1b26
color.palette.neutral.500#565f89
color.palette.neutral.600#949cc4
color.palette.neutral.700#a9b1d6
color.palette.neutral.800#c0caf5
color.palette.neutral.850#c0caf5
color.palette.neutral.900#ffffff
color.palette.neutral.ink#16161e
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#7dcfff
color.palette.syntax.inlineWash#7aa2f7
color.palette.syntax.keyword#bb9af7
color.palette.syntax.number#ff9e64
color.palette.syntax.string#9ece6a
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#16161e
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#2f3448#2f3448
color.surface.controlHover#32374b#32374b
color.surface.controlPressed#292e42#292e42
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#0f0f14
color.surface.canvas{neutral.50}#1a1b26
color.surface.sunken{neutral.25}#16161e
color.surface.panel{neutral.100}#24283b
color.surface.raised{neutral.200}#2c3145
color.surface.overlay{neutral.150}#292e42
color.text.primary{neutral.800}#c0caf5
color.text.muted{neutral.700}#a9b1d6
color.text.faint{neutral.600}#949cc4
color.text.placeholder#858db5#858db5
color.text.disabled#787fa8#787fa8
color.text.onAccent{neutral.ink}#16161e
color.text.onPrimaryFill{neutral.ink}#16161e
color.interactive.hover{neutral.850}/14#c0caf514
color.interactive.active{neutral.850}/24#c0caf524
color.interactive.selected{neutral.850}/1c#c0caf51c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#7aa2f7#7aa2f7
color.interactive.primaryFill{neutral.800}#c0caf5
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#7aa2f7#7aa2f7
color.semantic.accentStrong#bb9af7#bb9af7
color.semantic.danger#f7768e#f7768e
color.semantic.warning#e0af68#e0af68
color.semantic.success#9ece6a#9ece6a
color.semantic.info#7dcfff#7dcfff
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#565f89
color.node.portHover#7aa2f7#7aa2f7
color.node.portConnected#bb9af7#bb9af7
color.node.edge{neutral.500}#565f89
color.node.edgeTarget#bb9af7#bb9af7
color.node.edgeActive#7aa2f7#7aa2f7
color.node.edgeFlowHighlight#bb9af7#bb9af7
color.node.edgeFeedback#e0af68b8#e0af68b8
color.node.edgeFeedbackActive#e0af68#e0af68
color.node.auraActive#7aa2f7#7aa2f7
color.node.auraSuccess#9ece6a#9ece6a
color.node.auraAttention#e0af68#e0af68
color.node.auraDanger#f7768e#f7768e
color.node.labelWash{neutral.100}/f0#24283bf0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#7aa2f7#7aa2f7
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#16161e
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#292e42
color.terminal.ansi.1{ansi.1}#f7768e
color.terminal.ansi.2{ansi.2}#9ece6a
color.terminal.ansi.3{ansi.3}#e0af68
color.terminal.ansi.4{ansi.4}#7aa2f7
color.terminal.ansi.5{ansi.5}#bb9af7
color.terminal.ansi.6{ansi.6}#7dcfff
color.terminal.ansi.7{ansi.7}#a9b1d6
color.terminal.ansi.8{ansi.8}#414868
color.terminal.ansi.9{ansi.9}#ff7a93
color.terminal.ansi.10{ansi.10}#b9f27c
color.terminal.ansi.11{ansi.11}#ff9e64
color.terminal.ansi.12{ansi.12}#7da6ff
color.terminal.ansi.13{ansi.13}#bb9af7
color.terminal.ansi.14{ansi.14}#0db9d7
color.terminal.ansi.15{ansi.15}#c0caf5

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control7.634.5
color.text.mutedcolor.surface.control5.834.5
color.text.placeholdercolor.surface.control3.803.0
color.text.disabledcolor.surface.control3.173.0
color.text.primarycolor.surface.controlHover7.294.5
color.text.mutedcolor.surface.controlHover5.584.5
color.text.placeholdercolor.surface.controlHover3.633.0
color.text.disabledcolor.surface.controlHover3.033.0
color.text.primarycolor.surface.controlPressed8.324.5
color.text.mutedcolor.surface.controlPressed6.364.5
color.text.placeholdercolor.surface.controlPressed4.143.0
color.text.disabledcolor.surface.controlPressed3.453.0
color.text.primarycolor.surface.backdrop11.844.5
color.text.mutedcolor.surface.backdrop9.054.5
color.text.faintcolor.surface.backdrop7.113.0
color.text.placeholdercolor.surface.backdrop5.893.0
color.text.disabledcolor.surface.backdrop4.913.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected9.614.5
color.semantic.accentcolor.surface.backdrop7.593.0
color.semantic.accentStrongcolor.surface.backdrop8.263.0
color.semantic.dangercolor.surface.backdrop7.223.0
color.semantic.warningcolor.surface.backdrop9.563.0
color.semantic.successcolor.surface.backdrop10.463.0
color.semantic.infocolor.surface.backdrop11.143.0
color.agent.readcolor.surface.backdrop7.594.5
color.agent.networkcolor.surface.backdrop11.144.5
color.agent.shellcolor.surface.backdrop9.404.5
color.agent.editcolor.surface.backdrop10.464.5
color.agent.externalcolor.surface.backdrop8.264.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash8.354.5
color.interactive.hairlineStrongcolor.surface.backdrop3.823.0
color.interactive.trackcolor.surface.backdrop3.823.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop4.253.0
color.text.primary @ opacity.disabledcolor.surface.backdrop5.113.0
color.loader.markcolor.surface.backdrop7.593.0
color.text.primarycolor.surface.canvas10.594.5
color.text.mutedcolor.surface.canvas8.104.5
color.text.faintcolor.surface.canvas6.363.0
color.text.placeholdercolor.surface.canvas5.273.0
color.text.disabledcolor.surface.canvas4.393.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected8.294.5
color.semantic.accentcolor.surface.canvas6.793.0
color.semantic.accentStrongcolor.surface.canvas7.393.0
color.semantic.dangercolor.surface.canvas6.463.0
color.semantic.warningcolor.surface.canvas8.553.0
color.semantic.successcolor.surface.canvas9.353.0
color.semantic.infocolor.surface.canvas9.963.0
color.agent.readcolor.surface.canvas6.794.5
color.agent.networkcolor.surface.canvas9.964.5
color.agent.shellcolor.surface.canvas8.404.5
color.agent.editcolor.surface.canvas9.354.5
color.agent.externalcolor.surface.canvas7.394.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash7.304.5
color.interactive.hairlineStrongcolor.surface.canvas3.793.0
color.interactive.trackcolor.surface.canvas3.793.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.013.0
color.text.primary @ opacity.disabledcolor.surface.canvas4.873.0
color.loader.markcolor.surface.canvas6.793.0
color.text.primarycolor.surface.sunken11.144.5
color.text.mutedcolor.surface.sunken8.524.5
color.text.faintcolor.surface.sunken6.693.0
color.text.placeholdercolor.surface.sunken5.553.0
color.text.disabledcolor.surface.sunken4.623.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected8.834.5
color.semantic.accentcolor.surface.sunken7.143.0
color.semantic.accentStrongcolor.surface.sunken7.773.0
color.semantic.dangercolor.surface.sunken6.803.0
color.semantic.warningcolor.surface.sunken8.993.0
color.semantic.successcolor.surface.sunken9.843.0
color.semantic.infocolor.surface.sunken10.483.0
color.agent.readcolor.surface.sunken7.144.5
color.agent.networkcolor.surface.sunken10.484.5
color.agent.shellcolor.surface.sunken8.844.5
color.agent.editcolor.surface.sunken9.844.5
color.agent.externalcolor.surface.sunken7.774.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash7.744.5
color.interactive.hairlineStrongcolor.surface.sunken3.823.0
color.interactive.trackcolor.surface.sunken3.823.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.123.0
color.text.primary @ opacity.disabledcolor.surface.sunken4.993.0
color.loader.markcolor.surface.sunken7.143.0
color.text.primarycolor.surface.panel9.024.5
color.text.mutedcolor.surface.panel6.904.5
color.text.faintcolor.surface.panel5.423.0
color.text.placeholdercolor.surface.panel4.493.0
color.text.disabledcolor.surface.panel3.753.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected6.974.5
color.semantic.accentcolor.surface.panel5.783.0
color.semantic.accentStrongcolor.surface.panel6.303.0
color.semantic.dangercolor.surface.panel5.513.0
color.semantic.warningcolor.surface.panel7.283.0
color.semantic.successcolor.surface.panel7.973.0
color.semantic.infocolor.surface.panel8.493.0
color.agent.readcolor.surface.panel5.784.5
color.agent.networkcolor.surface.panel8.494.5
color.agent.shellcolor.surface.panel7.164.5
color.agent.editcolor.surface.panel7.974.5
color.agent.externalcolor.surface.panel6.304.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash6.144.5
color.interactive.hairlineStrongcolor.surface.panel3.613.0
color.interactive.trackcolor.surface.panel3.613.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.613.0
color.text.primary @ opacity.disabledcolor.surface.panel4.433.0
color.loader.markcolor.surface.panel5.783.0
color.text.primarycolor.surface.raised7.974.5
color.text.mutedcolor.surface.raised6.094.5
color.text.faintcolor.surface.raised4.793.0
color.text.placeholdercolor.surface.raised3.973.0
color.text.disabledcolor.surface.raised3.313.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.164.5
color.semantic.accentcolor.surface.raised5.113.0
color.semantic.accentStrongcolor.surface.raised5.563.0
color.semantic.dangercolor.surface.raised4.863.0
color.semantic.warningcolor.surface.raised6.433.0
color.semantic.successcolor.surface.raised7.043.0
color.semantic.infocolor.surface.raised7.503.0
color.agent.readcolor.surface.raised5.114.5
color.agent.networkcolor.surface.raised7.504.5
color.agent.shellcolor.surface.raised6.334.5
color.agent.editcolor.surface.raised7.044.5
color.agent.externalcolor.surface.raised5.564.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash5.414.5
color.interactive.hairlineStrongcolor.surface.raised3.433.0
color.interactive.trackcolor.surface.raised3.433.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.303.0
color.text.primary @ opacity.disabledcolor.surface.raised4.083.0
color.loader.markcolor.surface.raised5.113.0
color.text.primarycolor.surface.overlay8.324.5
color.text.mutedcolor.surface.overlay6.364.5
color.text.faintcolor.surface.overlay5.003.0
color.text.placeholdercolor.surface.overlay4.143.0
color.text.disabledcolor.surface.overlay3.453.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected6.434.5
color.semantic.accentcolor.surface.overlay5.333.0
color.semantic.accentStrongcolor.surface.overlay5.813.0
color.semantic.dangercolor.surface.overlay5.083.0
color.semantic.warningcolor.surface.overlay6.723.0
color.semantic.successcolor.surface.overlay7.353.0
color.semantic.infocolor.surface.overlay7.833.0
color.agent.readcolor.surface.overlay5.334.5
color.agent.networkcolor.surface.overlay7.834.5
color.agent.shellcolor.surface.overlay6.604.5
color.agent.editcolor.surface.overlay7.354.5
color.agent.externalcolor.surface.overlay5.814.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash5.654.5
color.interactive.hairlineStrongcolor.surface.overlay3.493.0
color.interactive.trackcolor.surface.overlay3.493.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.413.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.203.0
color.loader.markcolor.surface.overlay5.333.0
color.terminal.ansi.0color.terminal.background1.341.2
color.terminal.ansi.1color.terminal.background6.803.0
color.terminal.ansi.2color.terminal.background9.843.0
color.terminal.ansi.3color.terminal.background8.993.0
color.terminal.ansi.4color.terminal.background7.143.0
color.terminal.ansi.5color.terminal.background7.773.0
color.terminal.ansi.6color.terminal.background10.483.0
color.terminal.ansi.7color.terminal.background8.523.0
color.terminal.ansi.8color.terminal.background2.011.2
color.terminal.ansi.9color.terminal.background7.243.0
color.terminal.ansi.10color.terminal.background13.753.0
color.terminal.ansi.11color.terminal.background8.843.0
color.terminal.ansi.12color.terminal.background7.513.0
color.terminal.ansi.13color.terminal.background7.773.0
color.terminal.ansi.14color.terminal.background7.653.0
color.terminal.ansi.15color.terminal.background11.143.0
color.syntax.keywordcolor.surface.sunken7.774.5
color.syntax.stringcolor.surface.sunken9.844.5
color.syntax.numbercolor.surface.sunken8.844.5
color.syntax.inlinecolor.surface.sunken10.484.5
color.syntax.commentcolor.surface.sunken6.693.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash8.404.5
color.syntax.addedcolor.surface.sunken9.843.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash9.024.5
color.syntax.removedcolor.surface.sunken6.803.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash8.644.5
color.syntax.keywordcolor.surface.panel6.304.5
color.syntax.stringcolor.surface.panel7.974.5
color.syntax.numbercolor.surface.panel7.164.5
color.syntax.inlinecolor.surface.panel8.494.5
color.syntax.commentcolor.surface.panel5.423.0
color.text.primarycolor.surface.panel + color.syntax.addedWash6.674.5
color.syntax.addedcolor.surface.panel7.973.0
color.text.primarycolor.surface.panel + color.syntax.removedWash7.254.5
color.syntax.removedcolor.surface.panel5.513.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash6.874.5
color.sequence.categorical.0color.surface.canvas5.913.0
color.sequence.categorical.1color.surface.canvas8.653.0
color.sequence.categorical.2color.surface.canvas5.813.0
color.sequence.categorical.3color.surface.canvas5.913.0
color.sequence.categorical.4color.surface.canvas9.003.0
color.sequence.categorical.5color.surface.canvas7.043.0
color.sequence.categorical.6color.surface.canvas9.953.0
color.sequence.categorical.7color.surface.canvas6.333.0
color.sequence.categorical.0color.surface.panel5.043.0
color.sequence.categorical.1color.surface.panel7.383.0
color.sequence.categorical.2color.surface.panel4.953.0
color.sequence.categorical.3color.surface.panel5.043.0
color.sequence.categorical.4color.surface.panel7.673.0
color.sequence.categorical.5color.surface.panel6.003.0
color.sequence.categorical.6color.surface.panel8.483.0
color.sequence.categorical.7color.surface.panel5.393.0
color.sequence.categorical.0color.surface.raised4.453.0
color.sequence.categorical.1color.surface.raised6.513.0
color.sequence.categorical.2color.surface.raised4.373.0
color.sequence.categorical.3color.surface.raised4.453.0
color.sequence.categorical.4color.surface.raised6.773.0
color.sequence.categorical.5color.surface.raised5.303.0
color.sequence.categorical.6color.surface.raised7.493.0
color.sequence.categorical.7color.surface.raised4.763.0
color.node.portConnectedcolor.surface.canvas7.393.0
color.node.portHovercolor.surface.canvas6.793.0
color.node.edgeTargetcolor.surface.canvas7.393.0
color.node.edgeActivecolor.surface.canvas6.793.0
color.node.edgeFlowHighlightcolor.surface.canvas7.393.0
color.node.edgeFeedbackActivecolor.surface.canvas8.553.0
color.node.auraActivecolor.surface.canvas6.793.0
color.node.auraSuccesscolor.surface.canvas9.353.0
color.node.auraAttentioncolor.surface.canvas8.553.0
color.node.auraDangercolor.surface.canvas6.463.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.974.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash6.604.5
color.text.onAccentcolor.semantic.accent7.144.5
color.text.onPrimaryFillcolor.interactive.primaryFill11.144.5
color.interactive.primaryFillcolor.surface.backdrop11.843.0
color.interactive.primaryFillcolor.surface.canvas10.593.0
color.interactive.primaryFillcolor.surface.sunken11.143.0
color.interactive.primaryFillcolor.surface.panel9.023.0
color.interactive.primaryFillcolor.surface.raised7.973.0
color.interactive.primaryFillcolor.surface.overlay8.323.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop5.72.0
color.surface.panelcolor.surface.backdrop12.12.0
color.surface.canvascolor.surface.sunken2.62.0
color.surface.panelcolor.surface.canvas6.42.0
color.surface.panelcolor.surface.sunken9.02.0
color.surface.raisedcolor.surface.panel4.12.0
color.surface.overlaycolor.surface.panel2.82.0
color.surface.overlaycolor.surface.canvas9.22.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint7.73.0
color.text.faintcolor.text.placeholder5.73.0
color.text.placeholdercolor.text.disabled5.33.0
color.node.portConnectedcolor.node.portIdle28.63.0

Gruvbox Dark (gruvbox-dark)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#8ec07c
color.palette.agent.external#fabd2f
color.palette.agent.network#d992a5
color.palette.agent.read#83a598
color.palette.agent.shell#fe8019
color.palette.amber.500#ffb900
color.palette.ansi.0#32302f
color.palette.ansi.1#cc241d
color.palette.ansi.10#b8bb26
color.palette.ansi.11#fabd2f
color.palette.ansi.12#83a598
color.palette.ansi.13#d3869b
color.palette.ansi.14#8ec07c
color.palette.ansi.15#ebdbb2
color.palette.ansi.2#98971a
color.palette.ansi.3#d79921
color.palette.ansi.4#458588
color.palette.ansi.5#b16286
color.palette.ansi.6#689d6a
color.palette.ansi.7#a89984
color.palette.ansi.8#928374
color.palette.ansi.9#fb4934
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#1b1d1e
color.palette.neutral.100#302e2c
color.palette.neutral.150#363331
color.palette.neutral.200#383432
color.palette.neutral.25#1f2223
color.palette.neutral.300#504945
color.palette.neutral.50#282828
color.palette.neutral.500#665c54
color.palette.neutral.600#a89984
color.palette.neutral.700#d5c4a1
color.palette.neutral.800#ebdbb2
color.palette.neutral.850#ebdbb2
color.palette.neutral.900#ffffff
color.palette.neutral.ink#1b1d1e
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#8ec07c
color.palette.syntax.inlineWash#83a598
color.palette.syntax.keyword#fe8019
color.palette.syntax.number#d3869b
color.palette.syntax.string#b8bb26
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#1b1d1e
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#393533#393533
color.surface.controlHover#3b3735#3b3735
color.surface.controlPressed#363331#363331
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#1b1d1e
color.surface.canvas{neutral.50}#282828
color.surface.sunken{neutral.25}#1f2223
color.surface.panel{neutral.100}#302e2c
color.surface.raised{neutral.200}#383432
color.surface.overlay{neutral.150}#363331
color.text.primary{neutral.800}#ebdbb2
color.text.muted{neutral.700}#d5c4a1
color.text.faint{neutral.600}#a89984
color.text.placeholder#9a8b7b#9a8b7b
color.text.disabled#8d7f71#8d7f71
color.text.onAccent{neutral.ink}#1b1d1e
color.text.onPrimaryFill{neutral.ink}#1b1d1e
color.interactive.hover{neutral.850}/14#ebdbb214
color.interactive.active{neutral.850}/24#ebdbb224
color.interactive.selected{neutral.850}/1c#ebdbb21c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#83a598#83a598
color.interactive.primaryFill{neutral.800}#ebdbb2
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#83a598#83a598
color.semantic.accentStrong#8ec07c#8ec07c
color.semantic.danger#fb4934#fb4934
color.semantic.warning#fabd2f#fabd2f
color.semantic.success#b8bb26#b8bb26
color.semantic.info#d3869b#d3869b
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#665c54
color.node.portHover#83a598#83a598
color.node.portConnected#8ec07c#8ec07c
color.node.edge{neutral.500}#665c54
color.node.edgeTarget#8ec07c#8ec07c
color.node.edgeActive#83a598#83a598
color.node.edgeFlowHighlight#8ec07c#8ec07c
color.node.edgeFeedback#fabd2fb8#fabd2fb8
color.node.edgeFeedbackActive#fabd2f#fabd2f
color.node.auraActive#83a598#83a598
color.node.auraSuccess#b8bb26#b8bb26
color.node.auraAttention#fabd2f#fabd2f
color.node.auraDanger#fb4934#fb4934
color.node.labelWash{neutral.100}/f0#302e2cf0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#83a598#83a598
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#1b1d1e
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#32302f
color.terminal.ansi.1{ansi.1}#cc241d
color.terminal.ansi.2{ansi.2}#98971a
color.terminal.ansi.3{ansi.3}#d79921
color.terminal.ansi.4{ansi.4}#458588
color.terminal.ansi.5{ansi.5}#b16286
color.terminal.ansi.6{ansi.6}#689d6a
color.terminal.ansi.7{ansi.7}#a89984
color.terminal.ansi.8{ansi.8}#928374
color.terminal.ansi.9{ansi.9}#fb4934
color.terminal.ansi.10{ansi.10}#b8bb26
color.terminal.ansi.11{ansi.11}#fabd2f
color.terminal.ansi.12{ansi.12}#83a598
color.terminal.ansi.13{ansi.13}#d3869b
color.terminal.ansi.14{ansi.14}#8ec07c
color.terminal.ansi.15{ansi.15}#ebdbb2

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control8.844.5
color.text.mutedcolor.surface.control7.074.5
color.text.placeholdercolor.surface.control3.673.0
color.text.disabledcolor.surface.control3.123.0
color.text.primarycolor.surface.controlHover8.584.5
color.text.mutedcolor.surface.controlHover6.864.5
color.text.placeholdercolor.surface.controlHover3.563.0
color.text.disabledcolor.surface.controlHover3.033.0
color.text.primarycolor.surface.controlPressed9.144.5
color.text.mutedcolor.surface.controlPressed7.314.5
color.text.placeholdercolor.surface.controlPressed3.793.0
color.text.disabledcolor.surface.controlPressed3.233.0
color.text.primarycolor.surface.backdrop12.334.5
color.text.mutedcolor.surface.backdrop9.864.5
color.text.faintcolor.surface.backdrop6.093.0
color.text.placeholdercolor.surface.backdrop5.123.0
color.text.disabledcolor.surface.backdrop4.363.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected9.404.5
color.semantic.accentcolor.surface.backdrop6.293.0
color.semantic.accentStrongcolor.surface.backdrop8.043.0
color.semantic.dangercolor.surface.backdrop4.923.0
color.semantic.warningcolor.surface.backdrop9.983.0
color.semantic.successcolor.surface.backdrop8.203.0
color.semantic.infocolor.surface.backdrop6.173.0
color.agent.readcolor.surface.backdrop6.294.5
color.agent.networkcolor.surface.backdrop6.934.5
color.agent.shellcolor.surface.backdrop6.704.5
color.agent.editcolor.surface.backdrop8.044.5
color.agent.externalcolor.surface.backdrop9.984.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash8.874.5
color.interactive.hairlineStrongcolor.surface.backdrop3.793.0
color.interactive.trackcolor.surface.backdrop3.793.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop3.773.0
color.text.primary @ opacity.disabledcolor.surface.backdrop5.523.0
color.loader.markcolor.surface.backdrop6.293.0
color.text.primarycolor.surface.canvas10.754.5
color.text.mutedcolor.surface.canvas8.594.5
color.text.faintcolor.surface.canvas5.303.0
color.text.placeholdercolor.surface.canvas4.463.0
color.text.disabledcolor.surface.canvas3.803.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected8.084.5
color.semantic.accentcolor.surface.canvas5.483.0
color.semantic.accentStrongcolor.surface.canvas7.013.0
color.semantic.dangercolor.surface.canvas4.293.0
color.semantic.warningcolor.surface.canvas8.693.0
color.semantic.successcolor.surface.canvas7.143.0
color.semantic.infocolor.surface.canvas5.373.0
color.agent.readcolor.surface.canvas5.484.5
color.agent.networkcolor.surface.canvas6.044.5
color.agent.shellcolor.surface.canvas5.844.5
color.agent.editcolor.surface.canvas7.014.5
color.agent.externalcolor.surface.canvas8.694.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash7.644.5
color.interactive.hairlineStrongcolor.surface.canvas3.633.0
color.interactive.trackcolor.surface.canvas3.633.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas3.453.0
color.text.primary @ opacity.disabledcolor.surface.canvas5.083.0
color.loader.markcolor.surface.canvas5.483.0
color.text.primarycolor.surface.sunken11.674.5
color.text.mutedcolor.surface.sunken9.334.5
color.text.faintcolor.surface.sunken5.763.0
color.text.placeholdercolor.surface.sunken4.843.0
color.text.disabledcolor.surface.sunken4.123.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected8.834.5
color.semantic.accentcolor.surface.sunken5.953.0
color.semantic.accentStrongcolor.surface.sunken7.613.0
color.semantic.dangercolor.surface.sunken4.663.0
color.semantic.warningcolor.surface.sunken9.443.0
color.semantic.successcolor.surface.sunken7.763.0
color.semantic.infocolor.surface.sunken5.843.0
color.agent.readcolor.surface.sunken5.954.5
color.agent.networkcolor.surface.sunken6.564.5
color.agent.shellcolor.surface.sunken6.344.5
color.agent.editcolor.surface.sunken7.614.5
color.agent.externalcolor.surface.sunken9.444.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash8.354.5
color.interactive.hairlineStrongcolor.surface.sunken3.733.0
color.interactive.trackcolor.surface.sunken3.733.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken3.643.0
color.text.primary @ opacity.disabledcolor.surface.sunken5.353.0
color.loader.markcolor.surface.sunken5.953.0
color.text.primarycolor.surface.panel9.864.5
color.text.mutedcolor.surface.panel7.884.5
color.text.faintcolor.surface.panel4.873.0
color.text.placeholdercolor.surface.panel4.093.0
color.text.disabledcolor.surface.panel3.483.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected7.404.5
color.semantic.accentcolor.surface.panel5.023.0
color.semantic.accentStrongcolor.surface.panel6.433.0
color.semantic.dangercolor.surface.panel3.933.0
color.semantic.warningcolor.surface.panel7.983.0
color.semantic.successcolor.surface.panel6.553.0
color.semantic.infocolor.surface.panel4.933.0
color.agent.readcolor.surface.panel5.024.5
color.agent.networkcolor.surface.panel5.544.5
color.agent.shellcolor.surface.panel5.364.5
color.agent.editcolor.surface.panel6.434.5
color.agent.externalcolor.surface.panel7.984.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash6.994.5
color.interactive.hairlineStrongcolor.surface.panel3.513.0
color.interactive.trackcolor.surface.panel3.513.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.253.0
color.text.primary @ opacity.disabledcolor.surface.panel4.803.0
color.loader.markcolor.surface.panel5.023.0
color.text.primarycolor.surface.raised8.984.5
color.text.mutedcolor.surface.raised7.184.5
color.text.faintcolor.surface.raised4.433.0
color.text.placeholdercolor.surface.raised3.733.0
color.text.disabledcolor.surface.raised3.173.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.764.5
color.semantic.accentcolor.surface.raised4.573.0
color.semantic.accentStrongcolor.surface.raised5.853.0
color.semantic.dangercolor.surface.raised3.583.0
color.semantic.warningcolor.surface.raised7.263.0
color.semantic.successcolor.surface.raised5.973.0
color.semantic.infocolor.surface.raised4.493.0
color.agent.readcolor.surface.raised4.574.5
color.agent.networkcolor.surface.raised5.054.5
color.agent.shellcolor.surface.raised4.884.5
color.agent.editcolor.surface.raised5.854.5
color.agent.externalcolor.surface.raised7.264.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash6.364.5
color.interactive.hairlineStrongcolor.surface.raised3.373.0
color.interactive.trackcolor.surface.raised3.373.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.033.0
color.text.primary @ opacity.disabledcolor.surface.raised4.513.0
color.loader.markcolor.surface.raised4.573.0
color.text.primarycolor.surface.overlay9.144.5
color.text.mutedcolor.surface.overlay7.314.5
color.text.faintcolor.surface.overlay4.513.0
color.text.placeholdercolor.surface.overlay3.793.0
color.text.disabledcolor.surface.overlay3.233.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected6.884.5
color.semantic.accentcolor.surface.overlay4.663.0
color.semantic.accentStrongcolor.surface.overlay5.963.0
color.semantic.dangercolor.surface.overlay3.653.0
color.semantic.warningcolor.surface.overlay7.403.0
color.semantic.successcolor.surface.overlay6.083.0
color.semantic.infocolor.surface.overlay4.573.0
color.agent.readcolor.surface.overlay4.664.5
color.agent.networkcolor.surface.overlay5.144.5
color.agent.shellcolor.surface.overlay4.974.5
color.agent.editcolor.surface.overlay5.964.5
color.agent.externalcolor.surface.overlay7.404.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash6.484.5
color.interactive.hairlineStrongcolor.surface.overlay3.393.0
color.interactive.trackcolor.surface.overlay3.393.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.073.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.563.0
color.loader.markcolor.surface.overlay4.663.0
color.terminal.ansi.0color.terminal.background1.291.2
color.terminal.ansi.1color.terminal.background3.093.0
color.terminal.ansi.2color.terminal.background5.463.0
color.terminal.ansi.3color.terminal.background6.823.0
color.terminal.ansi.4color.terminal.background4.003.0
color.terminal.ansi.5color.terminal.background4.003.0
color.terminal.ansi.6color.terminal.background5.333.0
color.terminal.ansi.7color.terminal.background6.093.0
color.terminal.ansi.8color.terminal.background4.611.2
color.terminal.ansi.9color.terminal.background4.923.0
color.terminal.ansi.10color.terminal.background8.203.0
color.terminal.ansi.11color.terminal.background9.983.0
color.terminal.ansi.12color.terminal.background6.293.0
color.terminal.ansi.13color.terminal.background6.173.0
color.terminal.ansi.14color.terminal.background8.043.0
color.terminal.ansi.15color.terminal.background12.333.0
color.syntax.keywordcolor.surface.sunken6.344.5
color.syntax.stringcolor.surface.sunken7.764.5
color.syntax.numbercolor.surface.sunken5.844.5
color.syntax.inlinecolor.surface.sunken7.614.5
color.syntax.commentcolor.surface.sunken5.763.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash8.844.5
color.syntax.addedcolor.surface.sunken7.763.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash10.014.5
color.syntax.removedcolor.surface.sunken4.663.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash6.234.5
color.syntax.keywordcolor.surface.panel5.364.5
color.syntax.stringcolor.surface.panel6.554.5
color.syntax.numbercolor.surface.panel4.934.5
color.syntax.inlinecolor.surface.panel6.434.5
color.syntax.commentcolor.surface.panel4.873.0
color.text.primarycolor.surface.panel + color.syntax.addedWash7.464.5
color.syntax.addedcolor.surface.panel6.553.0
color.text.primarycolor.surface.panel + color.syntax.removedWash8.494.5
color.syntax.removedcolor.surface.panel3.933.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash5.264.5
color.sequence.categorical.0color.surface.canvas5.103.0
color.sequence.categorical.1color.surface.canvas7.463.0
color.sequence.categorical.2color.surface.canvas5.013.0
color.sequence.categorical.3color.surface.canvas5.103.0
color.sequence.categorical.4color.surface.canvas7.763.0
color.sequence.categorical.5color.surface.canvas6.073.0
color.sequence.categorical.6color.surface.canvas8.583.0
color.sequence.categorical.7color.surface.canvas5.463.0
color.sequence.categorical.0color.surface.panel4.683.0
color.sequence.categorical.1color.surface.panel6.853.0
color.sequence.categorical.2color.surface.panel4.603.0
color.sequence.categorical.3color.surface.panel4.673.0
color.sequence.categorical.4color.surface.panel7.123.0
color.sequence.categorical.5color.surface.panel5.573.0
color.sequence.categorical.6color.surface.panel7.873.0
color.sequence.categorical.7color.surface.panel5.013.0
color.sequence.categorical.0color.surface.raised4.263.0
color.sequence.categorical.1color.surface.raised6.233.0
color.sequence.categorical.2color.surface.raised4.183.0
color.sequence.categorical.3color.surface.raised4.263.0
color.sequence.categorical.4color.surface.raised6.483.0
color.sequence.categorical.5color.surface.raised5.073.0
color.sequence.categorical.6color.surface.raised7.173.0
color.sequence.categorical.7color.surface.raised4.563.0
color.node.portConnectedcolor.surface.canvas7.013.0
color.node.portHovercolor.surface.canvas5.483.0
color.node.edgeTargetcolor.surface.canvas7.013.0
color.node.edgeActivecolor.surface.canvas5.483.0
color.node.edgeFlowHighlightcolor.surface.canvas7.013.0
color.node.edgeFeedbackActivecolor.surface.canvas8.693.0
color.node.auraActivecolor.surface.canvas5.483.0
color.node.auraSuccesscolor.surface.canvas7.143.0
color.node.auraAttentioncolor.surface.canvas8.693.0
color.node.auraDangercolor.surface.canvas4.293.0
color.text.mutedcolor.surface.canvas + color.node.labelWash7.924.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash7.574.5
color.text.onAccentcolor.semantic.accent6.294.5
color.text.onPrimaryFillcolor.interactive.primaryFill12.334.5
color.interactive.primaryFillcolor.surface.backdrop12.333.0
color.interactive.primaryFillcolor.surface.canvas10.753.0
color.interactive.primaryFillcolor.surface.sunken11.673.0
color.interactive.primaryFillcolor.surface.panel9.863.0
color.interactive.primaryFillcolor.surface.raised8.983.0
color.interactive.primaryFillcolor.surface.overlay9.143.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop5.52.0
color.surface.panelcolor.surface.backdrop8.52.0
color.surface.canvascolor.surface.sunken3.22.0
color.surface.panelcolor.surface.canvas3.02.0
color.surface.panelcolor.surface.sunken6.12.0
color.surface.raisedcolor.surface.panel3.02.0
color.surface.overlaycolor.surface.panel2.42.0
color.surface.overlaycolor.surface.canvas5.42.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint15.83.0
color.text.faintcolor.text.placeholder5.23.0
color.text.placeholdercolor.text.disabled4.73.0
color.node.portConnectedcolor.node.portIdle33.03.0

Dracula (dracula)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#50fa7b
color.palette.agent.external#ff79c6
color.palette.agent.network#bd93f9
color.palette.agent.read#8be9fd
color.palette.agent.shell#ffb86c
color.palette.amber.500#ffb900
color.palette.ansi.0#383a4a
color.palette.ansi.1#ff5555
color.palette.ansi.10#69ff94
color.palette.ansi.11#ffffa5
color.palette.ansi.12#d6acff
color.palette.ansi.13#ff92df
color.palette.ansi.14#a4ffff
color.palette.ansi.15#ffffff
color.palette.ansi.2#50fa7b
color.palette.ansi.3#f1fa8c
color.palette.ansi.4#bd93f9
color.palette.ansi.5#ff79c6
color.palette.ansi.6#8be9fd
color.palette.ansi.7#f8f8f2
color.palette.ansi.8#6272a4
color.palette.ansi.9#ff6e6e
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#141520
color.palette.neutral.100#282a36
color.palette.neutral.150#2f3240
color.palette.neutral.200#343747
color.palette.neutral.25#1c1d26
color.palette.neutral.300#44475a
color.palette.neutral.50#21222c
color.palette.neutral.500#6272a4
color.palette.neutral.600#929bc7
color.palette.neutral.700#b8bede
color.palette.neutral.800#f8f8f2
color.palette.neutral.850#f8f8f2
color.palette.neutral.900#ffffff
color.palette.neutral.ink#21222c
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#8be9fd
color.palette.syntax.inlineWash#bd93f9
color.palette.syntax.keyword#ff79c6
color.palette.syntax.number#bd93f9
color.palette.syntax.string#f1fa8c
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#21222c
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#343747#343747
color.surface.controlHover#353848#353848
color.surface.controlPressed#2f3240#2f3240
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#141520
color.surface.canvas{neutral.50}#21222c
color.surface.sunken{neutral.25}#1c1d26
color.surface.panel{neutral.100}#282a36
color.surface.raised{neutral.200}#343747
color.surface.overlay{neutral.150}#2f3240
color.text.primary{neutral.800}#f8f8f2
color.text.muted{neutral.700}#b8bede
color.text.faint{neutral.600}#929bc7
color.text.placeholder#838dbb#838dbb
color.text.disabled#7580ae#7580ae
color.text.onAccent{neutral.ink}#21222c
color.text.onPrimaryFill{neutral.ink}#21222c
color.interactive.hover{neutral.850}/14#f8f8f214
color.interactive.active{neutral.850}/24#f8f8f224
color.interactive.selected{neutral.850}/1c#f8f8f21c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#bd93f9#bd93f9
color.interactive.primaryFill{neutral.800}#f8f8f2
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#bd93f9#bd93f9
color.semantic.accentStrong#ff79c6#ff79c6
color.semantic.danger#ff5555#ff5555
color.semantic.warning#ffb86c#ffb86c
color.semantic.success#50fa7b#50fa7b
color.semantic.info#8be9fd#8be9fd
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#6272a4
color.node.portHover#bd93f9#bd93f9
color.node.portConnected#ff79c6#ff79c6
color.node.edge{neutral.500}#6272a4
color.node.edgeTarget#ff79c6#ff79c6
color.node.edgeActive#bd93f9#bd93f9
color.node.edgeFlowHighlight#ff79c6#ff79c6
color.node.edgeFeedback#ffb86cb8#ffb86cb8
color.node.edgeFeedbackActive#ffb86c#ffb86c
color.node.auraActive#bd93f9#bd93f9
color.node.auraSuccess#50fa7b#50fa7b
color.node.auraAttention#ffb86c#ffb86c
color.node.auraDanger#ff5555#ff5555
color.node.labelWash{neutral.100}/f0#282a36f0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#bd93f9#bd93f9
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#21222c
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#383a4a
color.terminal.ansi.1{ansi.1}#ff5555
color.terminal.ansi.2{ansi.2}#50fa7b
color.terminal.ansi.3{ansi.3}#f1fa8c
color.terminal.ansi.4{ansi.4}#bd93f9
color.terminal.ansi.5{ansi.5}#ff79c6
color.terminal.ansi.6{ansi.6}#8be9fd
color.terminal.ansi.7{ansi.7}#f8f8f2
color.terminal.ansi.8{ansi.8}#6272a4
color.terminal.ansi.9{ansi.9}#ff6e6e
color.terminal.ansi.10{ansi.10}#69ff94
color.terminal.ansi.11{ansi.11}#ffffa5
color.terminal.ansi.12{ansi.12}#d6acff
color.terminal.ansi.13{ansi.13}#ff92df
color.terminal.ansi.14{ansi.14}#a4ffff
color.terminal.ansi.15{ansi.15}#ffffff

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha0.7
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control11.054.5
color.text.mutedcolor.surface.control6.424.5
color.text.placeholdercolor.surface.control3.643.0
color.text.disabledcolor.surface.control3.063.0
color.text.primarycolor.surface.controlHover10.884.5
color.text.mutedcolor.surface.controlHover6.334.5
color.text.placeholdercolor.surface.controlHover3.593.0
color.text.disabledcolor.surface.controlHover3.013.0
color.text.primarycolor.surface.controlPressed11.934.5
color.text.mutedcolor.surface.controlPressed6.944.5
color.text.placeholdercolor.surface.controlPressed3.933.0
color.text.disabledcolor.surface.controlPressed3.303.0
color.text.primarycolor.surface.backdrop17.014.5
color.text.mutedcolor.surface.backdrop9.904.5
color.text.faintcolor.surface.backdrop6.683.0
color.text.placeholdercolor.surface.backdrop5.613.0
color.text.disabledcolor.surface.backdrop4.713.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected12.664.5
color.semantic.accentcolor.surface.backdrop7.523.0
color.semantic.accentStrongcolor.surface.backdrop7.603.0
color.semantic.dangercolor.surface.backdrop5.773.0
color.semantic.warningcolor.surface.backdrop10.643.0
color.semantic.successcolor.surface.backdrop13.223.0
color.semantic.infocolor.surface.backdrop13.103.0
color.agent.readcolor.surface.backdrop13.104.5
color.agent.networkcolor.surface.backdrop7.524.5
color.agent.shellcolor.surface.backdrop10.644.5
color.agent.editcolor.surface.backdrop13.224.5
color.agent.externalcolor.surface.backdrop7.604.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash9.014.5
color.interactive.hairlineStrongcolor.surface.backdrop3.823.0
color.interactive.trackcolor.surface.backdrop3.823.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop4.303.0
color.text.primary @ opacity.disabledcolor.surface.backdrop7.083.0
color.loader.markcolor.surface.backdrop7.523.0
color.text.primarycolor.surface.canvas14.814.5
color.text.mutedcolor.surface.canvas8.624.5
color.text.faintcolor.surface.canvas5.823.0
color.text.placeholdercolor.surface.canvas4.883.0
color.text.disabledcolor.surface.canvas4.103.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected10.684.5
color.semantic.accentcolor.surface.canvas6.553.0
color.semantic.accentStrongcolor.surface.canvas6.623.0
color.semantic.dangercolor.surface.canvas5.033.0
color.semantic.warningcolor.surface.canvas9.273.0
color.semantic.successcolor.surface.canvas11.513.0
color.semantic.infocolor.surface.canvas11.413.0
color.agent.readcolor.surface.canvas11.414.5
color.agent.networkcolor.surface.canvas6.554.5
color.agent.shellcolor.surface.canvas9.274.5
color.agent.editcolor.surface.canvas11.514.5
color.agent.externalcolor.surface.canvas6.624.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash7.704.5
color.interactive.hairlineStrongcolor.surface.canvas3.723.0
color.interactive.trackcolor.surface.canvas3.723.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas3.943.0
color.text.primary @ opacity.disabledcolor.surface.canvas6.533.0
color.loader.markcolor.surface.canvas6.553.0
color.text.primarycolor.surface.sunken15.724.5
color.text.mutedcolor.surface.sunken9.144.5
color.text.faintcolor.surface.sunken6.173.0
color.text.placeholdercolor.surface.sunken5.183.0
color.text.disabledcolor.surface.sunken4.353.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected11.434.5
color.semantic.accentcolor.surface.sunken6.953.0
color.semantic.accentStrongcolor.surface.sunken7.023.0
color.semantic.dangercolor.surface.sunken5.333.0
color.semantic.warningcolor.surface.sunken9.843.0
color.semantic.successcolor.surface.sunken12.213.0
color.semantic.infocolor.surface.sunken12.113.0
color.agent.readcolor.surface.sunken12.114.5
color.agent.networkcolor.surface.sunken6.954.5
color.agent.shellcolor.surface.sunken9.844.5
color.agent.editcolor.surface.sunken12.214.5
color.agent.externalcolor.surface.sunken7.024.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash8.224.5
color.interactive.hairlineStrongcolor.surface.sunken3.783.0
color.interactive.trackcolor.surface.sunken3.783.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.103.0
color.text.primary @ opacity.disabledcolor.surface.sunken6.783.0
color.loader.markcolor.surface.sunken6.953.0
color.text.primarycolor.surface.panel13.364.5
color.text.mutedcolor.surface.panel7.774.5
color.text.faintcolor.surface.panel5.253.0
color.text.placeholdercolor.surface.panel4.403.0
color.text.disabledcolor.surface.panel3.703.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected9.574.5
color.semantic.accentcolor.surface.panel5.903.0
color.semantic.accentStrongcolor.surface.panel5.973.0
color.semantic.dangercolor.surface.panel4.533.0
color.semantic.warningcolor.surface.panel8.363.0
color.semantic.successcolor.surface.panel10.383.0
color.semantic.infocolor.surface.panel10.293.0
color.agent.readcolor.surface.panel10.294.5
color.agent.networkcolor.surface.panel5.904.5
color.agent.shellcolor.surface.panel8.364.5
color.agent.editcolor.surface.panel10.384.5
color.agent.externalcolor.surface.panel5.974.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash6.914.5
color.interactive.hairlineStrongcolor.surface.panel3.583.0
color.interactive.trackcolor.surface.panel3.583.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel3.673.0
color.text.primary @ opacity.disabledcolor.surface.panel6.103.0
color.loader.markcolor.surface.panel5.903.0
color.text.primarycolor.surface.raised11.054.5
color.text.mutedcolor.surface.raised6.424.5
color.text.faintcolor.surface.raised4.343.0
color.text.placeholdercolor.surface.raised3.643.0
color.text.disabledcolor.surface.raised3.063.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected7.974.5
color.semantic.accentcolor.surface.raised4.883.0
color.semantic.accentStrongcolor.surface.raised4.943.0
color.semantic.dangercolor.surface.raised3.753.0
color.semantic.warningcolor.surface.raised6.913.0
color.semantic.successcolor.surface.raised8.583.0
color.semantic.infocolor.surface.raised8.513.0
color.agent.readcolor.surface.raised8.514.5
color.agent.networkcolor.surface.raised4.884.5
color.agent.shellcolor.surface.raised6.914.5
color.agent.editcolor.surface.raised8.584.5
color.agent.externalcolor.surface.raised4.944.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash5.704.5
color.interactive.hairlineStrongcolor.surface.raised3.293.0
color.interactive.trackcolor.surface.raised3.293.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.203.0
color.text.primary @ opacity.disabledcolor.surface.raised5.343.0
color.loader.markcolor.surface.raised4.883.0
color.text.primarycolor.surface.overlay11.934.5
color.text.mutedcolor.surface.overlay6.944.5
color.text.faintcolor.surface.overlay4.683.0
color.text.placeholdercolor.surface.overlay3.933.0
color.text.disabledcolor.surface.overlay3.303.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected8.564.5
color.semantic.accentcolor.surface.overlay5.273.0
color.semantic.accentStrongcolor.surface.overlay5.333.0
color.semantic.dangercolor.surface.overlay4.053.0
color.semantic.warningcolor.surface.overlay7.463.0
color.semantic.successcolor.surface.overlay9.273.0
color.semantic.infocolor.surface.overlay9.193.0
color.agent.readcolor.surface.overlay9.194.5
color.agent.networkcolor.surface.overlay5.274.5
color.agent.shellcolor.surface.overlay7.464.5
color.agent.editcolor.surface.overlay9.274.5
color.agent.externalcolor.surface.overlay5.334.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash6.164.5
color.interactive.hairlineStrongcolor.surface.overlay3.413.0
color.interactive.trackcolor.surface.overlay3.413.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.393.0
color.text.primary @ opacity.disabledcolor.surface.overlay5.643.0
color.loader.markcolor.surface.overlay5.273.0
color.terminal.ansi.0color.terminal.background1.411.2
color.terminal.ansi.1color.terminal.background5.033.0
color.terminal.ansi.2color.terminal.background11.513.0
color.terminal.ansi.3color.terminal.background14.133.0
color.terminal.ansi.4color.terminal.background6.553.0
color.terminal.ansi.5color.terminal.background6.623.0
color.terminal.ansi.6color.terminal.background11.413.0
color.terminal.ansi.7color.terminal.background14.813.0
color.terminal.ansi.8color.terminal.background3.361.2
color.terminal.ansi.9color.terminal.background5.803.0
color.terminal.ansi.10color.terminal.background12.283.0
color.terminal.ansi.11color.terminal.background15.113.0
color.terminal.ansi.12color.terminal.background8.433.0
color.terminal.ansi.13color.terminal.background7.843.0
color.terminal.ansi.14color.terminal.background13.783.0
color.terminal.ansi.15color.terminal.background15.793.0
color.syntax.keywordcolor.surface.sunken7.024.5
color.syntax.stringcolor.surface.sunken15.004.5
color.syntax.numbercolor.surface.sunken6.954.5
color.syntax.inlinecolor.surface.sunken12.114.5
color.syntax.commentcolor.surface.sunken6.173.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash11.134.5
color.syntax.addedcolor.surface.sunken12.213.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash13.194.5
color.syntax.removedcolor.surface.sunken5.333.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash9.804.5
color.syntax.keywordcolor.surface.panel5.974.5
color.syntax.stringcolor.surface.panel12.744.5
color.syntax.numbercolor.surface.panel5.904.5
color.syntax.inlinecolor.surface.panel10.294.5
color.syntax.commentcolor.surface.panel5.253.0
color.text.primarycolor.surface.panel + color.syntax.addedWash9.394.5
color.syntax.addedcolor.surface.panel10.383.0
color.text.primarycolor.surface.panel + color.syntax.removedWash11.264.5
color.syntax.removedcolor.surface.panel4.533.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash8.284.5
color.sequence.categorical.0color.surface.canvas5.473.0
color.sequence.categorical.1color.surface.canvas8.003.0
color.sequence.categorical.2color.surface.canvas5.373.0
color.sequence.categorical.3color.surface.canvas5.463.0
color.sequence.categorical.4color.surface.canvas8.323.0
color.sequence.categorical.5color.surface.canvas6.513.0
color.sequence.categorical.6color.surface.canvas9.193.0
color.sequence.categorical.7color.surface.canvas5.843.0
color.sequence.categorical.0color.surface.panel4.933.0
color.sequence.categorical.1color.surface.panel7.213.0
color.sequence.categorical.2color.surface.panel4.843.0
color.sequence.categorical.3color.surface.panel4.923.0
color.sequence.categorical.4color.surface.panel7.503.0
color.sequence.categorical.5color.surface.panel5.873.0
color.sequence.categorical.6color.surface.panel8.293.0
color.sequence.categorical.7color.surface.panel5.273.0
color.sequence.categorical.0color.surface.raised4.073.0
color.sequence.categorical.1color.surface.raised5.963.0
color.sequence.categorical.2color.surface.raised4.003.0
color.sequence.categorical.3color.surface.raised4.073.0
color.sequence.categorical.4color.surface.raised6.203.0
color.sequence.categorical.5color.surface.raised4.853.0
color.sequence.categorical.6color.surface.raised6.863.0
color.sequence.categorical.7color.surface.raised4.363.0
color.node.portConnectedcolor.surface.canvas6.623.0
color.node.portHovercolor.surface.canvas6.553.0
color.node.edgeTargetcolor.surface.canvas6.623.0
color.node.edgeActivecolor.surface.canvas6.553.0
color.node.edgeFlowHighlightcolor.surface.canvas6.623.0
color.node.edgeFeedbackActivecolor.surface.canvas9.273.0
color.node.auraActivecolor.surface.canvas6.553.0
color.node.auraSuccesscolor.surface.canvas11.513.0
color.node.auraAttentioncolor.surface.canvas9.273.0
color.node.auraDangercolor.surface.canvas5.033.0
color.text.mutedcolor.surface.canvas + color.node.labelWash7.824.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash7.324.5
color.text.onAccentcolor.semantic.accent6.554.5
color.text.onPrimaryFillcolor.interactive.primaryFill14.814.5
color.interactive.primaryFillcolor.surface.backdrop17.013.0
color.interactive.primaryFillcolor.surface.canvas14.813.0
color.interactive.primaryFillcolor.surface.sunken15.723.0
color.interactive.primaryFillcolor.surface.panel13.363.0
color.interactive.primaryFillcolor.surface.raised11.053.0
color.interactive.primaryFillcolor.surface.overlay11.933.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop6.42.0
color.surface.panelcolor.surface.backdrop10.22.0
color.surface.canvascolor.surface.sunken2.52.0
color.surface.panelcolor.surface.canvas3.82.0
color.surface.panelcolor.surface.sunken6.32.0
color.surface.raisedcolor.surface.panel6.12.0
color.surface.overlaycolor.surface.panel3.72.0
color.surface.overlaycolor.surface.canvas7.52.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint12.73.0
color.text.faintcolor.text.placeholder5.33.0
color.text.placeholdercolor.text.disabled5.13.0
color.node.portConnectedcolor.node.portIdle20.13.0

Solarized Dark (solarized-dark)

Appearance: Dark.

Palette

TokenValue
color.palette.agent.edit#7fc7bf
color.palette.agent.external#e08ab5
color.palette.agent.network#a0a4e8
color.palette.agent.read#5fb3e0
color.palette.agent.shell#d8b04a
color.palette.amber.500#ffb900
color.palette.ansi.0#073642
color.palette.ansi.1#dc322f
color.palette.ansi.10#586e75
color.palette.ansi.11#657b83
color.palette.ansi.12#839496
color.palette.ansi.13#6c71c4
color.palette.ansi.14#93a1a1
color.palette.ansi.15#fdf6e3
color.palette.ansi.2#859900
color.palette.ansi.3#b58900
color.palette.ansi.4#268bd2
color.palette.ansi.5#d33682
color.palette.ansi.6#2aa198
color.palette.ansi.7#eee8d5
color.palette.ansi.8#0e4b58
color.palette.ansi.9#cb4b16
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#7fb3cf
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#57c47f
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#7c86ff
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#5865f2
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#000d11
color.palette.neutral.100#002b36
color.palette.neutral.150#05333f
color.palette.neutral.200#073642
color.palette.neutral.25#00171d
color.palette.neutral.300#586e75
color.palette.neutral.50#002028
color.palette.neutral.500#657b83
color.palette.neutral.600#89a0a3
color.palette.neutral.700#9db0b1
color.palette.neutral.800#b3c1c1
color.palette.neutral.850#eee8d5
color.palette.neutral.900#ffffff
color.palette.neutral.ink#000d11
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#ff6467
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#868dff
color.palette.series.2#ec9aff
color.palette.series.3#ee699c
color.palette.series.4#ed771f
color.palette.series.5#e1b800
color.palette.series.6#6bb945
color.palette.series.7#00dec2
color.palette.series.8#00accc
color.palette.syntax.inline#a0a4e8
color.palette.syntax.inlineWash#6c71c4
color.palette.syntax.keyword#9db300
color.palette.syntax.number#e884b0
color.palette.syntax.string#3fbcb2
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#001b22
color.palette.terminal.wash#ffffff
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#093844#093844
color.surface.controlHover#0b3a46#0b3a46
color.surface.controlPressed#05333f#05333f
color.interactive.controlHairline#ffffff1a#ffffff1a
color.interactive.controlHighlight#ffffff14#ffffff14
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#000d11
color.surface.canvas{neutral.50}#002028
color.surface.sunken{neutral.25}#00171d
color.surface.panel{neutral.100}#002b36
color.surface.raised{neutral.200}#073642
color.surface.overlay{neutral.150}#05333f
color.text.primary{neutral.800}#b3c1c1
color.text.muted{neutral.700}#9db0b1
color.text.faint{neutral.600}#89a0a3
color.text.placeholder#7a9094#7a9094
color.text.disabled#6d8286#6d8286
color.text.onAccent{neutral.ink}#000d11
color.text.onPrimaryFill{neutral.ink}#000d11
color.interactive.hover{neutral.850}/14#eee8d514
color.interactive.active{neutral.850}/24#eee8d524
color.interactive.selected{neutral.850}/1c#eee8d51c
color.interactive.hairline{neutral.900}/14#ffffff14
color.interactive.hairlineStrong{neutral.900}/66#ffffff66
color.interactive.track{neutral.900}/66#ffffff66
color.interactive.divider{neutral.900}/10#ffffff10
color.interactive.focus#268bd2#268bd2
color.interactive.primaryFill{neutral.800}#b3c1c1
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#268bd2#268bd2
color.semantic.accentStrong#868bd8#868bd8
color.semantic.danger#e35a52#e35a52
color.semantic.warning#b58900#b58900
color.semantic.success#859900#859900
color.semantic.info#2aa198#2aa198
color.sequence.categorical.0{series.1}#868dff
color.sequence.categorical.1{series.2}#ec9aff
color.sequence.categorical.2{series.3}#ee699c
color.sequence.categorical.3{series.4}#ed771f
color.sequence.categorical.4{series.5}#e1b800
color.sequence.categorical.5{series.6}#6bb945
color.sequence.categorical.6{series.7}#00dec2
color.sequence.categorical.7{series.8}#00accc
color.node.headerWash{neutral.900}/0f#ffffff0f
color.node.portIdle{neutral.500}#657b83
color.node.portHover#268bd2#268bd2
color.node.portConnected#868bd8#868bd8
color.node.edge{neutral.500}#657b83
color.node.edgeTarget#868bd8#868bd8
color.node.edgeActive#268bd2#268bd2
color.node.edgeFlowHighlight#868bd8#868bd8
color.node.edgeFeedback#b58900b8#b58900b8
color.node.edgeFeedbackActive#b58900#b58900
color.node.auraActive#268bd2#268bd2
color.node.auraSuccess{green.800}#2f9e44
color.node.auraAttention#b58900#b58900
color.node.auraDanger#e35a52#e35a52
color.node.labelWash{neutral.100}/f0#002b36f0
color.node.grid{neutral.900}/14#ffffff14
color.node.gridStrong{neutral.900}/29#ffffff29
color.node.gridAxis{neutral.900}/4d#ffffff4d
color.loader.mark#268bd2#268bd2
color.loader.track{neutral.900}/24#ffffff24
color.loader.placeholder{neutral.900}/14#ffffff14
color.loader.sheen{neutral.900}/29#ffffff29
color.terminal.background{terminal.background}#001b22
color.terminal.selection{terminal.wash}/38#ffffff38
color.terminal.ansi.0{ansi.0}#073642
color.terminal.ansi.1{ansi.1}#dc322f
color.terminal.ansi.2{ansi.2}#859900
color.terminal.ansi.3{ansi.3}#b58900
color.terminal.ansi.4{ansi.4}#268bd2
color.terminal.ansi.5{ansi.5}#d33682
color.terminal.ansi.6{ansi.6}#2aa198
color.terminal.ansi.7{ansi.7}#eee8d5
color.terminal.ansi.8{ansi.8}#0e4b58
color.terminal.ansi.9{ansi.9}#cb4b16
color.terminal.ansi.10{ansi.10}#586e75
color.terminal.ansi.11{ansi.11}#657b83
color.terminal.ansi.12{ansi.12}#839496
color.terminal.ansi.13{ansi.13}#6c71c4
color.terminal.ansi.14{ansi.14}#93a1a1
color.terminal.ansi.15{ansi.15}#fdf6e3

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#00000035
raised126-1#00000059
overlay026-1#0000003d
overlay1824-4#00000066
modal0412-2#00000054
modal11648-8#0000008c

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.62
opacity.muted0.68
opacity.scrim0.6

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha1
effect.glowAlpha0.26
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.72
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.45
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.08
effect.areaWashAlpha0.22
effect.headerTintAlpha0.18
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control6.814.5
color.text.mutedcolor.surface.control5.594.5
color.text.placeholdercolor.surface.control3.763.0
color.text.disabledcolor.surface.control3.123.0
color.text.primarycolor.surface.controlHover6.624.5
color.text.mutedcolor.surface.controlHover5.434.5
color.text.placeholdercolor.surface.controlHover3.663.0
color.text.disabledcolor.surface.controlHover3.043.0
color.text.primarycolor.surface.controlPressed7.294.5
color.text.mutedcolor.surface.controlPressed5.984.5
color.text.placeholdercolor.surface.controlPressed4.023.0
color.text.disabledcolor.surface.controlPressed3.343.0
color.text.primarycolor.surface.backdrop10.624.5
color.text.mutedcolor.surface.backdrop8.714.5
color.text.faintcolor.surface.backdrop7.153.0
color.text.placeholdercolor.surface.backdrop5.863.0
color.text.disabledcolor.surface.backdrop4.873.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected8.464.5
color.semantic.accentcolor.surface.backdrop5.353.0
color.semantic.accentStrongcolor.surface.backdrop6.293.0
color.semantic.dangercolor.surface.backdrop5.493.0
color.semantic.warningcolor.surface.backdrop6.143.0
color.semantic.successcolor.surface.backdrop6.153.0
color.semantic.infocolor.surface.backdrop6.243.0
color.agent.readcolor.surface.backdrop8.464.5
color.agent.networkcolor.surface.backdrop8.424.5
color.agent.shellcolor.surface.backdrop9.604.5
color.agent.editcolor.surface.backdrop10.164.5
color.agent.externalcolor.surface.backdrop7.954.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash8.094.5
color.interactive.hairlineStrongcolor.surface.backdrop3.773.0
color.interactive.trackcolor.surface.backdrop3.773.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop5.353.0
color.text.primary @ opacity.disabledcolor.surface.backdrop4.593.0
color.loader.markcolor.surface.backdrop5.353.0
color.text.primarycolor.surface.canvas9.154.5
color.text.mutedcolor.surface.canvas7.504.5
color.text.faintcolor.surface.canvas6.163.0
color.text.placeholdercolor.surface.canvas5.053.0
color.text.disabledcolor.surface.canvas4.193.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected6.924.5
color.semantic.accentcolor.surface.canvas4.613.0
color.semantic.accentStrongcolor.surface.canvas5.413.0
color.semantic.dangercolor.surface.canvas4.733.0
color.semantic.warningcolor.surface.canvas5.293.0
color.semantic.successcolor.surface.canvas5.303.0
color.semantic.infocolor.surface.canvas5.373.0
color.agent.readcolor.surface.canvas7.284.5
color.agent.networkcolor.surface.canvas7.254.5
color.agent.shellcolor.surface.canvas8.274.5
color.agent.editcolor.surface.canvas8.754.5
color.agent.externalcolor.surface.canvas6.854.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash6.774.5
color.interactive.hairlineStrongcolor.surface.canvas3.733.0
color.interactive.trackcolor.surface.canvas3.733.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.613.0
color.text.primary @ opacity.disabledcolor.surface.canvas4.303.0
color.loader.markcolor.surface.canvas4.613.0
color.text.primarycolor.surface.sunken9.924.5
color.text.mutedcolor.surface.sunken8.144.5
color.text.faintcolor.surface.sunken6.683.0
color.text.placeholdercolor.surface.sunken5.483.0
color.text.disabledcolor.surface.sunken4.553.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected7.654.5
color.semantic.accentcolor.surface.sunken5.003.0
color.semantic.accentStrongcolor.surface.sunken5.873.0
color.semantic.dangercolor.surface.sunken5.133.0
color.semantic.warningcolor.surface.sunken5.743.0
color.semantic.successcolor.surface.sunken5.753.0
color.semantic.infocolor.surface.sunken5.833.0
color.agent.readcolor.surface.sunken7.904.5
color.agent.networkcolor.surface.sunken7.874.5
color.agent.shellcolor.surface.sunken8.974.5
color.agent.editcolor.surface.sunken9.494.5
color.agent.externalcolor.surface.sunken7.434.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash7.434.5
color.interactive.hairlineStrongcolor.surface.sunken3.793.0
color.interactive.trackcolor.surface.sunken3.793.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken5.003.0
color.text.primary @ opacity.disabledcolor.surface.sunken4.483.0
color.loader.markcolor.surface.sunken5.003.0
color.text.primarycolor.surface.panel8.094.5
color.text.mutedcolor.surface.panel6.634.5
color.text.faintcolor.surface.panel5.453.0
color.text.placeholdercolor.surface.panel4.463.0
color.text.disabledcolor.surface.panel3.713.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected6.074.5
color.semantic.accentcolor.surface.panel4.083.0
color.semantic.accentStrongcolor.surface.panel4.793.0
color.semantic.dangercolor.surface.panel4.183.0
color.semantic.warningcolor.surface.panel4.683.0
color.semantic.successcolor.surface.panel4.693.0
color.semantic.infocolor.surface.panel4.753.0
color.agent.readcolor.surface.panel6.444.5
color.agent.networkcolor.surface.panel6.414.5
color.agent.shellcolor.surface.panel7.314.5
color.agent.editcolor.surface.panel7.744.5
color.agent.externalcolor.surface.panel6.064.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash5.944.5
color.interactive.hairlineStrongcolor.surface.panel3.573.0
color.interactive.trackcolor.surface.panel3.573.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel4.083.0
color.text.primary @ opacity.disabledcolor.surface.panel3.993.0
color.loader.markcolor.surface.panel4.083.0
color.text.primarycolor.surface.raised7.004.5
color.text.mutedcolor.surface.raised5.744.5
color.text.faintcolor.surface.raised4.723.0
color.text.placeholdercolor.surface.raised3.873.0
color.text.disabledcolor.surface.raised3.213.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected5.264.5
color.semantic.accentcolor.surface.raised3.533.0
color.semantic.accentStrongcolor.surface.raised4.153.0
color.semantic.dangercolor.surface.raised3.623.0
color.semantic.warningcolor.surface.raised4.053.0
color.semantic.successcolor.surface.raised4.063.0
color.semantic.infocolor.surface.raised4.123.0
color.agent.readcolor.surface.raised5.584.5
color.agent.networkcolor.surface.raised5.554.5
color.agent.shellcolor.surface.raised6.334.5
color.agent.editcolor.surface.raised6.704.5
color.agent.externalcolor.surface.raised5.244.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash5.134.5
color.interactive.hairlineStrongcolor.surface.raised3.363.0
color.interactive.trackcolor.surface.raised3.363.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised3.533.0
color.text.primary @ opacity.disabledcolor.surface.raised3.643.0
color.loader.markcolor.surface.raised3.533.0
color.text.primarycolor.surface.overlay7.294.5
color.text.mutedcolor.surface.overlay5.984.5
color.text.faintcolor.surface.overlay4.913.0
color.text.placeholdercolor.surface.overlay4.023.0
color.text.disabledcolor.surface.overlay3.343.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected5.474.5
color.semantic.accentcolor.surface.overlay3.683.0
color.semantic.accentStrongcolor.surface.overlay4.323.0
color.semantic.dangercolor.surface.overlay3.773.0
color.semantic.warningcolor.surface.overlay4.223.0
color.semantic.successcolor.surface.overlay4.223.0
color.semantic.infocolor.surface.overlay4.293.0
color.agent.readcolor.surface.overlay5.814.5
color.agent.networkcolor.surface.overlay5.784.5
color.agent.shellcolor.surface.overlay6.594.5
color.agent.editcolor.surface.overlay6.984.5
color.agent.externalcolor.surface.overlay5.464.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash5.354.5
color.interactive.hairlineStrongcolor.surface.overlay3.423.0
color.interactive.trackcolor.surface.overlay3.423.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay3.683.0
color.text.primary @ opacity.disabledcolor.surface.overlay3.743.0
color.loader.markcolor.surface.overlay3.683.0
color.terminal.ansi.0color.terminal.background1.371.2
color.terminal.ansi.1color.terminal.background3.853.0
color.terminal.ansi.2color.terminal.background5.553.0
color.terminal.ansi.3color.terminal.background5.553.0
color.terminal.ansi.4color.terminal.background4.843.0
color.terminal.ansi.5color.terminal.background3.923.0
color.terminal.ansi.6color.terminal.background5.643.0
color.terminal.ansi.7color.terminal.background14.533.0
color.terminal.ansi.8color.terminal.background1.841.2
color.terminal.ansi.9color.terminal.background3.863.0
color.terminal.ansi.10color.terminal.background3.313.0
color.terminal.ansi.11color.terminal.background4.003.0
color.terminal.ansi.12color.terminal.background5.633.0
color.terminal.ansi.13color.terminal.background4.073.0
color.terminal.ansi.14color.terminal.background6.663.0
color.terminal.ansi.15color.terminal.background16.503.0
color.syntax.keywordcolor.surface.sunken7.794.5
color.syntax.stringcolor.surface.sunken7.934.5
color.syntax.numbercolor.surface.sunken7.334.5
color.syntax.inlinecolor.surface.sunken7.874.5
color.syntax.commentcolor.surface.sunken6.683.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash8.304.5
color.syntax.addedcolor.surface.sunken5.753.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash8.714.5
color.syntax.removedcolor.surface.sunken5.133.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash6.954.5
color.syntax.keywordcolor.surface.panel6.354.5
color.syntax.stringcolor.surface.panel6.474.5
color.syntax.numbercolor.surface.panel5.984.5
color.syntax.inlinecolor.surface.panel6.414.5
color.syntax.commentcolor.surface.panel5.453.0
color.text.primarycolor.surface.panel + color.syntax.addedWash6.724.5
color.syntax.addedcolor.surface.panel4.693.0
color.text.primarycolor.surface.panel + color.syntax.removedWash7.194.5
color.syntax.removedcolor.surface.panel4.183.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash5.644.5
color.sequence.categorical.0color.surface.canvas5.873.0
color.sequence.categorical.1color.surface.canvas8.593.0
color.sequence.categorical.2color.surface.canvas5.773.0
color.sequence.categorical.3color.surface.canvas5.873.0
color.sequence.categorical.4color.surface.canvas8.943.0
color.sequence.categorical.5color.surface.canvas6.993.0
color.sequence.categorical.6color.surface.canvas9.883.0
color.sequence.categorical.7color.surface.canvas6.283.0
color.sequence.categorical.0color.surface.panel5.203.0
color.sequence.categorical.1color.surface.panel7.603.0
color.sequence.categorical.2color.surface.panel5.103.0
color.sequence.categorical.3color.surface.panel5.193.0
color.sequence.categorical.4color.surface.panel7.913.0
color.sequence.categorical.5color.surface.panel6.183.0
color.sequence.categorical.6color.surface.panel8.743.0
color.sequence.categorical.7color.surface.panel5.563.0
color.sequence.categorical.0color.surface.raised4.503.0
color.sequence.categorical.1color.surface.raised6.583.0
color.sequence.categorical.2color.surface.raised4.423.0
color.sequence.categorical.3color.surface.raised4.493.0
color.sequence.categorical.4color.surface.raised6.853.0
color.sequence.categorical.5color.surface.raised5.363.0
color.sequence.categorical.6color.surface.raised7.573.0
color.sequence.categorical.7color.surface.raised4.813.0
color.node.portConnectedcolor.surface.canvas5.413.0
color.node.portHovercolor.surface.canvas4.613.0
color.node.edgeTargetcolor.surface.canvas5.413.0
color.node.edgeActivecolor.surface.canvas4.613.0
color.node.edgeFlowHighlightcolor.surface.canvas5.413.0
color.node.edgeFeedbackActivecolor.surface.canvas5.293.0
color.node.auraActivecolor.surface.canvas4.613.0
color.node.auraSuccesscolor.surface.canvas4.933.0
color.node.auraAttentioncolor.surface.canvas5.293.0
color.node.auraDangercolor.surface.canvas4.733.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.694.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash6.244.5
color.text.onAccentcolor.semantic.accent5.354.5
color.text.onPrimaryFillcolor.interactive.primaryFill10.624.5
color.interactive.primaryFillcolor.surface.backdrop10.623.0
color.interactive.primaryFillcolor.surface.canvas9.153.0
color.interactive.primaryFillcolor.surface.sunken9.923.0
color.interactive.primaryFillcolor.surface.panel8.093.0
color.interactive.primaryFillcolor.surface.raised7.003.0
color.interactive.primaryFillcolor.surface.overlay7.293.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop7.52.0
color.surface.panelcolor.surface.backdrop12.52.0
color.surface.canvascolor.surface.sunken4.12.0
color.surface.panelcolor.surface.canvas5.02.0
color.surface.panelcolor.surface.sunken9.12.0
color.surface.raisedcolor.surface.panel4.92.0
color.surface.overlaycolor.surface.panel3.62.0
color.surface.overlaycolor.surface.canvas8.62.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint6.23.0
color.text.faintcolor.text.placeholder6.03.0
color.text.placeholdercolor.text.disabled5.43.0
color.node.portConnectedcolor.node.portIdle10.13.0

Solarized Light (solarized-light)

Appearance: Light.

Palette

TokenValue
color.palette.agent.edit#146a63
color.palette.agent.external#92377f
color.palette.agent.network#4b53c9
color.palette.agent.read#146a86
color.palette.agent.shell#7b5008
color.palette.amber.500#a76a00
color.palette.ansi.0#002b36
color.palette.ansi.1#dc322f
color.palette.ansi.10#586e75
color.palette.ansi.11#657b83
color.palette.ansi.12#778a8c
color.palette.ansi.13#6c71c4
color.palette.ansi.14#798d90
color.palette.ansi.15#073642
color.palette.ansi.2#7f9000
color.palette.ansi.3#a97f00
color.palette.ansi.4#268bd2
color.palette.ansi.5#d33682
color.palette.ansi.6#229890
color.palette.ansi.7#657b83
color.palette.ansi.8#586e75
color.palette.ansi.9#cb4b16
color.palette.blue.100#d0ebff
color.palette.blue.200#a5d8ff
color.palette.blue.300#74c0fc
color.palette.blue.400#4dabf7
color.palette.blue.50#e7f5ff
color.palette.blue.500#339af0
color.palette.blue.600#228be6
color.palette.blue.700#1c7ed6
color.palette.blue.800#1971c2
color.palette.blue.900#1864ab
color.palette.cyan.100#c5f6fa
color.palette.cyan.200#99e9f2
color.palette.cyan.300#66d9e8
color.palette.cyan.400#2a6f8f
color.palette.cyan.50#e3fafc
color.palette.cyan.500#22b8cf
color.palette.cyan.600#15aabf
color.palette.cyan.700#1098ad
color.palette.cyan.800#0c8599
color.palette.cyan.900#0b7285
color.palette.grape.100#f3d9fa
color.palette.grape.200#eebefa
color.palette.grape.300#e599f7
color.palette.grape.400#da77f2
color.palette.grape.50#f8f0fc
color.palette.grape.500#cc5de8
color.palette.grape.600#be4bdb
color.palette.grape.700#ae3ec9
color.palette.grape.800#9c36b5
color.palette.grape.900#862e9c
color.palette.gray.100#f1f3f5
color.palette.gray.200#e9ecef
color.palette.gray.300#dee2e6
color.palette.gray.400#ced4da
color.palette.gray.50#f8f9fa
color.palette.gray.500#adb5bd
color.palette.gray.600#868e96
color.palette.gray.700#495057
color.palette.gray.800#343a40
color.palette.gray.900#212529
color.palette.green.100#d3f9d8
color.palette.green.200#b2f2bb
color.palette.green.300#8ce99a
color.palette.green.400#69db7c
color.palette.green.50#ebfbee
color.palette.green.500#237a48
color.palette.green.600#40c057
color.palette.green.700#37b24f
color.palette.green.800#2f9e44
color.palette.green.900#2b8a3e
color.palette.indigo.100#dbe4ff
color.palette.indigo.200#bac8ff
color.palette.indigo.300#91a7ff
color.palette.indigo.400#4952c9
color.palette.indigo.50#edf2ff
color.palette.indigo.500#5c7cfa
color.palette.indigo.600#363fa8
color.palette.indigo.700#4263eb
color.palette.indigo.800#3b5bdb
color.palette.indigo.900#364fc7
color.palette.lime.100#e9fac8
color.palette.lime.200#d8f5a2
color.palette.lime.300#c0eb75
color.palette.lime.400#a9e34b
color.palette.lime.50#f4fce3
color.palette.lime.500#94d82d
color.palette.lime.600#82c91e
color.palette.lime.700#74b816
color.palette.lime.800#66a80f
color.palette.lime.900#5c940d
color.palette.neutral.0#000000
color.palette.neutral.10#e5dec7
color.palette.neutral.100#fdf6e3
color.palette.neutral.150#fffdf6
color.palette.neutral.200#ffffff
color.palette.neutral.25#eee7d1
color.palette.neutral.300#93a1a1
color.palette.neutral.50#f6efdb
color.palette.neutral.500#839496
color.palette.neutral.600#556d73
color.palette.neutral.700#4c6269
color.palette.neutral.800#435a61
color.palette.neutral.850#002b36
color.palette.neutral.900#ffffff
color.palette.neutral.ink#ffffff
color.palette.orange.100#ffe8cc
color.palette.orange.200#ffd8a8
color.palette.orange.300#ffc078
color.palette.orange.400#ffa94d
color.palette.orange.50#fff4e6
color.palette.orange.500#ff922b
color.palette.orange.600#fd7e14
color.palette.orange.700#f76707
color.palette.orange.800#e8590c
color.palette.orange.900#d9480f
color.palette.pink.100#ffdeeb
color.palette.pink.200#fcc2d7
color.palette.pink.300#faa2c1
color.palette.pink.400#f783ac
color.palette.pink.50#fff0f6
color.palette.pink.500#f06595
color.palette.pink.600#e64980
color.palette.pink.700#d6336c
color.palette.pink.800#c2255c
color.palette.pink.900#a61e4d
color.palette.red.100#ffe3e3
color.palette.red.200#ffc9c9
color.palette.red.300#ffa8a8
color.palette.red.400#d5322f
color.palette.red.50#fff5f5
color.palette.red.500#ff6b6b
color.palette.red.600#fa5252
color.palette.red.700#f03e3e
color.palette.red.800#e03131
color.palette.red.900#c92a2a
color.palette.series.1#6174d3
color.palette.series.2#9256ae
color.palette.series.3#c05279
color.palette.series.4#c15c24
color.palette.series.5#8c7000
color.palette.series.6#599532
color.palette.series.7#008a76
color.palette.series.8#0091bc
color.palette.syntax.inline#4a4fa8
color.palette.syntax.inlineWash#6c71c4
color.palette.syntax.keyword#576600
color.palette.syntax.number#a02463
color.palette.syntax.string#146b66
color.palette.teal.100#c3fae8
color.palette.teal.200#96f2d7
color.palette.teal.300#63e6be
color.palette.teal.400#38d9a9
color.palette.teal.50#e6fcf5
color.palette.teal.500#20c997
color.palette.teal.600#12b886
color.palette.teal.700#0ca678
color.palette.teal.800#099268
color.palette.teal.900#087f5b
color.palette.terminal.background#fdf6e3
color.palette.terminal.wash#000000
color.palette.violet.100#e5dbff
color.palette.violet.200#d0bfff
color.palette.violet.300#b197fc
color.palette.violet.400#9775fa
color.palette.violet.50#f3f0ff
color.palette.violet.500#845ef7
color.palette.violet.600#7950f2
color.palette.violet.700#7048e8
color.palette.violet.800#6741d9
color.palette.violet.900#5f3dc4
color.palette.yellow.100#fff3bf
color.palette.yellow.200#ffec99
color.palette.yellow.300#ffe066
color.palette.yellow.400#ffd43b
color.palette.yellow.50#fff9db
color.palette.yellow.500#fcc419
color.palette.yellow.600#fab005
color.palette.yellow.700#f59f00
color.palette.yellow.800#f08c00
color.palette.yellow.900#e67700

Semantic color

TokenSourceResolved
color.surface.control#fdf6e3#fdf6e3
color.surface.controlHover#fffdf6#fffdf6
color.surface.controlPressed#f6efdb#f6efdb
color.interactive.controlHairline#00000024#00000024
color.interactive.controlHighlight#ffffffcc#ffffffcc
color.onMediaForeground#ffffff#ffffff
color.onMediaBackground#171717#171717
color.onMediaHairline#ffffff33#ffffff33
color.surface.backdrop{neutral.10}#e5dec7
color.surface.canvas{neutral.50}#f6efdb
color.surface.sunken{neutral.25}#eee7d1
color.surface.panel{neutral.100}#fdf6e3
color.surface.raised{neutral.200}#ffffff
color.surface.overlay{neutral.150}#fffdf6
color.text.primary{neutral.800}#435a61
color.text.muted{neutral.700}#4c6269
color.text.faint{neutral.600}#556d73
color.text.placeholder#61787e#61787e
color.text.disabled#6a8087#6a8087
color.text.onAccent{neutral.ink}#ffffff
color.text.onPrimaryFill{neutral.ink}#ffffff
color.interactive.hover{neutral.850}/0f#002b360f
color.interactive.active{neutral.850}/1c#002b361c
color.interactive.selected{neutral.850}/14#002b3614
color.interactive.hairline{neutral.850}/1a#002b361a
color.interactive.hairlineStrong{neutral.850}/8c#002b368c
color.interactive.track{neutral.850}/8c#002b368c
color.interactive.divider{neutral.850}/14#002b3614
color.interactive.focus#1b6fab#1b6fab
color.interactive.primaryFill{neutral.800}#435a61
color.interactive.whiteFill#ffffff#ffffff
color.interactive.whiteFillHover#f5f5f5#f5f5f5
color.interactive.whiteFillActive#ebebeb#ebebeb
color.semantic.accent#1b6fab#1b6fab
color.semantic.accentStrong#6c71c4#6c71c4
color.semantic.danger#dc322f#dc322f
color.semantic.warning#8f6b00#8f6b00
color.semantic.success#6f8000#6f8000
color.semantic.info#1a7d76#1a7d76
color.sequence.categorical.0{series.1}#6174d3
color.sequence.categorical.1{series.2}#9256ae
color.sequence.categorical.2{series.3}#c05279
color.sequence.categorical.3{series.4}#c15c24
color.sequence.categorical.4{series.5}#8c7000
color.sequence.categorical.5{series.6}#599532
color.sequence.categorical.6{series.7}#008a76
color.sequence.categorical.7{series.8}#0091bc
color.node.headerWash{neutral.850}/0f#002b360f
color.node.portIdle{neutral.500}#839496
color.node.portHover#1b6fab#1b6fab
color.node.portConnected#6c71c4#6c71c4
color.node.edge{neutral.500}#839496
color.node.edgeTarget#6c71c4#6c71c4
color.node.edgeActive#1b6fab#1b6fab
color.node.edgeFlowHighlight#6c71c4#6c71c4
color.node.edgeFeedback#8f6b00b8#8f6b00b8
color.node.edgeFeedbackActive#8f6b00#8f6b00
color.node.auraActive#1b6fab#1b6fab
color.node.auraSuccess{green.800}#2f9e44
color.node.auraAttention#8f6b00#8f6b00
color.node.auraDanger#dc322f#dc322f
color.node.labelWash{neutral.150}/f0#fffdf6f0
color.node.grid{neutral.850}/14#002b3614
color.node.gridStrong{neutral.850}/29#002b3629
color.node.gridAxis{neutral.850}/4d#002b364d
color.loader.mark#1b6fab#1b6fab
color.loader.track{neutral.850}/1f#002b361f
color.loader.placeholder{neutral.850}/17#002b3617
color.loader.sheen{neutral.900}/8c#ffffff8c
color.terminal.background{terminal.background}#fdf6e3
color.terminal.selection{terminal.wash}/29#00000029
color.terminal.ansi.0{ansi.0}#002b36
color.terminal.ansi.1{ansi.1}#dc322f
color.terminal.ansi.2{ansi.2}#7f9000
color.terminal.ansi.3{ansi.3}#a97f00
color.terminal.ansi.4{ansi.4}#268bd2
color.terminal.ansi.5{ansi.5}#d33682
color.terminal.ansi.6{ansi.6}#229890
color.terminal.ansi.7{ansi.7}#657b83
color.terminal.ansi.8{ansi.8}#586e75
color.terminal.ansi.9{ansi.9}#cb4b16
color.terminal.ansi.10{ansi.10}#586e75
color.terminal.ansi.11{ansi.11}#657b83
color.terminal.ansi.12{ansi.12}#778a8c
color.terminal.ansi.13{ansi.13}#6c71c4
color.terminal.ansi.14{ansi.14}#798d90
color.terminal.ansi.15{ansi.15}#073642

Palette variant steps

RecipePreferred steps
color.paletteSteps.filled600 → 500 → 400
color.paletteSteps.hover700 → 600 → 500
color.paletteSteps.active800 → 700 → 600
color.paletteSteps.readableDark300 → 200 → 400
color.paletteSteps.readableLight700 → 800 → 600

Spacing

StepPixels
xxs2
xs4
sm8
md12
lg16
xl24
xxl32

Measures

TokenPixels
measure.settingsLabel120
measure.readableWidth360
measure.dialogWidth360
measure.menuMinWidth200
measure.compactMenuMinWidth180
measure.menuMaxHeight320
measure.compactMenuMaxHeight240
measure.standaloneIcon20
measure.scrollbarTrack10
measure.scrollbarThumb6
measure.scrollbarMinThumb24
measure.caretWidth1.5
measure.textDecorationWidth1
measure.progressTrackHeight4
measure.sliderTrackHeight6
measure.sliderVerticalHeight160
measure.containerSmall640
measure.containerMedium768
measure.containerLarge1024
measure.containerExtraLarge1280
measure.compactOverlayWidth320
measure.mediaViewerHeight320
measure.timelineRailWidth16
measure.statusMark7
measure.nodeEdgeWidth2
measure.nodeEdgeCorner18
measure.nodeEdgeLead36
measure.nodeEdgeCorridor48
measure.nodeEdgeLane16
measure.nodePort20
measure.nodeProgress3

Radius

StepPixels
small5
control8
card12
dialog16
bubble16
pill999

Control scale

StepHeightPadding XGapFontIcon
xs20641112
sm24851214
md281261315
lg341681417
touch481681620

Density

AxisSpaceControlFont
compact0.750.860.94
comfortable111

Typography

Numeric readout scale: 1.6×

| Step | Size | Line height | Weight | |---|---:|---:|---:|---:| | caption | 10.5 | 14 | 400 | | label | 12 | 16 | 500 | | body | 13 | 19 | 400 | | strong | 13 | 19 | 600 | | subtitle | 14 | 20 | 600 | | title | 16 | 22 | 600 | | code | 12 | 18 | 400 |

Elevation

StepLayerYBlurSpreadColor
flat
raised0130#0000000c
raised126-1#00000014
overlay026-1#00000010
overlay1824-4#0000001a
modal0412-2#00000016
modal11648-8#00000024

Layers

LayerZ index
Content0
Sticky100
Dock200
Popover300
Tooltip400
Modal500
Toast600

Motion

DurationMilliseconds
motion.durationMs.instant90
motion.durationMs.quick150
motion.durationMs.exit120
motion.durationMs.menu140
motion.durationMs.dialog180
motion.durationMs.resize200
motion.durationMs.entrance500
motion.durationMs.spin900
motion.durationMs.slow320
motion.durationMs.staggerStep16
motion.durationMs.microBounce360
motion.durationMs.microWobble280
motion.durationMs.microPop240
motion.durationMs.pulse2400
motion.durationMs.nodeAuraPulse2800
motion.durationMs.nodeFlow1800
motion.durationMs.shimmer1400
motion.durationMs.toast6000
motion.durationMs.hoverCardOpen400
motion.durationMs.hoverCardGrace300
motion.durationMs.feedback900
motion.durationMs.celebration1600
motion.durationMs.confirmation1600

Row stagger maximum items: 8.

EasingCurve
linear[0.0, 0.0, 1.0, 1.0]
standard[0.4, 0.0, 0.2, 1.0]
easeIn[0.42, 0.0, 1.0, 1.0]
easeOut[0.0, 0.0, 0.58, 1.0]
easeInOut[0.42, 0.0, 0.58, 1.0]
emphasized[0.2, 0.0, 0.0, 1.0]
overshoot[0.34, 1.56, 0.64, 1.0]
exit[0.4, 0.0, 1.0, 1.0]
settle[0.16, 1.0, 0.3, 1.0]
SpringStiffnessDampingMass
snappy380301
smooth180261
bouncy260161
grab520421
ResponsePixels
motion.pressOffsetPx1
motion.hoverLiftPx1
GestureValue
motion.flickVelocityPxPerSec420
motion.rubberBandTension0.55

Border and opacity

TokenValue
border.hairline1
border.thick2
opacity.disabled0.8
opacity.muted0.68
opacity.scrim0.35

Effects

TokenValue
effect.fieldFocusring
effect.edgeFadeBand20
effect.focusRingWidth2
effect.focusRingAlpha1
effect.glowAlpha0.18
effect.glowBlur12
effect.glowSpread-5
effect.glassAlpha0.78
effect.glassFrostBlur24
effect.glassSaturation1.5
effect.glassWash0.55
effect.glassBevelRatio0.225
effect.glassBevelMin8
effect.glassBevelMax36
effect.glassDimming0.35
effect.glassFlipMaxExtent72
effect.glassShadowMin0.8
effect.glassShadowMax1.5
effect.glassRefraction0.34
effect.glassThickness0
effect.glassRefractiveIndex1.5
effect.glassBackdropDepth0
effect.glassDispersion0.005
effect.glassSpecular0.06
effect.glassTransmissionGain1.042
effect.glassOpticalLift0.075
effect.glassHairline1
effect.glassSpecularSharpness12
effect.glassLightAngle0.7853982
effect.glassMergeDistance28
effect.glassContrastFlipLow0.42
effect.glassContrastFlipHigh0.58
effect.glassPressDepth1.5
effect.glassPressScale1.014
effect.sheenAlpha0.05
effect.areaWashAlpha0.16
effect.headerTintAlpha0.14
effect.nodeActiveWashAlpha0.14
effect.nodeActiveStrokeAlpha0.72
effect.nodeTrafficAlpha0.82
effect.nodePreviewAlpha0.88
effect.nodeMinimapAlpha0.7
effect.nodeOverviewVeilAlpha0.55
effect.nodeAuraRestingAlpha0.72
effect.nodeAuraPulseFloorAlpha0.54
effect.nodeAuraPulsePeakAlpha1
effect.nodeAuraSettlePeakAlpha1
effect.nodeAuraSettleExpansion0.65
effect.nodeEdgeHoverWidthScale1.8
effect.nodeEdgeSelectedWidthScale2.4
effect.nodeEdgeGlowWidthScale5.5
effect.railWidth3
effect.semanticWashFaintAlpha0.06
effect.semanticWashAlpha0.1
effect.semanticWashStrongAlpha0.16
effect.semanticBorderAlpha0.4
effect.accentBorderAlpha0.55
effect.accentBorderStrongAlpha0.7
effect.subtleHoverAlpha0.3
effect.softContrastAlpha0.18
effect.contrastTintAlpha0.28
effect.trackRestingAlpha0.55
effect.contentVeilAlpha0.88
effect.criticalFillAlpha0.84
effect.criticalInactiveAlpha0.1
effect.variantLightAlpha0.15
effect.variantLightHoverAlpha0.22
effect.variantLightActiveAlpha0.28
effect.variantSubtleHoverAlpha0.12
effect.variantSubtleActiveAlpha0.18
effect.primaryHoverOpacity0.9
effect.customColorReadableDarkFloor0.72
effect.customColorReadableLightCeiling0.4
effect.customColorHoverLightnessDelta0.05
effect.customColorActiveLightnessDelta0.1

Contrast

ForegroundBackgroundRatioMinimum
color.text.primarycolor.surface.control6.774.5
color.text.mutedcolor.surface.control5.974.5
color.text.placeholdercolor.surface.control4.333.0
color.text.disabledcolor.surface.control3.853.0
color.text.primarycolor.surface.controlHover7.184.5
color.text.mutedcolor.surface.controlHover6.334.5
color.text.placeholdercolor.surface.controlHover4.593.0
color.text.disabledcolor.surface.controlHover4.093.0
color.text.primarycolor.surface.controlPressed6.364.5
color.text.mutedcolor.surface.controlPressed5.614.5
color.text.placeholdercolor.surface.controlPressed4.073.0
color.text.disabledcolor.surface.controlPressed3.623.0
color.text.primarycolor.surface.backdrop5.434.5
color.text.mutedcolor.surface.backdrop4.794.5
color.text.faintcolor.surface.backdrop4.083.0
color.text.placeholdercolor.surface.backdrop3.473.0
color.text.disabledcolor.surface.backdrop3.093.0
color.text.primary over color.interactive.selectedcolor.surface.backdrop + selected4.704.5
color.semantic.accentcolor.surface.backdrop3.993.0
color.semantic.accentStrongcolor.surface.backdrop3.253.0
color.semantic.dangercolor.surface.backdrop3.443.0
color.semantic.warningcolor.surface.backdrop3.653.0
color.semantic.successcolor.surface.backdrop3.283.0
color.semantic.infocolor.surface.backdrop3.683.0
color.agent.readcolor.surface.backdrop4.544.5
color.agent.networkcolor.surface.backdrop4.624.5
color.agent.shellcolor.surface.backdrop5.214.5
color.agent.editcolor.surface.backdrop4.774.5
color.agent.externalcolor.surface.backdrop5.074.5
color.text.mutedcolor.surface.backdrop + color.agent.evidenceWash4.534.5
color.interactive.hairlineStrongcolor.surface.backdrop3.313.0
color.interactive.trackcolor.surface.backdrop3.313.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.backdrop3.993.0
color.text.primary @ opacity.disabledcolor.surface.backdrop3.623.0
color.loader.markcolor.surface.backdrop3.993.0
color.text.primarycolor.surface.canvas6.364.5
color.text.mutedcolor.surface.canvas5.614.5
color.text.faintcolor.surface.canvas4.793.0
color.text.placeholdercolor.surface.canvas4.073.0
color.text.disabledcolor.surface.canvas3.623.0
color.text.primary over color.interactive.selectedcolor.surface.canvas + selected5.494.5
color.semantic.accentcolor.surface.canvas4.683.0
color.semantic.accentStrongcolor.surface.canvas3.813.0
color.semantic.dangercolor.surface.canvas4.033.0
color.semantic.warningcolor.surface.canvas4.283.0
color.semantic.successcolor.surface.canvas3.843.0
color.semantic.infocolor.surface.canvas4.313.0
color.agent.readcolor.surface.canvas5.324.5
color.agent.networkcolor.surface.canvas5.414.5
color.agent.shellcolor.surface.canvas6.114.5
color.agent.editcolor.surface.canvas5.594.5
color.agent.externalcolor.surface.canvas5.954.5
color.text.mutedcolor.surface.canvas + color.agent.evidenceWash5.304.5
color.interactive.hairlineStrongcolor.surface.canvas3.483.0
color.interactive.trackcolor.surface.canvas3.483.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.canvas4.683.0
color.text.primary @ opacity.disabledcolor.surface.canvas4.043.0
color.loader.markcolor.surface.canvas4.683.0
color.text.primarycolor.surface.sunken5.914.5
color.text.mutedcolor.surface.sunken5.214.5
color.text.faintcolor.surface.sunken4.453.0
color.text.placeholdercolor.surface.sunken3.783.0
color.text.disabledcolor.surface.sunken3.363.0
color.text.primary over color.interactive.selectedcolor.surface.sunken + selected5.114.5
color.semantic.accentcolor.surface.sunken4.353.0
color.semantic.accentStrongcolor.surface.sunken3.543.0
color.semantic.dangercolor.surface.sunken3.743.0
color.semantic.warningcolor.surface.sunken3.983.0
color.semantic.successcolor.surface.sunken3.573.0
color.semantic.infocolor.surface.sunken4.013.0
color.agent.readcolor.surface.sunken4.944.5
color.agent.networkcolor.surface.sunken5.034.5
color.agent.shellcolor.surface.sunken5.684.5
color.agent.editcolor.surface.sunken5.194.5
color.agent.externalcolor.surface.sunken5.524.5
color.text.mutedcolor.surface.sunken + color.agent.evidenceWash4.924.5
color.interactive.hairlineStrongcolor.surface.sunken3.403.0
color.interactive.trackcolor.surface.sunken3.403.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.sunken4.353.0
color.text.primary @ opacity.disabledcolor.surface.sunken3.843.0
color.loader.markcolor.surface.sunken4.353.0
color.text.primarycolor.surface.panel6.774.5
color.text.mutedcolor.surface.panel5.974.5
color.text.faintcolor.surface.panel5.093.0
color.text.placeholdercolor.surface.panel4.333.0
color.text.disabledcolor.surface.panel3.853.0
color.text.primary over color.interactive.selectedcolor.surface.panel + selected5.834.5
color.semantic.accentcolor.surface.panel4.983.0
color.semantic.accentStrongcolor.surface.panel4.063.0
color.semantic.dangercolor.surface.panel4.293.0
color.semantic.warningcolor.surface.panel4.563.0
color.semantic.successcolor.surface.panel4.093.0
color.semantic.infocolor.surface.panel4.593.0
color.agent.readcolor.surface.panel5.674.5
color.agent.networkcolor.surface.panel5.764.5
color.agent.shellcolor.surface.panel6.504.5
color.agent.editcolor.surface.panel5.954.5
color.agent.externalcolor.surface.panel6.334.5
color.text.mutedcolor.surface.panel + color.agent.evidenceWash5.634.5
color.interactive.hairlineStrongcolor.surface.panel3.553.0
color.interactive.trackcolor.surface.panel3.553.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.panel4.983.0
color.text.primary @ opacity.disabledcolor.surface.panel4.213.0
color.loader.markcolor.surface.panel4.983.0
color.text.primarycolor.surface.raised7.314.5
color.text.mutedcolor.surface.raised6.444.5
color.text.faintcolor.surface.raised5.503.0
color.text.placeholdercolor.surface.raised4.673.0
color.text.disabledcolor.surface.raised4.163.0
color.text.primary over color.interactive.selectedcolor.surface.raised + selected6.284.5
color.semantic.accentcolor.surface.raised5.373.0
color.semantic.accentStrongcolor.surface.raised4.383.0
color.semantic.dangercolor.surface.raised4.633.0
color.semantic.warningcolor.surface.raised4.923.0
color.semantic.successcolor.surface.raised4.413.0
color.semantic.infocolor.surface.raised4.953.0
color.agent.readcolor.surface.raised6.114.5
color.agent.networkcolor.surface.raised6.214.5
color.agent.shellcolor.surface.raised7.024.5
color.agent.editcolor.surface.raised6.424.5
color.agent.externalcolor.surface.raised6.834.5
color.text.mutedcolor.surface.raised + color.agent.evidenceWash6.074.5
color.interactive.hairlineStrongcolor.surface.raised3.623.0
color.interactive.trackcolor.surface.raised3.623.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.raised5.373.0
color.text.primary @ opacity.disabledcolor.surface.raised4.433.0
color.loader.markcolor.surface.raised5.373.0
color.text.primarycolor.surface.overlay7.184.5
color.text.mutedcolor.surface.overlay6.334.5
color.text.faintcolor.surface.overlay5.403.0
color.text.placeholdercolor.surface.overlay4.593.0
color.text.disabledcolor.surface.overlay4.093.0
color.text.primary over color.interactive.selectedcolor.surface.overlay + selected6.174.5
color.semantic.accentcolor.surface.overlay5.283.0
color.semantic.accentStrongcolor.surface.overlay4.303.0
color.semantic.dangercolor.surface.overlay4.543.0
color.semantic.warningcolor.surface.overlay4.833.0
color.semantic.successcolor.surface.overlay4.333.0
color.semantic.infocolor.surface.overlay4.873.0
color.agent.readcolor.surface.overlay6.014.5
color.agent.networkcolor.surface.overlay6.104.5
color.agent.shellcolor.surface.overlay6.894.5
color.agent.editcolor.surface.overlay6.314.5
color.agent.externalcolor.surface.overlay6.714.5
color.text.mutedcolor.surface.overlay + color.agent.evidenceWash5.974.5
color.interactive.hairlineStrongcolor.surface.overlay3.603.0
color.interactive.trackcolor.surface.overlay3.603.0
color.interactive.focus @ effect.focusRingAlphacolor.surface.overlay5.283.0
color.text.primary @ opacity.disabledcolor.surface.overlay4.383.0
color.loader.markcolor.surface.overlay5.283.0
color.terminal.ansi.0color.terminal.background13.921.2
color.terminal.ansi.1color.terminal.background4.293.0
color.terminal.ansi.2color.terminal.background3.303.0
color.terminal.ansi.3color.terminal.background3.403.0
color.terminal.ansi.4color.terminal.background3.413.0
color.terminal.ansi.5color.terminal.background4.213.0
color.terminal.ansi.6color.terminal.background3.273.0
color.terminal.ansi.7color.terminal.background4.133.0
color.terminal.ansi.8color.terminal.background4.991.2
color.terminal.ansi.9color.terminal.background4.273.0
color.terminal.ansi.10color.terminal.background4.993.0
color.terminal.ansi.11color.terminal.background4.133.0
color.terminal.ansi.12color.terminal.background3.363.0
color.terminal.ansi.13color.terminal.background4.063.0
color.terminal.ansi.14color.terminal.background3.233.0
color.terminal.ansi.15color.terminal.background12.053.0
color.syntax.keywordcolor.surface.sunken5.144.5
color.syntax.stringcolor.surface.sunken5.114.5
color.syntax.numbercolor.surface.sunken5.804.5
color.syntax.inlinecolor.surface.sunken5.714.5
color.syntax.commentcolor.surface.sunken4.453.0
color.text.primarycolor.surface.sunken + color.syntax.addedWash4.904.5
color.syntax.addedcolor.surface.sunken5.143.0
color.text.primarycolor.surface.sunken + color.syntax.removedWash4.884.5
color.syntax.removedcolor.surface.sunken3.743.0
color.syntax.inlinecolor.surface.sunken + color.syntax.inlineWash5.014.5
color.syntax.keywordcolor.surface.panel5.894.5
color.syntax.stringcolor.surface.panel5.864.5
color.syntax.numbercolor.surface.panel6.654.5
color.syntax.inlinecolor.surface.panel6.544.5
color.syntax.commentcolor.surface.panel5.093.0
color.text.primarycolor.surface.panel + color.syntax.addedWash5.564.5
color.syntax.addedcolor.surface.panel5.893.0
color.text.primarycolor.surface.panel + color.syntax.removedWash5.544.5
color.syntax.removedcolor.surface.panel4.293.0
color.syntax.inlinecolor.surface.panel + color.syntax.inlineWash5.694.5
color.sequence.categorical.0color.surface.canvas3.703.0
color.sequence.categorical.1color.surface.canvas4.393.0
color.sequence.categorical.2color.surface.canvas3.873.0
color.sequence.categorical.3color.surface.canvas3.793.0
color.sequence.categorical.4color.surface.canvas4.133.0
color.sequence.categorical.5color.surface.canvas3.173.0
color.sequence.categorical.6color.surface.canvas3.733.0
color.sequence.categorical.7color.surface.canvas3.173.0
color.sequence.categorical.0color.surface.panel3.943.0
color.sequence.categorical.1color.surface.panel4.673.0
color.sequence.categorical.2color.surface.panel4.123.0
color.sequence.categorical.3color.surface.panel4.043.0
color.sequence.categorical.4color.surface.panel4.393.0
color.sequence.categorical.5color.surface.panel3.373.0
color.sequence.categorical.6color.surface.panel3.983.0
color.sequence.categorical.7color.surface.panel3.373.0
color.sequence.categorical.0color.surface.raised4.243.0
color.sequence.categorical.1color.surface.raised5.043.0
color.sequence.categorical.2color.surface.raised4.453.0
color.sequence.categorical.3color.surface.raised4.353.0
color.sequence.categorical.4color.surface.raised4.743.0
color.sequence.categorical.5color.surface.raised3.643.0
color.sequence.categorical.6color.surface.raised4.293.0
color.sequence.categorical.7color.surface.raised3.643.0
color.node.portConnectedcolor.surface.canvas3.813.0
color.node.portHovercolor.surface.canvas4.683.0
color.node.edgeTargetcolor.surface.canvas3.813.0
color.node.edgeActivecolor.surface.canvas4.683.0
color.node.edgeFlowHighlightcolor.surface.canvas3.813.0
color.node.edgeFeedbackActivecolor.surface.canvas4.283.0
color.node.auraActivecolor.surface.canvas4.683.0
color.node.auraSuccesscolor.surface.canvas3.003.0
color.node.auraAttentioncolor.surface.canvas4.283.0
color.node.auraDangercolor.surface.canvas4.033.0
color.text.mutedcolor.surface.canvas + color.node.labelWash6.294.5
color.text.mutedcolor.surface.canvas + color.node.edge + color.node.labelWash5.994.5
color.text.onAccentcolor.semantic.accent5.374.5
color.text.onPrimaryFillcolor.interactive.primaryFill7.314.5
color.interactive.primaryFillcolor.surface.backdrop5.433.0
color.interactive.primaryFillcolor.surface.canvas6.363.0
color.interactive.primaryFillcolor.surface.sunken5.913.0
color.interactive.primaryFillcolor.surface.panel6.773.0
color.interactive.primaryFillcolor.surface.raised7.313.0
color.interactive.primaryFillcolor.surface.overlay7.183.0

Surface separation

How far each surface reads from the one behind it, in CIE L*. The WCAG ratio cannot answer this: it flattens everything near black, so two surfaces nobody can tell apart and two that are plainly different both report about 1.03:1.

SurfaceBehindDistanceMinimum
color.surface.canvascolor.surface.backdrop6.00.0
color.surface.panelcolor.surface.backdrop8.50.0
color.surface.canvascolor.surface.sunken2.82.0
color.surface.panelcolor.surface.canvas2.50.0
color.surface.panelcolor.surface.sunken5.32.0
color.surface.raisedcolor.surface.panel3.00.0
color.surface.overlaycolor.surface.panel2.30.0
color.surface.overlaycolor.surface.canvas4.80.0

Tone distinction

How much further from the page each tone stands than the next one down, in CIE L*. Contrast alone cannot answer this: three tones that are all legible and all the same colour pass every ratio in the table above and still leave a reader unable to tell a value that is merely secondary from one that is absent from one that cannot be used.

ToneAboveDistanceMinimum
color.text.mutedcolor.text.faint4.33.0
color.text.faintcolor.text.placeholder4.53.0
color.text.placeholdercolor.text.disabled3.33.0
color.node.portConnectedcolor.node.portIdle9.43.0