Brand assets
Hephaestus uses the solid signal-blue Hephaestus mark for product identity. The bare, animated Hephaestus drawing is reserved for the mentor persona.
Source and generation
webapp/brand/hephaestus-mark.svg is the source for the static mark. The React HephMark renders
that file directly. One exporter produces every tracked browser, app, documentation, README,
social-card, and external-profile asset. It embeds the pinned Inter font so raster output does not
depend on fonts installed on a contributor's computer:
vp run --filter webapp export:assets
To regenerate only the Chrome extension icons and store promotional image without starting Storybook or touching other assets:
vp run --filter webapp export:assets --only extension
Do not edit generated files under webapp/public/, extension/public/icon/, docs/images/readme/, or docs/static/img/.
The exporter also synchronizes the maintenance-page mark in webapp/docker/maintenance.html. CI
regenerates all of these outputs and fails when the committed result differs.
The exporter renders every output into a temporary directory. Only after all outputs render does it write to the repository. Thus, a failed or interrupted run leaves the committed assets unchanged.
For README images, it starts its own Storybook on a free loopback port. It never uses a port that another checkout's Storybook can hold. It stops Storybook when it finishes, fails, or receives an interruption.
Images with text include lockups, social cards, and README captures.
These images rasterize slightly differently on macOS and CI's Linux runners.
The committed files come from the webapp-stories job in .github/workflows/ci-quality-gates.yml.
That job pins the operating-system version because browser rasterization also differs between Linux versions.
If a local run changes only those images without an intended change, restore them.
Do not commit that difference.
The README images capture the landing-page export stories, not just the static mark.
The feedback-scene capture is WebP, because only the docs home page shows it.
The landing-hero capture stays PNG for the GitHub README.
Changes to those stories, their component tree, or the shared theme also require regenerating the assets.
Application icons use a tighter optical crop so Hephaestus remains legible at small sizes. Product UI, favicons, and maskable icons keep their platform-appropriate spacing.
Usage
| Context | Asset |
|---|---|
| In-app product lockup | HephaestusLogo or HephMark |
| Mentor conversation | HephIcon |
| README and documentation navbar | Light/dark lockup PNGs |
| Browser tab | favicon.png |
| Installed web app | 192px, 512px, and maskable PNGs from webapp/public/manifest.json |
| Chrome extension toolbar and management | extension/public/icon/16.png, 32.png, and 48.png |
| Chrome extension installation and Web Store | extension/public/icon/128.png |
| Chrome Web Store promotional image | docs/static/img/brand/chrome-extension-promo-440x280.png |
| Link preview | hephaestus-social-card.png |
| Slack app | docs/static/img/brand/slack-app-icon-512.png |
| GitHub App, GitHub OAuth App, and other external profiles | docs/static/img/brand/external-app-icon-1024.png |
| GitHub repository social preview | docs/static/img/brand/github-repository-social-preview-1280x640.png |
The static mark remains signal blue (#315FDC) in both color modes. UI wordmarks use the
mode-aware brand-accent token from webapp/src/styles/theme-tokens.css.
Prose always spells the product name “Hephaestus.”
Unlabeled React marks are decorative. Informative uses need a concise accessible name.
The README uses GitHub's theme-aware images. The documentation navbar uses Docusaurus light/dark logo sources. The installed-app exports follow the manifest icon-purpose contract and maskable safe zone.
The Chrome extension exports PNGs with transparent corners, preserving the circular brand mark. The 16px and 32px toolbar versions use the existing application crop to keep Hephaestus's face legible. The 48px version uses 42px artwork. The 128px store icon uses a centered 112px circle with 8px transparent margins, following Chrome's shape-specific icon sizing.
The 96px artwork and 16px margins on that page apply to square icons. These exports cover Chrome's manifest icon sizes. The store promotional image uses the same mark and pinned Inter font, with no simulated product UI. Chrome requires this 440×280 promotional image alongside real screenshots of the extension. Capture screenshots from the running product.
External surfaces
Generated files do not update third-party accounts. After changing the static mark, maintainers must upload the named assets in Slack and GitHub settings. The 1024px external icon is a high-resolution master, not a vendor-mandated size. Upload controls can resize it. Keep the mark square, without text or pre-rounded corners.
Slack renders app logos at 36px on mobile and applies its own corner treatment. GitHub's repository social-preview settings use the separately composed 1280×640 export.