Foundations

Colors

நிறங்கள்

Tamil DS uses a semantic token system built on OKLCH color space. Every color is designed for accessibility, dark mode, and high-contrast adaptation.

OKLCH வண்ண இடத்தில் கட்டப்பட்ட அர்த்தமுள்ள சொல் முறை.

Brand palette

The Tamil DS brand color is a restrained violet accent for decisive actions, focus states, links, and proof moments. Neutral surfaces carry the interface; the brand color is used deliberately so pages never become a color wash.

Brand 50

#F5F0FF

oklch(0.97 0.025 285)

Brand 100

#E9DDFF

oklch(0.93 0.055 285)

Brand 200

#D2BDFF

oklch(0.86 0.09 285)

Brand 300

#B497F4

oklch(0.76 0.13 285)

Brand 400

#956FDA

oklch(0.66 0.16 285)

Brand 500

#7449C2

oklch(0.56 0.18 285)

Brand 600

#633BA8

oklch(0.50 0.17 285)

Brand 700

#512E89

oklch(0.42 0.15 285)

Brand 800

#3D2367

oklch(0.34 0.12 285)

Brand 900

#281842

oklch(0.24 0.08 285)

Semantic tokens

Use semantic tokens, never raw hex or OKLCH values, in your component code. This ensures correct dark mode and high-contrast adaptation automatically.

--backgroundToken

Page background

Light

oklch(0.99 0 0)

Dark

oklch(0.10 0 0)

--foregroundToken

Primary text

Light

oklch(0.11 0 0)

Dark

oklch(0.97 0 0)

--cardToken

Card surfaces

Light

oklch(1 0 0)

Dark

oklch(0.13 0 0)

--primaryToken

Primary actions

Light

oklch(0.56 0.18 285)

Dark

oklch(0.70 0.16 285)

--secondaryToken

Secondary actions

Light

oklch(0.97 0 0)

Dark

oklch(0.18 0 0)

--mutedToken

Muted backgrounds

Light

oklch(0.965 0 0)

Dark

oklch(0.18 0 0)

--muted-foregroundToken

Muted text

Light

oklch(0.50 0 0)

Dark

oklch(0.60 0 0)

--borderToken

Borders, dividers

Light

oklch(0.88 0 0)

Dark

oklch(1 0 0 / 10%)

--brandToken

Brand primary: restrained violet accent

Light

oklch(0.56 0.18 285)

Dark

oklch(0.70 0.16 285)

--destructiveToken

Error, delete actions

Light

oklch(0.577 0.245 27)

Dark

oklch(0.704 0.191 22)

--successToken

Success states

Light

oklch(0.60 0.17 145)

Dark

oklch(0.70 0.17 145)

--warningToken

Warning states

Light

oklch(0.72 0.18 75)

Dark

oklch(0.80 0.16 75)

--infoToken

Informational states

Light

oklch(0.58 0.18 248)

Dark

oklch(0.68 0.16 248)

Token

Light

Dark

Usage

--background

oklch(0.99 0 0)

Page background

--foreground

oklch(0.11 0 0)

Primary text

--card

oklch(1 0 0)

Card surfaces

--primary

oklch(0.56 0.18 285)

Primary actions

--secondary

oklch(0.97 0 0)

Secondary actions

--muted

oklch(0.965 0 0)

Muted backgrounds

--muted-foreground

oklch(0.50 0 0)

Muted text

--border

oklch(0.88 0 0)

Borders, dividers

--brand

oklch(0.56 0.18 285)

Brand primary: restrained violet accent

--destructive

oklch(0.577 0.245 27)

Error, delete actions

--success

oklch(0.60 0.17 145)

Success states

--warning

oklch(0.72 0.18 75)

Warning states

--info

oklch(0.58 0.18 248)

Informational states

Status colours

Reserved semantic colours for system feedback. Do not use these for decorative or brand purposes.

Success / வெற்றி

Warning / எச்சரிக்கை

Destructive / அழிவு

Info / தகவல்

Accessibility contrast ratios

All text and interactive foreground/background combinations in the default theme meet or exceed WCAG 2.1 AA. High-contrast mode targets WCAG AAA.

Sample text

Body text on background

19.1:1AAA

Sample text

White on brand 500

5.3:1AA

Sample text

Muted text on background

4.8:1AA

Usage guidance

Always use CSS custom properties (var(--brand)), never raw values in component code.
Use --brand only for primary interactive elements: buttons, links, focus rings.
Status colours (--success, --warning, --destructive) are reserved for system feedback.
Check contrast before introducing any new colour combination using the built-in accessibility panel.

Command Palette

Brand palette

Semantic tokens

Status colours

Accessibility contrast ratios

Usage guidance