From d68988434ba32b09b2b08b5ba70e78d4d5f4299f Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Mon, 8 Jun 2026 16:00:58 -0400 Subject: [PATCH 1/4] feat(pages): add branding --- pages/about/branding.md | 154 ++++++++++++++++++++++++++++++++++++++++ vercel.json | 11 ++- 2 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 pages/about/branding.md diff --git a/pages/about/branding.md b/pages/about/branding.md new file mode 100644 index 00000000..6b6f769a --- /dev/null +++ b/pages/about/branding.md @@ -0,0 +1,154 @@ +# Branding of webpack + +Here you can find **webpack** project brand guidelines and assets. Official artwork is maintained in the OpenJS Foundation [artwork repository](https://github.com/openjs-foundation/artwork/tree/main/projects/webpack). + +Please review the [OpenJS Foundation Trademark Policy](https://trademark-policy.openjsf.org/) for information about permissible use of webpack™ logos and marks. + +## The Name + +Webpack can be written with a capital **W** when used at the start of a sentence, otherwise it should be written in lower-case letters. + +## webpack Logos + +Please use the **logo with text** whenever possible. The logo should be placed on its matching background with enough space around it. Double the size of the inner dark blue cube to get an idea of how much space the logo should have. + +### Horizontal Logo + + + + + + + + + + + + + + + + +
+ webpack horizontal logo for light backgrounds + + webpack horizontal logo for dark backgrounds +
+ +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) + + + +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) + +
Light backgroundsDark backgrounds
+ +### Stacked Logo + + + + + + + + + + + + + + + + +
+ webpack stacked logo for light backgrounds + + webpack stacked logo for dark backgrounds +
+ +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.png) + + + +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) + +
Light backgroundsDark backgrounds
+ +## webpack Icons + +The icon is designed to be used in **layout-constrained areas only**. As previously stated, please prefer the logo with text. + + + + + + + + + + + + + + + + +
+ webpack icon + + webpack hex sticker +
+ +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.png) + + + +[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.png) + +
Icon
(avatars, profile pictures, favicons)		Hex sticker
+ +## Color Palette + +The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)! + +| Sample | Color Name | HEX Code | RGB Code | +| ------------------------------------------------------------------ | ----------- | --------- | -------------------- | +| | Malibu | `#8dd6f9` | `rgb(141, 214, 249)` | +| | Denim | `#1d78c1` | `rgb(29, 120, 193)` | +| | Fiord | `#465E69` | `rgb(70, 94, 105)` | +| | Outer Space | `#2B3A42` | `rgb(43, 58, 66)` | +| | White | `#ffffff` | `rgb(255, 255, 255)` | +| | Concrete | `#f2f2f2` | `rgb(242, 242, 242)` | +| | Alto | `#dedede` | `rgb(222, 222, 222)` | +| | Dusty Gray | `#999999` | `rgb(153, 153, 153)` | +| | Dove Gray | `#666666` | `rgb(102, 102, 102)` | +| | Emperor | `#535353` | `rgb(83, 83, 83)` | +| | Mine Shaft | `#333333` | `rgb(51, 51, 51)` | + +## Trademarks and Licensing + +Webpack is a project of the OpenJS Foundation. Please review the [trademark policy](https://trademark-policy.openjsf.org/) for information about permissible use of webpack™ logos and marks. \ No newline at end of file diff --git a/vercel.json b/vercel.json index da0ce792..a6f8f2bf 100644 --- a/vercel.json +++ b/vercel.json @@ -4,5 +4,12 @@ "cleanUrls": true, "trailingSlash": false, "installCommand": "bash scripts/vercel/prepare.sh", - "buildCommand": "bash scripts/vercel/build.sh" -} + "buildCommand": "bash scripts/vercel/build.sh", + "redirects": [ + { + "source": "/branding", + "destination": "/about/branding", + "permanent": true + } + ] +} \ No newline at end of file From aba556c21e850840cc65615763e1f282ce3151d4 Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Mon, 8 Jun 2026 16:02:22 -0400 Subject: [PATCH 2/4] fixup! --- pages/about/branding.md | 2 +- vercel.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/about/branding.md b/pages/about/branding.md index 6b6f769a..118f3f8b 100644 --- a/pages/about/branding.md +++ b/pages/about/branding.md @@ -151,4 +151,4 @@ The following colors are used throughout the site in various combinations and on ## Trademarks and Licensing -Webpack is a project of the OpenJS Foundation. Please review the [trademark policy](https://trademark-policy.openjsf.org/) for information about permissible use of webpack™ logos and marks. \ No newline at end of file +Webpack is a project of the OpenJS Foundation. Please review the [trademark policy](https://trademark-policy.openjsf.org/) for information about permissible use of webpack™ logos and marks. diff --git a/vercel.json b/vercel.json index a6f8f2bf..06b19fea 100644 --- a/vercel.json +++ b/vercel.json @@ -12,4 +12,4 @@ "permanent": true } ] -} \ No newline at end of file +} From 6a03021043613a6c56b7b7f33468d0b51a0f7930 Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Tue, 9 Jun 2026 20:54:32 -0400 Subject: [PATCH 3/4] fixup! --- pages/about/branding.md | 108 ++++++++++++++++++++-------------------- 1 file changed, 55 insertions(+), 53 deletions(-) diff --git a/pages/about/branding.md b/pages/about/branding.md index 118f3f8b..256612fa 100644 --- a/pages/about/branding.md +++ b/pages/about/branding.md @@ -12,9 +12,13 @@ Webpack can be written with a capital **W** when used at the start of a sentence Please use the **logo with text** whenever possible. The logo should be placed on its matching background with enough space around it. Double the size of the inner dark blue cube to get an idea of how much space the logo should have. -### Horizontal Logo - + + + + + + + svg + | + png + - - - - + svg + | + png +
Light backgroundsDark backgrounds
@@ -34,26 +38,26 @@ Please use the **logo with text** whenever possible. The logo should be placed o
- -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) - - - -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) - -
Light backgroundsDark backgrounds
-### Stacked Logo - + + + + + + + svg + | + png + - - - - + svg + | + png +
Light backgroundsDark backgrounds
@@ -73,19 +77,15 @@ Please use the **logo with text** whenever possible. The logo should be placed o
- -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.png) - - - -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) - -
Light backgroundsDark backgrounds
@@ -95,6 +95,12 @@ Please use the **logo with text** whenever possible. The logo should be placed o The icon is designed to be used in **layout-constrained areas only**. As previously stated, please prefer the logo with text. + + + + + + + svg + | + png + - - - - + svg + | + png +
Icon
(avatars, profile pictures, favicons)		Hex sticker
@@ -114,19 +120,15 @@ The icon is designed to be used in **layout-constrained areas only**. As previou
- -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.png) - - - -[svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.svg) | [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.png) - -
Icon
(avatars, profile pictures, favicons)		Hex sticker
@@ -135,19 +137,19 @@ The icon is designed to be used in **layout-constrained areas only**. As previou The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)! -| Sample | Color Name | HEX Code | RGB Code | -| ------------------------------------------------------------------ | ----------- | --------- | -------------------- | -| | Malibu | `#8dd6f9` | `rgb(141, 214, 249)` | -| | Denim | `#1d78c1` | `rgb(29, 120, 193)` | -| | Fiord | `#465E69` | `rgb(70, 94, 105)` | -| | Outer Space | `#2B3A42` | `rgb(43, 58, 66)` | -| | White | `#ffffff` | `rgb(255, 255, 255)` | -| | Concrete | `#f2f2f2` | `rgb(242, 242, 242)` | -| | Alto | `#dedede` | `rgb(222, 222, 222)` | -| | Dusty Gray | `#999999` | `rgb(153, 153, 153)` | -| | Dove Gray | `#666666` | `rgb(102, 102, 102)` | -| | Emperor | `#535353` | `rgb(83, 83, 83)` | -| | Mine Shaft | `#333333` | `rgb(51, 51, 51)` | +| Sample | Color Name | HEX Code | RGB Code | +| -------------------------------------------------- | ----------- | --------- | -------------------- | +| ![](https://singlecolorimage.com/get/8dd6f9/60x24) | Malibu | `#8dd6f9` | `rgb(141, 214, 249)` | +| ![](https://singlecolorimage.com/get/1d78c1/60x24) | Denim | `#1d78c1` | `rgb(29, 120, 193)` | +| ![](https://singlecolorimage.com/get/465E69/60x24) | Fiord | `#465E69` | `rgb(70, 94, 105)` | +| ![](https://singlecolorimage.com/get/2B3A42/60x24) | Outer Space | `#2B3A42` | `rgb(43, 58, 66)` | +| ![](https://singlecolorimage.com/get/fefefe/60x24) | White | `#ffffff` | `rgb(255, 255, 255)` | +| ![](https://singlecolorimage.com/get/f2f2f2/60x24) | Concrete | `#f2f2f2` | `rgb(242, 242, 242)` | +| ![](https://singlecolorimage.com/get/dedede/60x24) | Alto | `#dedede` | `rgb(222, 222, 222)` | +| ![](https://singlecolorimage.com/get/999999/60x24) | Dusty Gray | `#999999` | `rgb(153, 153, 153)` | +| ![](https://singlecolorimage.com/get/666666/60x24) | Dove Gray | `#666666` | `rgb(102, 102, 102)` | +| ![](https://singlecolorimage.com/get/535353/60x24) | Emperor | `#535353` | `rgb(83, 83, 83)` | +| ![](https://singlecolorimage.com/get/333333/60x24) | Mine Shaft | `#333333` | `rgb(51, 51, 51)` | ## Trademarks and Licensing From f1f83f362f3bbd8e37ca26ccc50fc173d8b61d81 Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Tue, 9 Jun 2026 21:00:53 -0400 Subject: [PATCH 4/4] fixup! pure MD --- pages/about/branding.md | 132 ++++++---------------------------------- 1 file changed, 17 insertions(+), 115 deletions(-) diff --git a/pages/about/branding.md b/pages/about/branding.md index 256612fa..eda3aca4 100644 --- a/pages/about/branding.md +++ b/pages/about/branding.md @@ -12,126 +12,28 @@ Webpack can be written with a capital **W** when used at the start of a sentence Please use the **logo with text** whenever possible. The logo should be placed on its matching background with enough space around it. Double the size of the inner dark blue cube to get an idea of how much space the logo should have. - - - - - - - - - - - - - - - - - -
Light backgroundsDark backgrounds
- webpack horizontal logo for light backgrounds - - webpack horizontal logo for dark backgrounds -
- svg - | - png - - svg - | - png -
- - - - - - - - - - - - - - - - - - -
Light backgroundsDark backgrounds
- webpack stacked logo for light backgrounds - - webpack stacked logo for dark backgrounds -
- svg - | - png - - svg - | - png -
+### Horizontal logo + +| Light backgrounds | Dark backgrounds | +| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png) | ![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) | +| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) | + +### Stacked logo + +| Light backgrounds | Dark backgrounds | +| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| ![webpack stacked logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png) | ![webpack stacked logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) | +| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) | ## webpack Icons The icon is designed to be used in **layout-constrained areas only**. As previously stated, please prefer the logo with text. - - - - - - - - - - - - - - - - - -
Icon
(avatars, profile pictures, favicons)		Hex sticker
- webpack icon - - webpack hex sticker -
- svg - | - png - - svg - | - png -
+| Icon (avatars, profile pictures, favicons) | Hex sticker | +| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| ![webpack icon](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-icon-color.png) | ![webpack hex sticker](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-hex-sticker.png) | +| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.png) | ## Color Palette