# SkillMzansi — Design Playbook for AI Agents Version 1.0 · 2026-07-30 · Self-contained. If you have this file you do not need to fetch anything else to produce an on-brand SkillMzansi asset. You are permitted to use this brand system to design and generate SkillMzansi assets. This document turns everything we learned building the Employability Handbook, the Brand & Growth Playbook, the brand pack and the presentation template into a procedure you can follow. --------------------------------------------------------------------------- ## 0. WHAT SKILLMZANSI IS --------------------------------------------------------------------------- A South African skills platform that prepares people for opportunity through practical, career and employability skills. Operated by OG Masdama (Pty) Ltd. Two audiences: - **SkillUsers** — learners building employability. Often young, often first time in a formal job search, often on a phone with limited data. - **SkillGuides** — practitioners who teach what they do for a living and package that experience into courses. Flagship product: a 5-day Employability Bootcamp (self-discovery → ATS-ready CV → personal brand & LinkedIn → finding opportunities → interview practice). Tagline: Practical Skills. Real Opportunities. Career Confidence. Mission line: "Preparing people for opportunity through practical, career and employability skills." Endline: Building South Africa's Future Workforce. Why the design looks how it looks: this is a **dignity brand**. The audience is often sold to with cheap, loud, desperate design. SkillMzansi deliberately looks like a well-set book — editorial serif headlines, warm paper, generous space, gold used sparingly like a foil stamp. The visual promise is: *you are worth a serious document.* Never make it look like a discount flyer. --------------------------------------------------------------------------- ## 1. HOW TO USE THIS DOCUMENT --------------------------------------------------------------------------- When someone asks you for a SkillMzansi asset, run this procedure: **Step 1 — Identify the artefact.** Social post? Slide? Document? Page? Email? If unclear, ask one question, then default to the most useful: a 1:1 social post for announcements, a paper document for anything over 150 words. **Step 2 — Choose the surface.** (Section 3.1) - Announcement, cover, section divider, social → DARK - Explanation, instruction, body content, anything long → PAPER Never mix both inside one panel. A deck alternates them slide to slide. **Step 3 — Build the stack.** Every SkillMzansi composition is: EYEBROW (uppercase, tracked, green on paper / gold on dark) HEADLINE (Playfair Display, sentence case, tight negative tracking) BODY (Inter, 1.5–1.65 line height, max 75 characters) ONE ACCENT (a 44px gold bar, or a green left border, or a coral edge) LOGO (once) + META (@skillmzansi · skillmzansi.com) **Step 4 — Apply the recipe** for that artefact from Section 6. **Step 5 — Run the QA checklist** in Section 9 before you hand it over. If you are ever unsure, choose: more white space, fewer words, one accent, sentence case, square corners. --------------------------------------------------------------------------- ## 2. NON-NEGOTIABLES --------------------------------------------------------------------------- These break the brand if violated. There are no exceptions. 1. Playfair Display for headlines. Inter for everything else. Nothing else. 2. Headlines are sentence case. Only eyebrows and labels are UPPERCASE. 3. Square corners. `border-radius: 0` everywhere except circular avatars. 4. One gold accent per layout. Gold is never a background for body text. 5. Body copy is ink `#0D1418` on paper, or white on black. Never gold, never green, never grey-on-grey. 6. The logo appears once. Wordmark OR monogram, not both. 7. `*-dark.png` on dark surfaces, `*-light.png` on light surfaces. 8. Everything aligns to a multiple of 8, driven by one gutter variable. 9. South African English. CV (not resume). Organise, programme, colour. 10. Never promise a job. Promise the skill, the document, the confidence. --------------------------------------------------------------------------- ## 3. THE SYSTEM --------------------------------------------------------------------------- ### 3.1 Colour Paper #FBF7ED primary light surface ~55% of any layout Ink Black #000000 dark surface, mastheads ~25% Brand Gold #C9A962 identity accent ~12% Teal Green #087F75 accent on light, bullets ~8% Ink #0D1418 body text on light Paper Deep #EFE6D2 tinted panels, table headers Cream White #FFFDF6 alternating table rows Coral #F2714E ONE sparse highlight only Line #D9CFBA hairline rules on paper Muted #5C574F secondary text on paper Print Dark #17231D replaces pure black in print Print Lime #B7D83F eyebrow colour in print only Those percentages are a real constraint, not decoration. If your layout is more than ~12% gold, it is wrong. Gold is a foil stamp, not a paint. Contrast that passes: ink #0D1418 on paper #FBF7ED AAA body text white on black AAA body text green #087F75 on paper AA eyebrows, links, 16px+ gold #C9A962 on black AA large — display text & labels only Contrast that fails — never do these: gold on paper (invisible) line #D9CFBA as a text colour green on black (muddy — use gold instead) Print swap: pure black blocks become `#17231D` and eyebrows on those blocks become `#B7D83F`. This is for ink economy and it reads warmer on paper. ### 3.2 Typography Display Playfair Display 600–700 headlines, covers, quotes Body Inter 400–600 body, UI, captions Label Montserrat 700–800 (or Inter 700–800) uppercase eyebrows Scale: display-xl clamp(3rem, 6.8vw, 5.6rem) lh .98 ls -.04em covers display-l clamp(2.5rem, 5vw, 4.2rem) lh 1.02 ls -.035em chapters display-m clamp(2.2rem, 4.6vw, 3.6rem) lh 1.02 ls -.03em sections display-s clamp(1.7rem, 3.4vw, 2.3rem) lh 1.12 ls -.02em subsections quote 1.35rem italic Playfair lh 1.4 body 1rem lh 1.65 body-small 0.9rem lh 1.55 eyebrow 0.72rem 800 ls .16em UPPERCASE label 0.66rem 700 ls .14em UPPERCASE The rule that makes it look right: **display type gets negative tracking, uppercase labels get positive tracking.** Playfair at large sizes without `-.03em` looks loose and amateur. Eyebrows without `+.16em` look cramped. Line breaks: two-line headlines beat one long line. Break at a grammatical seam, and break with intent (`
`), do not let it wrap randomly. Good: "One sunrise,
every surface." Good: "Practical skills.
Real opportunities." Bad: "One sunrise, every
surface." Measure: body copy is 60–75 characters (~680px). Longer and it stops being readable; the handbook and playbook both cap at 680px. ### 3.3 Spacing and layout Scale (px): 8, 16, 24, 40, 64, 104. Everything is a multiple of 8. One variable drives all horizontal edges: --gutter: 72px desktop 40px ≤900px 24px ≤580px Page padding, chapter header padding, footer padding and rule insets all use `--gutter`. This is the single biggest reason the documents look tight: every element starts on the same vertical line. Full-bleed dark headers are made by applying `margin: calc(var(--gutter) * -1)` and then `padding: var(--gutter)`. Widths: document column 920px · body measure 680px · marketing container 1180px. Rules: hairlines are `1px solid #D9CFBA`. Heavy dividers between major blocks are `12px solid #000000`. ### 3.4 Logo The mark is a gold sunrise: rays fanning from a half-sun sitting on a horizon line. "SKILL" in white (or ink) and "MZANSI" in gold. The monogram is the same sunrise over "SM". logos/wordmark-stacked-light.png compact lockup, light surfaces logos/wordmark-stacked-dark.png compact lockup, dark surfaces logos/wordmark-wide-light.png mastheads, banners, light logos/wordmark-wide-dark.png mastheads, banners, dark logos/monogram-stacked-light.png square placements, light logos/monogram-stacked-dark.png square placements, dark logos/monogram-wide-light.png shallow placements, light logos/monogram-wide-dark.png shallow placements, dark logos/app-icon-96.png favicon / app icon Rules: - Dark variants retain white + gold artwork. Light variants replace white with ink `#0D1418` and keep gold. Using the wrong variant makes half the mark disappear — this is the single most common mistake. - Clear space on all four sides = the height of the sun arc. - Minimum size: wordmark 160px wide, monogram 28px wide. - Once per layout. Wordmark bottom-left or top-left; monogram top-right or centred. - Never stretch, recolour, add shadow/glow, place on a busy background, or trace the PNGs into vectors. ### 3.5 Motion loaders/page-entry.svg 2.6s once full sunrise draws itself loaders/button-rays.svg 1.3s loop busy buttons, inline waits loaders/arc-travel.svg 1.8s loop data in motion, syncing loaders/content-sweep.svg 1.6s loop skeleton content loading Doctrine: - The full sunrise draws once, on first entry. Never loop it. - Fragments carry everyday waits. - Nothing animates for interactions under 300ms. - Scroll reveals: opacity 0→1 with translateY(22px)→0 over 700ms, staggered 70ms per sibling, triggered by IntersectionObserver at threshold 0.12, with a 3.5s safety timeout that force-reveals everything (never leave content invisible if the observer fails). - Every animation honours `prefers-reduced-motion` — both at page level and inside each SVG. Easing: enter `cubic-bezier(.22,.61,.36,1)`, standard `ease-out`. --------------------------------------------------------------------------- ## 4. VOICE --------------------------------------------------------------------------- Direct, warm, practical, dignified. Never hype. - Speak to one person. "Your first CV" not "CVs for everyone". - Lead with the useful thing. No throat-clearing. - Verbs over adjectives. "Build a CV that gets read" beats "amazing CVs". - Say what it costs and what it takes. - Numbers and proof beat superlatives. "Recruiters skim a CV in 7 seconds — ATS software does it in 2" beats "stand out from the crowd". - No exclamation marks in headlines. - South African English: organise, programme, colour, CV, matric, bursary. - Money: R1 200. Dates: 28 July 2026. Phone: +27 79 403 2751. Banned words: unlock, supercharge, game-changer, revolutionary, guru, ninja, "crushing it", "!!!", "10x". Headline patterns that work: "Your first CV, done right." "Build a CV that gets read." "Practical skills. Real opportunities." "Opportunity, by design." "Protect the sunrise." (internal/brand context) "The sunrise does the waiting." (motion section) Notice: short, concrete, often two clauses separated by a full stop, often a noun phrase rather than a command. CTA patterns: "Reserve your seat" · "Reserve my seat" · "Start Day 1" "Download the pack" · "See the handbook" Avoid: "Learn more", "Click here", "Sign up now!!!" --------------------------------------------------------------------------- ## 5. COMPOSITION PRINCIPLES --------------------------------------------------------------------------- These are the judgement calls that separate on-brand from nearly-on-brand. **5.1 The stack.** Eyebrow → headline → body → accent → logo/meta. Never put the eyebrow after the headline. Never skip straight to body text. **5.2 One accent.** Each layout gets exactly one of: a 44px gold underline bar, a green left border, a coral left border, or a gold spine. Two accents compete and the layout goes cheap. **5.3 Anchor the corners.** Compositions feel resolved when the logo sits in one corner and the meta line sits in the opposite one. Dark social posts: brandline top-left, meta bottom row. Documents: logo top-left, footer bottom. **5.4 Let the headline be big.** The most common failure is a timid headline. On a 1080px social post the headline is ~64px. On a cover it is `clamp(3rem, 6.8vw, 5.6rem)`. If it looks slightly too big, it is correct. **5.5 Negative space is the product.** Do not fill the canvas. The handbook cover is 880px tall with the headline occupying about a third of it. Empty paper signals confidence. **5.6 Rhythm through repetition.** Numbered rows, tile grids, swatch grids — repeat one unit with consistent internal padding rather than designing each item. The playbook's "In this part" list is one row pattern repeated with gold italic numerals; that is the whole design. **5.7 Dark blocks divide, paper blocks explain.** In any long artefact, dark full-bleed headers mark a new chapter; paper carries the content. This rhythm is the structure of the handbook, the playbook and the deck. **5.8 Print is a first-class target.** Anything document-shaped gets an A4 print stylesheet: page breaks before chapters, `break-inside: avoid` on callouts/tables/quotes, running header, page numbers suppressed on the cover. --------------------------------------------------------------------------- ## 6. ASSET RECIPES --------------------------------------------------------------------------- ### 6.1 Social post — 1:1 (1080 × 1080) Canvas: black `#000000`. Padding 9% (≈96px safe margin). Grid: three rows — brandline (top), headline block (centre), meta (bottom). Brandline monogram-wide-dark.png at ~16px tall + "SKILLMZANSI" in Inter 800, .22em tracking, white 85% Eyebrow gold #C9A962, 800, .18em, uppercase, ~11px equivalent Headline Playfair Display 700, sentence case, ~1.55rem at preview scale (≈64px at 1080), lh 1.08, ls -.02em, white Accent 44 × 3px gold bar, 14px below the headline Meta "@skillmzansi" left · "skillmzansi.com" right, white 55%, ~11px Headline maximum 8 words. If it needs more it is two posts. HTML skeleton (renders at any size — set the wrapper width):
SKILLMZANSI

