Foundations

Composing a palette

நிறத் தொகுப்பை அமைத்தல்

A Tamil DS palette combines one clear brand scale, a calm neutral scale, and a small set of semantic scales. This keeps product screens expressive without becoming noisy.

ஒரு அடையாள நிறம், ஒரு நடுநிலை நிறத் தொகுப்பு, சில அர்த்த நிறங்கள் ஆகியவற்றை சமநிலையாக இணைப்பதே நல்ல நிற அமைப்பு.

Palette recipe

Compose a palette in layers. Start with the neutral reading experience, add one brand scale for action, then add semantic colors only for product meaning. This order prevents the interface from becoming decorative before it becomes usable.

Brand scale

அடையாள நிறம்

Carries primary actions, selected states, proof accents, and recognizable Tamil DS identity.

Neutral scale

நடுநிலை நிறம்

Carries page surfaces, text, cards, dividers, inputs, and dense documentation layouts.

Semantic scales

அர்த்த நிறங்கள்

Communicate success, warning, error, and information without depending only on color.

Brand and neutral pairing

Tamil DS uses a restrained violet action scale with a low-saturation neutral scale. The pairing is deliberate: public-service products need clear actions, quiet reading surfaces, and enough contrast for bilingual text.

Tamil DS brand

தமிழ் DS செயல் நிறம்

Action scale

Neutral surface

வாசிப்பதற்கு அமைதியான பின்னணி

Surface scale

Semantic colors

Use semantic colors sparingly and pair them with labels, icons, or text. A user should understand the state even if color perception is limited.

Success

வெற்றி

Positive completion, saved state, approved request

Warning

எச்சரிக்கை

Pending risk, missing information, time-sensitive action

Error

பிழை

Invalid input, destructive action, failed request

Info

தகவல்

Guidance, neutral notice, contextual help

Example: public-service card

This card uses all three layers: neutral surfaces for structure, the brand scale for the main action, and a semantic color for the status. The status is also written in text, so meaning is not color-only.

Pending review

Community certificate

சமூகச் சான்றிதழ் விண்ணப்பம்

The request is waiting for officer verification. The user can track progress or upload missing documents.

Palette layers used

Neutral: page, card, border, secondary button
Brand: primary button and focus accents
Semantic: pending status badge

Do not over-compose

Do not use a saturated neutral background behind many colored badges.
Do not introduce a second action color unless it has a permanent semantic meaning.
Do not use warning, error, or success colors for decoration.
Do not place Tamil body copy on decorative tints without checking contrast.

Do and Don't

Use brand color as the action signal

அடையாள நிறத்தை செயல் குறியாகப் பயன்படுத்தவும்

A restrained palette makes the primary action easy to find and keeps content calm.

கட்டுப்பாடான நிறத் தொகுப்பு முதன்மைச் செயலை எளிதாகக் கண்டறிய உதவுகிறது மற்றும் உள்ளடக்கத்தை அமைதியாக வைத்திருக்கிறது.

Do not mix multiple action colors

பல செயல் நிறங்களை கலக்க வேண்டாம்

Multiple competing action colors create uncertainty. Users should not guess which action matters most.

ஒன்றோடொன்று போட்டியிடும் பல செயல் நிறங்கள் குழப்பத்தை உண்டாக்குகின்றன. எந்தச் செயல் முக்கியமானது என்று பயனர்கள் யூகிக்கக் கூடாது.

Optional warm support scale

Use a warm support scale only for charts, illustrations, or low-emphasis highlights. It should not compete with the primary action color.

Copy-ready token plan

/* Palette composition order */
--background: neutral step 1;
--card: neutral step 1 or 2;
--muted: neutral step 3;
--border: neutral step 6;
--input: neutral step 7;
--primary: brand step 9;
--primary-hover: brand step 10;
--success: success step 9;
--warning: warning step 9;
--destructive: error step 9;
--foreground: neutral step 12;
--muted-foreground: neutral step 11;

Command Palette