Foundations

Understanding the color scale

நிற அளவுகோலைப் புரிந்துகொள்வது

Tamil DS uses a 12-step color scale so backgrounds, borders, actions, and text states stay predictable across light mode, dark mode, and Tamil-first product screens.

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

One scale, four jobs

A good color scale is not just a row of shades. Each step has a job. Steps 1-5 create surfaces, steps 6-8 describe borders, steps 9-10 carry solid actions, and steps 11-12 carry text.

SurfacesBordersActionsText

Step-by-step use

Treat the scale as a usage contract. A step is not chosen because it looks nice in isolation; it is chosen because it creates the correct relationship between surface, content, and interaction state.

Step 1

App background

செயலி பின்னணி

Use for the quietest page canvas. It should not compete with cards, controls, or content.

--surface-1

Step 2

Subtle background

மென்மையான பின்னணி

Use for low-emphasis panels, sidebars, table stripes, and soft code areas.

--surface-2

Step 3

Element background

கூறு பின்னணி

Use for default backgrounds on neutral controls, list rows, and selectable regions.

--surface-3

Step 4

Hover background

சுட்டி மேல் நிலை

Use when a surface responds to pointer hover or keyboard focus without becoming selected.

--surface-4

Step 5

Active background

தேர்ந்த நிலை

Use for pressed, selected, or current items that still need a soft appearance.

--surface-5

Step 6

Subtle border

மென்மையான எல்லை

Use for separators, non-interactive cards, page rails, and section dividers.

--border-subtle

Step 7

Control border

கட்டுப்பாட்டு எல்லை

Use for default input, select, checkbox, and button outlines.

--border-control

Step 8

Strong border

வலுவான எல்லை

Use for hovered borders, focus boundaries, and clearer interactive affordance.

--border-strong

Step 9

Solid action

முதன்மை செயல்

Use for primary buttons, important links, selected tabs, and proof accents.

--brand

Step 10

Solid action hover

முதன்மை செயல் மேல் நிலை

Use for hover and pressed states on solid brand surfaces.

--brand-hover

Step 11

Low-emphasis text

இரண்டாம் நிலை உரை

Use for helper text, captions, labels, and secondary metadata.

--text-muted

Step 12

High-emphasis text

முதன்மை உரை

Use for body copy, headings, values, and content that must remain highly legible.

--text-strong

Practical examples

These examples show how the same scale should appear in real Tamil DS components. Notice that surfaces are quiet, borders are clear but not heavy, and the solid brand color is reserved for the main action.

Certificate request

சான்றிதழ் விண்ணப்ப நிலை

Income certificate

Submitted today. Review pending.

Steps 1-2: outer page and card surfaces.

Steps 6-8: borders around cards and controls.

Steps 9-10: primary action only.

Steps 11-12: helper text and readable content.

Mobile number

Use the number linked to your service account.

Focus state uses a visible boundary without filling the entire field.

Default border: calm enough for repeated form fields.

Focus ring: visible against white and muted surfaces.

Helper text: lower emphasis, still readable.

Do and Don't

Use one step for one job

ஒரு படிக்கு ஒரு பணி

Keep backgrounds, borders, actions, and text on their assigned ranges. This makes every component predictable.

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

Do not use action color everywhere

செயல் நிறத்தை எல்லா இடத்திலும் பயன்படுத்த வேண்டாம்

When every surface is strong, users cannot identify the primary action or important state.

ஒவ்வொரு பின்னணியும் அடர்த்தியாக இருக்கும்போது, பயனர்களால் முதன்மைச் செயலையோ அல்லது முக்கியமான நிலையையோ அடையாளம் காண முடியாது.

Rules for Tamil DS

Use steps 1-2 for page-level backgrounds and quiet panels.
Use steps 3-5 only for soft component states, not for primary actions.
Use steps 6-8 for borders so interactive controls remain visible in high-density pages.
Use step 9 for primary action surfaces and step 10 for their hover or pressed state.
Use steps 11-12 for text. Tamil text should never rely on low contrast to create hierarchy.

Implementation pattern

Component code should use semantic tokens instead of raw scale values. This keeps future color changes local to the theme layer.

/* Good: component uses purpose-based tokens */
.tds-card {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.tds-primary-action {
  background: var(--primary);
  color: var(--primary-foreground);
}

Command Palette