Skip to content

Add logos and brand guidelines page - #2888

Merged
diemol merged 5 commits into
trunkfrom
brand-logos
Oct 11, 2026
Merged

diemol merged 5 commits into
trunkfrom
brand-logos

Conversation

@diemol

@diemol diemol commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

Thanks for contributing to the Selenium site and documentation!
A PR well described will help maintainers to review and merge it quickly

Before submitting your PR, please check our contributing guidelines.
Avoid large PRs, and help reviewers by making them as simple and short as possible.

Description

Adds a new /project/logos page, linked from a new card on /project. Since /project now covers structure, governance, meetings, and logos, its title and the About menu item are renamed from "Structure and Governance" to "Project Resources" (URL unchanged).

The logos page includes:

  • Selenium logo: full logo and mark, in green and white, as SVG and PNG (logo 1024/2048px wide, mark 512/1024px tall).
  • Project logos: WebDriver, Grid, and IDE marks as SVG and PNG (512/1024px).
  • Colors: brand color for Selenium and each project, taken from the logo files.
  • Usage guidelines: a short do/don't list and a trademark note pointing to the Software Freedom Conservancy.

The new SVGs are derived from the existing assets/icons/logo.svg and static/images/logos/selenium.svg (the mark variants only crop the viewBox). PNGs were rendered from the SVGs with headless Chrome. Existing logo files are unchanged.

Motivation and Context

Fixes #81. People keep asking where to find official Selenium logos for talks, articles, and integrations, and the site had no place offering them.

Types of changes

  • Change to the site (I have double-checked the Netlify deployment, and my changes look good)
  • Code example added (and I also added the example to all translated languages)
  • Improved translation
  • Added new translation (and I also added a notice to each document missing translation)

Checklist

  • I have read the contributing document.
  • I have used hugo to render the site/docs locally and I am sure it works.

🤖 Generated with Claude Code

https://claude.ai/code/session_012z8xTLmv7M1ULKx4CTsxna

diemol and others added 2 commits October 11, 2026 02:27
Adds /project/logos with downloadable Selenium and project logos
(SVG and PNG), brand colors, and usage guidelines, and links it
from the project page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012z8xTLmv7M1ULKx4CTsxna
@github-actions

Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 72.6%, saving 314.5 KB.

Filename Before After Improvement Visual comparison
website_and_docs/static/images/logos/png/selenium-logo-green-2048.png 55.8 KB 15.6 KB 72.1% View diff
website_and_docs/static/images/logos/png/selenium-mark-green-1024.png 48.1 KB 10.7 KB 77.7% View diff
website_and_docs/static/images/logos/png/webdriver-1024.png 41.9 KB 9.6 KB 77.1% View diff
website_and_docs/static/images/logos/png/grid-1024.png 41.4 KB 9.5 KB 77.0% View diff
website_and_docs/static/images/logos/png/selenium-logo-white-2048.png 43.6 KB 16.1 KB 63.0% View diff
website_and_docs/static/images/logos/png/selenium-mark-white-1024.png 37.7 KB 11.4 KB 69.7% View diff
website_and_docs/static/images/logos/png/ide-1024.png 34.1 KB 8.4 KB 75.3% View diff
website_and_docs/static/images/logos/png/selenium-logo-green-1024.png 23.7 KB 6.9 KB 71.0% View diff
website_and_docs/static/images/logos/png/selenium-mark-green-512.png 19.7 KB 4.9 KB 75.0% View diff
website_and_docs/static/images/logos/png/grid-512.png 18.9 KB 4.5 KB 76.0% View diff
website_and_docs/static/images/logos/png/webdriver-512.png 18.9 KB 4.6 KB 75.6% View diff
website_and_docs/static/images/logos/png/ide-512.png 15.2 KB 4.0 KB 73.8% View diff
website_and_docs/static/images/logos/png/selenium-logo-white-1024.png 18.6 KB 7.4 KB 60.4% View diff
website_and_docs/static/images/logos/png/selenium-mark-white-512.png 15.5 KB 5.0 KB 67.5% View diff

