Search for a command to run...
A bilingual design system for Tamil Nadu digital products — grounded in Tamil UX, human-centred design, and accessible-by-default components. Includes Kural AI chat, interactive Skills Tags, and a full developer operating manual.
.png)
Why Tamil DS
Every feature exists because English-first design systems leave Tamil products with broken typography, inaccessible controls, and no civic patterns. Tamil DS closes those gaps.
.png)
இருமொழி எழுத்துரு முறை
Inter for Latin, Noto Sans Tamil for Tamil — with CSS-scoped line-height interceptors that prevent vowel marker (மாத்திரை) clipping. font-tamil class applies safe 1.8 line-height only to text content nodes, never to interactive controls.
OKLCH செமாண்டிக் டோக்கன் முறை
Violet brand accent, four clear radius steps (6 / 8 / 12 / 16 px), calibrated shadow scale, and full light + dark token sets in globals.css. All via Tailwind v4 CSS-first @theme — no tailwind.config.js.
குறள் AI மற்றும் திறன் குறிச்சொற்கள்
Bilingual, schema-driven AI chat with slash-command skill tags (/வழிகாட்டி, /சுருக்கம், /தகுதி). Inline prompt composer with Plus, Settings2, Mic icons. Floating and static chat variants — both WCAG-compliant.
இயல்பிலேயே அணுகல்தன்மை
WCAG AA contrast, skip links, focus-visible rings, keyboard-reachable overlays, aria-labels in Tamil, screen-reader-safe heading hierarchy, and a persistent user-controlled a11y panel (text size, contrast, spacing, dyslexia font).
AI Vibe Coding இயக்க வழிமுறை
Full AI coding instructions: exact package versions, Tailwind v4 rules, @base-ui/react patterns, font-tamil scoping rules, theming foundation, file map and verification commands. Share the URL with any AI tool before it touches the codebase.
மனித-மையப்படுத்திய குடிமை வடிவங்கள்
Production blocks for Tamil Nadu workflows: scheme comparisons, document portals, service dashboards, Aadhaar-style login, citizen help centres. Built from HCD research constraints — 375px mobile-first, mid-range Android, outdoor contrast.
தமிழ் தள கட்டுமான வழிகாட்டி
End-to-end guide: HTML lang=ta configuration, Next.js 16 + Noto Sans Tamil font loading, Tailwind v4 CSS-first setup, diacritic-safe container rules, bilingual navigation templates, and a deployment checklist.
சொந்த, நகல் எடுக்கக்கூடிய மூலக்குறியீடு
Local React primitives built on @base-ui/react 1.4.1 — not locked to a third-party library. Inspect, copy, and adapt any component. MIT licensed. Add via npx shadcn@latest add <component>.
Design disciplines
Most design systems borrow English-first assumptions. Tamil DS is built on a different set of disciplines — ones that start with how Tamil is read, how Tamil citizens interact with services, and how to design from their context outward. These four disciplines define the quality bar.
Tamil UX
தமிழ் பயனர் அனுபவம்
Tamil script has vowel markers (மாத்திரை) that extend above and below the baseline. A UX layer that ignores this clips letters and breaks line rhythm. Tamil DS enforces diacritic-safe containers, 1.8 line-height ratios, and Noto Sans Tamil integration so the script renders the way it was meant to be read.
Tamil CX
தமிழ் வாடிக்கையாளர் அனுபவம்
Customer Experience (CX) is the full arc from first impression to task completion. For a Tamil citizen, that includes reading service names easily and completing forms without translation friction. Tamil DS provides civic-grade patterns—like official tone and bilingual status flows—built for that complete arc.
Human-Centred Design
மனித-மையப்படுத்திய வடிவமைப்பு
Human-Centred Design (HCD) starts with real people, not assumptions. For Tamil products, that means field research in Tamil, co-design sessions with local communities, and testing layouts on mid-range Android devices. Tamil DS is built around these real-world constraints and public-service contexts.
Accessibility
அணுகல்தன்மை
Accessibility in a Tamil context goes beyond WCAG guidelines. It means screen reader support for Tamil text, font scaling for older users, and contrast ratios that hold up in bright outdoor light. Tamil DS ships native accessibility controls—like text size and contrast mode—scoped directly to CSS tokens.
These disciplines are baked into the system — not added on top.
Every component, every token, and every guideline page in Tamil DS is written against this quality bar. The same bar applies to the AI vibe coding manual, so AI-generated code meets it too.
Tamil DS vs. Generic Systems
Generic design systems weren't designed with Tamil script, civic UX, or government colour trust in mind. Tamil DS was.
Concern
Generic systems
Tamil DS
Tamil script rendering
Wrong font, incorrect line-height — Tamil māttirais clip or overlap
Noto Sans Tamil, correct 1.8 line-height, tested at every size
Tamil script rendering
Wrong font, incorrect line-height — Tamil māttirais clip or overlap
Noto Sans Tamil, correct 1.8 line-height, tested at every size
Bilingual layouts
English-only — Tamil text breaks grid assumptions
Every component has Tamil + English usage examples
Bilingual layouts
English-only — Tamil text breaks grid assumptions
Every component has Tamil + English usage examples
Government colour trust
Generic brand palettes — not suited to civic contexts
Semantic tokens contrast-tested for public-service legibility
Government colour trust
Generic brand palettes — not suited to civic contexts
Semantic tokens contrast-tested for public-service legibility
Real service context
Isolated UI demos with no domain knowledge
Scheme forms, Aadhaar flows, certificate trackers built in
Real service context
Isolated UI demos with no domain knowledge
Scheme forms, Aadhaar flows, certificate trackers built in
Accessibility defaults
Bolted on later, or documented but not enforced
WCAG AA from default state — focus rings, ARIA, reduced-motion
Accessibility defaults
Bolted on later, or documented but not enforced
WCAG AA from default state — focus rings, ARIA, reduced-motion
Source ownership
Black-box npm package — hard to fork or customise
Full source in your repo — copy, adapt, and own it
Source ownership
Black-box npm package — hard to fork or customise
Full source in your repo — copy, adapt, and own it
Blocks & Case Studies
Full sections built for real Tamil Nadu government workflows. Check out the TN Gov Case Study and copy blocks directly into your project.
ஆதார் / OTP நுழைவு
திட்ட ஒப்பீடு
சான்றிதழ் விண்ணப்பம்
விண்ணப்ப நிலை
இ-சேவை மைய தேடல்
குடிமக்கள் டாஷ்போர்டு
Foundations
Components
Inputs, buttons, progress, and switches shown in workflows — not isolated decoration.