Extract a Color System for Your AI Coding Agent

Contents

• [Start with roles, not swatches](#start-with-roles-not-swatches)
• [Turn observed colors into tokens](#turn-observed-colors-into-tokens)
• [Add contrast and state rules](#add-contrast-and-state-rules)
• [Give the agent an implementation brief](#give-the-agent-an-implementation-brief)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The most useful color system for an AI coding agent is a small set of named roles, not a long list of hex values. Extract the visible colors, group them by job, check contrast, and give the agent tokens plus usage rules.

Start with roles, not swatches

Use this structure for the first pass:

• background: the main page or app canvas
• surface: cards, panels, inputs, and elevated areas
• foreground: primary text and icons
• mutedForeground: secondary text, metadata, and placeholders
• border: dividers, outlines, and control edges
• accent: links, selected states, primary actions, and focus indicators
• success, warning, and danger: feedback and status states

Then add optional roles such as accentHover, accentSubtle, surfaceRaised, and foregroundInverse. This keeps the output small enough for an agent to use consistently. It also prevents the common mistake of treating every slightly different screenshot color as a separate design token.

The muted green reference below is useful inspiration for a restrained accent direction. Treat it as a visual reference, then verify the target website before assigning any color to a reusable token.

Turn observed colors into tokens

For each color, record four things:

1. The hex value or color value as observed.
2. The likely role in the interface.
3. Where it appears, such as page background, button, text, border, or status message.
4. Whether it is a core token, a state variant, or an incidental color.

A practical token table might look like this:

Treat the values as starting points from observation, not as proof of an official internal design system. A captured color can belong to an image, gradient, browser state, or one-off illustration rather than the site's reusable UI.

Add contrast and state rules

An agent needs behavior as well as values. Tell it which text colors can sit on each background, which accent is used for filled buttons versus links, and how disabled controls differ from active controls. Check normal text, large text, icons, borders, focus rings, and text inside buttons separately.

Also specify whether the system is light, dark, or supports both modes. If the source uses a dark canvas, do not automatically invert every value for light mode. Build a second set of roles and verify each pairing independently. Keep focus styles visible even when the design is quiet.

Give the agent an implementation brief

Ask for CSS variables or Tailwind v4 tokens, but require role names, contrast notes, state variants, and a short list of uncertain observations. A strong brief should say what must remain consistent and what the agent may choose when the source is ambiguous.

Use this prompt:

> Extract the observed color system from the referenced website. Group colors into background, surface, foreground, muted foreground, border, accent, hover, focus, success, warning, and danger roles. Separate reusable interface colors from image or illustration colors. Return a compact token table with hex values, CSS variables, Tailwind v4 equivalents, usage rules, state variants, and contrast checks. Mark uncertain assignments instead of inventing official brand tokens. Then write implementation guidance for buttons, links, inputs, cards, alerts, and dark or light mode.

Use this in your AI agent

> Inspect the referenced website's observed colors and produce a compact, role-based color system for implementation. Return CSS variables and Tailwind v4 tokens, map each color to interface roles, separate reusable UI colors from decorative imagery, include hover, focus, disabled, and feedback states, and flag uncertain assignments. Use the muted green example below only as a visual reference, not as a fact about the target site.

Install Fudge for your AI agent

Start with shared role names, then give each mode its own values. Keep the interface vocabulary stable: background, surface, foreground, mutedForeground, border, accent, and feedback roles should exist in both modes even when their hex values change.

For dark mode, check that surfaces are separated by lightness rather than relying on many borders. Use the strongest text value for essential content, a softer value for supporting copy, and a clearly visible accent for links and actions. For light mode, avoid simply swapping black and white. Recheck muted text, borders, focus rings, and filled buttons because these often become too faint.

Ask the agent to return a matrix like role, light value, dark value, allowed backgrounds, and contrast note. Include state tokens such as accentHover, accentPressed, accentSubtle, and focusRing only when the interface needs them. If a color was observed only in a screenshot detail, label it as a local component value rather than promoting it to a global token.

Ask for a small token layer first, then a component pass that uses the tokens. This gives you an easy review point before colors spread through the codebase.

> Create the color token layer from the extracted role table. Add light and dark mode values, CSS custom properties, and Tailwind v4 theme tokens. Replace hard-coded interface colors in buttons, links, inputs, cards, navigation, alerts, and focus states with semantic tokens. Preserve the source's visual hierarchy, but do not use colors from photos or illustrations as global UI values. Add hover, pressed, disabled, selected, and focus states. Check text and control contrast on every relevant background. Return the files changed, a role-to-component map, and any color assignments that remain uncertain.

After that, ask for a visual review checklist: page background, surface separation, heading text, muted copy, primary action, link state, input border, focus ring, success message, warning message, and danger message. This catches missing roles faster than reviewing the raw hex list.

Related questions

• Extract a Complete Design System for an AI Coding Agent
• How to Extract a Border Radius Scale for an AI Coding Agent
• Extract Component Styles for an AI Coding Agent
• How to Extract a Website's Typography System