open-design/design-systems/dramatic/preview/typography.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dramatic typography</title>
    <link rel="stylesheet" href="../tokens.css" />
    <style>
      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }

      .type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
      .eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
      h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
      .lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
      .body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }

    </style>
  </head>
  <body>
    <main>
      <h1>Typography</h1>

      <section class="type-stack">
        <p class="eyebrow">Bold & Expressive</p>
        <h2>Display sample for Dramatic</h2>
        <p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
        <p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
      </section>

    </main>
  </body>
</html>