# How to Apply the Color Consistency Lock Across Multiple Sections in taste-skill > Learn to apply Color Consistency Lock across multiple taste-skill sections. Global CSS properties and Tailwind tokens ensure uniform color. Audit your codebase for perfect harmonization. - Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill) - Tags: how-to-guide - Published: 2026-06-05 --- **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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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 `` 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`](https://github.com/Leonxlnx/taste-skill/blob/main/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: ```tsx // layout.tsx – set the accent once for the whole page export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Consume the variable in components that appear across multiple sections: ```tsx // components/Button.tsx – reuse the accent everywhere "use client"; export default function Button({ children, className = "", }: { children: React.ReactNode; className?: string }) { return ( ); } ``` Apply the same token to secondary elements such as badges: ```tsx // components/Badge.tsx – same accent for status pills export function Badge({ label }: { label: string }) { return ( {label} ); } ``` 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`](https://github.com/Leonxlnx/taste-skill/blob/main/tailwind.config.js): ```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: ```tsx ``` 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: ```ts // 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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/layout.tsx) or a Tailwind theme extension in [`tailwind.config.js`](https://github.com/Leonxlnx/taste-skill/blob/main/tailwind.config.js). - **Consume** the token in every interactive element, including buttons, badges, and hover states. - **Run** the [`scripts/auditColors.ts`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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.