1// Layout command demo - shows monotonous equal spacing becoming rhythmic and intentional
2export default {
3 id: 'layout',
4 caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
5
6 before: `
7 <div style="width: 100%; max-width: 240px; padding: 16px;">
8 <div style="text-align: center; margin-bottom: 16px;">
9 <div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
10 </div>
11 <div style="display: flex; flex-direction: column; gap: 16px;">
12 <div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
13 <div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
14 <div style="font-size: 13px; color: #333;">Alice Chen</div>
15 <div style="font-size: 12px; color: #888;">Designer</div>
16 </div>
17 <div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
18 <div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
19 <div style="font-size: 13px; color: #333;">Bob Park</div>
20 <div style="font-size: 12px; color: #888;">Engineer</div>
21 </div>
22 </div>
23 </div>
24 `,
25
26 after: `
27 <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
28 <div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
29 <div style="display: flex; flex-direction: column; gap: 6px;">
30 <div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
31 <div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
32 <div style="flex: 1;">
33 <div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
34 <div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
35 </div>
36 </div>
37 <div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
38 <div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
39 <div style="flex: 1;">
40 <div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
41 <div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
42 </div>
43 </div>
44 </div>
45 </div>
46 `
47};