Skip to content

feat(web): add a brand kit page at /brand - #5

Merged
leoisadev1 merged 4 commits into
mainfrom
t3code/create-brand-assets-page
Oct 6, 2026
Merged

leoisadev1 merged 4 commits into
mainfrom
t3code/create-brand-assets-page

Conversation

@leoisadev1

@leoisadev1 leoisadev1 commented Oct 6, 2026 •

Copy link
Copy Markdown
Member

Summary

There was no public place to get the convt logo, colors or type, so anyone writing about convt had to screenshot the site. This adds a brand kit page at /brand where every logo can be copied as SVG or PNG, saved, or downloaded with the rest of the kit as one ZIP.

 apps/web/
+├── scripts/brand-assets.py          # builds public/brand from the CNV-1 mark; PNGs rendered with convt
+├── public/brand/                    # lockup, mark, wordmark, one-color mark, app icon (SVG + PNG) and the ZIP
+├── src/routes/brand.tsx
+├── src/components/brand/brand-page.tsx
+├── landing-static/brand.md          # Markdown version for agents, linked from llms.txt
 ├── scripts/landing-static.py        # serves the prerendered page as brand.html, adds it to the sitemap
 └── vite.config.ts                   # the coming-soon build prerenders /brand too

The page has a construction view of the mark that assembles on load, logo tiles that switch between dark and light backgrounds, the palette for each background (click to copy), Geist and Geist Mono, and usage rules. The footer links to it before launch.

A separate commit makes the shared focus ring visible. Tailwind v4's outline-none set outline-style: none and nothing restored it, so keyboard focus showed nothing anywhere on the landing page.

Evidence

Desktop Mobile
Brand page hero, desktop Brand page hero, mobile
Logo tiles, desktop Logo tiles, mobile
Colors, desktop

A 15-second walkthrough, rendered frame by frame from the real page:

brand-page.mp4
  • bun run check, tsc --noEmit and bun run build:landing pass on the rebased branch; the build prerenders / and /brand.
  • Copy PNG puts the real image/png on the clipboard in Chrome (33 KB lockup), and Copy SVG writes the SVG for the selected background. Over plain HTTP the browser blocks image copy, and the button says to use Save instead.
  • The generated lockup matches design-assets/brand/lockup-on-dark.png to within 5 px at 2400 px wide.
  • No horizontal overflow at 390 px. Reduced motion turns off every animation, and printing shows every section.
  • Two GPT-6.1 Sol review rounds; all findings fixed (gradient contrast, radio arrow keys, the focus ring, print visibility, reduced-motion gaps, lockup rounding).

Not checked: Safari's clipboard, and the routing on the live Vercel deploy.

Merge Danger

Door: two-way. Reverting removes the page and its files.

