1---2name: michael-brand-pack3description: Applies Michael F. Bryan's visual design system — warm high-contrast palette, typography scale, spacing tokens, light/dark themes, and artefact theming — across websites, email signatures, Word/Google Doc templates, slides, rich HTML artefacts, and any branded surface. Use whenever the user mentions Michael F. Bryan brand colours, personal site theming, email signatures, document templates, rich artefact styling, or "make it look like Michael" — even without naming this skill.4---56# Michael Brand Pack78Michael F. Bryan visual design system. This skill owns look and visual judgement. It does not replace writing voice or rich-communication workflow. Do not use “Operator Notes” as the conceptual frame for all artefacts; treat it, if used at all, as one possible surface label rather than the governing abstraction.910## Quick start11121. Read `references/tokens.md` for values.132. Pick one channel below → read the matching reference.143. Start from a template when useful: `templates/rich-html-document.html`, `templates/dark-tool.html`, `templates/email-signature.html`, or `templates/style-calibration.md`.154. For web/rich HTML, apply `assets/css/tokens.css` plus `assets/css/web-base.css`.165. Check that styling makes the work legible and the next move obvious.1718## Channel router1920| User task | Read | Assets |21|---|---|---|22| Personal site, app chrome, landing pages | `references/websites.md` | `tokens.css`, `web-base.css` |23| Email signature, HTML email | `references/email.md` | Token values inline |24| Word / Google Docs templates | `references/documents.md` | Token values as pt/hex mapping |25| Rich HTML artefact: decision brief, explainer, design review, report, deck | `references/html.md` | Pair with `html-rich-communication`; templates in `templates/` |26| Full visual language, mood, diagrams | `references/visual-language.md` | All CSS assets and `templates/style-calibration.md` |2728## Core visual rules29301. Legibility is authority — important text must be readable at 100% zoom.312. Structure before decoration — layout exposes the thinking.323. Use warm light theme for documents, reports, explainers, and review artefacts; dark theme for tools, dashboards, demos, and long-running screen work.334. Styling must not make the wrong artefact look finished. Fix the communication structure first.345. Body text: 17–18px long-form; dense UI not below 15px.356. Primary text targets AAA-like contrast; secondary text stays readable, not faint.367. Borders visible when they carry structure — no `rgba(0,0,0,0.05)` dividers.378. Colour signals meaning; every status also has a text label.389. Direct annotation beats legends: labels, units, and caveats sit near the thing they explain.3910. Domain motifs are accents, not the governing system, unless the artefact is a demo/marketing surface.4011. If the user asks for a conflicting mood, run style-conflict calibration: preserve brand legibility, honour the requested feel where it serves the job, and show a quick proof before polish.4112. No SaaS gradient card grids, startup chrome, cyberpunk terminal cosplay, or decorative branding.4213. Accessible by default — focus states, semantic HTML, print-friendly where relevant.4344## Pairing4546- Rich artefact workflow and verification → `html-rich-communication`47- Writing voice and artefact tone → `voice-michael`4849## Template index5051| File | Use when |52|---|---|53| `templates/rich-html-document.html` | Warm light report, explainer, design review, decision brief shell |54| `templates/dark-tool.html` | Tool, dashboard, sandbox, or long-running screen-work shell |55| `templates/email-signature.html` | HTML email signature starting point; inline-safe styles |56| `templates/style-calibration.md` | Quick proof before applying a mood that conflicts with brand defaults |5758Templates are starting points, not mandatory frames. Replace placeholder content and remove unused sections.5960## Reference index6162| File | When to read |63|---|---|64| `references/visual-language.md` | Brand mood, pillars, diagram visuals, anti-patterns |65| `references/tokens.md` | Full token tables, light/dark values, font stacks |66| `references/websites.md` | Personal site and app chrome |67| `references/email.md` | Signatures and HTML email constraints |68| `references/documents.md` | Word/Google Docs style mapping |69| `references/html.md` | Rich HTML artefact channel rules |
michael-f-bryan