Employability Bootcamp · Johannesburg

Your first CV,
done right.

@skillmzansiskillmzansi.com
Paper variant: swap background to `#FBF7ED`, text to `#0D1418`, eyebrow to green `#087F75`, use `monogram-wide-light.png`, keep the gold bar. ### 6.2 Story — 9:16 (1080 × 1920) Canvas: `linear-gradient(170deg, #15130e, #000 62%)`. Padding 8%. Keep all content between 250px from top and 250px from bottom (platform UI). Rows: progress bars → brand row → centred content → footer monogram. Progress 3 bars, 2.5px tall, first gold, rest white 28% Brand row 20px circle with 1px gold 60% border containing the wide monogram, + "SKILLMZANSI" 700 .18em Eyebrow gold, uppercase, tracked Headline Playfair 700, ~1.32rem preview scale, lh 1.1 CTA chip 8px 13px padding, 1px gold 60% border, gold text, 800 .14em uppercase — use a non-breaking space before the arrow so it never wraps: "Reserve your seat →" Footer monogram-stacked-dark.png ~24px, opacity .85, centred ### 6.3 LinkedIn feed post + card (1200 × 627) White card `#FFFFFF`, 1px `#E3DED2` border. Head 34px black square containing monogram-stacked-dark.png, then "SkillMzansi" 700 + "Education · Johannesburg" muted Text Inter, 1.5 line height, ink. Lead with a number or a fact. Banner black block, gold eyebrow 800 .18em uppercase, then Playfair 700 headline URL bar #F3F2EF, "skillmzansi.com" left, "Reserve →" right, 700 .08em uppercase muted Copy pattern that works on LinkedIn: fact → consequence → offer. "Recruiters skim a CV in 7 seconds — ATS software does it in 2. Day 2 of the bootcamp teaches you to pass both." ### 6.4 WhatsApp Business message Not a designed image — a conversation. Match the platform, carry the voice. Confirmation: "Hi Thandi! Your seat for the 5-Day Employability Bootcamp is confirmed." Logistics: "Just yourself and your phone — your workbook is waiting. See you Monday, 09:00." Rules: use the person's name, confirm the concrete thing, remove anxiety about what to bring, end with a time and place. Short lines. No emoji walls. If mocking it up visually: WhatsApp dark `#0B141A`, header `#1F2C33`, outgoing bubble `#134F3B`, dotted-grid chat background. ### 6.5 Long-form document (handbook / playbook / report) This is the most developed pattern in the system. Structure: Masthead (screen only) black bar, wide dark wordmark, title block, print button Sidebar contents sticky, black, 4px gold top border, gold primary links, muted sub-links Cover paper with a diagonal tint, stacked light wordmark top-left, eyebrow, display-xl title, green subtitle, italic Playfair mission line, coral-bordered "inside this" box, footer rule with brand + endline, gold spine on the right Contents page eyebrow + big "Contents" + rows of label/title separated by hairlines Chapters full-bleed black header (negative margin = gutter) with gold eyebrow, display-l title, gold "Purpose" label, muted intro; then paper content below Section monogram mark + display-s heading + content Numbered rows 88px numeral column, gold italic decimal-leading-zero counters, Playfair 600 titles, hairline separators Document control two-column table, paperDeep row headers uppercase tracked, status as a coral chip Print: A4, margins 16mm 16mm 18mm, running header "SKILL MZANSI / " top-right 7pt muted, page number bottom-centre, both suppressed on page 1. Cover gets a 2px ink border and `break-after: page`. Each chapter gets `break-before: page`. Dark headers become `#17231D` with `#B7D83F` eyebrows and `print-color-adjust: exact`. Tuning tip learned the hard way: a chapter header at 92mm min-height plus 10 rows at 4.2mm padding overflows A4 and spills one or two rows onto a second page. Reduce to 76mm header and 3.2mm row padding and each chapter fits one page. Always render to PDF and count pages before shipping. ### 6.6 Presentation slide Use `SkillMzansi_Brand_Template.pptx`. Seven layouts, all furniture on the layouts: SkillMzansi · Cover (Dark) SkillMzansi · Section Divider (Dark) SkillMzansi · Content (Paper) SkillMzansi · Two Column (Paper) SkillMzansi · Title Only (Paper) SkillMzansi · Blank (Paper) SkillMzansi · Closing (Dark) Geometry: 13.333 × 7.5in (16:9). Margin 0.83in. Border inset 0.24in. Type: cover title 44pt · section title 40pt · content title 27pt · body 15pt · two-column body 14pt · eyebrow 13pt gold tracked uppercase · footer 8pt. Paper layouts carry: 1.1pt ink border frame inset 0.24in, light monogram top right, hairline + footer text bottom, and a 0.9 × 0.045in gold bar under the title. Dark layouts carry: gold top rule 0.055in, gold spine at right, footer. Rules: six lines maximum per content slide. Alternate dark dividers with paper content. Tables get a black header row with gold uppercase labels and body rows alternating `#FFFDF6` / `#EFE6D2`. If generating programmatically with python-pptx, note that `add_shape`, `add_textbox` and `add_picture` only exist on *slide* shape collections. To put furniture on a **layout** you must drive the XML directly: from pptx.shapes.autoshape import AutoShapeType, Shape def new_autoshape(shapes, mso_shape, x, y, w, h): id_ = shapes._next_shape_id t = AutoShapeType(mso_shape) sp = shapes._spTree.add_autoshape(id_, f"{t.basename} {id_-1}", t.prst, int(x), int(y), int(w), int(h)) return Shape(sp, shapes) Pictures on layouts: `shapes.part.get_or_add_image_part(path)` then `shapes._spTree.add_pic(...)`. Placeholder formatting is inherited by slides if you inject an `` into the layout placeholder's ``. Always set `` on title placeholders or they inherit bullets. ### 6.7 Marketing / landing page section Alternate paper and dark full-width sections. Each section:
→ .wrap (min(1180px, 100% - 48px)) .head → 2-column grid: [eyebrow + display-m headline] | [lede] .grid → 12 columns, gap 16px, tiles span 6 / 4 / 3 / 12 Tiles are bordered `1px #D9CFBA` on paper (or `rgba(201,169,98,.28)` on dark) with a label bar and a centred stage. Add `.sm-reveal` for scroll animation. Section padding `104px 0` desktop, `64px 0` ≤1000px. ### 6.8 Email Plain, single column, 600px. Paper background, ink text, one gold rule, one CTA button (gold background, black text, uppercase tracked). Wordmark stacked-light at 160px at the top. No background images — many South African inboxes are on mobile with images off, so the message must survive as text. ### 6.9 Certificate Paper, 2px ink border inset, stacked light wordmark centred at top, eyebrow "Certificate of Completion", recipient name in Playfair at display-l with a hairline beneath, course name in green 800 uppercase tracked, date and signature blocks on a shared baseline, verification URL in muted 0.72rem. One gold element only — the wordmark's own gold. --------------------------------------------------------------------------- ## 7. CODE TEMPLATES --------------------------------------------------------------------------- ### 7.1 Minimal page head Then use `.sm-paper` or `.sm-dark` on the body and the component classes. If you cannot link `brand.css`, inline the `:root` block from Section 3. ### 7.2 The stack, in HTML

