Spacing Scale Generator — Design System Tool

Inconsistent spacing UI का सबसे common problem है। हमारा Spacing Scale Generator mathematical harmony के basis पर spacing tokens create करता है।

Popular Spacing Systems

• 4px base (Tailwind): 4, 8, 12, 16, 20, 24, 32, 40, 48...
• 8px base (Material): 8, 16, 24, 32, 40, 48...
• Fibonacci: 1, 2, 3, 5, 8, 13, 21, 34...

Touch Targets

Mobile में buttons और interactive elements minimum 44×44px (Apple) या 48×48px (Material) होने चाहिए। Spacing scale use करके consistent touch areas बनाएं।

Tailwind Integration

Generated scale directly tailwind.config.js में paste करें या CSS custom properties के रूप में use करें।

Generate करें: Spacing Scale Generator

अक्सर पूछे जाने वाले प्रश्न

4px vs 8px base — कौन choose करें?

Dense UIs (dashboards, data tables) के लिए 4px; consumer apps (mobile, landing pages) के लिए 8px।

Spacing scale typography scale से same होनी चाहिए?

Related हो तो better है लेकिन mandatory नहीं। दोनों consistent होनी चाहिए within themselves।

Design token में spacing कैसे organize करें?

--space-1 (4px), --space-2 (8px) naming convention use करें जो Tailwind के p-1, p-2 से align होती है।