Command Palette

Search for a command to run...

Foundations

Elevation

உயரம்

Tamil DS uses a restrained 6-level shadow scale. Shadows communicate layering and focus, never decoration.

அடுக்கு, கவனம், மேலடுக்கு ஆகியவற்றை தெளிவாக காட்டும் 6-நிலை நிழல் அளவு.

Shadow scale

All shadows use oklch transparency and are adjusted for dark mode — dark mode shadows are more opaque to compensate for the lack of bright surface contrast.

shadow-xs--shadow-xs

Subtle lift — inline tags, chips

நுட்பமான உயரம்

shadow-sm--shadow-sm

Cards, input fields

அட்டைகள், உள்ளீடுகள்

shadow-md--shadow-md

Dropdown menus, popovers

கீழ்தொங்கு பட்டிகள்

shadow-lg--shadow-lg

Modals, dialogs

உரையாடல் பெட்டிகள்

shadow-xl--shadow-xl

Sheets, sidebars

தாள்கள், பக்கப்பட்டிகள்

shadow-2xl--shadow-2xl

Full-screen overlays

முழுத்திரை மேலடுக்குகள்

Surface system

Tamil DS defines two surface utility classes that combine background, border, radius, and shadow:

surface

இயல்பு மேற்பரப்பு

bg-card border border-border rounded-md shadow-sm

surface-elevated

உயர்ந்த மேற்பரப்பு

bg-card border border-border rounded-md shadow-md

Usage rules

  • Never skip shadow levels — go xs → sm → md, not xs → lg.
  • Overlays (modals, sheets) always use shadow-lg or higher.
  • Inline elements (badges, tags) use shadow-xs at most.
  • Interactive cards should increase one shadow level on hover.
  • Use CSS variable syntax (var(--shadow-sm)) in custom styles — never raw values.