Social profiles and code repositories: brand marks in one colour in the service select (Codeberg, Mastodon, Bluesky, Facebook, Instagram, YouTube) #905

New issue

Closed

opened 2026-10-12 18:27:07 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:27:07 +00:00

Owner

In the service select for social profiles and code repositories (#867, 02de6eee6), each option draws its service's brand mark. Six of the marks are drawn in their owner's published colour: Mastodon violet, Bluesky blue, Facebook blue, Instagram pink, YouTube red and Codeberg blue. GitHub, Forgejo, SourceHut and ORCID are drawn in one colour (currentColor, black on the light page and white on the dark one). A list mixing four bright colours with black marks reads as a row of logos rather than a list of choices. All of them should be monochrome, in the option's text colour.

Where

assets/brands.txt: bluesky, codeberg, facebook, instagram, mastodon and youtube are listed bare, which means mode brand. forgejo, github, orcid and sourcehut are single-colour, each with the page that allows it and a quotation.
npm run sync:brands (scripts/sync-brands.mjs) writes static/brands/*.svg and NOTICE.txt from that list, and refuses a single-colour mark without its page and quotation.
{% brand %} / {% option_brands %} (core/templatetags/postulo.py:134-195) draw the mark with data-brand-mode. The stylesheet colours single-colour marks.

The rule this must keep

TRADEMARKS.md § brand marks says a mark is unmodified. It may be drawn in one colour only where its owner's published guidelines allow a one-colour version in black and white, and the page saying so is recorded. So this is not a CSS override on the select. Each mark changes mode in assets/brands.txt, with its evidence:

Mark	Today	To do
Codeberg	brand #2185D0	The artwork is CC0-1.0 (`NOTICE.txt`). Check Codeberg/Design for a monochrome logo and record it.
Mastodon	brand #6364FF	Find a one-colour or white/black version in joinmastodon.org/branding.
Bluesky	brand #1185FE	Find one in the press FAQ / brand kit.
Facebook	brand #0866FF	Find one in Meta's Facebook logo guidelines (where black or white is allowed).
Instagram	brand #FF0069	Find one in Meta's Instagram brand resources (the glyph in black or white).
YouTube	brand #FF0000	Find one in YouTube's brand guidelines (the monochrome icon).

If an owner's guidelines do not allow one colour, that service's option falls back to its generic Lucide icon, as LinkedIn and X do. The colour mark must not stay in the select, and the mark must not be recoloured.

What to do

For each of the six, find the owner's page and the sentence that allows a black or white version. Record both in assets/brands.txt as single-colour <url> <quotation>, run npm run sync:brands, and use the owner's own monochrome artwork where there is one. A mark whose owner forbids it goes to the Lucide-icon fallback.
TRADEMARKS.md: update the row listing the marks and the examples under single colour.
Scope: a mark has one recorded mode, so the change also applies where the mark is drawn beside a saved link (the profile and repository rows of #654 and the identifier badges). That keeps the select and the rows the same. A per-place mode (colour on rows, monochrome in selects) would be a new rule in TRADEMARKS.md and is not proposed.
Contrast: check, in light and dark, that each mark is legible inside an option, including the highlighted and selected option, where the option's background changes.

Done when

In the social-profile and repository selects, every service shows a black mark on the light page and a white one on the dark page, or its Lucide icon. None shows a coloured logo.
Every single-colour line in assets/brands.txt carries its owner's page and quotation, and NOTICE.txt and TRADEMARKS.md match.
The brand tests and the sync check pass, and a test asserts that no mark used by link_services is in brand mode.

Checked against main at 75f31208b.

In the service select for **social profiles** and **code repositories** (#867, `02de6eee6`), each option draws its service's brand mark. Six of the marks are drawn in their owner's published colour: Mastodon violet, Bluesky blue, Facebook blue, Instagram pink, YouTube red and **Codeberg** blue. GitHub, Forgejo, SourceHut and ORCID are drawn in one colour (`currentColor`, black on the light page and white on the dark one). A list mixing four bright colours with black marks reads as a row of logos rather than a list of choices. All of them should be **monochrome**, in the option's text colour. ## Where - `assets/brands.txt`: `bluesky`, `codeberg`, `facebook`, `instagram`, `mastodon` and `youtube` are listed bare, which means mode **brand**. `forgejo`, `github`, `orcid` and `sourcehut` are `single-colour`, each with the page that allows it and a quotation. - `npm run sync:brands` (`scripts/sync-brands.mjs`) writes `static/brands/*.svg` and `NOTICE.txt` from that list, and refuses a single-colour mark without its page and quotation. - `{% brand %}` / `{% option_brands %}` (`core/templatetags/postulo.py:134-195`) draw the mark with `data-brand-mode`. The stylesheet colours `single-colour` marks. ## The rule this must keep `TRADEMARKS.md` § brand marks says a mark is **unmodified**. It may be drawn in one colour **only where its owner's published guidelines allow a one-colour version** in black and white, and the page saying so is recorded. So this is not a CSS override on the select. Each mark changes mode in `assets/brands.txt`, with its evidence: | Mark | Today | To do | | --- | --- | --- | | Codeberg | brand #2185D0 | The artwork is CC0-1.0 (`NOTICE.txt`). Check Codeberg/Design for a monochrome logo and record it. | | Mastodon | brand #6364FF | Find a one-colour or white/black version in joinmastodon.org/branding. | | Bluesky | brand #1185FE | Find one in the press FAQ / brand kit. | | Facebook | brand #0866FF | Find one in Meta's Facebook logo guidelines (where black or white is allowed). | | Instagram | brand #FF0069 | Find one in Meta's Instagram brand resources (the glyph in black or white). | | YouTube | brand #FF0000 | Find one in YouTube's brand guidelines (the monochrome icon). | If an owner's guidelines do **not** allow one colour, that service's option falls back to its generic Lucide icon, as LinkedIn and X do. The colour mark must not stay in the select, and the mark must not be recoloured. ## What to do 1. For each of the six, find the owner's page and the sentence that allows a black or white version. Record both in `assets/brands.txt` as `single-colour <url> <quotation>`, run `npm run sync:brands`, and use the owner's own monochrome artwork where there is one. A mark whose owner forbids it goes to the Lucide-icon fallback. 2. `TRADEMARKS.md`: update the row listing the marks and the examples under *single colour*. 3. **Scope:** a mark has one recorded mode, so the change also applies where the mark is drawn beside a saved link (the profile and repository rows of #654 and the identifier badges). That keeps the select and the rows the same. A per-place mode (colour on rows, monochrome in selects) would be a new rule in `TRADEMARKS.md` and is not proposed. 4. **Contrast:** check, in light and dark, that each mark is legible inside an option, including the highlighted and selected option, where the option's background changes. ## Done when - In the social-profile and repository selects, every service shows a black mark on the light page and a white one on the dark page, or its Lucide icon. None shows a coloured logo. - Every `single-colour` line in `assets/brands.txt` carries its owner's page and quotation, and `NOTICE.txt` and `TRADEMARKS.md` match. - The brand tests and the sync check pass, and a test asserts that no mark used by `link_services` is in `brand` mode. Checked against `main` at `75f31208b`.

tiagoagueda added the

enhancement

interface

labels

2026-10-12 18:27:12 +00:00

tiagoagueda referenced this issue

2026-10-13 07:38:51 +00:00

Companies can have social profiles #906

tiagoagueda commented

2026-10-13 08:34:18 +00:00

Author

Owner