Foundations
Spacing
இடைவெளி
Tamil DS uses a 4px base grid via Tailwind's default spacing scale. Consistent spacing creates visual rhythm and reduces cognitive load.
4px அடிப்படை கட்டகம் வழியாக Tailwind இன் இயல்புநிலை இடைவெளி அளவை பயன்படுத்துகிறோம்.
Spacing scale
The scale maps Tailwind token numbers to pixel values based on a 4px base unit. Use semantic names in code — never hard-code pixel values.
00px0rem0.52px0.125rem14px0.25rem1.56px0.375rem28px0.5rem2.510px0.625rem312px0.75rem3.514px0.875rem416px1rem520px1.25rem624px1.5rem728px1.75rem832px2rem936px2.25rem1040px2.5rem1248px3rem1456px3.5rem1664px4rem2080px5rem2496px6remSemantic spacing
For component-level spacing, prefer semantic names from the table above over arbitrary values:
- Intra-element (icon ↔ label gap):
gap-2(8px) - Form fields:
gap-3orgap-4(12–16px) - Card padding:
p-5orp-6(20–24px) - Section spacing:
py-16topy-24(64–96px) - Page gutter:
px-4 sm:px-6 lg:px-8
Tamil typography note
Tamil script characters are taller than Latin equivalents due to vowel markers (மாத்திரை). Always use leading-relaxed or leading-loose for Tamil paragraphs, and increase block spacing by one step when Tamil and English text appear adjacent.
Component spacing reference
Quick-reference table mapping common UI contexts to their preferred Tailwind tokens. These values are enforced across Tamil DS primitives — deviate only with a documented reason.
| Context | Token | px | Usage |
|---|---|---|---|
| Icon ↔ label gap | gap-2 | 8px | Buttons, nav items, list items |
| Form field gap | gap-3 / gap-4 | 12–16px | Input groups, form rows |
| Card padding | p-5 or p-6 | 20–24px | All card surfaces |
| Card gap | gap-4 or gap-6 | 16–24px | Card grids |
| Section padding | py-16 sm:py-20 | 64–80px | Landing sections |
| Docs content gap | space-y-6 | 24px | Between prose blocks |
| Sidebar nav item | px-3 py-2 | 12–8px | Nav links |
| Modal padding | p-6 | 24px | Dialog, Sheet content |
Tamil spacing rules
These rules encode typographic knowledge specific to Tamil script. Apply them whenever Tamil text is the primary language of a surface.
Tamil labels need 25% more vertical breathing room than Latin.
Use py-3 not py-2 for Tamil-primary buttons. Vowel markers (மாத்திரை) extend above and below the baseline.
Increase list item gap when Tamil text wraps.
Bump gap-3 → gap-4 when Tamil list text wraps to 2+ lines. Tight rows become unreadable at smaller viewports.
Card titles with Tamil text need extra icon-to-title margin.
Use mt-4 not mt-3 below the icon for diacritic clearance — the top vowel marker (ொ, ோ) clips without it.
Never use leading-none or leading-tight with Tamil.
Minimum leading-relaxed (1.625) for all Tamil body text. leading-tight clips ascending vowel markers and makes multi-line text illegible.
Negative space principle
Tamil DS deliberately leaves more white space around content than a comparable Latin-only design system would. Tamil script is visually denser than Latin — each character carries more visual weight, more vertical extent, and more intrinsic complexity. If the surrounding space does not compensate, pages feel cluttered and hard to scan.
This is not padding for its own sake. It is a deliberate typographic decision: generous negative space gives the script room to breathe, helps the eye separate runs of text, and reduces reading fatigue — particularly important for government and public-service interfaces where users may be less frequent readers of digitised Tamil.