# Move one component off hardcoded colors, spacing, and radii

A component built with hex values and magic pixel numbers, moved onto the token set everything else uses.

Category: Design system and UI
Source: https://letsship.ai/use-cases/move-a-component-onto-design-tokens
Published: 2026-08-25

## Goal

Replace hardcoded colours, spacing, and radii in one component with design tokens.

## Acceptance criteria

- No hardcoded colour, spacing, or radius value remains in the component
- A search of the file returns only token references
- A rendered comparison shows no unintended visual change
- Values with no matching token are raised rather than approximated

## What lands as proof

A before and after capture alongside the search output, so the change is proven to be token-only.

## Prompt

Copy this to an agent to open the ticket:

```text
Create a Linear issue in my team and assign it to the SHIP agent.

Title: Move {component} onto design tokens

Description: Replace hardcoded colours, spacing, and radii in one component with design tokens.

Acceptance criteria:
- No hardcoded colour, spacing, or radius value remains in the component
- A search of the file returns only token references
- A rendered comparison shows no unintended visual change
- Values with no matching token are raised rather than approximated

Before you create the issue, search this repository's components for hardcoded hex values and replace {component} with the worst offender.
```

## Questions

### What does the agent actually change?

The ticket is scoped to one outcome: replace hardcoded colours, spacing, and radii in one component with design tokens. Work that serves that outcome is in scope, and anything outside it is left for a separate ticket, so the pull request stays reviewable.

### How do I know the work is done?

The pull request carries the evidence, not only the diff. Here that means rendered comparison plus a grep showing only token references remain, so a reviewer can confirm the result without reproducing the work locally.

### How much oversight does this need?

None is required before the run starts. Every claim this ticket makes can be checked by machine, so the agent works straight through and a person reviews the finished pull request like any other.