Foundations

Custom palette

தனிப்பயன் நிறத் தொகுப்பு

Create a custom palette only when the product needs a distinct identity. The palette must still follow Tamil DS contrast, state, and token rules.

தனிப்பட்ட அடையாளம் தேவைப்படும் போது மட்டுமே புதிய நிறத் தொகுப்பை உருவாக்கவும். அணுகல், நிலை, டோக்கன் விதிகள் மாறக்கூடாது.

Start from the Tamil DS scale

The safest custom palette starts by preserving Tamil DS structure: 12 steps, quiet surfaces, clear borders, strong action color, and readable text colors. Change the hue with care; do not change the jobs of the steps.

Current Tamil DS brand scale

தற்போதைய அடையாள நிற அளவுகோல்

Reference structure

Custom palette checklist

Start with one base hue and build a full 12-step scale.

Keep steps 1-5 quiet enough for surfaces and selected states.

Reserve step 9 for the solid action color.

Check step 9 with both white and dark foreground text before choosing the foreground token.

Check Tamil body text on all tinted backgrounds because Tamil glyphs need clean edge contrast.

Define semantic tokens after the scale is approved, not while experimenting.

Example: approve a custom action color

A custom action color must work in actual UI, not just as a beautiful swatch. Test it in a button, a focus ring, a selected tab, and a bilingual content block before approving it.

SelectedDraft

New service theme

புதிய சேவை நிறத் தீம் சோதனை

Approval checks

Button text contrast passes.
Focus ring is visible.
Tamil helper text remains readable.
Semantic colors still stand apart.

Token template

Every approved custom palette must map back to semantic CSS variables. Component code should depend on purpose, not raw color values.

:root {
  --custom-1: oklch(...);
  --custom-2: oklch(...);
  --custom-3: oklch(...);
  --custom-4: oklch(...);
  --custom-5: oklch(...);
  --custom-6: oklch(...);
  --custom-7: oklch(...);
  --custom-8: oklch(...);
  --custom-9: oklch(...);
  --custom-10: oklch(...);
  --custom-11: oklch(...);
  --custom-12: oklch(...);

  --primary: var(--custom-9);
  --primary-hover: var(--custom-10);
  --ring: var(--custom-8);
}

Approval standard

Primary text must remain readable on background, card, and muted surfaces.
Primary action text must pass contrast in light and dark themes.
Focus rings must be visible against white, muted, card, and dark surfaces.
Tamil labels and helper text must not become faint on tinted backgrounds.
Semantic colors must remain visually distinct from the brand action color.

Do and Don't

Change hue, preserve structure

நிறத் தன்மையை மாற்றலாம்; அமைப்பை காக்கவும்

A custom palette may feel different, but it must still provide surfaces, borders, actions, and text steps.

தனிப்பயன் நிறத் தொகுப்பு வித்தியாசமாகத் தோன்றலாம், ஆனால் அது இன்னும் பின்னணிகள், எல்லைகள், செயல்கள் மற்றும் உரைக்கான படிகளை வழங்க வேண்டும்.

Do not approve one swatch alone

ஒரே நிற மாதிரியை மட்டும் ஒப்புதல் அளிக்க வேண்டாம்

One attractive color is not a palette. Without states and text steps, components will break quickly.

ஒரு கவர்ச்சிகரமான நிறம் மட்டும் நிறத் தொகுப்பாகாது. வெவ்வேறு நிலைகள் மற்றும் உரை படிகள் இல்லாமல் இருந்தால், கூறுகள் விரைவாக உடைந்துவிடும்.