usecelo

usecelo semantic color token workbench

Generate tokens, then preview them live on a real website before you ship.

Tune three anchor colors, generate a semantic token system, and open the live preview to compare the original website against a token-driven clone. Export JSON, CSS variables, or Tailwind once the palette feels right.

Open live recolor preview
Preview the palette on a real site, then export the tokens once the colors feel right.
Agent-ready output
surface.canvassemantic preview
#3574DCaction.primary
#F97316action.secondary
#222837text.primary
accent
Live preview workflow

Compare the original site and a token-driven clone before exporting.

Preview cloneExport tokens

Core palette

These three seeds expand into primitive scales and semantic roles.

Brand

Primary identity and call-to-action hue.

50
100
200
300
400
500
600
700
800
900
950

Accent

Secondary highlight for emphasis and charts.

50
100
200
300
400
500
600
700
800
900
950

Neutral

Surfaces, borders, text, and base UI structure.

50
100
200
300
400
500
600
700
800
900
950

Semantic snapshot

Preview the named roles that matter most in generated interfaces.

Canvas#F3F4F5

Main app background

Primary action#3574DC

Buttons and links

Accent#3574DC

Selected states

Success#CA2FE3

Positive status

Warning#E23C12

Attention needed

Danger#E12F39

Critical actions

Token map

surface

surface.canvas#F3F4F5
surface.sunken#E4E6E8
surface.elevated#FFFFFF
surface.floating#E4E6E8
surface.accent#EFF5FE
surface.accentStrong#3574DC

text

text.primary#222837
text.secondary#545A69
text.muted#6B7280
text.inverse#FFFFFF
text.accent#2F67C3

border

border.subtle#D0D2D6
border.default#B5B9C0
border.strong#6B7280
border.accent#9DC1FB

action

action.primary#3574DC
action.primaryHover#2F67C3
action.primaryActive#2854A0
action.secondary#F97316
action.secondaryHover#DC6717
action.ghostHover#E4E6E8

feedback

feedback.success#CA2FE3
feedback.successSoft#FADAFF
feedback.warning#E23C12
feedback.warningSoft#FFDDD4
feedback.danger#E12F39
feedback.dangerSoft#FFDADC

chart

chart.one#3B82F6
chart.two#F97316
chart.three#E433FE
chart.four#FF4210
chart.five#6B7280

Prompt hint for AI agents

Use semantic.surface for backgrounds, semantic.text for readable content, semantic.action for interactive states, and semantic.feedback for status messaging before falling back to primitive scales.

Export

Move between implementation targets without renaming tokens by hand.

{
  "primitive": {
    "brand": {
      "50": "#EFF5FE",
      "100": "#DCE9FD",
      "200": "#C0D7FC",
      "300": "#9DC1FB",
      "400": "#6AA0F8",
      "500": "#3B82F6",
      "600": "#3574DC",
      "700": "#2F67C3",
      "800": "#2854A0",
      "900": "#1F407A",
      "950": "#172B53"
    },
    "accent": {
      "50": "#FFF4EC",
      "100": "#FEE6D5",
      "200": "#FDD2B4",
      "300": "#FCB98B",
      "400": "#FA954E",
      "500": "#F97316",
      "600": "#DC6717",
      "700": "#C05B18",
      "800": "#9A4B1A",
      "900": "#6F3A1C",
      "950": "#44281E"
    },
    "neutral": {
      "50": "#F3F4F5",
      "100": "#E4E6E8",
      "200": "#D0D2D6",
      "300": "#B5B9C0",
      "400": "#8F949E",
      "500": "#6B7280",
      "600": "#5F6674",
      "700": "#545A69",
      "800": "#454B5A",
      "900": "#333948",
      "950": "#222837"
    },
    "success": {
      "50": "#FDEFFF",
      "100": "#FADAFF",
      "200": "#F6BEFF",
      "300": "#F299FF",
      "400": "#EA64FE",
      "500": "#E433FE",
      "600": "#CA2FE3",
      "700": "#B02BC9",
      "800": "#8D25A5",
      "900": "#661F7D",
      "950": "#3F1855"
    },
    "warning": {
      "50": "#FFF0EC",
      "100": "#FFDDD4",
      "200": "#FFC3B3",
      "300": "#FFA188",
      "400": "#FF6F49",
      "500": "#FF4210",
      "600": "#E23C12",
      "700": "#C43614",
      "800": "#9D2E16",
      "900": "#712519",
      "950": "#461C1C"
    },
    "danger": {
      "50": "#FFEFEF",
      "100": "#FFDADC",
      "200": "#FFBEC1",
      "300": "#FF999E",
      "400": "#FE646B",
      "500": "#FE333C",
      "600": "#E12F39",
      "700": "#C42B35",
      "800": "#9D2531",
      "900": "#711F2C",
      "950": "#451827"
    }
  },
  "semantic": {
    "surface": {
      "canvas": "#F3F4F5",
      "sunken": "#E4E6E8",
      "elevated": "#FFFFFF",
      "floating": "#E4E6E8",
      "accent": "#EFF5FE",
      "accentStrong": "#3574DC"
    },
    "text": {
      "primary": "#222837",
      "secondary": "#545A69",
      "muted": "#6B7280",
      "inverse": "#FFFFFF",
      "accent": "#2F67C3"
    },
    "border": {
      "subtle": "#D0D2D6",
      "default": "#B5B9C0",
      "strong": "#6B7280",
      "accent": "#9DC1FB"
    },
    "action": {
      "primary": "#3574DC",
      "primaryHover": "#2F67C3",
      "primaryActive": "#2854A0",
      "secondary": "#F97316",
      "secondaryHover": "#DC6717",
      "ghostHover": "#E4E6E8"
    },
    "feedback": {
      "success": "#CA2FE3",
      "successSoft": "#FADAFF",
      "warning": "#E23C12",
      "warningSoft": "#FFDDD4",
      "danger": "#E12F39",
      "dangerSoft": "#FFDADC"
    },
    "chart": {
      "one": "#3B82F6",
      "two": "#F97316",
      "three": "#E433FE",
      "four": "#FF4210",
      "five": "#6B7280"
    }
  }
}