1// Normalize command demo - shows inconsistent styles becoming systematic
 2export default {
 3  id: 'normalize',
 4  caption: 'Inconsistent styles → Systematic design tokens',
 5  
 6  before: `
 7    <div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
 8      <div style="padding: 12px 16px; background: #f0f0f0; border-radius: 6px;">
 9        <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Card One</div>
10        <div style="font-size: 13px; color: #888;">Some description text here</div>
11      </div>
12      <div style="padding: 18px 12px; background: #e8e8e8; border-radius: 12px;">
13        <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">Card Two</div>
14        <div style="font-size: 14px; color: #666;">Different spacing and styles</div>
15      </div>
16      <div style="padding: 10px 20px; background: #f5f5f5; border-radius: 4px;">
17        <div style="font-size: 15px; font-weight: 700; margin-bottom: 2px;">Card Three</div>
18        <div style="font-size: 12px; color: #999;">Yet another variation</div>
19      </div>
20    </div>
21  `,
22  
23  after: `
24    <div style="display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; max-width: 260px;">
25      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
26        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card One</div>
27        <div style="font-size: 0.8125rem; color: var(--color-ash);">Consistent description text</div>
28      </div>
29      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
30        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Two</div>
31        <div style="font-size: 0.8125rem; color: var(--color-ash);">Same spacing and styles</div>
32      </div>
33      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
34        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Three</div>
35        <div style="font-size: 0.8125rem; color: var(--color-ash);">Unified design system</div>
36      </div>
37    </div>
38  `
39};
40
41
42