Guidelines
Design Quality Guidelines
வடிவமைப்பு தர வழிகாட்டுதல்கள்
The practical quality rules for building high-standard, production-ready pages with Tamil DS — covering page anatomy, hero standards, component usage, and a pre-ship checklist.
Tamil DS கூறுகளைப் பயன்படுத்தி உயர்தர, தெளிவான, நம்பகமான பக்கங்களை உருவாக்கும் நடைமுறை விதிகள்.
பக்க மாதிரி எடுத்துக்காட்டுகள்
Tamil DS தரமும் ஒத்திசையும் உறுதிப்படுத்த பயன்படுத்தும் முக்கிய பக்க மாதிரிகள். ஒவ்வொரு மாதிரியும் தெளிவான படிநிலை, வலுவான காட்சி முன்னிலைகள் மற்றும் தீர்மானமான மாற்றத் தாளத்தை விவரிக்கிறது.
தரக் கோட்பாடுகள்
பக்க உடற்கூறு (Page Anatomy)
பொது SaaS பக்கங்களுக்கு இந்த வரிசையைப் பயன்படுத்தவும், உள்ளடக்கம் மாற்ற தெளிவான காரணம் இருந்தால் மட்டுமே.
Logo, 4-6 links, compact secondary action and one primary CTA.
Badge, display headline, body copy, two CTAs, microcopy and a large visual anchor.
Six to eight partner, platform or proof marks in a muted band.
Three outcome-led benefits beside a dashboard or service mockup.
Three or four oversized numbers on a calm surface. No icons, no small cards.
Pricing-card structure can become scheme, service or plan comparison.
Large quote with person/team identity and image or mosaic support.
Current updates and contact paths remain visible and scannable.
High-contrast close before footer with one decisive next action.
Structured columns, source metadata, legal links and accessibility links.
முதன்மைப் பகுதி ஒப்பந்தம் (Hero Contract)
ஒரு முதன்மைப் பகுதி அங்கீகரிக்கப்படுவது: சான்று பட்டை, 56-72px தலைப்பு, சிறு உடல் உரை, முதன்மை மற்றும் இரண்டாம் CTA-கள், குறிப்புரை மற்றும் பெரிய காட்சி முன்னிலை இருக்க வேண்டும்.
கூறு விதிகள் (Component Rules)
Button
Use filled primary only for the one action the section is meant to drive.
Badge
Use for product/civic proof: New service, Live, 450+ services, Last updated.
Card
Use for repeated items only: schemes, news rows, quick links, support channels.
Input
Use in newsletter/search contexts with a visible paired action button.
Separator
Use inside cards or footer sections, never as heavy page decoration.
Icon
Use lucide icons as functional markers; avoid large decorative icon clouds.
Icon card
Use grid-cols-[44px_1fr], align to the title block, and set explicit min-height when cards sit in pairs.
தரக் கோடு மற்றும் W3C WCAG-EM (Quality Bar)
பக்கம் Tamil DS ஆவணங்களின் மீதியுள்ள தரக் கோட்டைப் பூர்த்தி செய்யவில்லை என்றால், அது முடியவில்லை. நிறத்தைக் குறைக்கவும், அளவை அதிகரிக்கவும், உண்மையான காட்சி முன்னிலையைச் சேர்க்கவும், இடைவெளியை மேம்படுத்தவும், CTA படிநிலையைத் தெளிவாக்கவும். மேலும், இறுதி ஒப்புதலுக்கு முன் W3C-ன் இணைய அணுகல்தன்மை மதிப்பீட்டு முறையின் (WCAG-EM) கீழ் இப்பக்கம் சோதிக்கப்பட வேண்டும்.