1// Typography skill demos
 2export default {
 3  id: 'typography',
 4  tabs: [
 5    {
 6      id: 'pairing',
 7      label: 'Font Pairing',
 8      caption: 'Generic system fonts vs distinctive pairing',
 9      beforeClass: 'typo-demo typo-pairing-before',
10      afterClass: 'typo-demo typo-pairing-after',
11      before: `
12        <div class="typo-demo typo-pairing-before">
13          <div class="typo-heading">Welcome to the Future</div>
14          <div class="typo-body">Experience innovation like never before with our cutting-edge platform designed for modern teams.</div>
15        </div>
16      `,
17      after: null // Uses CSS class toggle
18    },
19    {
20      id: 'hierarchy',
21      label: 'Scale & Hierarchy',
22      caption: 'Flat sizing vs dramatic scale contrast',
23      beforeClass: 'typo-demo typo-hierarchy-before',
24      afterClass: 'typo-demo typo-hierarchy-after',
25      before: `
26        <div class="typo-demo typo-hierarchy-before">
27          <div class="typo-h1">Article Title</div>
28          <div class="typo-meta">Published January 2025</div>
29          <div class="typo-p">This is the body text of the article containing the main content and ideas.</div>
30        </div>
31      `,
32      after: null // Uses CSS class toggle
33    }
34  ]
35};
36
37
38