@qodo-code-review

Copy link
Copy Markdown
Contributor

PR Summary by Qodo

Add downloadable Selenium logos and brand guidelines

✨ Enhancement 📝 Documentation 🕐 20-40 Minutes

Grey Divider

AI Description

• Add a project-page link to a central source for official logos.
• Provide Selenium and project marks as downloadable SVGs and multiple PNG sizes.
• Publish brand colors, usage guidance, and trademark information.
Diagram

graph TD
  Project["Project page"] --> Logos["Logos page"] --> Preview["Logo previews"] --> SVG["SVG assets"]
  Preview --> PNG["PNG assets"]
  Logos --> Guidance["Brand guidance"]
Loading
High-Level Assessment

A static catalog with committed SVG and PNG downloads fits this small, fixed set of official assets and the site's existing page structure. Generating variants at build time would add tooling and maintenance without a clear benefit here.

Files changed (20) +234 / -0

Enhancement (19) +53 / -0
_index.htmlLink to logos from the project page +19/-0

Link to logos from the project page

• Adds a card directing visitors to the new logos and brand guidelines page.

website_and_docs/content/project/_index.html

grid-1024.pngAdd 1024px Grid PNG +0/-0

Add 1024px Grid PNG

• Provides the larger downloadable Grid mark.

website_and_docs/static/images/logos/png/grid-1024.png

grid-512.pngAdd 512px Grid PNG +0/-0

Add 512px Grid PNG

• Provides the smaller downloadable Grid mark.

website_and_docs/static/images/logos/png/grid-512.png

ide-1024.pngAdd 1024px IDE PNG +0/-0

Add 1024px IDE PNG

• Provides the larger downloadable IDE mark.

website_and_docs/static/images/logos/png/ide-1024.png

ide-512.pngAdd 512px IDE PNG +0/-0

Add 512px IDE PNG

• Provides the smaller downloadable IDE mark.

website_and_docs/static/images/logos/png/ide-512.png

selenium-logo-green-1024.pngAdd 1024px green Selenium logo PNG +0/-0

Add 1024px green Selenium logo PNG

• Provides a green full-logo download for light backgrounds.

website_and_docs/static/images/logos/png/selenium-logo-green-1024.png

selenium-logo-green-2048.pngAdd 2048px green Selenium logo PNG +0/-0

Add 2048px green Selenium logo PNG

• Provides a larger green full-logo download for light backgrounds.

website_and_docs/static/images/logos/png/selenium-logo-green-2048.png

selenium-logo-white-1024.pngAdd 1024px white Selenium logo PNG +0/-0

Add 1024px white Selenium logo PNG

• Provides a white full-logo download for dark backgrounds.

website_and_docs/static/images/logos/png/selenium-logo-white-1024.png

selenium-logo-white-2048.pngAdd 2048px white Selenium logo PNG +0/-0

Add 2048px white Selenium logo PNG

• Provides a larger white full-logo download for dark backgrounds.

website_and_docs/static/images/logos/png/selenium-logo-white-2048.png

selenium-mark-green-1024.pngAdd 1024px green Selenium mark PNG +0/-0

Add 1024px green Selenium mark PNG

• Provides a larger green standalone-mark download.

website_and_docs/static/images/logos/png/selenium-mark-green-1024.png

selenium-mark-green-512.pngAdd 512px green Selenium mark PNG +0/-0

Add 512px green Selenium mark PNG

• Provides a smaller green standalone-mark download.

website_and_docs/static/images/logos/png/selenium-mark-green-512.png

selenium-mark-white-1024.pngAdd 1024px white Selenium mark PNG +0/-0

Add 1024px white Selenium mark PNG

• Provides a larger white standalone-mark download.

website_and_docs/static/images/logos/png/selenium-mark-white-1024.png

selenium-mark-white-512.pngAdd 512px white Selenium mark PNG +0/-0

Add 512px white Selenium mark PNG

• Provides a smaller white standalone-mark download.

website_and_docs/static/images/logos/png/selenium-mark-white-512.png

