Lab: Email Signature

My own email signature, ready to paste. Copy it rendered (rich) for the mail client, or grab the raw HTML for anything that expects markup.

Sebastian Rueda

Senior Web Developer

Front-end • CMS/eCommerce • Technical SEO • Performance

srueda.dev • Portfolio & case studies

Building fast, SEO-friendly experiences for marketing teams and eCommerce.

Please consider the environment before printing this email.

Raw HTML

<!-- START: Sebastian Rueda email signature -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';">
  <tr>
    <td style="padding:0; vertical-align:top;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
        <tr>
          <td width="44" height="44" style="width:44px; height:44px; vertical-align:top;">
            <img
              src="https://srueda.dev/signature/sr-mark-centered.png"
              width="44"
              height="44"
              alt="SR"
              style="display:block; border-radius:12px; border:1px solid rgba(148,163,184,0.28); background:#0b0f19;"
            />
          </td>

          <td style="padding:0 0 0 14px; vertical-align:top;">
            <div style="margin:0; padding:0; font-size:16px; line-height:20px; font-weight:800; color:#0b1220; font-family: 'Fraunces Fallback', Fraunces, Georgia, 'Times New Roman', Times, serif;">
              Sebastian Rueda
            </div>

            <div style="margin:3px 0 0 0; padding:0; font-size:13px; line-height:18px; font-weight:600; color:#334155;">
              Senior Web Developer
            </div>

            <div style="margin:6px 0 0 0; padding:0; font-size:12px; line-height:18px; color:#475569;">
              Front-end • CMS/eCommerce • Technical SEO • Performance
            </div>

            <div style="margin:10px 0 0 0; padding:0;">
              <a href="https://srueda.dev" style="text-decoration:none; color:#2563eb; font-weight:700; font-size:12px; line-height:16px;">
                srueda.dev
              </a>
              <span style="color:#94a3b8; font-size:12px; line-height:16px;">&nbsp;•&nbsp;</span>
              <span style="color:#64748b; font-size:12px; line-height:16px;">
                Portfolio & case studies
              </span>
            </div>

            <div style="margin:10px 0 0 0; padding:8px 10px; background:#0b0f19; border:1px solid rgba(148,163,184,0.22); border-radius:12px;">
              <span style="display:inline-block; font-size:12px; line-height:16px; color:#cbd5e1;">
                Building fast, SEO-friendly experiences for marketing teams and eCommerce.
              </span>
            </div>

            <div style="margin:10px 0 0 0; padding:0; font-size:11px; line-height:16px; color:#94a3b8;">
              Please consider the environment before printing this email.
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- END: Sebastian Rueda email signature -->

The mark is loaded from https://srueda.dev/signature/sr-mark-centered.png — it has to stay reachable or the signature renders without it.