Accepted Solutiontoken palettes

Creating custom brand accents with 2-Tier Token Architecture

Community Pioneer

•Feb 18, 2026

We want to add a custom corporate brand color (e.g. electric cyan) without modifying `packages/ui` core code. How do we wire custom foundation scales to semantic `--accent` tokens safely?

Reproduction / Context

:root {
  /* Map custom brand scale to semantic tokens */
  --accent: var(--brand-electric-500);
  --accent-fg: #ffffff;
  --accent-subtle: var(--brand-electric-100);
}

940 total views

1 Community Answers

Avinash Bussa@avinash

Core MaintainerVerified CreatorDesign QA Expert

Verified Solution

The best approach is using `@shavin/ui` ThemeProvider's custom accent mapping. You define your palette in CSS under custom class names, and pass `accentColor="custom"` or use CSS variables scoped to your provider root.

Feb 18

Post an Answer(Active: @avinash)