webdriver-1024.pngAdd 1024px WebDriver PNG +0/-0

Add 1024px WebDriver PNG

• Provides the larger downloadable WebDriver mark.

website_and_docs/static/images/logos/png/webdriver-1024.png

webdriver-512.pngAdd 512px WebDriver PNG +0/-0

Add 512px WebDriver PNG

• Provides the smaller downloadable WebDriver mark.

website_and_docs/static/images/logos/png/webdriver-512.png

selenium-logo-green.svgAdd green full-logo SVG +1/-0

Add green full-logo SVG

• Adds a downloadable green vector logo containing the Selenium mark and wordmark.

website_and_docs/static/images/logos/selenium-logo-green.svg

selenium-logo-white.svgAdd white full-logo SVG +16/-0

Add white full-logo SVG

• Adds a downloadable white vector logo containing the Selenium mark and wordmark.

website_and_docs/static/images/logos/selenium-logo-white.svg

selenium-mark-green.svgAdd green standalone-mark SVG +1/-0

Add green standalone-mark SVG

• Adds a green vector variant cropped to the Selenium mark's viewBox.

website_and_docs/static/images/logos/selenium-mark-green.svg

selenium-mark-white.svgAdd white standalone-mark SVG +16/-0

Add white standalone-mark SVG

• Adds a white vector variant cropped to the Selenium mark's viewBox.

website_and_docs/static/images/logos/selenium-mark-white.svg

Documentation (1) +181 / -0
_index.htmlPublish the logo catalog and brand guidelines +181/-0

Publish the logo catalog and brand guidelines

• Adds previews and SVG/PNG download links for Selenium and WebDriver, Grid, and IDE marks. Documents brand colors, usage guidance, and the trademark holder.

website_and_docs/content/project/logos/_index.html

@netlify

netlify Bot commented Oct 11, 2026

Copy link
Copy Markdown

✅ Deploy Preview for selenium-dev ready!

Name Link
🔨 Latest commit 944c8e8
🔍 Latest deploy log https://app.netlify.com/projects/selenium-dev/deploys/6acad7ec4c742b000846919c
😎 Deploy Preview https://deploy-preview-2888--selenium-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 6.9%, saving 2.2 KB.

Filename Before After Improvement Visual comparison
website_and_docs/static/images/logos/png/selenium-logo-green-2048.png 15.6 KB 14.4 KB 7.3% View diff
website_and_docs/static/images/logos/png/selenium-logo-white-2048.png 16.1 KB 15.1 KB 6.4% View diff

12 images did not require optimisation.

@netlify

netlify Bot commented Oct 11, 2026

Copy link
Copy Markdown

❌ Deploy Preview for selenium-dev failed.

Name Link
🔨 Latest commit 38faed0
🔍 Latest deploy log https://app.netlify.com/projects/selenium-dev/deploys/6acad80c731a590008410504

@qodo-code-review

qodo-code-review Bot commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)

Grey Divider


Remediation recommended

1. The breadcrumb still says “project” 🐞 Bug ≡ Correctness
Description
The project page changes its title to “Project Resources” but leaves linkTitle as project.
Because the breadcrumb renders LinkTitle for the current page, visitors navigating to /project
see a stale lowercase label even though the heading and About menu use the renamed title.
Code

website_and_docs/content/project/_index.html[2]

+title: Project Resources
Evidence
The changed front matter sets the page title to “Project Resources”, while the same page still
defines linkTitle: project. The breadcrumb template renders .p1.LinkTitle, so the current page’s
breadcrumb uses the stale label; the main navigation separately renders the renamed menu entry.

website_and_docs/content/project/_index.html[2-3]
website_and_docs/layouts/partials/breadcrumb.html[28-31]
website_and_docs/hugo.toml[313-315]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The project page title and navigation entry were renamed to “Project Resources”, but its unchanged `linkTitle: project` causes the breadcrumb to display the stale lowercase label.

## Fix Focus Areas
- website_and_docs/content/project/_index.html[2-3]
- website_and_docs/layouts/partials/breadcrumb.html[28-31]

