Korbs/sudovanilla-website
Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

Update Branding Guideliens

Browse source
This commit is contained in:
Korbs 2024-12-09 17:09:44 -05:00
parent 5df4ae4024
commit bdf2458296
1 changed files with 49 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/pages/branding.md
View file

@ -5,10 +5,12 @@ Title: 'Branding Guidelines'
<style>
table img {
width: 100%;
display: block;
width: 64%;
margin: auto auto 64px auto;
}
td {
padding: 54px;
padding: 32px;
}
</style>
@ -18,7 +20,7 @@ The name should be exactly spelt as "SudoVanilla".
The first letter ,"S", should be capitalize along with the letter "V".
Examples of how to NOT spell it: sudovanilla, Sudovanilla, Sudo Vanilla, sudo vanilla
Examples of how to **NOT** spell it: sv, SV, Sv, sudovanilla, Sudovanilla, Sudo Vanilla, sudo vanilla
## Logo
@ -26,23 +28,59 @@ Make sure you're using the up-to-date version of the logo, was logo has been mad
Absolutely NEVER set the logo to the color black, please use the purple variant instead.
**Logo (Circle with letter V)**
<br/>
### Logo (Circle with letter V)
| | |
|-|-|
| ![](https://md.sudovanilla.org/images/sv-logo-4.png) | ![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Purple.png) |
Do not make the logo 1:1, as the logo is not 1:1, since the letter V sticks out a little to the left.
**Logo (Just the letter V)**
<br/>
### Logo (Just the letter V)
| | |
|-|-|
|![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Letter%20V.svg) | ![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Letter%20V%20-%20Purple%20Variant.svg) |
This version of the logo was mainly created to use as the favicon, which is the icon you usually see in the tab of your web browser.
Fun fact: The letter "V" is not custom. It is simply the letter "V" using the Wingsong font.
**Text (SudoVanilla)**
<br/>
### Text (SudoVanilla)
You must use the text as it is in it's own logo. The "Sudo" portion is regular size using Raleway font, the "Vanilla" portion is bolder using Red Hat Text font.
| | | | |
|-|-|-|-|
|![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Letter%20V.svg) | ![](https://md.sudovanilla.org/images/sv-logo-4.png) | ![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Purple.png) | ![](https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Letter%20V%20-%20Purple%20Variant.svg) |
| |![](https://md.sudovanilla.org/images/SudoVanilla-Text.png) | ![](https://md.sudovanilla.org/images/SudoVanilla-Text-Purple.png) | |
| | |
|-|-|
| ![](https://md.sudovanilla.org/images/SudoVanilla-Text.png) | ![](https://md.sudovanilla.org/images/SudoVanilla-Text-Purple.png) |
If you're using light mode on this site, like right now, toggle dark mode to view the original logo, which is in white.
If you're using light mode on this site, like right now, toggle dark mode to view the original logo, which is in white.
<br/>
### Text with Sub-Text
There are variants of the text logo with sub-text under it, which to be only used in SudoVanilla services and pages where it applies. The sub-text is to be placed in the bottom right corner, below the main text logo, at a smaller font. The font on newer version is Red Hat Text, older versions use Raleway on the sub-text, but are still used.
Here are examples that are used on both the new Gateway and Status page:
| | |
|-|-|
| ![](https://md.sudovanilla.org/images/logos/sudovanilla/gateway/sudovanilla-banner-gateway.png) | ![](https://md.sudovanilla.org/images/logos/sudovanilla/gateway/sudovanilla-banner-gateway-1.png) |
| ![](https://md.sudovanilla.org/images/logos/sudovanilla/status/sudovanilla-banner-status.png) | ![](https://md.sudovanilla.org/images/logos/sudovanilla/status/sudovanilla-banner-status-purple.png) |
<br/>
### Logo with Inserted Text
There are variants of the logo with text included, which to be only used in SudoVanilla services where it applies. The text is to be placed in the bottom right corner of the logo that cuts out this section of the circle as well.
An example would be the new Gateway:
![SudoVanilla Gateway Login](https://md.sudovanilla.org/images/527095905.png)