Brand blue
அடையாள நீலம்
Primary actions, selected states, links, focus accents, and brand proof moments.
Foundations
Color scales
நிற அளவுகோல்கள்
Tamil DS keeps a small, explainable set of scales. Each scale has 12 steps and a documented purpose so teams can pick colors without guessing.
ஒவ்வொரு நிறத் தொகுப்பும் 12 படிகளைக் கொண்டது. எந்த நிறம் எங்கு பயன்பட வேண்டும் என்பதைக் குழுக்கள் தெளிவாக அறிய இது உதவுகிறது.
Scale families
Tamil DS keeps the number of scale families small on purpose. More scales do not automatically create a better product. A smaller set with clear roles is easier to audit, theme, and explain to teams.
12 steps
Neutral
நடுநிலை
Backgrounds, foreground text, borders, cards, tables, forms, and documentation surfaces.
Warm support
மென்மையான துணை நிறம்
Charts, subtle illustrations, and optional editorial highlights. Not for primary actions.
Semantic anchors
Semantic colors are not full decorative palettes. They are anchors for product meaning. Build softer backgrounds by mixing them with the surface token, not by using strong color everywhere.
Success
வெற்றி
Warning
எச்சரிக்கை
Error
பிழை
Info
தகவல்
Token mapping
--backgroundNeutral 1Page background--cardNeutral 1 or 2Cards and raised panels--mutedNeutral 3Quiet UI backgrounds--borderNeutral 6Non-interactive borders--inputNeutral 7Control borders--primaryBrand 9Primary action surface--ringBrand 8Focus boundary--foregroundNeutral 12Primary text--muted-foregroundNeutral 11Secondary textExample usage by scale
Primary action
Use brand scale for the one action a user should notice first.
Data surface
23 pending requests
Use neutral scale for repeated surfaces and dense reading areas.
Status message
Approved and ready to download
Use semantic color for meaning, paired with explicit text.
Do and Don't
Keep scale families distinct
ஒவ்வொரு நிறக் குடும்பத்தையும் தனித்துப் பயன்படுத்தவும்
Brand, neutral, and semantic scales should each have a clear role in the interface.
அடையாள நிறம், நடுநிலை நிறம் மற்றும் அர்த்த நிறங்கள் ஒவ்வொன்றும் இடைமுகத்தில் தெளிவான பங்கைக் கொண்டிருக்க வேண்டும்.
Do not use semantic scales as decoration
அர்த்த நிறங்களை அலங்காரமாகப் பயன்படுத்த வேண்டாம்
Semantic colors lose meaning if they are used for visual variety instead of product state.
தயாரிப்பு நிலைக்குப் பதிலாக காட்சி வகைக்காக அர்த்த நிறங்களைப் பயன்படுத்தினால் அவை தங்களின் பொருளை இழக்கின்றன.