{"id":"code-work-mkt-inline-html-signature","audience":"marketing","category":"coding","track":"coding","technique":"constraints","title":"Code an email signature with inline styles only","free":false,"task":"Write the HTML for Nadia's email signature. Email clients strip style blocks and classes, so every style must be inline; the layout must be one table exactly 420 pixels wide (no divs or flexbox), with Arial 13px everywhere and her name in #1F6F5C. IT blocks images, so no logo or img tags. Use her new phone number as a tel: link. Put each table row on one line: one code block of at most 12 lines, then under 30 words outside the code.","materialLabel":"Signature details from Nadia (attached to your prompt automatically)","material":"From Nadia Haddad, Fri 4:12 pm:\n\nHi! Can you make my signature match the new brand? Details:\n\nNadia Haddad\nContent Marketing Lead\nLumen & Vale Home Goods\nPhone: (503) 555-0187\nlumenvale.example\nPronouns: she/her\n\nOh wait, I got a new desk line on Monday: (503) 555-0142. The 0187 number goes to the old front desk now.\n\nBrand stuff from the style guide:\n- Primary green: #1F6F5C\n- Secondary sand: #E8DCC8\n- Headline font: Playfair Display (web only)\n- Body font: Arial\n- Logo files are in the Brand folder (PNG and SVG)\n- Tagline: \"Made for slow mornings\" (only on the website, not in email)\n\nThanks!! Also my old signature had a little LinkedIn icon, not sure if we still need that.","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":12},{"type":"maxProseWords","max":30}],"mistakes":[{"title":"Not giving the size","why":"The AI picks its own width, so the signature sprawls on wide screens or wraps on phones.","fix":"Add: \"One table, 420 pixels wide, inline styles only.\"","checks":["r0"]},{"title":"Leaving the layout open","why":"The AI uses divs and flexbox, which fall apart in many email clients.","fix":"Add: \"Table layout, Arial 13px, name in #1F6F5C.\"","checks":["r1"]},{"title":"Not saying images are blocked","why":"The AI adds a logo img and a LinkedIn icon that show as broken boxes.","fix":"Add: \"No images. Use the new phone number as a tel: link.\"","checks":["r2"]},{"title":"Getting a menu of options","why":"The AI likes to offer two or three versions of the signature, so you're left to pick and test them yourself.","fix":"Add: \"Give one signature only, in one code block, no alternatives.\"","checks":["codeBlocks","maxCodeLines"]},{"title":"Getting a tutorial","why":"By default the AI explains every part of the code at length, which you then have to scroll past.","fix":"Add: \"After the code, one line under 12 words. Nothing else.\"","checks":["maxProseWords"]}],"promptHints":[{"label":"Sets the width","patterns":["420","width","pixels? wide"]},{"label":"Asks for a table layout","patterns":["table","no (divs?|flex)"]},{"label":"Rules out images","patterns":["no (images?|img|logo)","images? (are )?blocked"]},{"label":"Uses the new number","patterns":["0142","new (phone|number)","tel:"]},{"label":"Caps the code length","patterns":["\\d+\\s*lines","at most","under \\d+","short"]}],"hint":"Email isn't a web page. Tell the AI where this HTML will live, what gets stripped or blocked there, and which phone number is current.","rubricLabels":["Every style is inline (no <style> block, no class attributes, no linked stylesheet) and the table is set to 420 pixels wide (width=\"420\" or width: 420px)","Uses a <table> for layout (no div, flexbox or grid), sets Arial at 13px, and colors the name #1F6F5C","Has no <img> tag and links the new number as tel:+15035550142 (or tel:5035550142), not the old 0187 number"]}