1// Typeset command demo - shows flat, hierarchyless text becoming intentional typography
 2export default {
 3  id: 'typeset',
 4  caption: 'No type hierarchy → Clear, intentional typography',
 5
 6  before: `
 7    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: Arial, sans-serif;">
 8      <div style="font-size: 14px; font-weight: bold; color: #444; margin-bottom: 8px;">Project Update</div>
 9      <div style="font-size: 14px; color: #444; margin-bottom: 8px;">Q1 Design Sprint</div>
10      <div style="font-size: 14px; color: #444; line-height: 1.4; margin-bottom: 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</div>
11      <div style="font-size: 14px; color: #444;">Updated 2 hours ago</div>
12    </div>
13  `,
14
15  after: `
16    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
17      <div style="font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">Project Update</div>
18      <div style="font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--color-ink); line-height: 1.1; margin-bottom: 12px;">Q1 Design Sprint</div>
19      <p style="font-size: 0.8125rem; color: color-mix(in oklch, var(--color-ink) 65%, transparent); line-height: 1.65; margin: 0 0 14px; max-width: 30ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
20      <div style="font-size: 0.6875rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
21    </div>
22  `
23};