# 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 (`<br>`), do not let it wrap randomly.
    Good:   "One sunrise,<br>every surface."
    Good:   "Practical skills.<br>Real opportunities."
    Bad:    "One sunrise, every<br>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):

    <div style="width:1080px;aspect-ratio:1;display:grid;
                grid-template-rows:auto 1fr auto;padding:9%;
                background:#000;color:#fff;font-family:Inter,sans-serif">
      <div style="display:flex;align-items:center;gap:8px">
        <img src="logos/monogram-wide-dark.png" style="height:34px">
        <span style="font-weight:800;letter-spacing:.22em;font-size:20px;
                     color:rgba(255,255,255,.85)">SKILLMZANSI</span>
      </div>
      <div style="align-self:center">
        <p style="margin:0 0 20px;color:#c9a962;font-weight:800;
                  letter-spacing:.18em;text-transform:uppercase;
                  font-size:20px">Employability Bootcamp · Johannesburg</p>
        <h1 style="margin:0;font-family:'Playfair Display',serif;
                   font-weight:700;font-size:64px;line-height:1.08;
                   letter-spacing:-.02em">Your first CV,<br>done right.</h1>
        <div style="width:88px;height:6px;margin-top:28px;background:#c9a962">
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;
                  color:rgba(255,255,255,.55);font-size:20px">
        <span>@skillmzansi</span><span>skillmzansi.com</span>
      </div>
    </div>

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&nbsp;→"
    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  /  <DOC NAME>" 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 `<a:lstStyle>` into the layout placeholder's `<p:txBody>`.
Always set `<a:buNone/>` on title placeholders or they inherit bullets.

### 6.7 Marketing / landing page section

Alternate paper and dark full-width sections. Each section:

    <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

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="brand.css">

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

    <p class="sm-eyebrow">Employability bootcamp · Founding edition</p>
    <h1 class="sm-display-l">Build confidence in<br>your professional value.</h1>
    <p class="sm-lede sm-measure">Five days. One workbook. A CV, a LinkedIn
       profile and an interview answer you are proud of.</p>
    <div class="sm-rule-gold"></div>

### 7.3 Full-bleed chapter header

    <header class="sm-chapter-header">
      <p class="sm-eyebrow">Part C</p>
      <h2 class="sm-display-l">Growth &amp; Marketing Strategy</h2>
    </header>

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:

    <svg viewBox="0 0 240 150" width="240" height="150">
      <style>
        .s { fill:none; stroke:#c9a962; stroke-linecap:round; }
        .h,.sun,.ray { stroke-dasharray:1; stroke-dashoffset:1; }
        .h   { stroke-width:2.5; animation:draw .55s ease-out forwards; }
        .sun { stroke-width:2.5; animation:draw .55s ease-out .38s forwards; }
        .ray { stroke-width:2;
               animation:draw .5s cubic-bezier(.22,.61,.36,1) forwards; }
        @keyframes draw { to { stroke-dashoffset:0; } }
        @media (prefers-reduced-motion:reduce){
          .h,.sun,.ray{ animation:none; stroke-dashoffset:0; } }
      </style>
      <g class="s">
        <line class="h" pathLength="1" x1="24" y1="112" x2="216" y2="112"/>
        <path class="sun" pathLength="1" d="M 98 112 A 22 22 0 0 1 142 112"/>
        <!-- rays: 15 lines from r=28 to r=42/54 across 10°..170°,
             animation-delay 0.72s + 0.09s per step out from centre -->
      </g>
    </svg>

### 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 ---