Blast radius: the coming-soon site on Vercel. The new vercel.json rules route /brand and /brand.md; if they are wrong, /brand 404s while /brand/*.svg assets still load. The focus-ring change affects keyboard focus on every landing page control.

Fixes CNV-8

Created with Claude Opus 5.5 in Claude Code.

leoisadev1 and others added 3 commits October 6, 2026 17:20
Tailwind v4's outline-none sets outline-style: none, and focusRing only
restored the width, offset and color, so keyboard focus showed nothing on
the landing page. Add focus-visible:outline-solid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
CNV-8. Shows the mark on its 32-unit construction grid, then the lockup,
mark, wordmark and one-color mark, each switchable between dark and
light backgrounds with Copy SVG and SVG/PNG downloads, the colors (click
to copy), Geist and Geist Mono, and usage rules. One link downloads
the whole kit as a ZIP.

scripts/brand-assets.py generates public/brand: the wordmark is Geist
SemiBold outlined with fontTools and HarfBuzz, and the PNGs are rendered
with convt. The static landing build prerenders /brand, serves it as
brand.html with a Markdown version for agents, and lists it in the
sitemap and llms.txt. The footer links to it before launch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
CNV-8. The kit now comes from the merged logo: the mark for dark and light
backgrounds, a one-color mark with the overlap cut out, the app icon, the
wordmark, and a lockup measured from design-assets/brand. Every logo can
be copied as SVG or PNG, or saved as either.

Colors are two panels, on dark and on light, with the README palette;
every value copies on click. The hero mark assembles on its grid with a
Replay button, sections fade up as they scroll in, the background switch
slides and crossfades, copy buttons confirm in place, and the "don't"
examples bend into the mistake. All motion respects reduced motion, and
printing shows every section.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@linear-code

linear-code Bot commented Oct 6, 2026 •

Copy link
Copy Markdown
CNV-8 Add a brand page at convt.app/brand

Problem

There is no public place to get the convt logo, wordmark or colors. Anyone writing about convt has to screenshot the site.

Goal

A /brand page on convt.app that shows the brand and lets people copy or download every asset.

Acceptance criteria

  • The mark, wordmark and lockup each offer Copy SVG, SVG download and PNG download, in versions for dark and light backgrounds.
  • One download gets every asset as a zip.
  • Brand colors copy their hex value on click.
  • Typography and short usage notes are listed.
  • The page ships in the static coming-soon build and is linked from the footer.

How to verify

Run bun run build:landing in apps/web, serve dist/client, open /brand, copy and download each asset, and check desktop and mobile screenshots.

Review in Linear

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 5 potential issues.

Devin Review

Comment thread apps/web/scripts/brand-assets.py Resolved
Comment thread apps/web/landing-static/vercel.json Resolved
Comment thread apps/web/scripts/brand-assets.py Resolved

@graphify-labs graphify-labs Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Graphify reviewed this change.

Looks safe to merge — no coupling regressions and no blocking issues, checked against the code graph (not a self-assessment).


Graphify review — findings

Adds a public brand kit at /brand, a page (BrandPage) and a matching brand.md that offer the convt logo, mark, wordmark, one-color and app-icon files as SVG/PNG, plus an all-in-one ZIP, color palettes and type and usage guidance. The static Vercel routes now treat brand like about and privacy, with trailing-slash and .html redirects and markdown served on Accept. llms.txt and the site's header and landing download links now point to the kit.

Review partial — this diff was larger than one review pass covers, so later files were not reviewed; some findings may be missing.

Analysis details — impact, health, verification

Impact & health

Graphify review

Impact — 184 functions depend on the 180 functions this change touches.

Health — grade A; no new coupling hotspots.

Verification — 184 functions in the blast radius were not formally verified this run (proofs are advisory here).

Gate & verification

graphify gate

PASS — objectively clean (no health regressions, tests not run — proofs not run this pass (advisory)). Grounded, not self-assessed.

Advisory (not blocking):

  • verification_scope: 184 function(s) in the blast radius were not formally verified this run

Docs that may be stale (advisory)

…and 10 more.

@greptile-apps

greptile-apps Bot commented Oct 6, 2026 •

Copy link
Copy Markdown

RetriggerConfidence Score: 5/5

[Low risk] Adds a brand kit page with logos and assets.

The PR appears safe to merge, with a remaining non-blocking keyboard-focus visibility issue.

What we checked:

  • Website visitors cannot choose commands: The script gets the converter from local configuration and passes separate arguments without a shell. No website request calls the generator.

Summary

Adds a public brand kit at /brand, with SVG and PNG downloads, clipboard copying, colors, type, and usage rules.

  • Includes a ZIP, a Markdown page, and static build routes.
  • Recent changes add visible copy errors, darker focus outlines, and converter error messages.
  • Asset generation now finishes rendering before replacing the existing kit.
  • Review used source checks. No browser was launched because this request did not grant permission.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Generator["brand-assets.py"] --> Assets["SVGs, PNGs and ZIP"]
  Generator --> Manifest["manifest.json"]
  Assets --> Page["/brand"]
  Manifest --> Page
  Page --> Copy["Copy SVG or PNG"]
  Page --> Save["Save files or ZIP"]
  Build["Landing build"] --> HTML["brand.html"]
  HTML --> Page
Loading

Reviews (2) · Last reviewed commit: "Fix review findings on the brand page"

Comment thread apps/web/scripts/brand-assets.py Resolved
Comment thread apps/web/src/styles.css Resolved
Comment thread apps/web/scripts/brand-assets.py Resolved
- brand-assets.py builds the kit in a staging folder and replaces the
  committed files only after every render succeeds, and shows convt's
  error output when a render fails.
- Color rows and the page label show and announce "Couldn't copy" when
  the browser blocks the clipboard, as the logo buttons already did.
- Controls on white surfaces use the deep green focus outline; the light
  green was about 2:1 on white.
- A card that is still waiting to scroll in appears at once when it
  receives keyboard focus.

CNV-8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@leoisadev1
leoisadev1 merged commit 0fdb80f into main Oct 6, 2026
1 of 5 checks passed
@leoisadev1
leoisadev1 deleted the t3code/create-brand-assets-page branch October 6, 2026 21:41
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