How to Apply the Color Consistency Lock Across Multiple Sections in taste-skill

To apply the Color Consistency Lock across multiple sections, pick one accent color for the entire page, expose it as a global CSS custom property or Tailwind theme token, consume that token in every component, and audit the codebase to eliminate hard-coded hues before shipping.

The Color Consistency Lock is a hard rule defined in the Leonxlnx/taste-skill design system that guarantees a single accent color is used throughout every component, section, and state on a page. According to skills/taste-skill/SKILL.md at line 889, the rule states: “Once an accent color is chosen for a page, it is used on the WHOLE page… Pick one accent, lock it, audit every component before shipping.” If you are building a multi-section interface, applying this lock correctly is the difference between a cohesive experience and a fragmented palette.

What Is the Color Consistency Lock?

The lock is a design-system constraint introduced to prevent random color swaps across sections. As noted in CHANGELOG.md at line 54, the rule mandates “one accent across the whole page; no random color swaps in section 7.” It is not automatically enforced by linting or compilation. Instead, the codebase provides a manual workflow that developers and designers must follow to guarantee compliance.

5-Step Workflow to Lock an Accent Across Sections

The taste-skill repository defines a five-step workflow for applying the lock. Follow these steps in order to ensure every section inherits the same accent.

Step 1: Pick the Accent Early

Choose your accent immediately after reading the project brief. This decision should happen before any component-level styling. Select a Tailwind color such as emerald-600 or define a custom HSL value. Making this choice early prevents downstream drift.

Step 2: Expose a Global Variable

Surface the chosen hue as a global token so every section can reference it without hard-coding values. You have two recommended paths:

• CSS custom property – Set :root { --accent: #10b981; } in your global stylesheet or root layout.
• Tailwind theme extension – Add "accent": "#10b981" to tailwind.config.js under theme.extend.colors.

Step 3: Consume the Variable Everywhere

Reference the token in every interactive or emphasized element. Use utility classes such as bg-[var(--accent)], text-[var(--accent)], or bg-accent, or wrap components in a React <Accent> helper. Every button, badge, link, and hover state must derive its non-neutral hue from this single source.

Step 4: Audit Each Component

Inspect every component to confirm the accent is the only non-neutral hue in use. Run a search for hard-coded values like #ff0000 and replace them with the global token. This audit is required because the lock is a manual rule, not a build-time guard.

Step 5: Lock the Theme in Your Root Layout

Set the accent once per page, typically in app/layout.tsx. By defining the variable at the root, all nested sections inherit the same value automatically.

Implementation Examples

The following patterns demonstrate how to implement the lock in a React and Tailwind environment. Each example keeps every section synchronized to one accent.

Tailwind + CSS Variable (Recommended)

Set the variable once in your root layout so it cascades through all sections:

// layout.tsx – set the accent once for the whole page
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className="bg-white"
      style={{ "--accent": "#10b981" } as React.CSSProperties}
    >
      {children}
    </html>
  );
}

Consume the variable in components that appear across multiple sections:

// components/Button.tsx – reuse the accent everywhere
"use client";

export default function Button({
  children,
  className = "",
}: { children: React.ReactNode; className?: string }) {
  return (
    <button
      className={`
        px-4 py-2 rounded
        bg-[var(--accent)] text-white
        hover:bg-[color:var(--accent)]/90
        active:scale-95
        ${className}
      `}
    >
      {children}
    </button>
  );
}

Apply the same token to secondary elements such as badges:

// components/Badge.tsx – same accent for status pills
export function Badge({ label }: { label: string }) {
  return (
    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-[var(--accent)]/10 text-[var(--accent)]">
      {label}
    </span>
  );
}

Because Button and Badge read from the global --accent property, any section that imports them automatically respects the lock.

Extending the Tailwind Theme

Alternatively, centralize the hue in tailwind.config.js:

// tailwind.config.js – add a custom “accent” token
module.exports = {
  theme: {
    extend: {
      colors: {
        accent: "#10b981", // Emerald-600
      },
    },
  },
  plugins: [],
};

You can then use standard Tailwind syntax without CSS variable brackets:

<button className="bg-accent text-white hover:bg-accent/90">
  Click me
</button>

Because the token lives in the Tailwind theme, any new component that uses bg-accent will respect the lock without extra CSS.

Auditing for Stray Colors

Run the following script after changes to catch hard-coded hex values that violate the lock:

// scripts/auditColors.ts – find hard-coded hex values
import fs from "fs";
import path from "path";

const ROOT = path.resolve(__dirname, "..");
const FILES = fs.readdirSync(ROOT, { withFileTypes: true })
  .filter((e) => e.isFile() && e.name.endsWith(".tsx"))
  .map((e) => path.join(ROOT, e.name));

const HEX_REGEX = /#([0-9a-fA-F]{3,8})\b/g;

for (const file of FILES) {
  const content = fs.readFileSync(file, "utf8");
  const matches = [...content.matchAll(HEX_REGEX)];
  if (matches.length) {
    console.log(`⚠️ ${path.basename(file)} contains hard-coded colors:`);
    matches.forEach((m) => console.log(`   ${m[0]}`));
  }
}

Execute the auditor with node scripts/auditColors.ts. Any output signals a section or component that has bypassed the Color Consistency Lock.

Summary

• The Color Consistency Lock is defined in skills/taste-skill/SKILL.md and requires one accent color for the entire page.
• The rule is manual, not automatic, so you must audit components to enforce it.
• Expose the accent globally via a CSS custom property in layout.tsx or a Tailwind theme extension in tailwind.config.js.
• Consume the token in every interactive element, including buttons, badges, and hover states.
• Run the scripts/auditColors.ts grep script before shipping to catch hard-coded hex values.

Frequently Asked Questions

Can I use a different accent color on different pages?

The lock is scoped to a single page, not the entire site. Each page root can define its own accent in layout.tsx, but within any given page every section must share that one hue. Adjacent pages are free to use different accents as long as each page remains internally consistent.

What happens if a section uses a second accent color?

Introducing a second accent within the same page violates the hard rule documented in skills/taste-skill/SKILL.md. Doing so breaks visual cohesion and causes the pre-ship audit to fail. You must replace any stray hue with the locked global token before shipping.

Does taste-skill enforce the Color Consistency Lock automatically?

No. As implemented in Leonxlnx/taste-skill, the lock is a manual workflow rather than a linter or compiler rule. You enforce it by exposing a global accent token and auditing components with scripts like scripts/auditColors.ts. There is no automatic build-time guard that prevents compilation.

Can I use neutral grays and currentColor alongside the locked accent?

Yes. The restriction applies to accent hues, not to neutral palettes. Black, white, gray scales, and semantic colors may appear freely, provided every emphasized element such as buttons, badges, and links derives its primary hue from the single locked accent.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}