Skip to content

Commit 0c4487b

Browse files
FelixTJDietrichFelixTJDietrich
authored
feat: adopt the signal-blue Heph identity (#1683)
1 parent 11a1b3c commit 0c4487b

63 files changed

Lines changed: 545 additions & 575 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/signal-blue-heph.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"hephaestus": patch
3+
---
4+
5+
Hephaestus now uses the signal-blue Heph mark across the web app, documentation, README, browser and installable-app icons, and link previews.

‎.github/workflows/ci-tests.yml‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,10 +161,11 @@ jobs:
161161
continue-on-error: true
162162
run: |
163163
timeout --kill-after=30s 15m pnpm --filter webapp run test:storybook
164-
pnpm --filter webapp run export:readme-assets
165-
if [[ -n "$(git status --porcelain --untracked-files=all -- docs/images/readme)" ]]; then
166-
echo "::error::README or documentation images are stale. Run 'pnpm --filter webapp run export:readme-assets' and commit the result."
167-
git status --short --untracked-files=all -- docs/images/readme
164+
pnpm --filter webapp run export:assets
165+
BRAND_ASSETS=(webapp/brand webapp/public docs/images/readme docs/static/img/brand docs/static/img/favicon.png docs/static/img/hephaestus-social-card.png docker/compose.proxy.yaml)
166+
if [[ -n "$(git status --porcelain --untracked-files=all -- "${BRAND_ASSETS[@]}")" ]]; then
167+
echo "::error::Brand assets are stale. Run 'pnpm --filter webapp run export:assets' and commit the result."
168+
git status --short --untracked-files=all -- "${BRAND_ASSETS[@]}"
168169
exit 1
169170
fi
170171
- name: Build Storybook with dependency stats

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div align="center">
2-
<picture>
3-
<source media="(prefers-color-scheme: dark)" srcset="./docs/static/img/brand/hammer_bg_dark.svg">
4-
<source media="(prefers-color-scheme: light)" srcset="./docs/static/img/brand/hammer_bg.svg">
5-
<img alt="" height="100" src="./docs/static/img/brand/hammer_bg.svg">
6-
</picture>
7-
8-
<h1>Hephaestus</h1>
2+
<h1>
3+
<picture>
4+
<source media="(prefers-color-scheme: dark)" srcset="./docs/static/img/brand/hephaestus-lockup-dark.png">
5+
<source media="(prefers-color-scheme: light)" srcset="./docs/static/img/brand/hephaestus-lockup-light.png">
6+
<img alt="Hephaestus" width="484" src="./docs/static/img/brand/hephaestus-lockup-light.png">
7+
</picture>
8+
</h1>
99
<p><strong>Learn from the work you're already doing</strong></p>
1010

1111
<p>

‎docker/compose.proxy.yaml‎

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -170,64 +170,10 @@ configs:
170170
article { display: block; width: 700px; padding: 50px; margin: 0 auto; }
171171
a { color: #fff; font-weight: bold;}
172172
a:hover { text-decoration: none; }
173-
svg.warning {
174-
width: 75px;
175-
margin-top: 1em;
176-
animation: warning-impact 1s infinite;
177-
}
178-
svg.hammer {
179-
translate: -135px -35px;
180-
position: absolute;
181-
width: 75px;
182-
margin-top: 1em;
183-
transform-origin: bottom left;
184-
animation: hammer-swing 1s infinite;
185-
}
186-
@keyframes hammer-swing {
187-
0% {
188-
transform: rotate(0deg);
189-
}
190-
20% {
191-
transform: rotate(-60deg);
192-
}
193-
30% {
194-
transform: rotate(-60deg);
195-
}
196-
40% {
197-
transform: rotate(0deg);
198-
}
199-
100% {
200-
transform: rotate(0deg);
201-
}
202-
}
203-
@keyframes warning-impact {
204-
0%, 37% {
205-
transform: scale(1) rotate(0deg);
206-
}
207-
40% {
208-
transform: scale(1.3) rotate(15deg);
209-
}
210-
42% {
211-
transform: scale(1.0) rotate(-10deg);
212-
}
213-
44% {
214-
transform: scale(1.2) rotate(5deg);
215-
}
216-
46%, 100% {
217-
transform: scale(1) rotate(0deg);
218-
}
219-
}
173+
svg.brand { width: 96px; }
220174
</style>
221175
<article>
222-
<div style="position: relative;">
223-
<svg class="warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.24 202.24"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Capa_1" data-name="Capa 1"><path class="cls-1" d="M101.12,0A101.12,101.12,0,1,0,202.24,101.12,101.12,101.12,0,0,0,101.12,0ZM159,148.76H43.28a11.57,11.57,0,0,1-10-17.34L91.09,31.16a11.57,11.57,0,0,1,20.06,0L169,131.43a11.57,11.57,0,0,1-10,17.34Z"/><path class="cls-1" d="M101.12,36.93h0L43.27,137.21H159L101.13,36.94Zm0,88.7a7.71,7.71,0,1,1,7.71-7.71A7.71,7.71,0,0,1,101.12,125.63Zm7.71-50.13a7.56,7.56,0,0,1-.11,1.3l-3.8,22.49a3.86,3.86,0,0,1-7.61,0l-3.8-22.49a8,8,0,0,1-.11-1.3,7.71,7.71,0,1,1,15.43,0Z"/></g></g></svg>
224-
<svg class="hammer" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" fill="none"
225-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
226-
<path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9"></path>
227-
<path d="m18 15 4-4"></path>
228-
<path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"></path>
229-
</svg>
230-
</div>
176+
<svg class="brand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Hephaestus"><circle cx="64" cy="64" r="64" fill="#315FDC"/><g transform="translate(24 20) scale(3.3333)" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7.2V3.6"/><circle cx="12" cy="2.8" r="1" fill="#fff"/><rect x="4" y="8" width="16" height="12" rx="3"/><path d="M2 14h2M20 14h2M8.6 13.5h.8M14.6 13.5h.8M9.7 16.8c1.1 1.1 3.5 1.1 4.6 0"/></g></svg>
231177
<h1>We&rsquo;ll be back soon!</h1>
232178
<div>
233179
<p>We&rsquo;re performing some maintenance at the moment. Sorry for the inconvenience.</p>

‎docs/admin/github-integration.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ Tokens are stored encrypted (AES-256-GCM) per workspace in the database.
4545
### GitHub App mode
4646

4747
Create the App at **Settings → Developer settings → GitHub Apps → New GitHub App**
48+
and use the generated
49+
[`external-app-icon-1024.png`](/img/brand/external-app-icon-1024.png) as its display image.
4850
(on your org: `https://github.com/organizations/<org>/settings/apps`).
4951

5052
- **Homepage URL:** `https://<APP_HOSTNAME>`

‎docs/admin/install.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@ Back up `.env` with the database as described in [Backup & Restore](./backup-res
121121

122122
## 3. Create the GitHub OAuth App (login — mandatory)
123123

124+
Use the generated
125+
[`external-app-icon-1024.png`](/img/brand/external-app-icon-1024.png) as the application
126+
logo when the GitHub settings page offers an image upload.
127+
124128
Without a login provider the instance boots but shows **no sign-in button**. GitHub login
125129
needs a plain **OAuth App** (this is *not* the same thing as the GitHub App used for data
126130
access — see [GitHub integration](./github-integration)):

‎docs/admin/production-setup.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ an independent key after the deployment succeeds.
8383

8484
### Slack app configuration
8585

86+
After creating the app, upload
87+
[`slack-app-icon-512.png`](/img/brand/slack-app-icon-512.png) as its app icon. Slack applies
88+
its own corner treatment, so do not round the asset before uploading it.
89+
8690
| Variable | Purpose |
8791
| --- | --- |
8892
| `HEPHAESTUS_INTEGRATION_SLACK_ENABLED` | Enables the Slack OAuth admin surface (per-workspace connect). Off by default. |

‎docs/contributor/brand-assets.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Brand assets
3+
---
4+
5+
# Brand assets
6+
7+
Hephaestus uses the solid signal-blue Heph mark for product identity. The bare, animated Heph drawing
8+
is reserved for the mentor persona.
9+
10+
## Source and generation
11+
12+
`webapp/brand/hephaestus-mark.svg` is the source for the static mark. The React `HephMark` renders
13+
that file directly. One exporter produces every tracked browser, app, documentation, README,
14+
social-card, and external-profile asset. It embeds the pinned Inter font so raster output does not
15+
depend on fonts installed on a contributor's computer:
16+
17+
```bash
18+
pnpm --filter webapp run export:assets
19+
```
20+
21+
Do not edit generated files under `webapp/public/`, `docs/images/readme/`, or `docs/static/img/`.
22+
The exporter also synchronizes the inline maintenance-page mark in `docker/compose.proxy.yaml`. CI
23+
regenerates all of these outputs and fails when the committed result differs.
24+
25+
Application icons use a tighter optical crop so Heph remains legible at small sizes. Product UI,
26+
favicons, and maskable icons keep their platform-appropriate spacing.
27+
28+
## Usage
29+
30+
| Context | Asset |
31+
|---|---|
32+
| In-app product lockup | `HephaestusLogo` or `HephMark` |
33+
| Mentor conversation | `HephIcon` |
34+
| README and documentation navbar | Light/dark lockup PNGs |
35+
| Browser tab | `favicon.png` |
36+
| Installed web app | 192px, 512px, and maskable PNGs from `webapp/public/manifest.json` |
37+
| Link preview | `hephaestus-social-card.png` |
38+
| Slack app | `docs/static/img/brand/slack-app-icon-512.png` |
39+
| GitHub App, GitHub OAuth App, and other external profiles | `docs/static/img/brand/external-app-icon-1024.png` |
40+
| GitHub repository social preview | `docs/static/img/brand/github-repository-social-preview-1280x640.png` |
41+
42+
The static mark remains signal blue (`#315FDC`) in both color modes. UI wordmarks use the
43+
mode-aware `brand-accent` token from `webapp/src/styles.css`; prose always spells the product name
44+
“Hephaestus.” Unlabelled React marks are decorative. Informative uses need a concise accessible name.
45+
46+
The README uses [GitHub's theme-aware picture sources](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/),
47+
the documentation navbar uses [Docusaurus light/dark logo sources](https://docusaurus.io/docs/api/themes/configuration),
48+
and the installed-app exports follow the manifest [icon-purpose contract](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons)
49+
and [maskable safe zone](https://web.dev/articles/maskable-icon).
50+
51+
## External surfaces
52+
53+
Generated files do not update third-party accounts. After changing the static mark, maintainers must
54+
upload the named assets in Slack and GitHub settings. The 1024px external icon is a high-resolution
55+
master, not a vendor-mandated size; upload controls may resize it. Keep the mark square, without text
56+
or pre-rounded corners. [Slack renders app logos at 36px on mobile and applies its own corner
57+
treatment](https://api.slack.com/start/designing#logo_assets). GitHub's
58+
[repository social-preview settings](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview)
59+
use the separately composed 1280×640 export.

‎docs/docusaurus.config.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const envBaseUrl = process.env.DOCUSAURUS_BASE_URL;
1111
*/
1212
const baseUrl = envBaseUrl === undefined || envBaseUrl === "" ? "/" : envBaseUrl;
1313

14-
/** The site's one-sentence definition of the product, kept in step with the README's opening. */
1514
const DESCRIPTION =
1615
"Hephaestus is an open-source AI mentor for software teams. It reads the work developers already do against the practices their project cares about, and writes back feedback they can act on.";
1716

@@ -31,7 +30,7 @@ function rawMermaidSourcePlugin(_context: LoadContext): Plugin {
3130
const config: Config = {
3231
title: "Hephaestus Documentation",
3332
tagline: "Learn from the work you're already doing",
34-
favicon: "img/favicon.ico",
33+
favicon: "img/favicon.png",
3534

3635
future: {
3736
v4: true,
@@ -154,7 +153,7 @@ const config: Config = {
154153
],
155154

156155
themeConfig: {
157-
image: "img/hephaestus-social-card.jpg",
156+
image: "img/hephaestus-social-card.png",
158157
colorMode: {
159158
respectPrefersColorScheme: true,
160159
disableSwitch: false,
@@ -171,10 +170,12 @@ const config: Config = {
171170
{ name: "twitter:description", content: DESCRIPTION },
172171
],
173172
navbar: {
174-
title: "Hephaestus",
175173
logo: {
176-
alt: "Hephaestus logo",
177-
src: "img/hammer.svg",
174+
alt: "Hephaestus",
175+
src: "img/brand/hephaestus-lockup-light.png",
176+
srcDark: "img/brand/hephaestus-lockup-dark.png",
177+
width: 155,
178+
height: 32,
178179
},
179180
items: [
180181
{

‎docs/sidebars.contributor.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const sidebars: SidebarsConfig = {
1818
"accessibility-audit-plan",
1919
"security-mutation-testing",
2020
"coding-guidelines",
21+
"brand-assets",
2122
"api-error-handling",
2223
"workspace-context",
2324
"ai-agent-workflow",

0 commit comments

Comments
 (0)