## Recommended Fix
Change the project page’s `linkTitle` from `project` to `Project Resources` so the breadcrumb matches the renamed page title and navigation entry.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Dismiss ↗ | View ↗


Grey Divider

Context sources
Review mode: Auto: 🚀 Fast: Localized, low-risk website text and navigation label changes.

Grey Divider

Tip of the day
💡 Did you know, you can tweak Display settings with a live preview to see your comment before it ships

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

@netlify

netlify Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for selenium-dev ready!

Name Link
🔨 Latest commit cf3d354
🔍 Latest deploy log https://app.netlify.com/projects/selenium-dev/deploys/6acadb94e0c1ac0008f2f8fa
😎 Deploy Preview https://deploy-preview-2888--selenium-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

diemol and others added 2 commits October 11, 2026 02:42
The /project page now also links to meetings and logos. Also re-export
the logo PNGs with Chrome, since ImageMagick's SVG renderer produced
faceted curves.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012z8xTLmv7M1ULKx4CTsxna
@github-actions

Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 75.8%, saving 311.3 KB.

Filename Before After Improvement Visual comparison
website_and_docs/static/images/logos/png/selenium-logo-green-2048.png 51.6 KB 11.6 KB 77.5% View diff
website_and_docs/static/images/logos/png/selenium-mark-green-1024.png 43.0 KB 8.6 KB 79.9% View diff
website_and_docs/static/images/logos/png/webdriver-1024.png 41.8 KB 9.0 KB 78.4% View diff
website_and_docs/static/images/logos/png/grid-1024.png 41.6 KB 9.0 KB 78.5% View diff
website_and_docs/static/images/logos/png/selenium-logo-white-2048.png 37.7 KB 12.4 KB 67.0% View diff
website_and_docs/static/images/logos/png/ide-1024.png 31.7 KB 7.5 KB 76.3% View diff
website_and_docs/static/images/logos/png/selenium-mark-white-1024.png 32.4 KB 9.1 KB 72.0% View diff
website_and_docs/static/images/logos/png/selenium-logo-green-1024.png 24.4 KB 5.7 KB 76.7% View diff
website_and_docs/static/images/logos/png/selenium-mark-green-512.png 20.5 KB 4.2 KB 79.6% View diff
website_and_docs/static/images/logos/png/webdriver-512.png 19.6 KB 4.2 KB 78.3% View diff
website_and_docs/static/images/logos/png/grid-512.png 19.1 KB 4.3 KB 77.5% View diff
website_and_docs/static/images/logos/png/selenium-logo-white-1024.png 17.7 KB 5.8 KB 67.0% View diff
website_and_docs/static/images/logos/png/selenium-mark-white-512.png 15.3 KB 4.3 KB 72.2% View diff
website_and_docs/static/images/logos/png/ide-512.png 14.3 KB 3.6 KB 74.7% View diff

Comment thread website_and_docs/content/project/_index.html
@qodo-code-review

Copy link
Copy Markdown
Contributor

Code review by qodo was updated up to the latest commit 5d7b78f

@diemol
diemol merged commit 6be675c into trunk Oct 11, 2026
7 checks passed
@diemol
diemol deleted the brand-logos branch October 11, 2026 00:47
selenium-ci added a commit that referenced this pull request Oct 11, 2026
* Add logos and brand guidelines page

Adds /project/logos with downloadable Selenium and project logos
(SVG and PNG), brand colors, and usage guidelines, and links it
from the project page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012z8xTLmv7M1ULKx4CTsxna

* Optimised images with calibre/image-actions

* Optimised images with calibre/image-actions

* Rename Structure and Governance to Project Resources

The /project page now also links to meetings and logos. Also re-export
the logo PNGs with Chrome, since ImageMagick's SVG renderer produced
faceted curves.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012z8xTLmv7M1ULKx4CTsxna

* Optimised images with calibre/image-actions

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

[deploy site] 6be675c
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.

Brand guide/logos resource page

1 participant