Detect Hardcoded Colors & Values in React

Hardcoded Value Types

🎨

Colors

#ffffff

rgb(255,255,255)

hsl(0,0%,100%)

📐

Spacing

16px

1.5rem

24px

🔤

Typography

14px

Arial

font-weight: 600

🌓

Shadows

box-shadow: 0 2px 4px rgba(0,0,0,0.1)

📏

Borders

1px solid #ccc

border-radius: 4px

✗ Before: Hardcoded values everywhere

Card.tsx

export function Card({ title }) {
  return (
    <div style={{
      backgroundColor: '#ffffff',  // ⚠️
      padding: '16px',             // ⚠️
      borderRadius: '8px'          // ⚠️
    }}>
      {title}
    </div>
  );
}

✓ After: Using design tokens

Card.tsx

export function Card({ title }) {
  return (
    <div style={{
      backgroundColor: 'var(--bg-surface)',
      padding: 'var(--spacing-md)',
      borderRadius: 'var(--radius-md)'
    }}>
      {title}
    </div>
  );
}

Free PDF

See the worst hardcoded colors in the wild

Ten ways hardcoded colors creep in, with how to spot and fix each one.

No spam. Unsubscribe anytime.

Step 1: Find Every Hardcoded Value

Each issue shows the exact token replacement.

buoy-cli

Found 47 hardcoded values

src/components/Card.tsx:12

├─ #ffffff → var(--bg-surface)

├─ 16px → var(--spacing-md)

└─ 8px → var(--radius-md)

src/components/Button.tsx:8

├─ #0066ff → var(--color-primary)

└─ 14px → var(--text-sm)

Add to CI to catch at the PR →

Step 2: Catch at the PR

Add Buoy to CI. Hardcoded values never reach main.

Buoy Design Check — 2 hardcoded values found

src/components/Card.tsx line 12

Hardcoded color #ffffff → Use var(--bg-surface)

src/components/Card.tsx line 15

Hardcoded spacing 16px → Use var(--spacing-md)

The Visible Outcome

34%

Token Coverage Before

47 hardcoded values scattered across 35 files

89%

Token Coverage After

42 issues caught before merge

Now when you update --color-primary, every component updates at once.
No hunting through files. No missed spots. One source of truth.

Frequently Asked Questions

What counts as a hardcoded value?

Any color (#hex, rgb, hsl), spacing (px, rem, em), or typography value that isn't using a CSS variable, theme token, or design system reference.

Does Buoy support CSS-in-JS?

Yes. Buoy detects hardcoded values in styled-components, Emotion, inline styles, and CSS modules.

Can I ignore certain hardcoded values?

Yes. Use .buoy.yaml to define ignore patterns for intentional values like transparent, inherit, or specific hex codes.

What frameworks does this work with?

React, Vue, Svelte, Angular, and vanilla CSS/SCSS files.

Find hardcoded values. Replace them with tokens. Automatically.