Design a theme, live
Edit every color and metric token and watch a mock of the native desktop client update as you type. Right-click any part of the preview to see which tokens paint it.
Open on a wider screen
The theme builder needs room for the editor and the app preview side by side. Open this page on a desktop browser.
›Colors40
colors.backgroundInherited · #1c1c1eff
colors.foregroundInherited · #f5f5f7ff
colors.surfaceInherited · #2c2c2eff
colors.surfaceForegroundInherited · #f5f5f7ff
colors.primaryInherited · #3b82f6ff
colors.primaryForegroundInherited · #ffffffff
colors.secondaryInherited · #3a3a3cff
colors.secondaryForegroundInherited · #f5f5f7ff
colors.mutedInherited · #3a3a3cff
colors.mutedForegroundInherited · #a1a1a6ff
colors.accentInherited · #3b82f62e
colors.accentForegroundInherited · #3b82f6ff
colors.destructiveInherited · #ef4444ff
colors.destructiveForegroundInherited · #ffffffff
colors.borderInherited · #48484aff
colors.inputInherited · #48484aff
colors.ringInherited · #3b82f6ff
colors.successInherited · #30d158ff
colors.warningInherited · #ffb340ff
colors.infoInherited · #3b82f6ff
colors.textTertiaryInherited · #757578ff
colors.hairlineInherited · #3e3e40ff
colors.rowHoverInherited · #343436ff
colors.chromeInherited · #222224ff
colors.navHoverInherited · #2e2e30ff
colors.navSelectedInherited · #38383aff
colors.navSelectedForegroundInherited · #f5f5f7ff
colors.navSelectedIconInherited · #3b82f6ff
colors.accentTextInherited · #5392f7ff
colors.caretInherited · #5392f7ff
colors.textSelectionInherited · #3b82f64d
colors.dragBorderInherited · #3b82f6a6
colors.dropTargetInherited · #3b82f633
colors.statusDownloadingInherited · #3b82f6ff
colors.statusCompletedInherited · #757578ff
colors.statusFailedInherited · #ef4444ff
colors.statusPausedInherited · #a1a1a6ff
colors.statusQueuedInherited · #757578ff
colors.progressTrackInherited · #a1a1a629
colors.progressFillInherited · #3b82f6ff
›Radius06
radius.noneInherited · 0
radius.smInherited · 3
radius.mdInherited · 6
radius.lgInherited · 8
radius.xlInherited · 12
radius.fullInherited · 9999
›Spacing07
spacing.xxsInherited · 2
spacing.xsInherited · 4
spacing.smInherited · 8
spacing.mdInherited · 12
spacing.lgInherited · 16
spacing.xlInherited · 24
spacing.xxlInherited · 32
›Typography26
typography.sansInherited · system-ui
typography.monoInherited · monospace
typography.xs.sizeInherited · 12
typography.xs.lineHeightInherited · 16
typography.xs.weightInherited · 400
typography.sm.sizeInherited · 13
typography.sm.lineHeightInherited · 18
typography.sm.weightInherited · 400
typography.md.sizeInherited · 16
typography.md.lineHeightInherited · 24
typography.md.weightInherited · 400
typography.lg.sizeInherited · 18
typography.lg.lineHeightInherited · 28
typography.lg.weightInherited · 400
typography.xl.sizeInherited · 20
typography.xl.lineHeightInherited · 28
typography.xl.weightInherited · 400
typography.monoMd.sizeInherited · 13
typography.monoMd.lineHeightInherited · 20
typography.monoMd.weightInherited · 400
typography.caption.sizeInherited · 11
typography.caption.lineHeightInherited · 14
typography.caption.weightInherited · 400
typography.title.sizeInherited · 15
typography.title.lineHeightInherited · 20
typography.title.weightInherited · 600
›Shadow03
shadow.smInherited · [{"x":0,"y":1,"blur":2,"spread":0,"color":"#0000002e","inset":false}]
shadow.mdInherited · [{"x":0,"y":4,"blur":8,"spread":-2,"color":"#0000002e","inset":false}]
shadow.lgInherited · [{"x":0,"y":12,"blur":24,"spread":-4,"color":"#0000002e","inset":false}]
›Stroke02
stroke.thinInherited · 1
stroke.strongInherited · 2
›Focus ring02
focusRing.widthInherited · 2
focusRing.offsetInherited · 1
›Icon03
icon.smInherited · 12
icon.mdInherited · 14
icon.lgInherited · 16
›Density10
density.controlInherited · 28
density.navRowInherited · 28
density.toolbarButtonInherited · 28
density.titleBarInherited · 40
density.statusBarInherited · 28
density.statusControlInherited · 22
density.sectionHeaderInherited · 24
density.taskRowInherited · 44
density.taskRowCompactInherited · 30
density.checkMarkInherited · 16
›Components13
components.button.radiusInherited · 6
components.input.radiusFollows radius.md / radius.lg (component library limitation) · 6
components.dialog.radiusFollows radius.md / radius.lg (component library limitation) · 8
components.card.radiusInherited · 8
components.badge.radiusInherited · 9999
components.navItem.radiusInherited · 6
components.progress.radiusInherited · 9999
components.progress.heightInherited · 4
components.taskRow.radiusInherited · 6
components.checkbox.radiusInherited · 4
components.tab.radiusInherited · 6
components.menu.radiusFollows radius.md / radius.lg (component library limitation) · 6
components.tooltip.radiusFollows radius.md / radius.lg (component library limitation) · 6
FileTasksViewToolsHelp›Surface04
colors.surface.backgroundcolors.surface.surface1colors.surface.surface2colors.surface.surface3›Element03
colors.element.hovercolors.element.selectedcolors.element.active›Text04
colors.text.primarycolors.text.secondarycolors.text.mutedcolors.text.disabled›Border02
colors.border.defaultcolors.border.focused›Accent04
colors.accent.colorcolors.accent.hovercolors.accent.backgroundcolors.accent.foreground›Input04
colors.input.backgroundcolors.input.bordercolors.input.focusBordercolors.input.focusBackground›Dialog02
colors.dialog.backgroundcolors.dialog.barrier›Switch02
colors.switch.trackcolors.switch.thumb›Status03
colors.status.successcolors.status.warningcolors.status.error›Shadow01
colors.shadow›Segment palette16
colors.segmentPalette.0colors.segmentPalette.1colors.segmentPalette.2colors.segmentPalette.3colors.segmentPalette.4colors.segmentPalette.5colors.segmentPalette.6colors.segmentPalette.7colors.segmentPalette.8colors.segmentPalette.9colors.segmentPalette.10colors.segmentPalette.11colors.segmentPalette.12colors.segmentPalette.13colors.segmentPalette.14colors.segmentPalette.15›Radius13
metrics.radius.progressmetrics.radius.xsmetrics.radius.segmentCellmetrics.radius.smmetrics.radius.mdmetrics.radius.inputmetrics.radius.cardmetrics.radius.iconTilemetrics.radius.dialogmetrics.radius.chipLgmetrics.radius.chipXlmetrics.radius.badgemetrics.radius.pill›Spacing05
metrics.spacing.xsmetrics.spacing.smmetrics.spacing.mdmetrics.spacing.lgmetrics.spacing.xl›Stroke02
metrics.stroke.thinmetrics.stroke.thick›Button03
metrics.button.heightSmmetrics.button.heightMdmetrics.button.heightLg›Alpha22
metrics.alpha.subtlemetrics.alpha.softmetrics.alpha.mutedmetrics.alpha.mutedStrongmetrics.alpha.activemetrics.alpha.selectedBordermetrics.alpha.scrimmetrics.alpha.bordermetrics.alpha.borderStrongmetrics.alpha.disabledmetrics.alpha.glassmetrics.alpha.focusRingmetrics.alpha.shadowStrongmetrics.alpha.shadowSoftmetrics.alpha.shadowFaintmetrics.alpha.faintmetrics.alpha.textSelectionmetrics.alpha.borderSubtlemetrics.alpha.borderFaintmetrics.alpha.borderMediummetrics.alpha.emphasismetrics.alpha.glassSubtleFluxDownDesktop-compatible schema
Exported JSON follows the client's theme schema (appearance + colors + segmentPalette + metrics), so it imports directly under Settings → Appearance.
Token inspector
Right-click any UI block to inspect its tokens