Component Tokens

Component / contracts

Component decision tokens

Each stable component is wired to its own decision layer. Open a group to inspect the exact color, radius, size, spacing, depth, state, and typography contracts used by its implementation.

surface11

TokenLightDark

component.surface.color.body#E4E5E4#07090A

component.surface.color.panel#F7F8F8#0E1214

component.surface.color.raised#FCFDFD#171C1F

component.surface.color.inset#D5D7D6#000000

component.surface.color.glassrgba(255, 255, 255, 0.64)rgba(255, 255, 255, 0.08)

component.surface.color.border#BEC1C0#30373C

component.surface.color.text#0E1214#F7F8F8

component.surface.radius8px8px

component.surface.stroke1px1px

component.surface.finish-roughness0.420.42

component.surface.finish-specularity0.320.32

panel11

TokenLightDark

component.panel.color.background#F7F8F8#0E1214

component.panel.color.border#BEC1C0#30373C

component.panel.color.text#0E1214#F7F8F8

component.panel.color.text-muted#424B52#9EA9B1

component.panel.color.edge-highlightrgba(255, 255, 255, 0.48)rgba(255, 255, 255, 0.08)

component.panel.radius12px12px

component.panel.stroke1px1px

component.panel.gap12px12px

component.panel.seam1px1px

component.panel.fastener-size4px4px

component.panel.fastener-inset12px12px

button38

TokenLightDark

component.button.color.primary-background#171C1F#F7F8F8

component.button.color.primary-background-hover#22282C#FFFFFF

component.button.color.primary-background-pressed#0E1214#E4E5E4

component.button.color.primary-background-disabled#D5D7D6#30373C

component.button.color.primary-text#FCFDFD#0E1214

component.button.color.secondary-background#EFF0F0#22282C

component.button.color.secondary-background-hover#FCFDFD#30373C

component.button.color.secondary-background-pressed#D5D7D6#171C1F

component.button.color.secondary-background-disabled#E4E5E4#171C1F

component.button.color.secondary-text#171C1F#F7F8F8

component.button.color.signal-background#FF5A1F#FF5A1F

component.button.color.signal-background-hover#EE430F#FF742F

component.button.color.signal-background-pressed#C9320A#EE430F

component.button.color.signal-text#FFFFFF#FFFFFF

component.button.color.ghost-backgroundrgba(0, 0, 0, 0.04)rgba(255, 255, 255, 0.04)

component.button.color.ghost-background-hoverrgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.08)

component.button.color.ghost-background-pressedrgba(0, 0, 0, 0.12)rgba(255, 255, 255, 0.12)

component.button.color.focus#FF5A1F#FF742F

component.button.color.border#7C8180#5A656D

component.button.height.xs24px24px

component.button.height.sm32px32px

component.button.height.md40px40px

component.button.height.lg48px48px

component.button.height.xl56px56px

component.button.radius8px8px

component.button.stroke1px1px

component.button.gap8px8px

component.button.padding-inline-sm12px12px

component.button.padding-inline-md16px16px

component.button.padding-inline-lg24px24px

component.button.icon-size16px16px

component.button.font-size14px14px

component.button.line-height20px20px

component.button.font-weight500500

component.button.letter-spacing0.01em0.01em

component.button.target-minimum44px44px

component.button.shadow-raised[{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.32)","inset":false}][{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.80)","inset":false}]

component.button.shadow-pressed{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}

icon button11

TokenLightDark

component.icon-button.color.background#EFF0F0#22282C

component.icon-button.color.background-hover#FCFDFD#30373C

component.icon-button.color.background-pressed#D5D7D6#171C1F

component.icon-button.color.icon#22282C#EFF0F0

component.icon-button.color.focus#FF5A1F#FF742F

component.icon-button.size-sm32px32px

component.icon-button.size-md40px40px

component.icon-button.size-lg48px48px

component.icon-button.radius8px8px

component.icon-button.icon-size16px16px

component.icon-button.target-minimum44px44px

input18

TokenLightDark

component.input.color.background#D5D7D6#000000

component.input.color.background-disabledrgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.08)

component.input.color.border#BEC1C0#30373C

component.input.color.border-hover#7C8180#5A656D

component.input.color.border-focus#FF5A1F#FF5A1F

component.input.color.border-invalid#D12F20#FA6B59

component.input.color.text#0E1214#F7F8F8

component.input.color.placeholder#5A656D#77838C

component.input.color.icon#5A656D#9EA9B1

component.input.height-sm32px32px

component.input.height-md40px40px

component.input.height-lg48px48px

component.input.radius8px8px

component.input.stroke1px1px

component.input.padding-inline12px12px

component.input.font-size14px14px

component.input.line-height22px22px

component.input.shadow{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}

textarea12

TokenLightDark

component.textarea.color.background#D5D7D6#000000

component.textarea.color.border#BEC1C0#30373C

component.textarea.color.border-focus#FF5A1F#FF5A1F

component.textarea.color.border-invalid#D12F20#FA6B59

component.textarea.color.text#0E1214#F7F8F8

component.textarea.color.placeholder#5A656D#77838C

component.textarea.min-height120px120px

component.textarea.radius8px8px

component.textarea.stroke1px1px

component.textarea.padding12px12px

component.textarea.font-size14px14px

component.textarea.line-height22px22px

toggle14

TokenLightDark

component.toggle.color.background#EFF0F0#22282C

component.toggle.color.background-hover#FCFDFD#30373C

component.toggle.color.background-pressed#D5D7D6#171C1F

component.toggle.color.text#0E1214#F7F8F8

component.toggle.color.text-pressed#0E1214#F7F8F8

component.toggle.color.focus#FF5A1F#FF742F

component.toggle.color.border#BEC1C0#30373C

component.toggle.height-sm32px32px

component.toggle.height-md40px40px

component.toggle.height-lg48px48px

component.toggle.radius8px8px

component.toggle.font-size14px14px

component.toggle.line-height20px20px

component.toggle.font-weight500500

checkbox10

TokenLightDark

component.checkbox.color.background#D5D7D6#000000

component.checkbox.color.background-checked#FF5A1F#FF5A1F

component.checkbox.color.mark#FFFFFF#FFFFFF

component.checkbox.color.border#BEC1C0#30373C

component.checkbox.color.border-focus#FF5A1F#FF5A1F

component.checkbox.color.border-invalid#D12F20#FA6B59

component.checkbox.size-sm16px16px

component.checkbox.size-md18px18px

component.checkbox.size-lg20px20px

component.checkbox.radius4px4px

radio group11

TokenLightDark

component.radio-group.color.background#D5D7D6#000000

component.radio-group.color.background-checked#FF5A1F#FF5A1F

component.radio-group.color.mark#FFFFFF#FFFFFF

component.radio-group.color.border#BEC1C0#30373C

component.radio-group.color.border-focus#FF5A1F#FF5A1F

component.radio-group.color.border-invalid#D12F20#FA6B59

component.radio-group.size-sm16px16px

component.radio-group.size-md18px18px

component.radio-group.size-lg20px20px

component.radio-group.gap12px12px

component.radio-group.radius9999px9999px

slider09

TokenLightDark

component.slider.color.track#D5D7D6#000000

component.slider.color.fill#FF5A1F#FF5A1F

component.slider.color.thumb#171C1F#F7F8F8

component.slider.color.thumb-border#7C8180#5A656D

component.slider.color.focus#FF5A1F#FF742F

component.slider.track-size4px4px

component.slider.thumb-size20px20px

component.slider.target-minimum44px44px

component.slider.radius9999px9999px

knob27

TokenLightDark

component.knob.color.well#07090A#07090A

component.knob.color.skirt#07090A#000000

component.knob.color.skirt-highlightrgba(255, 255, 255, 0.04)rgba(255, 255, 255, 0.04)

component.knob.color.face#F7F8F8#EFF0F0

component.knob.color.face-highlightrgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.64)

component.knob.color.edge#7C8180#5A5F5E

component.knob.color.marker#FF5A1F#FF5A1F

component.knob.color.text#0E1214#F7F8F8

component.knob.color.text-muted#424B52#9EA9B1

component.knob.size-sm40px40px

component.knob.size-md48px48px

component.knob.size-lg64px64px

component.knob.size-xl80px80px

component.knob.radius9999px9999px

component.knob.well-padding4px4px

component.knob.skirt-width3px3px

component.knob.knurl-ridge1px1px

component.knob.knurl-pitch3px3px

component.knob.knurl-ridge-angle22

component.knob.knurl-pitch-angle66

component.knob.marker-width2px2px

component.knob.marker-length0.280.28

component.knob.marker-inset6px6px

component.knob.shadow-well[{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.48)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true}][{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.80)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true}]

component.knob.shadow-cap[{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.32)","inset":false}][{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.80)","inset":false}]

component.knob.label-font-size12px12px

component.knob.value-font-size13px13px

tabs13

TokenLightDark

component.tabs.color.track#D5D7D6#000000

