Repository navigation
feat(desktop): rebrand the app icon and banner wordmark to codev - #170
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue for this PR
Closes #
Type of change
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 --minibadges 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.svgis now the source of record andpackages/desktop/scripts/generate-icons.tsproduces every PNG size,icon.icnsandicon.icofor all three channels from it. The script rasterizes, encodes the PNGs and builds the ICO container itself, soiconutilis the only external tool it needs, and its output is deterministic — a second run is byte-identical.The
.icnsmembers anddock.pnguse Apple's Big Sur icon grid: the tile inset to 824/1024 with a drop shadow. That inset is what the oldicons/README.mdwas 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.
Logonow draws the lowercase codev wordmark instead of "opencode", built from the samewordmarkHalvespixel 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-devis always brand red#ee0033, and--logo-wordmark-cois brand navy#19224con light, the theme foreground on dark. The dark swap is declared three times — underprefers-color-scheme: darkfor 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 stampsdata-color-schemeon<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 inDIVERGENCES.mdinstead of half-done here.DIVERGENCES.mdgains 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.mdhas an Unreleased entry.How did you verify your code works?
wordmarkHalvesand confirmed the glyphs spell "codev" before writing any path data.getComputedStyle().fillon both paths in headless Chromium across all six theme states (OS light/dark x no attribute /data-color-scheme=light/=dark). "dev" isrgb(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..icoparses with all seven sizes, and the.icnscarries the same member types as the file it replaces.bun typecheckclean inpackages/ui,packages/app,packages/desktopandpackages/enterprise;oxlintreports 0 warnings on the new files (matching the repo baseline) andprettier --checkpasses.bun dev:desktopand 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.pngshows the macOS treatment (inset + shadow) and128x128@2x.pngthe full-bleed one.packages/desktop/icons/icon.svgis the source geometry.Checklist
🤖 Generated with Claude Code