Skip to content

feat(desktop): rebrand the app icon and banner wordmark to codev - #170

Merged
quickbeard merged 3 commits into
mainfrom
codev-icon-wordmark
Aug 9, 2026
Merged

quickbeard merged 3 commits into
mainfrom
codev-icon-wordmark

Conversation

@quickbeard

Copy link
Copy Markdown
Owner

Issue for this PR

Closes #

Type of change

  • New feature

What does this PR do?

Two surfaces were still upstream-branded: the desktop app icon and the large banner wordmark.

App icon. The Dock/taskbar and installer icons were upstream's black "o" square, with blueprint variants on the dev and beta channels. They are now the brand-red C — the same glyph codev --mini badges its splashes with — on a white tile, at the proportions the VS Code extension icon already uses (unit = 120/1024, mark 480x600 centred).

Rather than regenerate by hand, packages/desktop/icons/icon.svg is now the source of record and packages/desktop/scripts/generate-icons.ts produces every PNG size, icon.icns and icon.ico for all three channels from it. The script rasterizes, encodes the PNGs and builds the ICO container itself, so iconutil is the only external tool it needs, and its output is deterministic — a second run is byte-identical.

The .icns members and dock.png use Apple's Big Sur icon grid: the tile inset to 824/1024 with a drop shadow. That inset is what the old icons/README.md was reaching for when it told you to run the art through Image2Icon's "Big Sur Icon" preset — full-bleed icons read as oversized next to native ones, and a white tile with no shadow has no edge against a light Dock. Windows, Linux and Store assets stay full-bleed, as upstream's were.

All three channels ship the same mark for now. That was a deliberate call (upstream distinguishes dev/beta with blueprint treatments); the generator still writes each channel separately, so giving one its own treatment later is a change to that script alone.

Banner. Logo now draws the lowercase codev wordmark instead of "opencode", built from the same wordmarkHalves pixel glyphs as the TUI banner and the landing page — a 24x6 grid at one unit per pixel — as two paths rather than upstream's shadowed per-glyph paths.

Colours follow the CLI and come from two custom properties in logo.css: --logo-wordmark-dev is always brand red #ee0033, and --logo-wordmark-co is brand navy #19224c on light, the theme foreground on dark. The dark swap is declared three times — under prefers-color-scheme: dark for surfaces that never stamp a theme, then under both [data-color-scheme="light"] and [data-color-scheme="dark"]. The light override is the non-obvious one: the app always stamps data-color-scheme on <html>, so without it a light theme on a dark OS would keep the media-query value and render navy on dark.

The new wordmark's box is 4:1 where upstream's was 5.57:1, so the three call sites (home, error page, enterprise share route) move to the widths at which it renders at exactly the height the old one did — no surrounding layout shifts.

Mark/Splash (the square "o" loading splash and new-session mark) are deliberately untouched — out of scope here. The OAuth callback page carries a second copy of the old wordmark plus several "OpenCode" strings; rebranding it means the wordmark and the strings together or the page reads inconsistently, so it is recorded as a tracked gap in DIVERGENCES.md instead of half-done here.

DIVERGENCES.md gains rows for the logo component, the call-site widths and the icon assets, and the "desktop app icons — need design assets" gap is now closed. CHANGELOG.md has an Unreleased entry.

How did you verify your code works?

  • Rendered the wordmark geometry directly from wordmarkHalves and confirmed the glyphs spell "codev" before writing any path data.
  • Resolved getComputedStyle().fill on both paths in headless Chromium across all six theme states (OS light/dark x no attribute / data-color-scheme=light / =dark). "dev" is rgb(238, 0, 51) in every state; "co" is navy exactly when the effective theme is light. The OS-dark + explicit-light case is the one that fails without the extra override.
  • Checked the generated icons directly: PNG sizes match the previous assets one for one, the .ico parses with all seven sizes, and the .icns carries the same member types as the file it replaces.
  • Re-ran the generator after formatting and diffed hashes — byte-identical, so the committed assets match what the script produces.
  • bun typecheck clean in packages/ui, packages/app, packages/desktop and packages/enterprise; oxlint reports 0 warnings on the new files (matching the repo baseline) and prettier --check passes.
  • Launched bun dev:desktop and confirmed the app builds and starts.

Screenshots / recordings

The icon assets are in the diff and render inline in GitHub's image view — packages/desktop/icons/prod/dock.png shows the macOS treatment (inset + shadow) and 128x128@2x.png the full-bleed one. packages/desktop/icons/icon.svg is the source geometry.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

🤖 Generated with Claude Code

quickbeard and others added 3 commits August 8, 2026 10:51
The Dock/taskbar icon was still upstream's black "o" square (blueprint
variants on the dev and beta channels), and the large wordmark on the home
screen, error page and shared-session pages still spelled "opencode".

App icon: add packages/desktop/icons/icon.svg as the source of record — the
brand-red C, the same glyph the `codev --mini` splash badges with, on a white
tile at the VS Code extension icon's proportions — and generate every size,
.icns and .ico for all three channels from it via scripts/generate-icons.ts.
The .icns members and dock.png use Apple's Big Sur grid (824/1024 inset plus
drop shadow); without the inset a white tile reads oversized next to native
icons. Windows, Linux and Store assets stay full-bleed. All three channels
ship the same mark for now, but the generator writes them separately so a
channel can diverge later. The generator rasterizes, encodes PNG and builds
the ICO container itself, so iconutil is its only external tool, and its
output is deterministic.

Banner: Logo now draws the lowercase codev wordmark from the same
wordmarkHalves pixel glyphs as the TUI banner, as two paths coloured from
custom properties — "dev" always brand red, "co" brand navy on light and the
theme foreground on dark. The dark swap is declared under
prefers-color-scheme and under both data-color-scheme values, so the app's
explicit theme beats the OS preference in both directions; without the
light override, a light theme on a dark OS rendered navy on dark. The new
wordmark's box is 4:1 where upstream's was 5.57:1, so the three call sites
move to the widths that render at exactly the previous height.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The banner users actually see is WordmarkV2, the watermark behind the v2
new-session composer — a separate 720x129 "opencode" wordmark from the `Logo`
the previous commit rebranded, which only covers the older home and error
surfaces. It still said opencode.

Draw it from the same 24x6 pixel grid as Logo, as two paths. Upstream's
watermark treatment is kept verbatim: the 0.6 outer opacity and the alpha mask
that fades the mark out over its bottom half. "co" keeps currentColor so it
still follows the caller's text class; "dev" takes brand red.

Per-half opacities go in a new wordmark-v2.css, per the one-CSS-file-per-v2-
component convention. "co" is 0.112, upstream's own 0.16x0.7 nesting flattened.
"dev" is boosted — to 0.224 on light and 0.336 on dark — because at upstream's
weight a saturated red composites to within a few levels of the grey "co" half
against the dark background and the two-tone disappears, while the same value
already reads pink against the light one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The wordmark watermark reads as clutter on the new-session screen. Remove it,
and centre the content instead of leaving it top-weighted: upstream anchors the
block at top-[25.375%] purely to make room for the mark above it, so with the
mark gone that offset just parks the composer high in an empty pane.

The outer element becomes flex items-center justify-center over size-full, and
the mt-8 spacer under the wordmark goes away. WordmarkV2 stays exported and
rebranded so reinstating it does not bring the upstream mark back.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@quickbeard
quickbeard merged commit 721c251 into main Aug 9, 2026
0 of 5 checks passed
@quickbeard
quickbeard deleted the codev-icon-wordmark branch August 9, 2026 02:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant