spatial-design.md - AiToEarn

spatial-design.md

1	# Spatial Design
2
3	## Spacing Systems
4
5	### Use 4pt Base, Not 8pt
6
7	8pt systems are too coarse; you'll frequently need 12px (between 8 and 16). Use 4pt for granularity: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
8
9	### Name Tokens Semantically
10
11	Name by relationship (`--space-sm`, `--space-lg`), not value (`--spacing-8`). Use `gap` instead of margins for sibling spacing; it eliminates margin collapse and cleanup hacks.
12
13	## Grid Systems
14
15	### The Self-Adjusting Grid
16
17	Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. Columns are at least 280px, as many as fit per row, leftovers stretch. For complex layouts, use named grid areas (`grid-template-areas`) and redefine them at breakpoints.
18
19	## Visual Hierarchy
20
21	### The Squint Test
22
23	Blur your eyes (or screenshot and blur). Can you still identify:
24	- The most important element?
25	- The second most important?
26	- Clear groupings?
27
28	If everything looks the same weight blurred, you have a hierarchy problem.
29
30	### Hierarchy Through Multiple Dimensions
31
32	Don't rely on size alone. Combine:
33
34	\| Tool \| Strong Hierarchy \| Weak Hierarchy \|
35	\|------\|------------------\|----------------\|
36	\| Size \| 3:1 ratio or more \| <2:1 ratio \|
37	\| Weight \| Bold vs Regular \| Medium vs Regular \|
38	\| Color \| High contrast \| Similar tones \|
39	\| Position \| Top/left (primary) \| Bottom/right \|
40	\| Space \| Surrounded by white space \| Crowded \|
41
42	The best hierarchy uses 2-3 dimensions at once: A heading that's larger, bolder, AND has more space above it.
43
44	### Cards Are Not Required
45
46	Cards are overused. Spacing and alignment create visual grouping naturally. Use cards only when content is truly distinct and actionable, items need visual comparison in a grid, or content needs clear interaction boundaries. Never nest cards inside cards. Use spacing, typography, and subtle dividers for hierarchy within a card.
47
48	## Container Queries
49
50	Viewport queries are for page layouts. Container queries are for components:
51
52	```css
53	.card-container {
54	container-type: inline-size;
55	}
56
57	.card {
58	display: grid;
59	gap: var(--space-md);
60	}
61
62	/* Card layout changes based on its container, not viewport */
63	@container (min-width: 400px) {
64	.card {
65	grid-template-columns: 120px 1fr;
66	}
67	}
68	```
69
70	Why this matters: A card in a narrow sidebar stays compact, while the same card in a main content area expands automatically, without viewport hacks.
71
72	## Optical Adjustments
73
74	Text at `margin-left: 0` looks indented due to letterform whitespace; use negative margin (`-0.05em`) to optically align. Geometrically centered icons often look off-center; play icons need to shift right, arrows shift toward their direction.
75
76	### Touch Targets vs Visual Size
77
78	Buttons can look small but need large touch targets (44px minimum). Use padding or pseudo-elements:
79
80	```css
81	.icon-button {
82	width: 24px; /* Visual size */
83	height: 24px;
84	position: relative;
85	}
86
87	.icon-button::before {
88	content: '';
89	position: absolute;
90	inset: -10px; /* Expand tap target to 44px */
91	}
92	```
93
94	## Depth & Elevation
95
96	Create semantic z-index scales (dropdown → sticky → modal-backdrop → modal → toast → tooltip) instead of arbitrary numbers. For shadows, create a consistent elevation scale (sm → md → lg → xl). Key insight: Shadows should be subtle. If you can clearly see it, it's probably too strong.
97
98	---
99
100	Avoid: Arbitrary spacing values outside your scale. Making all spacing equal (variety creates hierarchy). Creating hierarchy through size alone - combine size, weight, color, and space.
101

101 lines MARKDOWN