diff --git a/content/branding_guidelines.md b/content/branding_guidelines.md new file mode 100644 index 00000000..a2176cd8 --- /dev/null +++ b/content/branding_guidelines.md @@ -0,0 +1,80 @@ +--- +template: fullwidth.html +title: Branding Guidelines +--- + +The following guidelines are made available for anyone who wants to use the Valkey logo and/or brand assets. + +It is important that these guidelines are followed so that people can easily identify all references to Valkey, and to ensure consistency. + +## Logo Overview +
+{% logo_split_section(title="Primary Logo", image_url="/img/valkey-horizontal-color.svg", image_width="380px", image_alt="Valkey Horizontal Logo") %} + This is our primary logo and should be used wherever possible. +{% end %} + +{% logo_split_section(title="Stacked Logo", image_url="/img/valkey-stacked-color.svg", image_width="250px", image_alt="Valkey Stacked Logo") %} + In the instance where the primary logo can not be used, the stacked variation is acceptable. +{% end %} +
+ +
+{% logo_single_section( + title="Color Variations", + image_width="320px", + image1_url="/img/valkey-horizontal-black.svg", + image1_alt="Valkey Horizontal Black Logo", + image2_url="/img/valkey-horizontal-color-light.svg", + image2_alt="Valkey Horizontal Light Logo" + ) %} + In the instance where the full color logo can not be used, there are two variations available. +{% end %} +
+ +
+{% logo_split_section(title="Spacing", image_url="/img/valkey-spacing-example.png", image_width="320px", image_alt="Valkey Logo Spacing Example") %} +Always preserve clear space around the Valkey logo. It is required to provide clarity and breathing room. +{% end %} + +{% logo_split_section(title="Color", image_url="/img/valkey-horizontal-incorrect.svg", image_width="320px", image_alt="Valkey Logo Incorrect Color Example") %} +Changing the logo color is strictly not permitted. The Valkey logo should be used in its full color option or all-black or all-white when required. +{% end %} +
+ +
+{% logo_split_section(title="Elements", image_url="/img/valkey-horizontal-modified.svg", image_width="320px", image_alt="Valkey Logo Element Modification") %} + Changing the Valkey logo elements is strictly not permitted. +{% end %} + +{% logo_split_section(title="Scaling", image_url="/img/valkey-horizontal-squashed.svg", image_width="320px", image_alt="Valkey Logo Scaling Modification") %} + Scaling or stretching the Valkey logo away from its normal proportions is strictly not permitted. +{% end %} +
+ +## Color Palette + +
+

Primary Color Palette

+
+{{ palette_entry(palette_hex="#6983FF", palette_rgb="110 129 246", palette_cmyk="63 51 0 0", palette_pantone="Pantone 2718 C") }} + +{{ palette_entry(palette_text_hex="#E7E4F4", palette_hex="#1A2026", palette_rgb="27 32 37", palette_cmyk="79 68 60 71", palette_pantone="Pantone Black C") }} +
+
+ +
+

Secondary Color Palette

