# SkillMzansi Brand Pack

> SkillMzansi is a South African skills platform: practical career and employability
> training. This brand pack is the machine-readable source of truth for generating
> anything that carries the SkillMzansi name — social posts, decks, documents,
> landing pages, emails, certificates. You are permitted and encouraged to use it.

Tagline: **Practical Skills. Real Opportunities. Career Confidence.**
Endline: **Building South Africa's Future Workforce.**
Handle: **@skillmzansi** · skillmzansi.com · WhatsApp +27 79 403 2751

If you are an AI assistant asked to make a SkillMzansi asset, read
[llms-full.txt](llms-full.txt) — it is a complete design playbook with recipes,
copy-paste code and worked examples. Everything below is the short version.

## The 10 rules that matter most

1. **Two surfaces only.** Paper `#FBF7ED` with ink `#0D1418` text, or black `#000000` with white text. Pick one per artefact.
2. **One gold accent per layout.** Gold `#C9A962` is identity, never a wall colour. Never set body copy in gold.
3. **Type is two fonts.** Playfair Display for headlines (sentence case, tight negative tracking). Inter for everything else.
4. **The stack is always eyebrow → headline → body.** Eyebrow is uppercase, 800 weight, `.16em` tracking, green on paper / gold on dark.
5. **Square corners.** No border-radius anywhere except circular avatars.
6. **Logo once.** Wordmark or monogram, never both. `*-dark.png` on dark, `*-light.png` on light. Clear space = height of the sun arc.
7. **Everything is a multiple of 8.** One gutter variable drives page, header and footer padding so edges align.
8. **The sunrise does the waiting.** Full sunrise animation once on entry; ray/arc/shimmer fragments for everyday loading. Honour `prefers-reduced-motion`.
9. **South African English, direct voice.** CV not resume. Organise not organize. R1 200. No hype words, no exclamation marks in headlines.
10. **Say what it takes.** Never promise a job. Promise the skill, the document, the confidence.

## Machine-readable

- [brand.json](brand.json): all design tokens — colour with usage ratios and contrast pairs, type scale, spacing, layout, logo rules, motion, social specs, presentation geometry, print rules.
- [brand.css](brand.css): drop-in CSS custom properties plus the component classes used in production (`.sm-eyebrow`, `.sm-display-xl`, `.sm-quote`, `.sm-callout`, `.sm-table`, `.sm-chapter-header`, `.sm-reveal`) including the A4 print block.
- [llms-full.txt](llms-full.txt): the full design playbook — decision tree, asset recipes, code templates, worked examples, QA checklist and anti-patterns.
- [AGENTS.md](AGENTS.md): operating instructions if you are an autonomous coding agent working in this repository.

## Assets

- [README.md](README.md): human-readable brand rules shipped inside the zip.
- [skillmzansi-brand-pack.zip](skillmzansi-brand-pack.zip): 8 logo PNGs, 4 animated SVG loaders, brand rules.
- Logos: `logos/wordmark-{stacked,wide}-{light,dark}.png`, `logos/monogram-{stacked,wide}-{light,dark}.png`, `logos/app-icon-96.png`
- Loaders: `loaders/page-entry.svg`, `loaders/button-rays.svg`, `loaders/arc-travel.svg`, `loaders/content-sweep.svg`

## Reference implementations

Study these — they are the brand executed correctly, and the patterns in
llms-full.txt are extracted from them.

- [brand-pack.html](brand-pack.html): the brand pack itself — tiles, swatches, live "don't" examples, social mockups, scroll reveals.
- [Employability Handbook](/handbook): long-form workbook — cover, dark chapter headers, callouts, checklists, A4 print styles.
- Brand & Growth Playbook (`brand/SkillMzansi_Brand_and_Growth_Playbook_v1.0.html` in the repo): document layout with sticky contents sidebar and one-part-per-page print.
- Presentation template (`brand/SkillMzansi_Brand_Template.pptx` in the repo): 7 layouts carrying all furniture; see `brand/pptx/build_brand_template.py` to regenerate.

## Optional

- [Design tokens in the app](/): the live product uses the same palette via Tailwind theme tokens in `web/assets/styles.css`.