Back to Linear
AI token editor

Edit Linear tokens

Describe what you want to change in plain English. Claude rewrites only the tokens you mention and leaves the rest alone. Download the modified CSS / JSON when you're happy.

Try:

Anonymous: 3/hr · Members: 30/hr.

Current

{
  "color": {
    "background": {
      "primary": {
        "$type": "color",
        "$value": "#09090B",
        "$description": "Main app background, darkest surface"
      },
      "secondary": {
        "$type": "color",
        "$value": "#18181B",
        "$description": "Elevated surfaces, cards, modals"
      },
      "tertiary": {
        "$type": "color",
        "$value": "#27272A",
        "$description": "Subtle backgrounds, hover states"
      },
      "hover": {
        "$type": "color",
        "$value": "#3F3F46",
        "$description": "Hover state background"
      }
    },
    "border": {
      "primary": {
        "$type": "color",
        "$value": "#27272A",
        "$description": "Default borders and dividers"
      },
      "secondary": {
        "$type": "color",
        "$value": "#3F3F46",
        "$description": "Hover borders, focus rings"
      },
      "tertiary": {
        "$type": "color",
        "$value": "#52525B",
        "$description": "Subtle borders"
      }
    },
    "text": {
      "primary": {
        "$type": "color",
        "$value": "#FFFFFF",
        "$description": "Primary text, headings"
      },
      "secondary": {
        "$type": "color",
        "$value": "#A1A1AA",
        "$description": "Secondary text, descriptions"
      },
      "tertiary": {
        "$type": "color",
        "$value": "#71717A",
        "$description": "Tertiary text, muted content"
      },
      "quaternary": {
        "$type": "color",
        "$value": "#52525B",
        "$description": "Disabled text, placeholders"
      }
    },
    "accent": {
      "primary": {
        "$type": "color",
        "$value": "#5E6AD2",
        "$description": "Primary accent color for interactive elements"
      },
      "hover": {
        "$type": "color",
        "$value": "#6E7AE2",
        "$description": "Accent hover state"
      },
      "active": {
        "$type": "color",
        "$value": "#4E5AC2",
        "$description": "Accent active/pressed state"
      }
    },
    "semantic": {
      "success": {
        "$type": "color",
        "$value": "#10B981",
        "$description": "Success states, positive actions"
      },
      "warning": {
        "$type": "color",
        "$value": "#F59E0B",
        "$description": "Warning states, caution"
      },
      "error": {
        "$type": "color",
        "$value": "#EF4444",
        "$description": "Error states, destructive actions"
      },
      "info": {
        "$type": "color",
        "$value": "#3B82F6",
        "$description": "Informational states"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$type": "fontFamily",
        "$value": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif",
        "$description": "Primary sans-serif font for UI"
      },
      "serif": {
        "$type": "fontFamily",
        "$value": "\"ABC Favorit\", \"Times New Roman\", serif",
        "$description": "Serif font for large display headings"
      },
      "mono": {
        "$type": "fontFamily",
        "$value": "\"SF Mono\", \"Monaco\", \"Cascadia Code\", monospace",
        "$description": "Monospace font for code"
      }
    },
    "size": {
      "xs": {
        "$type": "dimension",
        "$value": "12px",
        "$description": "Extra small text"
      },
      "sm": {
        "$type": "dimension",
        "$value": "14px",
        "$description": "Small text, most UI elements"
      },
      "base": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "Base body text"
      },
      "lg": {
        "$type": "dimension",
        "$value": "18px",
        "$description": "Large body text"
      },
      "xl": {
        "$type": "dimension",
        "$value": "20px",
        "$description": "Extra large, small headings"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "24px",
        "$description": "Section headings"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "30px",
        "$description": "Page headings"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "Large headings"
      },
      "5xl": {
        "$type": "dimension",
        "$value": "48px",
        "$description": "Hero headings"
      },
      "6xl": {
        "$type": "dimension",
        "$value": "60px",
        "$description": "Display headings"
      },
      "7xl": {
        "$type": "dimension",
        "$value": "72px",
        "$description": "Large display headings"
      },
      "8xl": {
        "$type": "dimension",
        "$value": "96px",
        "$description": "Extra large display"
      }
    },
    "weight": {
      "normal": {
        "$type": "number",
        "$value": 400,
        "$description": "Normal weight"
      },
      "medium": {
        "$type": "number",
        "$value": 500,
        "$description": "Medium weight"
      },
      "semibold": {
        "$type": "number",
        "$value": 600,
        "$description": "Semibold weight"
      },
      "bold": {
        "$type": "number",
        "$value": 700,
        "$description": "Bold weight"
      }
    },
    "lineHeight": {
      "xs": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "Line height for extra small text"
      },
      "sm": {
        "$type": "dimension",
        "$value": "20px",
        "$description": "Line height for small text"
      },
      "base": {
        "$type": "dimension",
        "$value": "24px",
        "$description": "Line height for base text"
      },
      "lg": {
        "$type": "dimension",
        "$value": "28px",
        "$description": "Line height for large text"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Base spacing unit"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "2x base unit"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "3x base unit"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "4x base unit"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "6x base unit"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "8x base unit"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "12x base unit"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px",
      "$description": "16x base unit"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px",
      "$description": "24x base unit"
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Small border radius"
    },
    "md": {
      "$type": "dimension",
      "$value": "6px",
      "$description": "Medium border radius"
    },
    "lg": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Large border radius"
    },
    "xl": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Extra large border radius"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "2XL border radius"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px",
      "$description": "Fully rounded"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
      "$description": "Small shadow"
    },
    "md": {
      "$type": "shadow",
      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
      "$description": "Medium shadow"
    },
    "lg": {
      "$type": "shadow",
      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
      "$description": "Large shadow"
    },
    "xl": {
      "$type": "shadow",
      "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.6)",
      "$description": "Extra large shadow"
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

Linear is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.