---
name: pe-brand-assets
description: Create standalone visual assets that stay on brand — SVG illustrations for articles and blog posts, repo and social/OG images, logo and identity work, on-brand concept images for features. Authors SVG in code. Reads the project's brand truth (DESIGN.md, style guides, a brand/ folder) first and refuses to invent brand values. Triggers on brand asset, on-brand, SVG illustration, article image, header image, og image, social card, repo image, logo, brand kit, identity, tagline panel. Not for UI mockups (pe-design), production components (pe-build), or judging existing assets (pe-review).
license: Apache-2.0
metadata:
  provenance: foundry/derivations/brand-assets.md in the source repository
---

# Brand Assets

Standalone assets that belong to the brand, authored as SVG in code and exported to
raster where the destination requires it.

## The workflow

1. **Locate brand truth — or stop.** Read, in order: `DESIGN.md` (the pe-design skill's
   understand mode owns its format), any style guide, and a `brand/` folder (logos,
   fonts, reference assets) if present. Index what exists: palette tokens, type
   choices, radii/shape language, existing marks and motifs. If none of these exist,
   do not invent a brand — offer to run pe-design·understand first, or proceed only with
   values the user supplies in the conversation, labeled as provisional.
2. **Derive the asset's rules.** Colors come only from the brand palette (cite the
   token names). Type in the asset is the brand's faces. Shapes follow the recorded
   shape language. The metaphor comes from the identity method
   (`references/identity-method.md`).
   **Restraint is the default register**: the strongest brand asset is often type set
   well on a quiet ground. Marks, shapes, and illustration must earn their way in —
   propose the typographic answer first, and add a drawn element only when the user
   asks for one or the typographic answer demonstrably fails the job.
3. **Author the SVG — rules split by how it will be consumed.**
   If a mark was commissioned: a letterform inside a container is not a mark — the
   geometry itself must carry the meaning, and the result must clear the pe-design
   skill's `references/direct/slop-tells.md` bans. Never ship a first render: author,
   then critique against those tells and the brand rules, reject, and redo — the
   reject-and-redo pass is part of authoring, not optional review.
   Always: a real `viewBox`; named `<g>` groups for logical parts; no editor cruft
   (empty groups, default ids).
   *Inline in a page's DOM* (site illustrations, in-app art): `currentColor` or
   CSS-variable fills so it themes with the page; hard-coded brand hexes only for
   elements that must not re-theme (the logo mark); live `<text>` with the font named
   and a fallback stated; omit fixed root width/height and let layout size it;
   decorative → `aria-hidden="true"`, informative → `role="img"` + `<title>` wired
   via `aria-labelledby` — say which applies in the report.
   *Consumed as a file* (`<img>` src, README, anywhere external): `currentColor` and
   CSS variables do not resolve and webfonts do not load — use hard-coded brand hexes
   and set root width/height for intrinsic sizing. Convert text to paths for
   logo-grade marks; for text-led assets, declare a full system fallback stack and
   design the composition to hold up in the fallback faces.
   Static by default: animate only on explicit request, with the craft from
   pe-build·motion.
4. **Export where SVG can't go.** OG/social endpoints and GitHub's social preview
   accept raster only: render the SVG to PNG at the destination size (1200×630 for
   standard OG tags; 1280×640 for GitHub's social preview) and deliver both files,
   the SVG as the editable source of truth.
5. **Verify against the brand.** Every color maps to a cited token; the asset reads
   at its real display size (an OG image is judged at thumbnail size); it sits
   correctly on both light and dark grounds or names its required ground; it doesn't
   collide with the anti-generic bans in the pe-design skill's
   `references/direct/slop-tells.md`.
6. **Report.** The tokens and motifs used, the metaphor and method chosen, placement,
   sizes and exported formats, and anything provisional that should graduate into
   DESIGN.md or the `brand/` folder.

## Asset-type notes

- **Article/blog illustrations:** one atmospheric asset per piece at most; supporting
  figures stay quiet — the identity method's panel rhythm, applied to a page.
- **Repo / social / OG images:** authored as SVG, delivered as PNG per step 4; text
  must survive the thumbnail render or be removed.
- **Logo and identity work:** the identity method governs; concepts come with the
  method named (e.g. "Negative Space: cutout initial") and two–three genuinely
  different candidates, not variations of one.
- **Feature concepts:** an on-brand *image* of a possible feature is this skill; an
  interactive mockup of it is pe-design·mock — hand off when interaction matters.

## Handoffs

No brand truth exists → **pe-design**, understand mode (document or generate the system
first). Asset needs to become a UI component → **pe-build**. Judging existing assets →
**pe-review**. Animating an asset → **pe-build**, motion mode.