Anthony Lio 9eaae4cd2c feat(www): brand page (#52295) ...

## Problem

- a person or an agent cannot link one logo file or pick the file for a
light or a dark background as the brand assets page has one preview
image and two zip downloads only
- `apps/www/lib/json-ld.ts` sets `Organization.logo` to the open graph
banner instead of a logo file

## Solution

- [proposal] Brand Assets -> Brand Guidelines
- [proposal] `/brand-assets` -> `/brand`
- adds the official logos as separate svg and png files in
`/brand-assets/`, with a catalog that tells the background that each
file is for
- show each file on its background, with copy and download actions
- adds `/brand.md` and a "Copy agent prompt" button, so an agent can
read which file to use for each background
- adds a "Copy wordmark" item to the nav logo menu, which copies the
wordmark file for the site theme
- changes `Organization.logo` from the open graph banner to the wordmark
png

`brand assets page`
| before | after |
| -------|------|
| <img width="1637" height="901" alt="image"
src="https://github.com/user-attachments/assets/6b5361c8-0995-4e61-bc29-b5a7ccab7d69"
/> | <img width="1637" height="901" alt="image"
src="https://github.com/user-attachments/assets/0f65ab36-d6f2-427e-8973-eb559139cf8e"
/> |

`logo right click`
| before | after |
| -------|------|
| <img width="676" height="362" alt="image"
src="https://github.com/user-attachments/assets/5abde373-8a37-4ab8-8193-fb7112b97104"
/> | <img width="676" height="362" alt="image"
src="https://github.com/user-attachments/assets/ef5d0724-6a91-4af7-8e9d-59025a9eba87"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. run `pnpm dev:www` and open `http://localhost:3000/brand-assets`
2. in the gallery, copy and download one file of each group, and make
sure that each file opens
3. click "Copy agent prompt", and make sure that the copied text names
`https://supabase.com/brand-assets.md`
4. open `http://localhost:3000/brand-assets.md`, and make sure that it
links each svg and png file
5. right-click the nav logo, hover "Copy logo" and "Copy wordmark", and
make sure that the frame moves to the part that each item copies
6. click "Copy wordmark" in the light theme and in the dark theme, and
make sure that the pasted svg has black and then white lettering
7. run `pnpm --filter www exec vitest run data/brand-assets.test.ts`,
and make sure that the tests pass

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [ ] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)

2026-10-29 09:57:35 +11:00

674 B

Raw Permalink Blame History

View Raw