+
+{{ palette_entry(palette_text_hex="#E7E4F4", palette_hex="#642637", palette_rgb="100 38 55", palette_cmyk="39 92 60 42", palette_pantone="Pantone 7421 C") }} + +{{ palette_entry(palette_text_hex="#E7E4F4", palette_hex="#30176E", palette_rgb="48 23 110", palette_cmyk="95 100 20 14", palette_pantone="Pantone 2685 C") }} + +{{ palette_entry(palette_text_hex="#1A2026", palette_hex="#E0A2AF", palette_rgb="224 162 175", palette_cmyk="4 45 15 0", palette_pantone="Pantone 494 C") }} + +{{ palette_entry(palette_text_hex="#30176E", palette_hex="#BCB5E7", palette_rgb="188 181 231", palette_cmyk="24 27 0 0", palette_pantone="Pantone 2705 C") }} +
+
+ +There is also a downloadable [PDF version of these guidelines](https://github.com/valkey-io/assets/blob/main/Valkey%20Branding/valkey_brand_guidelines.pdf). + +Further information regarding appropriate usage of the Valkey brand can be found in the [LF Projects Trademark Policy](https://lfprojects.org/policies/trademark-policy/). diff --git a/sass/_valkey.scss b/sass/_valkey.scss index 40bacf0f..4146cf50 100644 --- a/sass/_valkey.scss +++ b/sass/_valkey.scss @@ -570,3 +570,96 @@ pre table { border-top: 1px solid $grey-dk-100; } + + +.branding-split-container { + display: flex; + justify-content: space-evenly; + gap: 2rem; + margin: 2rem 0; + + @media (max-width: 768px) { + flex-direction: column; + } +} + + +.branding-section { + padding: 2rem; + border: 1px solid $grey-lt-000; + gap: 2rem; + display: flex; + flex-direction: column; + flex: 1; + + img { + place-self: center; + flex: 1; + object-fit: contain; + + @media (max-width: 768px) { + max-width: 100%; + } + } + + div { + display: flex; + justify-content: space-evenly; + padding: 2rem; + gap: 2rem; + + img:nth-of-type(2) { + background: rgb(27, 32, 37); + } + + img { + flex: 0; + border: 1px solid $grey-lt-300; + padding: 2rem; + } + + @media (max-width: 768px) { + flex-direction: column; + } + } +} + +.palette-single-container { + border: 1px solid $grey-lt-000; + padding: 2rem; + margin: 2rem 0; + + > div { + display: flex; + gap: 2rem; + flex-wrap: wrap; + + @media (max-width: 768px) { + justify-content: center; + } + } +} + +.palette-container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.palette-icon { + border-radius: 100%; + width: 100px; + height: 100px; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + text-align: center; +} + +.palette-text { + display: grid; + font-size: 1rem; +} diff --git a/static/img/valkey-horizontal-black.svg b/static/img/valkey-horizontal-black.svg new file mode 100644 index 00000000..19c4df6f --- /dev/null +++ b/static/img/valkey-horizontal-black.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/valkey-horizontal-color-light.svg b/static/img/valkey-horizontal-color-light.svg new file mode 100644 index 00000000..2b70ab05 --- /dev/null +++ b/static/img/valkey-horizontal-color-light.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/valkey-horizontal-color.svg b/static/img/valkey-horizontal-color.svg new file mode 100644 index 00000000..f8476080 --- /dev/null +++ b/static/img/valkey-horizontal-color.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/valkey-horizontal-incorrect.svg b/static/img/valkey-horizontal-incorrect.svg new file mode 100644 index 00000000..b5d5bb14 --- /dev/null +++ b/static/img/valkey-horizontal-incorrect.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-horizontal-modified.svg b/static/img/valkey-horizontal-modified.svg new file mode 100644 index 00000000..4fdb9f7d --- /dev/null +++ b/static/img/valkey-horizontal-modified.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-horizontal-squashed.svg b/static/img/valkey-horizontal-squashed.svg new file mode 100644 index 00000000..c854e785 --- /dev/null +++ b/static/img/valkey-horizontal-squashed.svg @@ -0,0 +1,218 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-horizontal-white.svg b/static/img/valkey-horizontal-white.svg new file mode 100644 index 00000000..c70e580d --- /dev/null +++ b/static/img/valkey-horizontal-white.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/valkey-spacing-example.png b/static/img/valkey-spacing-example.png new file mode 100644 index 00000000..b4cb9fe4 Binary files /dev/null and b/static/img/valkey-spacing-example.png differ diff --git a/static/img/valkey-stacked-black.svg b/static/img/valkey-stacked-black.svg new file mode 100644 index 00000000..0b5fe545 --- /dev/null +++ b/static/img/valkey-stacked-black.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-stacked-color-light.svg b/static/img/valkey-stacked-color-light.svg new file mode 100644 index 00000000..333f6c5d --- /dev/null +++ b/static/img/valkey-stacked-color-light.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-stacked-color.svg b/static/img/valkey-stacked-color.svg new file mode 100644 index 00000000..e5302770 --- /dev/null +++ b/static/img/valkey-stacked-color.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/valkey-stacked-white.svg b/static/img/valkey-stacked-white.svg new file mode 100644 index 00000000..ace21ad3 --- /dev/null +++ b/static/img/valkey-stacked-white.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + diff --git a/templates/default.html b/templates/default.html index 23a2e0ba..00814a3a 100644 --- a/templates/default.html +++ b/templates/default.html @@ -47,6 +47,7 @@

Get Involved