From im-html-style-guide
This skill should be used when the user asks to create an HTML document, report, presentation, or proposal branded to Integral Media (IM), OR when formatting/styling a Google Sheet. Triggers include: "create HTML report", "branded document", "IM report", "IM presentation", "Integral Media document", "make a branded HTML page", "quarterly review document", "client report HTML", "SEO report for [client]", "create a styled HTML page", "HTML with IM branding", "format this sheet", "style the spreadsheet", "branded Google Sheet", "IM sheet formatting", "email signature", "create signature", "new starter signature", "Gmail signature", "team signature".
How this skill is triggered — by the user, by Claude, or both
Slash command
/im-html-style-guide:im-html-style-guideThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
To create an Integral Media branded HTML document, follow these rules.
To create an Integral Media branded HTML document, follow these rules.
${CLAUDE_PLUGIN_ROOT}/assets/im-document-template.html<!-- TEMPLATE: Replace --> markers with actual contentAny public-facing IM document must include Open Graph and Twitter Card meta tags in <head>:
<!-- TEMPLATE: Replace all content="" values -->
<meta name="description" content="Page description for search engines">
<meta property="og:title" content="Page Title — Integral Media">
<meta property="og:description" content="Description for social sharing (1-2 sentences)">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title — Integral Media">
<meta name="twitter:description" content="Description for Twitter sharing">
<meta name="twitter:image" content="https://example.com/og.png">
<link rel="canonical" href="https://example.com/page">
Rules:
og:image should be 1200x630px for best rendering across platformsog:description and twitter:description can differ (Twitter has tighter character limits)| Name | Hex | CSS Variable | Usage |
|---|---|---|---|
| Sky Blue | #27C1F4 | --sky | Primary accent, links, highlights, timeline dots. Note: logo icon mark uses #23B2EF (original brand file shade) |
| Deep Navy | #002F6C | --navy | Hero/footer backgrounds, section titles, headings, step badges |
| Charcoal | #333740 | --charcoal | Body text |
| Cool Grey | #DCDDEB | --cool-grey | Borders, dividers, tab bars |
| White | #FFFFFF | --white | Card backgrounds, hero text |
These are utility colours that complement the brand:
| Name | Hex | CSS Variable | Usage |
|---|---|---|---|
| Navy Light | #0a3d7a | --navy-light | Hover states on navy |
| Sky Light | #4fd1ff | --sky-light | Hover states on sky |
| Sky Muted | #e6f7fe | --sky-muted | Code backgrounds, callout backgrounds |
| Slate | #64748b | --slate | Secondary text, nav links |
| Light | #f1f5f9 | --light | Table header backgrounds |
| Lighter | #f8fafc | --lighter | Page background |
| Green | #22c55e | --green | Success states, checkmarks |
| Green Muted | #dcfce7 | --green-muted | Success badges |
| Amber | #f59e0b | --amber | Warning/conditional states |
| Amber Muted | #fef3c7 | --amber-muted | Warning badges |
| Red | #ef4444 | --red | Error/danger states |
| Warm Gray | #94a3b8 | --warm-gray | Muted decorative text |
| Red Muted | #fee2e2 | --red-muted | Danger badges |
--display: 'Julius Sans One', 'Trebuchet MS', sans-serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
Use <link rel="preload"> + <link rel="stylesheet"> in <head>, outside the <style> block:
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
Why not @import? @import inside <style> blocks rendering — the browser must download and parse the imported stylesheet before rendering any content. <link> loads fonts in parallel with the page.
Fallback only (if you must keep everything inside <style>):
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
Used for: hero titles, section titles, section numbers, step number badges.
Critical styling rules (must match logo usage):
text-transform: uppercase)font-weight: bold)letter-spacing: -0.5pxletter-spacing: 0pxletter-spacing: 0pxUsed for: all body text, card headings (h3), paragraphs, lists, status card titles.
| Context | Size | Weight | Line Height |
|---|---|---|---|
| Body text | 15px | 400 | 1.7 |
| Card headings (h3) | 16px | 600 | default |
| Card/step body | 14.5px | 400 | 1.75 |
| Hero description | 16px | 300 | 1.7 |
| Status card body | 13.5px | 400 | 1.7 |
Used for: labels, nav items, inline code, architecture diagrams, status badges, timeline dates.
| Context | Size | Weight | Letter Spacing |
|---|---|---|---|
| Labels / nav | 11px | 500 | 1.5–2.5px |
| Inline code | 12.5px | 500 | — |
| Architecture diagrams | 12.5px | 400 | — |
| Status badges | 10px | 500 | 0.5px |
The IM logo SVG is path-only (all letters drawn as <path> outlines, no <text> elements, no font dependency). Earlier renders that produced garbled wordmarks (e.g. "ROVKTKILE IA" instead of "INTEGRAL MEDIA") were caused by the model writing <text> elements that depended on Bricolage Grotesque being installed at render time. That dependency does not exist in the canonical SVG.
Rules — non-negotiable:
d attributes as opaque binary.<text> elements anywhere in the logo SVG. If you find yourself typing <text> while building the logo, stop — you are doing it wrong.fill="white" on the wordmark paths to fill="#002F6C").viewBox is 0 0 1208 142 — always preserve aspect ratio.Two variants exist:
#23B2EF), wordmark in white. Height: 28px.opacity: 0.7 on the container and wordmark wrapped in rgba(255,255,255,0.7) via CSS. Height: 22px.Use this exact block (do not edit any path data):
<svg width="1208" height="142" viewBox="0 0 1208 142" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Integral Media">
<title>Integral Media</title>
<path d="M122.748 94.3069L106.15 139.418L35.686 3.69806L33.6758 0L74.2812 0.106144" fill="#23B2EF"/>
<path d="M165.181 0H134.199V142H165.181V0Z" fill="#23B2EF"/>
<path d="M26.7985 141.723H0.523438V81.779C0.523438 81.779 0.524017 55.1074 0.524017 53.4409H30.9802V141.723" fill="#23B2EF"/>
<path d="M15.4909 32.2727C24.0462 32.2727 30.9817 25.0482 30.9817 16.1364C30.9817 7.2245 24.0462 0 15.4909 0C6.9355 0 0 7.2245 0 16.1364C0 25.0482 6.9355 32.2727 15.4909 32.2727Z" fill="#23B2EF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1160.76 23.8361H1168.83L1207.88 116.934H1193.72L1181.42 87.3112H1147.93L1135.63 116.934H1121.84L1160.76 23.8361ZM1164.62 47.001C1164.41 47.511 1164.21 48.0035 1164 48.4785C1164 48.4868 1163.99 48.4952 1163.99 48.5036L1152.9 75.3179H1176.44L1165.37 48.6351C1165.11 48.0689 1164.86 47.5241 1164.62 47.001Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1103.85 24.4333H1116.68V116.934H1103.85V24.4333Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1013.34 24.4417C1021.54 23.8786 1029.83 23.5972 1038.19 23.5972C1052.13 23.5972 1064.01 27.9788 1073.57 36.845C1083.25 45.7524 1087.96 57.8334 1087.96 72.6546C1087.96 80.1182 1086.75 86.8835 1084.23 92.8826C1081.81 98.7626 1078.38 103.606 1073.88 107.291L1073.87 107.3L1073.86 107.31C1064.93 114.508 1053.87 118.009 1040.93 118.009C1032.77 118.009 1023.55 117.565 1013.28 116.682L1010.03 116.403V24.6685L1013.34 24.4417ZM1022.86 36.3236V105.05C1027.52 105.451 1033.53 105.658 1040.93 105.658C1051.5 105.658 1059.59 102.825 1065.56 97.4842C1071.43 92.2305 1074.65 84.1439 1074.65 72.5352C1074.65 61.083 1071.08 52.3263 1064.19 45.8581L1064.18 45.8518L1064.17 45.8455C1057.24 39.2724 1048.66 35.9488 1038.19 35.9488C1032.45 35.9488 1027.35 36.0747 1022.86 36.3236Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M949.691 24.4333H996.444V36.546H962.521V60.8648H993.219V72.858H962.521V104.821H997.758V116.934H949.691V24.4333Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M847.451 23.7166H856.167L883.696 89.1437C883.775 89.3174 883.854 89.4907 883.932 89.6635C884.01 89.5017 884.089 89.3376 884.169 89.1711C884.173 89.1637 884.176 89.1562 884.18 89.1487L914.863 23.7166H923.395L937.487 116.934H924.315L915.086 52.6829L887.125 112.515H879.268L854.89 53.494L845.275 116.934H832.195L847.451 23.7166ZM854.778 38.7136L852.913 34.2799L852.144 38.9783L854.778 38.7136Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M741.609 24.4333H754.439V104.583H793.737V116.934H741.609V24.4333Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M689.276 23.8361H697.342L736.391 116.934H722.237L709.934 87.3112H676.447L664.144 116.934H650.355L689.276 23.8361ZM693.134 47.001C692.928 47.5096 692.722 48.0009 692.517 48.4747C692.513 48.4843 692.508 48.494 692.504 48.5036L681.416 75.3179H704.957L693.881 48.6343C693.621 48.0684 693.372 47.5239 693.134 47.001Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M579.242 24.8012C586.857 24.2402 593.281 23.9555 598.495 23.9555C607.248 23.9555 614.766 26.2403 620.771 31.0575C627.001 35.9721 629.994 42.9619 629.994 51.5124C629.994 57.4291 628.25 62.9361 624.843 67.9577C622.377 71.5906 619.65 74.7105 616.648 77.2808C619.161 80.6986 622.088 84.6044 625.431 88.9996C629.784 94.539 632.523 97.9301 633.725 99.288C638.091 103.927 644.5 106.73 647 106L642 117.5C636.867 117.416 637.813 117.049 634.194 115.43L634.159 115.415L634.124 115.398C630.649 113.752 627.406 111.328 624.38 108.215L624.362 108.196L624.344 108.178C621.538 105.207 614.932 96.5546 604.691 82.5289C599.016 82.5018 593.713 82.3458 588.784 82.0596V116.934H575.955V25.0435L579.242 24.8012ZM588.784 36.4574V70.2608C593.838 70.527 598.587 70.6594 603.034 70.6594C604.952 70.6594 607.794 69.349 611.575 64.9628C615.006 60.9829 616.687 56.468 616.687 51.2735C616.687 46.0259 614.971 42.5632 611.895 40.2559L611.864 40.2329L611.834 40.2093C608.568 37.6479 604.002 36.1876 597.778 36.1876C595.136 36.1876 592.139 36.2768 588.784 36.4574Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M492.945 36.9267C501.461 27.6323 512.423 23 525.538 23C535.494 23 545.539 24.6603 555.661 27.9518L559.034 29.0488L555.313 40.4986L551.991 39.502C542.721 36.721 533.908 35.3515 525.538 35.3515C516.072 35.3515 508.538 38.6953 502.636 45.38C496.653 52.155 493.61 60.4929 493.61 70.624C493.61 80.5379 496.997 88.8331 503.812 95.7209C510.623 102.605 518.83 106.016 528.643 106.016C536.455 106.016 542.926 105.071 548.149 103.29V67.0761H560.978V110.343L559.301 111.384C551.587 116.172 541.123 118.367 528.285 118.367C514.955 118.367 503.538 113.757 494.254 104.559L494.242 104.547C484.966 95.2708 480.303 83.8922 480.303 70.624C480.303 57.3902 484.488 46.0776 492.945 36.9267Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M424.98 24.4333H471.733V36.546H437.81V60.8648H468.508V72.858H437.81V104.821H473.047V116.934H424.98V24.4333Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M346.602 24.4333H417.243V36.546H388.337V116.934H375.508V36.546H346.602V24.4333Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M258.809 23.7166H266.604L323.941 89.8193L323.958 89.8391C324.694 90.7129 325.398 91.5541 326.071 92.3627C326.062 91.5421 326.057 90.7062 326.057 89.855V24.4333H338.887V117.651H331.093L272.709 50.3881C272.707 50.3857 272.705 50.3833 272.703 50.3809C272.315 49.9385 271.939 49.5093 271.576 49.0933L271.638 51.7096V116.934H258.809V23.7166Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.182 24.4333H238.011V116.934H225.182V24.4333Z" fill="white"/>
</svg>
For light backgrounds: use the same SVG but replace every fill="white" (on the wordmark paths only — paths 5 onward) with fill="#002F6C". The first 4 paths (the icon mark) stay #23B2EF.
Canonical source files (if you need to verify the paths haven't drifted):
assets/integralmedia_colour_dark_bg.svgassets/integralmedia_white.svgassets/integralmedia_colour.svgassets/integralmedia_black.svgUse this inline data URI in the <head>:
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 142'><path d='M122.748 94.3069L106.15 139.418L35.686 3.69806L33.6758 0L74.2812 0.106144' fill='%2323B2EF'/><path d='M165.181 0H134.199V142H165.181V0Z' fill='%2323B2EF'/><path d='M26.7985 141.723H0.523438V81.779C0.523438 81.779 0.524017 55.1074 0.524017 53.4409H30.9802V141.723' fill='%2323B2EF'/><path d='M15.4909 32.2727C24.0462 32.2727 30.9817 25.0482 30.9817 16.1364C30.9817 7.2245 24.0462 0 15.4909 0C6.9355 0 0 7.2245 0 16.1364C0 25.0482 6.9355 32.2727 15.4909 32.2727Z' fill='%2323B2EF'/></svg>">
960px, centred with margin: 0 auto40px (desktop), 20px (mobile)--lighter (#f8fafc)--navyradial-gradient circle in top-right (Sky Blue at 15% opacity)sky → navy → sky)70px 0 20px0 4px 24px rgba(0,47,108,0.06)--navyEvery IM document must include these accessibility features:
<html lang="en-AU">
Use en-AU for Australian documents, not just en.
Add before the hero, hidden until focused:
<a href="#section-1" class="skip-link">Skip to content</a>
.skip-link {
position: absolute;
top: -40px;
left: 16px;
background: var(--navy);
color: var(--white);
padding: 8px 16px;
border-radius: 0 0 6px 6px;
font-family: var(--mono);
font-size: 12px;
text-decoration: none;
z-index: 1000;
transition: top 0.2s;
}
.skip-link:focus { top: 0; }
Add aria-hidden="true" to purely visual elements so screen readers skip them:
<span class="section-number" aria-hidden="true">01</span>
<span class="icon" aria-hidden="true"><svg>...</svg></span>
Add role="img" and a <title> to logo SVGs:
<svg role="img" viewBox="0 0 1208 142" ...>
<title>Integral Media</title>
<!-- paths -->
</svg>
Add visible focus outlines on all interactive elements (nav links, buttons, CTAs):
.nav-inner a:focus-visible {
outline: 2px solid var(--sky);
outline-offset: 2px;
border-radius: 2px;
}
Use focus-visible (not focus) so outlines only appear on keyboard navigation, not mouse clicks.
NEVER use emoji HTML entities (e.g. ⚡, 📋) or Unicode emoji in documents. Use Lucide icons as inline SVGs instead.
How to use: Place the SVG directly inside the .icon span. The CSS handles sizing and colour:
<span class="icon">
<svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</span>
Rules:
viewBox="0 0 24 24" (Lucide's standard viewBox)width, height, stroke, or fill on the <svg> — the CSS handles it (white stroke on navy background)<path>, <rect>, <circle>, <line>, <polyline> elements from Lucide — strip any wrapper markupIcon reference (1,703 available at lucide.dev/icons — most common below):
| Purpose | Lucide name | SVG inner elements |
|---|---|---|
| Check / done | check | <path d="M20 6 9 17l-5-5"/> |
| Check circle | circle-check | <path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/> |
| Close / dismiss | x | <path d="M18 6 6 18"/><path d="m6 6 12 12"/> |
| Info / overview | info | <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/> |
| Warning | triangle-alert | <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/> |
| Error / alert | circle-alert | <circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/> |
| Lightning / action | zap | <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/> |
| Arrow right | arrow-right | <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/> |
| External link | external-link | <path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/> |
| Search | search | <path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/> |
| Eye / visibility | eye | <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/> |
| Settings / config | settings | <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/> |
| Checklist / tasks | clipboard-list | <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/> |
| Document / file | file-text | <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/> |
| Chart / data | bar-chart-3 | <path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/> |
| Trending up | trending-up | <path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/> |
| Star / rating | star | <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/> |
| Calendar / schedule | calendar | <path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/> |
| Clock / time | clock | <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/> |
| Mail / email | mail | <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/> |
| Phone | phone | <path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/> |
| Globe / web | globe | <circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/> |
| Download | download | <path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/> |
| Upload | upload | <path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| Security / lock | shield-check | <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/> |
| Link / connection | link | <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/> |
| Users / team | users | <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
<div class="callout">
<strong>Note:</strong> Important information here.
</div>
Sky muted background, 3px sky left border, rounded right corners.
<div class="step">
<div class="step-num">1</div>
<h3>Step Title</h3>
<p>Description text.</p>
</div>
White card with 88px left padding, navy number badge (40x40, 10px radius, Julius Sans One).
<div class="auto-list">
<p>Section Label</p>
<ul>
<li>Item with green checkmark</li>
</ul>
</div>
Lighter background, monospace label, green check marks.
Vertical timeline with sky-to-grey gradient line, dot markers, date labels in monospace.
Cards with coloured top borders (amber for warning, green for success, red for danger). Status badges use matching muted backgrounds.
Clean minimal tables with monospace uppercase headers, light background header row, subtle bottom borders.
Horizontal tabs mimicking a spreadsheet tab bar. Active tab in navy, hidden tabs dashed border.
Navy background code block with syntax highlighting via span classes: .comment (30% white), .highlight (sky), .accent (green #86efac), .warm (yellow #fcd34d).
code {
font-family: var(--mono);
font-size: 12.5px;
background: var(--sky-muted);
padding: 2px 7px;
border-radius: 4px;
color: var(--navy);
font-weight: 500;
}
<span class="status-badge paused">paused</span>
<span class="status-badge active">active</span>
<span class="status-badge archived">archived</span>
<span class="cond">If condition</span>
Amber muted background, monospace uppercase, 10.5px.
Large-format quote with optional attribution, for editorial/press content:
<div class="pullquote">
<blockquote>"Quote text here."</blockquote>
<p class="attribution">— Speaker Name, Title</p>
</div>
Sky-muted background, 3px navy left border, rounded right corners. Attribution in monospace uppercase.
Horizontal grid of key numbers with labels:
<div class="stats-bar">
<div class="stat"><span class="stat-value">358</span><span class="stat-label">Occupations</span></div>
<div class="stat"><span class="stat-value">13.9M</span><span class="stat-label">Workers</span></div>
</div>
4-column grid (2-column on mobile). Values in Julius Sans One, labels in monospace uppercase.
Announcement bar for press releases:
<div class="release-banner">For Immediate Release — 23 March 2026</div>
Navy background, sky text, monospace uppercase, centred.
Call-to-action strip with left text and right button:
<div class="cta-bar">
<p>Want to explore the data?</p>
<a href="https://example.com">Visit the interactive map</a>
</div>
Navy background, flex row (stacks on mobile). Button in sky with navy text.
Structured contact block for press materials:
<div class="media-contact">
<div>
<h3>Media Contact</h3>
<div class="contact-item">
<span class="contact-label">Name</span>
<span>Contact Person</span>
</div>
</div>
<div>
<div class="contact-item">
<span class="contact-label">Email</span>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
Navy background, 2-column grid (1 column on mobile). Sky labels, white text, underline links.
Every HTML document MUST render correctly on mobile devices. This is non-negotiable — clients view these on phones and tablets.
Always include in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
All components must adapt at @media (max-width: 768px). The template includes these rules — preserve and extend them for any custom components you add.
Layout:
40px → 20px32px → 20px70px → 48pxTypography:
42px → 28px56px → 40px28px → 22pxNavigation:
overflow-x: auto with -webkit-overflow-scrolling: touchflex-wrap: nowrap so links scroll horizontally rather than stacking awkwardly.nav-inner::-webkit-scrollbar { display: none; }Grids:
3 columns → 1 columnSteps:
88px → 20pxstatic flow above the title (not absolute-left on small screens)Tables:
div with overflow-x: auto so wide tables scroll horizontally8px 10px, header font to 9.5px, body font to 12.5pxpadding: 20px 0 with h3, p getting padding: 0 16px44px height for any interactive table rowsImages & SVGs:
max-width: 100%; height: auto; on all images22pxTouch Targets:
44px x 44px hit areapadding: 14px 12px minimumArchitecture Diagrams:
overflow-x: auto already set — also add font-size: 11px on mobilewhite-space: pre-wrap for very long lines if content allowsFor extra-small screens, consider:
28px → 24pxflex-direction: column; align-items: flex-start)20px → 16pxfont-size: 10px; padding: 5px 10pxBefore finalising any HTML document, mentally verify:
Add a @media print block at the end of the CSS:
@media print {
.nav-strip, .release-banner { display: none; }
.hero { padding: 30px 0; }
section { break-inside: avoid; }
.card { break-inside: avoid; box-shadow: none; border: 1px solid var(--cool-grey); }
}
Hide navigation and banners, prevent page breaks inside cards, remove box shadows.
text-transform: uppercase and tight letter-spacing on Julius Sans Onelang="en-AU" for Australian documentsaria-hidden="true" on decorative section numbers and icon spans<link>) instead of @import for fontsfont-weight: 400 only)If creating a document for a white-label partner (Higher Ranking, Purpose Digital):
Standard HTML email signature for all Integral Media team members. Gmail-compatible table-based layout — no external stylesheets, no JavaScript.
Two-column table layout with a vertical accent divider:
┌──────────────┬───────────────────────────┐
│ │ Full Name │
│ Brandmark │ Job Title │
│ (80px) │ │
│ │ M 0400 000 000 │
│ INTEGRAL │ E name@integralmedia... │
│ MEDIA │ W integralmedia.com.au │
│ │ │
│ │ 605/10 Yarra Street... │
└──────────────┴───────────────────────────┘
↑ 2px Sky Blue (#27C1F4) border
#27C1F4 (right border on left cell)| Element | Font | Size | Weight | Colour |
|---|---|---|---|---|
| Full name | Inter / system fallback | 17px | Bold (700) | Navy #002F6C |
| Job title | Inter / system fallback | 13px | 400 | #6B7280 |
| Contact labels (M, E, W) | Inter / system fallback | 13px | 400 | #6B7280 |
| Contact values | Inter / system fallback | 13px | 400 | Sky #27C1F4 (linked) |
| Address | Inter / system fallback | 11px | 400 | #9CA3AF |
| "INTEGRAL MEDIA" wordmark | Julius Sans One / Arial Black fallback | 16px | Bold | Navy #002F6C |
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
The "INTEGRAL" and "MEDIA" text below the brandmark uses special rendering to match the logo weight:
font-family: 'Julius Sans One', 'Arial Black', sans-serif;
font-size: 16px;
font-weight: bold;
color: #002F6C;
letter-spacing: 0.05px;
-webkit-text-stroke: 0.5px #002F6C;
text-shadow: 0 0 1px #002F6C, 0 0 1px #002F6C;
| Element | Value |
|---|---|
| Name | #002F6C (navy) |
| Title | #6B7280 (grey) |
| Contact labels | #6B7280 (grey) |
| Links (phone, email, website) | #27C1F4 (sky) — text-decoration: none |
| Address | #9CA3AF (light grey) |
| Vertical divider | #27C1F4 (sky), 2px solid |
| Body text | #333740 (charcoal) — line-height: 1.7 |
https://reports.integralmedia.com.au/logos/current/png/brandmark/im_brandmark_colour.pngNote: Unlike HTML documents (which use inline SVG), email signatures use an externally hosted PNG because Gmail strips SVG from signatures.
Each contact line uses a single-letter label with fixed 18px width for alignment:
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">M</span>
<a href="tel:0400000000" style="color: #27C1F4; text-decoration: none;">0400 000 000</a>
</div>
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">E</span>
<a href="mailto:[email protected]" style="color: #27C1F4; text-decoration: none;">[email protected]</a>
</div>
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">W</span>
<a href="https://integralmedia.com.au" style="color: #27C1F4; text-decoration: none;">integralmedia.com.au</a>
</div>
Separated from contact links by 8px top margin, indented 18px (matching label width), smaller text (11px), lighter colour (#9CA3AF):
605/10 Yarra Street, South Yarra, VIC 3141
When generating a new team member signature, use this template. Replace the placeholder values.
<table cellpadding="0" cellspacing="0" border="0" style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; max-width: 520px;">
<tr>
<td style="padding-right: 24px; vertical-align: middle; border-right: 2px solid #27C1F4; text-align: center;">
<img src="https://reports.integralmedia.com.au/logos/current/png/brandmark/im_brandmark_colour.png" alt="IM" width="80" style="display: block; margin: 0 auto 8px; border: 0;">
<div style="text-align: center; line-height: 1.1;">
<div style="font-family: 'Julius Sans One', 'Arial Black', sans-serif; font-size: 16px; font-weight: bold; color: #002F6C; letter-spacing: 0.05px; -webkit-text-stroke: 0.5px #002F6C; text-shadow: 0 0 1px #002F6C, 0 0 1px #002F6C;">INTEGRAL</div>
<div style="font-family: 'Julius Sans One', 'Arial Black', sans-serif; font-size: 16px; font-weight: bold; color: #002F6C; letter-spacing: 0.05px; -webkit-text-stroke: 0.5px #002F6C; text-shadow: 0 0 1px #002F6C, 0 0 1px #002F6C;">MEDIA</div>
</div>
</td>
<td style="padding-left: 24px; vertical-align: middle;">
<div style="margin-bottom: 8px;">
<strong style="font-size: 17px; color: #002F6C; display: block; margin-bottom: 2px;"><!-- FULL NAME --></strong>
<span style="font-size: 13px; color: #6B7280;"><!-- JOB TITLE --></span>
</div>
<div style="font-size: 13px; line-height: 1.7; color: #333740; margin-top: 10px;">
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">M</span>
<a href="tel:<!-- PHONE_RAW -->" style="color: #27C1F4; text-decoration: none;"><!-- PHONE_FORMATTED --></a>
</div>
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">E</span>
<a href="mailto:<!-- EMAIL -->" style="color: #27C1F4; text-decoration: none;"><!-- EMAIL --></a>
</div>
<div style="margin-bottom: 3px;">
<span style="color: #6B7280; display: inline-block; width: 18px;">W</span>
<a href="https://integralmedia.com.au" style="color: #27C1F4; text-decoration: none;">integralmedia.com.au</a>
</div>
<div style="margin-top: 8px; font-size: 11px; color: #9CA3AF; padding-left: 18px;">
605/10 Yarra Street, South Yarra, VIC 3141
</div>
</div>
</td>
</tr>
</table>
When asked to create a signature for a team member, generate a standalone HTML page that wraps the signature table in a copy-paste helper:
3px dashed #27C1F4) containing the signature table<head>Individual signature files are deployed to the VPS at:
reports.integralmedia.com.au/Claude_Code_Projects/email-signatures/signature-{firstname}-{lastname}.html
The master preview of all signatures lives at:
reports.integralmedia.com.au/Claude_Code_Projects/email-signatures/ALL-SIGNATURES-PREVIEW.html
border: 0 on the image to prevent blue link borders in some email clients<style> blocks)tel: and emails with mailto:text-decoration: none on all links<img> tag for the wordmark text — it's rendered as styled text for crispnessBrand-faithful formatting for Google Sheets, derived from the IM HTML style guide. Adapted for Sheets constraints: limited fonts, no border-radius/shadows/text-transform. All colour combinations pass WCAG AA (4.5:1+ for normal text).
| Token | Hex | RGB (0-1) | WCAG Notes | Usage |
|---|---|---|---|---|
navy | #002F6C | 0.0, 0.184, 0.424 | 17.5:1 vs white | Document title row bg, summary tab colour |
navy-light | #0A3D7A | 0.039, 0.239, 0.478 | 14.4:1 vs white | Section divider row bg |
sky | #27C1F4 | 0.153, 0.757, 0.957 | Accent only | Tab colours (data tabs), accent borders |
sky-muted | #E6F7FE | 0.902, 0.969, 0.996 | 6.3:1 vs slate-dark | Notes/data source bg, LOW priority bg |
charcoal | #333740 | 0.200, 0.216, 0.251 | 14.8:1 vs white | All body text |
cool-grey | #DCDDEB | 0.863, 0.867, 0.922 | — | All borders, horizontal rules |
light | #F1F5F9 | 0.945, 0.961, 0.976 | 14.0:1 vs charcoal | Column header bg, alternating row band |
lighter | #F8FAFC | 0.973, 0.980, 0.988 | 16.7:1 vs navy | Sub-header bg |
slate-dark | #475569 | 0.278, 0.333, 0.412 | 6.3:1 vs sky-muted | Secondary text (notes, footnotes) |
white | #FFFFFF | 1.0, 1.0, 1.0 | — | Primary row bg, text on dark bg |
subtitle-grey | #CCCCCC | 0.8, 0.8, 0.8 | 10.8:1 vs navy | Subtitle text on navy bg |
red-muted | #FEE2E2 | 0.996, 0.886, 0.886 | 12.4:1 vs charcoal | HIGH priority bg |
amber-muted | #FEF3C7 | 0.996, 0.953, 0.780 | 13.8:1 vs charcoal | MEDIUM priority bg |
amber | #F59E0B | 0.961, 0.620, 0.043 | — | Warning row left border accent |
green-muted | #DCFCE7 | 0.863, 0.988, 0.906 | 14.2:1 vs charcoal | VERIFIED / complete bg |
slate (#64748B) replaced with slate-dark (#475569) for all secondary text — original was borderline 4.5:1 on sky-muted, new value gives 6.3:1 headroom| Element | Background | Text Colour | Font | Size | Bold | Height | Merge | Borders |
|---|---|---|---|---|---|---|---|---|
| Document title | navy | white | Roboto | 14pt | Yes | 40px | Full width | Bottom: 3px sky accent |
| Subtitle rows | navy | subtitle-grey | Roboto | 10pt | No | 22px | Full width | None |
| Section divider | navy-light | white | Roboto | 11pt | Yes | 30px | Full width | None |
| Column header | light | charcoal | Roboto | 10pt | Yes | 28px | No | Bottom: 1px cool-grey |
| Sub-header | lighter | navy | Roboto | 10pt | Yes | 26px | Full width | Bottom: 1px cool-grey |
| Data cell (single-line) | white | charcoal | Roboto | 10pt | No | 24px | No | Bottom: 1px cool-grey |
| Data cell (wrapped) | white | charcoal | Roboto | 10pt | No | 42px | No | Bottom: 1px cool-grey |
| Alt data cell (single-line) | light | charcoal | Roboto | 10pt | No | 24px | No | Bottom: 1px cool-grey |
| Alt data cell (wrapped) | light | charcoal | Roboto | 10pt | No | 42px | No | Bottom: 1px cool-grey |
| Data source note | sky-muted | slate-dark | Roboto | 10pt | Italic | 24px | Full width | None |
| Separator row | white | — | — | — | — | 20px | — | None |
| HIGH priority | red-muted | charcoal | Roboto | 10pt | Yes | 24px | No | Left: 3px red |
| MEDIUM priority | amber-muted | charcoal | Roboto | 10pt | Yes | 24px | No | Left: 3px amber |
| LOW priority | sky-muted | charcoal | Roboto | 10pt | Yes | 24px | No | Left: 3px sky |
| Warning row | amber-muted | charcoal | Roboto | 10pt | Yes | 24px | No | Left: 3px amber |
| Content Type | Width (px) |
|---|---|
| Dates | 140 |
| Email addresses | 250 |
| IDs / short codes | 110-140 |
| Names / labels | 220-280 |
| Status / role | 120-140 |
| Notes / descriptions | 300-400 |
| URLs | 320-400 |
When building batchUpdate requests, use the RGB (0-1) values from the colour palette. Google Sheets API expects { red: 0.0, green: 0.184, blue: 0.424 } format.
endColumn to column Z and from endRow to row 100+. Old banded ranges and formatting often extend beyond the visible data area.wrapStrategy: "WRAP" on all content columns. Only use CLIP/OVERFLOW on columns with short single-value content (yes/no, single IDs under 15 chars).unmergeCells on the full sheet range before applying any new mergeCells requests. Otherwise you'll get "You must select all cells in a merged range to merge or unmerge them" errors from cells merged in previous sessions.addBanding fails if any banded range already overlaps the target range. The correct delete method is deleteBanding (not deleteBandedRange). Query existing banded ranges first and delete ALL of them, not just known IDs.unmergeCells on the target range before writing data.unmergeCells — clear all existing merges on the full sheet rangedeleteBanding — query and remove ALL existing banded rangesupdateSheetProperties — tab colour, frozen rowsmergeCells — section dividers, title rows, note rowsupdateDimensionProperties — column widths + row heightsrepeatCell — backgrounds, text formatting, fonts, alignment, wrapupdateBorders — horizontal rules, accent bordersaddBanding — alternating rows on data sections with 8+ rowsSame formatting rules apply for Higher Ranking and Purpose Digital clients — just remove all IM references from content. No brand modifications needed to the formatting itself.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub integralmedia1/im-html-style-guide --plugin im-html-style-guide