workbuddy_skills/open-design/design-systems/webflow/system/artifacts/email.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Webflow - Email</title>
  <style>
:root {
    --accent: #146ef5;
    --accent-active: color-mix(in oklab, var(--accent), black 14%);
    --accent-hover: #0055d4;
    --accent-on: #ffffff;
    --bg: #ffffff;
    --border: #d8d8d8;
    --border-soft: #ebebeb;
    --container-gutter-desktop: 24px;
    --container-gutter-phone: 12px;
    --container-gutter-tablet: 16px;
    --container-max: 1200px;
    --danger: #ee1d36;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --elev-flat: none;
    --elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
    --elev-ring: 0 0 0 1px var(--border);
    --fg: #080808;
    --fg-2: #363636;
    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
    --font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
    --font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
    --font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    --leading-body: 1.6;
    --leading-tight: 1.04;
    --meta: #ababab;
    --motion-base: 200ms;
    --motion-fast: 150ms;
    --muted: #5a5a5a;
    --radius-lg: 8px;
    --radius-md: 4px;
    --radius-pill: 9999px;
    --radius-sm: 4px;
    --section-y-desktop: 96px;
    --section-y-phone: 48px;
    --section-y-tablet: 64px;
    --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: #00d722;
    --surface: #ffffff;
    --surface-warm: var(--surface);
    --text-2xl: 32px;
    --text-3xl: 56px;
    --text-4xl: 80px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-sm: 14px;
    --text-xl: 24px;
    --text-xs: 12px;
    --tracking-display: -0.01em;
    --warn: #ffae13;
}
:root {
  --od-page-bg: #ffffff;
  --od-surface: #ffffff;
  --od-text: #080808;
  --od-muted: #5a5a5a;
  --od-border: #d8d8d8;
  --od-accent: #146ef5;
  --od-radius: 4px;
  --od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
  --od-font-display: "WF Visual Sans Variable", "Inter", Arial, 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">Email module</p>
        <h1>Webflow Email module</h1>
        <p class="lead">Transactional header, body copy, and primary call-to-action treatment.</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>Email</h3>
        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Webflow, 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="Webflow" /></label></div>
          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
        </div>
      </article>
    </section>
  </main>
</body>
</html>