open-design/design-systems/dramatic/system/artifacts/form.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dramatic - Form page</title>
  <style>
:root {
    --accent: #60a5fa;
    --accent-active: color-mix(in oklab, var(--accent), black 14%);
    --accent-hover: color-mix(in oklab, var(--accent), black 8%);
    --accent-on: #06101d;
    --bg: #090b12;
    --border: #2a3447;
    --border-soft: #1d2636;
    --container-gutter-desktop: 36px;
    --container-gutter-phone: 16px;
    --container-gutter-tablet: 24px;
    --container-max: 1180px;
    --danger: #fb7185;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --elev-flat: none;
    --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42);
    --elev-ring: 0 0 0 1px var(--border);
    --fg: #f8fafc;
    --fg-2: #cbd5e1;
    --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28);
    --font-body: Inter, system-ui, sans-serif;
    --font-display: Inter, system-ui, sans-serif;
    --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
    --leading-body: 1.52;
    --leading-tight: 1.06;
    --meta: #60a5fa;
    --motion-base: 240ms;
    --motion-fast: 150ms;
    --muted: #94a3b8;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 9999px;
    --radius-sm: 10px;
    --section-y-desktop: 96px;
    --section-y-phone: 48px;
    --section-y-tablet: 68px;
    --space-1: 4px;
    --space-12: 48px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --success: #22c55e;
    --surface: #121722;
    --surface-warm: #1b2233;
    --text-2xl: 36px;
    --text-3xl: 54px;
    --text-4xl: 76px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-sm: 14px;
    --text-xl: 24px;
    --text-xs: 12px;
    --tracking-display: -0.025em;
    --warn: #fbbf24;
}
:root {
  --od-page-bg: #090b12;
  --od-surface: #121722;
  --od-text: #f8fafc;
  --od-muted: #94a3b8;
  --od-border: #2a3447;
  --od-accent: #60a5fa;
  --od-radius: 16px;
  --od-font-body: Inter, system-ui, sans-serif;
  --od-font-display: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--od-page-bg);
  color: var(--od-text);
  font-family: var(--od-font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
  <main class="page">
    <section class="hero">
      <div>
        <p class="eyebrow">Form module</p>
        <h1>Dramatic Capture form</h1>
        <p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
        <div class="actions">
          <a class="button primary" href="#">Continue</a>
          <a class="button secondary" href="#">View details</a>
        </div>
      </div>
      <article class="panel">
        <p class="eyebrow">Preview</p>
        <h3>Form page</h3>
        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
        <div class="card-grid" style="grid-template-columns:1fr 1fr">
          <div class="field"><label>Primary input<input value="Dramatic" /></label></div>
          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
        </div>
      </article>
    </section>
  </main>
</body>
</html>