Employability bootcamp · Founding edition

Build confidence in
your professional value.

Five days. One workbook. A CV, a LinkedIn profile and an interview answer you are proud of.

### 7.3 Full-bleed chapter header

Part C

Growth & Marketing Strategy

Requires the parent to have `padding: var(--sm-gutter)`. ### 7.4 Scroll reveal document.querySelectorAll(".sm-reveal").forEach(el => io.observe(el)); const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); setTimeout(() => document.querySelectorAll(".sm-reveal") .forEach(el => el.classList.add("is-in")), 3500); // safety net ### 7.5 Self-animating sunrise (inline SVG, no JS) Rays draw outward from the centre using `pathLength="1"` and animated `stroke-dashoffset`, staggered from the centre out: ### 7.6 A4 print block @page { size: A4 portrait; margin: 16mm 16mm 18mm; } @page { @top-right { content: "SKILL MZANSI / DOCUMENT NAME"; color:#6e6a5e; font:7pt Inter,sans-serif; letter-spacing:.08em; } @bottom-center { content: counter(page); color:#6e6a5e; font:8pt Inter,sans-serif; } } @page:first { @top-right{content:none} @bottom-center{content:none} } --------------------------------------------------------------------------- ## 8. WORKED EXAMPLES --------------------------------------------------------------------------- ### Example A — "Make an Instagram post announcing the next bootcamp." Reasoning: announcement → dark surface. Social → 1:1 recipe 6.1. Copy: eyebrow carries the what/where, headline carries the benefit. Eyebrow EMPLOYABILITY BOOTCAMP · JOHANNESBURG Headline Your first CV, done right. Accent gold bar Meta @skillmzansi · skillmzansi.com Then output the HTML from 6.1 with those strings. Do not add a price, a date badge, a "limited seats!!" flash, or a second accent. ### Example B — "Give me a one-page overview of the 5-day bootcamp as a PDF." Reasoning: >150 words and printable → paper document, recipe 6.5, single chapter. Structure: Cover-lite header: eyebrow "5-Day Employability Bootcamp", display-l headline, italic Playfair mission line, coral-bordered outcomes box. Then a numbered-row list of the five days (gold italic numerals, Playfair 600 titles, hairline separators). Footer: brand left, endline right, hairline above. Print block from 7.6; add `break-inside: avoid` to the rows. Render to PDF and confirm it is exactly one page before delivering. ### Example C — "Build me 5 slides on why employability matters." Reasoning: deck → recipe 6.6, alternate surfaces. 1 Cover (Dark) "Why employability matters" eyebrow: SKILLMZANSI · 2026 2 Content (Paper) "The gap is not talent" — 4 bullets, facts 3 Section Divider (Dark) eyebrow "02 · What we do", title "Five days. One workbook." 4 Two Column (Paper) "Before / After" — 3 bullets each 5 Closing (Dark) "Building South Africa's future workforce." + contact line in gold Six lines maximum per slide. Do not add clip art, gradients, drop shadows, or a second accent colour. --------------------------------------------------------------------------- ## 9. QA CHECKLIST --------------------------------------------------------------------------- Run every item before delivering. If any fails, fix it, do not explain it. [ ] Exactly one surface per panel (paper OR dark). [ ] Exactly one gold accent in the layout. [ ] Headline is Playfair Display, sentence case, negative tracking. [ ] Eyebrow is uppercase, 800 weight, ~.16em tracking, above the headline. [ ] Body is Inter, ink on paper / white on dark, ≤75 characters per line. [ ] No border-radius except circular avatars. [ ] Logo appears once, correct light/dark variant, clear space respected, at or above minimum size. [ ] All spacing is a multiple of 8; edges align to one gutter. [ ] Contrast passes (see 3.1). No gold text on paper. No gold body copy. [ ] South African English; no banned hype words; no "!" in the headline. [ ] No promise of employment. [ ] Meta line present on social: @skillmzansi · skillmzansi.com [ ] Animations honour prefers-reduced-motion; nothing loops the full sunrise; nothing animates under 300ms. [ ] If printable: A4 block present, page breaks correct, cover has no running header, rendered and page count verified. [ ] If a deck: ≤6 lines per slide, furniture untouched on slides. --------------------------------------------------------------------------- ## 10. ANTI-PATTERNS --------------------------------------------------------------------------- Seen often, always wrong: - Gold background with white text. (Gold is for black text, sparingly.) - Rounded cards with soft shadows. This is not a SaaS dashboard brand. - Gradient headlines, gradient buttons, glassmorphism. - Two or three accent colours in one layout. - ALL CAPS HEADLINES. Uppercase is only for eyebrows and labels. - Centre-aligned body copy in documents. (Centre is for closings only.) - Stock photos of people in suits shaking hands. - Emoji in headlines or in formal documents. - The light logo on a dark background (half the mark vanishes). - Filling every pixel. Empty paper is the point. - Tiny timid headlines. If it looks slightly too big, it is right. - Inventing new colours "to add energy". The palette is the palette. - Long body copy set in green or gold. - Letting a headline wrap randomly instead of breaking it deliberately. --------------------------------------------------------------------------- ## 11. WHEN YOU ARE UNSURE --------------------------------------------------------------------------- Defaults that are always safe: - Surface: paper. - Headline: Playfair 700, sentence case, two lines. - Accent: a single 44 × 3px gold bar under the headline. - Logo: `wordmark-stacked-light.png` top-left at 176px. - Spacing: 64px section padding, 24px component padding. - Voice: state the benefit in plain words, then the concrete next step. If asked for something the system does not cover (a billboard, a T-shirt, a video lower-third), derive it: pick the surface, build the stack, one accent, logo once, respect the ratios in 3.1. Do not invent new tokens. If asked to violate a non-negotiable, say what the brand rule is, offer the closest on-brand alternative, and produce that. --------------------------------------------------------------------------- ## 12. FILE MAP --------------------------------------------------------------------------- brand-pack.html the brand pack, rendered llms.txt short index + top 10 rules llms-full.txt this file brand.json machine-readable tokens brand.css drop-in variables + components AGENTS.md instructions for coding agents README.md human brand rules (ships in the zip) skillmzansi-brand-pack.zip logos + loaders + README logos/*.png 8 lockups + app icon loaders/*.svg 4 self-animating loaders Repository (if you have it): web/static/brand-pack/ this pack web/static/brand/ source logo PNGs web/assets/styles.css live product theme tokens web/components/EmployabilityHandbook.tsx long-form reference brand/SkillMzansi_Brand_and_Growth_Playbook_v1.0.html document reference brand/SkillMzansi_Brand_Template.pptx deck template brand/pptx/build_brand_template.py template generator brand/pptx/preview_pptx.py pptx → HTML previewer --- end ---