Spacing

Acua uses an 8px grid system with 4px as the base unit.

Spacing Scale

Tailwind Class	Value	Usage
0	0px	Reset
px	1px	Border offset
0.5	2px	Minimal gap
1	4px	Icon-text gap
1.5	6px	Button padding (vertical)
2	8px	Base gap, small gaps
2.5	10px	Checkbox/radio
3	12px	Related elements
3.5	14px	Input field padding
4	16px	Form field gap
5	20px	Medium gap
6	24px	Card padding
7	28px	Large gap
8	32px	Section gap
10	40px	Page section gap
12	48px	Large page section gap
16	64px	Hero section

8px Grid System Benefits

Creates visual consistency and rhythm
Renders as whole pixels across devices
Easy communication between designers and engineers
Works well with design tools like Figma

Spacing Principles

Proximity Principle

Place related elements closer, unrelated elements farther apart.

Consistent Spacing Hierarchy

Level	Gap	Usage
Tight	2-4px	Icon-text, inline badges
Default	8-12px	Within component elements
Relaxed	16-24px	Between fields, within sections
Loose	32-48px	Between sections, cards

Component Spacing Reference

Button

.button-sm { padding: 4px 12px; gap: 4px; }     /* py-1 px-3 */
.button-default { padding: 6px 16px; gap: 8px; } /* py-1.5 px-4 */
.button-lg { padding: 8px 24px; gap: 8px; }     /* py-2 px-6 */
.button-icon { padding: 8px; }                  /* p-2 */

Input

.input { padding: 8px 12px; height: 36px; }    /* py-2 px-3, h-9 */
.input-sm { padding: 4px 8px; height: 32px; }  /* py-1 px-2, h-8 */

Card

.card { padding: 24px; }                        /* p-6 */
.card-header { padding: 24px 24px 0; }         /* pt-6 px-6 */
.card-content { padding: 0 24px; }             /* px-6 */
.card-footer { padding: 0 24px 24px; }         /* pb-6 px-6 */

Dialog

.dialog-content { padding: 24px; max-width: 512px; }  /* p-6 max-w-lg */
.dialog-header { margin-bottom: 16px; }               /* mb-4 */
.dialog-footer { margin-top: 24px; gap: 8px; }       /* mt-6 gap-2 */

Table

.table-head { padding: 12px 16px; }            /* py-3 px-4 */
.table-cell { padding: 12px 16px; }            /* py-3 px-4 */
.table-cell-compact { padding: 8px 12px; }     /* py-2 px-3 */

Responsive Spacing

Breakpoint	Page Padding	Section Gap	Card Padding
sm (640px+)	p-4 (16px)	gap-4 (16px)	p-4 (16px)
md (768px+)	p-6 (24px)	gap-6 (24px)	p-6 (24px)
lg (1024px+)	p-8 (32px)	gap-8 (32px)	p-6 (24px)
xl (1280px+)	p-12 (48px)	gap-8 (32px)	p-6 (24px)