Search for a command to run...
Start
தமிழ் வடிவமைப்பு முறை
A bilingual, human-centred design system for Tamil Nadu digital products. Built on Tamil UX, CX, and HCD disciplines — not borrowed from English-first frameworks.
தமிழ் UX, CX மற்றும் மனித-மையப்படுத்திய வடிவமைப்பு விதிகளில் கட்டப்பட்ட தமிழ் நாடு டிஜிட்டல் தயாரிப்புகளுக்கான இருமொழி வடிவமைப்பு முறை.
Tamil DS is not a generic component library with Tamil text dropped in. It is built from the ground up for Tamil — correct diacritic rendering, civic interaction patterns, bilingual AI chat, human-centred design guidelines, and a developer operating manual that keeps AI-generated code to the same standard.
What's included
என்ன உள்ளது
Most design systems import assumptions from English-first product design. Tamil DS is built on four disciplines specific to Tamil digital products — Tamil UX, Tamil CX, Human-Centred Design, and Tamil-context Accessibility.
தமிழ் முதல் பயனர் அனுபவம்
Tamil script has vowel markers (மாத்திரை) that extend above and below the baseline. A UX layer that ignores this clips letters, breaks line rhythm, and loses meaning. Tamil DS enforces diacritic-safe containers, correct 1.8 line-height ratios, and font-tamil class scoping — so components render correctly for Tamil readers, not just for Latin-script assumptions.
Typography foundationsதமிழ் வாடிக்கையாளர் அனுபவம்
Customer Experience (CX) is the full arc from first impression to completed task. For a Tamil citizen on a government portal, that arc includes reading a service name correctly, trusting the interface respects their language, completing a form without translation friction, and understanding the outcome. Tamil DS provides civic-grade patterns built for that arc.
TN Gov blockமனித-மையப்படுத்திய வடிவமைப்பு
HCD starts with real people, not assumptions. For Tamil products, that means field research conducted in Tamil, co-design with Tamil-speaking communities, and testing on 375px mid-range Android devices — not on a designer's MacBook. Every layout constraint and spacing decision in Tamil DS is informed by these contexts.
UX lawsஇயல்பிலேயே அணுகல்தன்மை
Accessibility in Tamil Nadu means WCAG AA contrast, screen reader support for Tamil text, font scaling for older users, contrast ratios that hold in bright outdoor light, and keyboard navigation for public kiosks. Tamil DS ships a persistent, user-controlled accessibility panel covering text size, contrast mode, spacing scale, and dyslexia-friendly fonts.
Accessibility overviewBilingual typography
English-only or bolted-on translations
Tamil-first with Noto Sans Tamil, diacritic-safe line heights, and font-tamil scoping
Civic patterns
Generic SaaS patterns repurposed
Built for scheme comparisons, document portals, Aadhaar flows, and citizen dashboards
AI integration
Separate, disconnected from DS
Kural AI, Skills Tags, and Vibe Coding manual are first-class DS features
HCD alignment
Design principles without context
Guidelines derived from Tamil public-service research and co-design constraints
Token system
Generic palette with no semantic structure
OKLCH semantic tokens with light/dark auto-swap, calibrated shadows, and 4-step radius scale
Accessibility
Checkbox compliance added at the end
Focus states, aria-labels, skip links, and a11y panel built into the default path
Installation
நிறுவல்
Add the library, tokens, fonts, and base styles to a Next.js project.
Colors
நிறங்கள்
OKLCH semantic token system — violet brand, state colors, light and dark sets.
Typography
எழுத்துரு
Inter and Noto Sans Tamil with diacritic-safe line heights and font-tamil scoping rules.
Components
கூறுகள்
50+ bilingual, accessible React components built on @base-ui/react.
Kural AI & Skills
குறள் AI மற்றும் திறன்கள்
Chat panels, prompt composers, Skills Tags, and slash-command AI patterns.
Civic Blocks
குடிமை தொகுதிகள்
Production-ready Tamil Nadu government page patterns and layouts.
AI Vibe Coding
AI இயக்க முறை
Full operating manual for AI tools working in this codebase — stack, rules, patterns.
Tamil Site Guide
தமிழ் தளம் வழிகாட்டி
End-to-end guide: lang=ta setup, Noto Sans Tamil, diacritic containers, bilingual navigation.
Built under Open Tamil Projects
Tamil DS is part of a larger movement to unify UI, UX, CX, and Human-Centred Design for all Tamil digital products — from citizen portals to AI-assisted services. Read the vision →