7.1 Banner & avatar
The hero banner works as a site header, LinkedIn cover, and default OG image. The 512 px avatar is the shared social profile shape.
7.2 Print & chart
Business cards (front & back) and the portable colour chart. Print-ready SVGs at the correct bleed.
7.3 Email signature
Table-based HTML so it renders cleanly in every client. Open the file, edit the placeholder name / title / email / phone / URL.
|
Jay Stockwell Founder & CEO · MagicBlocks jay@magicblocks.ai · magicblocks.ai |
7.4 Website <head>
The favicon and app-icon link set. Drop this into any web project for correct icons on every surface — browser tab, home screen, macOS dock.
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512.png">
7.5 Anatomy & notes
A few things that keep brand applications on the rails when non-designers pick them up.
- Every asset in
06-brand-assets/is a flat, editable SVG. Open in any vector editor — no rasterization. - Hero banner is sized 1600×400 — exactly LinkedIn's cover ratio, and scales cleanly up and down for OG usage.
- The email signature uses table layout + inline styles because that's the only reliable way to survive Outlook, Gmail, and Apple Mail.
- For web use, prefer the SVG icon; for email, always use the 2× PNG to avoid scaling issues in Outlook.
- Before shipping a new template, drop it on a dark surface and a pink one — if it falls apart on either, it's not ready.