component.tabs.color.item-text#424B52#9EA9B1

component.tabs.color.item-text-hover#0E1214#F7F8F8

component.tabs.color.active-background#EFF0F0#22282C

component.tabs.color.active-text#171C1F#F7F8F8

component.tabs.color.active-indicator#FF5A1F#FF5A1F

component.tabs.color.focus#FF5A1F#FF742F

component.tabs.height-sm32px32px

component.tabs.height-md40px40px

component.tabs.radius8px8px

component.tabs.gap2px2px

component.tabs.font-size14px14px

component.tabs.font-weight500500

dialog13

TokenLightDark

component.dialog.color.backdroprgba(0, 0, 0, 0.48)rgba(0, 0, 0, 0.80)

component.dialog.color.background#FFFFFF#171C1F

component.dialog.color.border#BEC1C0#30373C

component.dialog.color.text#0E1214#F7F8F8

component.dialog.color.text-muted#424B52#9EA9B1

component.dialog.width512px512px

component.dialog.radius12px12px

component.dialog.padding24px24px

component.dialog.shadow[{"offsetX":"0px","offsetY":"18px","blur":"42px","spread":"0px","color":"rgba(0, 0, 0, 0.25)","inset":false},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.46)","inset":false}][{"offsetX":"0px","offsetY":"18px","blur":"42px","spread":"0px","color":"rgba(0, 0, 0, 0.25)","inset":false},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.46)","inset":false}]

component.dialog.title-font-size20px20px

component.dialog.title-line-height28px28px

component.dialog.title-font-weight600600

component.dialog.body-font-size14px14px

tooltip07

TokenLightDark

component.tooltip.color.background#171C1F#F7F8F8

component.tooltip.color.border#7C8180#5A656D

component.tooltip.color.text#FCFDFD#0E1214

component.tooltip.radius4px4px

component.tooltip.padding-inline8px8px

component.tooltip.padding-block4px4px

component.tooltip.font-size12px12px

toast14

TokenLightDark

component.toast.color.background#FFFFFF#171C1F

component.toast.color.border#BEC1C0#30373C

component.toast.color.text#0E1214#F7F8F8

component.toast.color.text-muted#424B52#9EA9B1

component.toast.color.success#168747#3CC275

component.toast.color.warning#D98F0B#EDAF21

component.toast.color.danger#D12F20#FA6B59

component.toast.color.info#365FD0#659BFA

component.toast.width320px320px

component.toast.radius12px12px

component.toast.padding12px12px

component.toast.shadow{"offsetX":"0px","offsetY":"4px","blur":"12px","spread":"-2px","color":"#5A656D","inset":false}{"offsetX":"0px","offsetY":"4px","blur":"12px","spread":"-2px","color":"#77838C","inset":false}

component.toast.font-size13px13px

component.toast.line-height20px20px

chartUxome quantitative display decisions shared by every chart renderer and composition.28

TokenLightDark

component.chart.color.plot#EFF0F0#0E1214

component.chart.color.plot-inset#E4E5E4#000000

component.chart.color.grid#BEC1C0#30373C

component.chart.color.axis#5A656D#77838C

component.chart.color.label#30373C#9EA9B1

component.chart.color.value#0E1214#FCFDFD

component.chart.color.focus#FF5A1F#FF742F

component.chart.color.positive#168747#3CC275

component.chart.color.negative#D12F20#FA6B59

component.chart.color.series-1#171C1F#F7F8F8

component.chart.color.series-2#FF5A1F#FF742F

component.chart.color.series-3#365FD0#659BFA

component.chart.color.series-4#168747#3CC275

component.chart.color.series-5#7440DB#AA82FF

component.chart.color.series-6#117FA1#70D8F1

component.chart.color.series-7#BA6B06#EDAF21

component.chart.color.series-8#D12F20#FA6B59

component.chart.radius8px8px

component.chart.stroke-grid0.5px0.5px

component.chart.stroke-axis1px1px

component.chart.stroke-data2px2px

component.chart.point-size16px16px

component.chart.gap12px12px

component.chart.padding16px16px

component.chart.label-font-size12px12px

component.chart.value-font-size13px13px

component.chart.duration320ms320ms

component.chart.ease[0.2,0,0,1][0.2,0,0,1]

Public API, private primitive

Consumers use semantic Uxome props. Behavioral primitives remain internal and can change without leaking into product code.

import { Button, Panel, Surface } from "@uxome/ui";

<Panel material="aluminum">
  <Button depth="raised">Deploy</Button>
  <Surface depth="recessed" material="glass" />
</Panel>