|
| 1 | +# YARG Design Style |
| 2 | +A game requires many pieces of a puzzle to fit together in order for it to feel, look, and to just be good. Because of this, a consistent philosophy and quality of work is required for it to fit together. This section contains information on its design guidelines, so contributors know how to approach adding new content to YARG. |
| 3 | + |
| 4 | +# YARG Design Goals |
| 5 | +* **Robustness and a “Good Default”:** The goal of YARG is for it to be as fun as possible for new players. Because of this, it is important that we provide users with a good default experience—meaning, before changing the settings. All features of YARG should be as robust as possible, and not require external any \tinkering for it to work. It should just work. |
| 6 | + |
| 7 | +* **Customization, and “Modlessness”:** YARG’s end goal is for it to be as customizable as possible, so it suits the needs of all players, **without sacrificing competitive potential**. Modding of games usually happens because the game is missing a feature, or requires new content. YARG’s goal is for it to not require mods. All features that could be adjustable, should be. As for new content, the user should have the ability to do this without the need of external modification (i.e. new highways, etc.). |
| 8 | + |
| 9 | +* **Familiarity, But Better:** YARG’s stylistic choices should reflect and be inspired off of the newest commercial 5-fret guitar games. The point of this is for it to be as familiar and “at home” as possible for new players, while also delivering a new and polished experience. This means that inspiration is advised, but **innovation is recommended**. |
| 10 | + |
| 11 | +We have an extended Guideline in our Discord, if you want to be a Art Contributor make sure to read the full rules so we can keep a good workflow. |
| 12 | + |
| 13 | +**[Click here to join our Discord and see the full Guidelines](https://discord.com/channels/1086048856678084609/1101237559658561627/1101238054104092714)** |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +## 📖 Fonts |
| 18 | + |
| 19 | +### Red Hat Display |
| 20 | +[Google Fonts](https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat) |
| 21 | +Used for Interface Headers (Music Library, Settings) and for submenu headers (Settings Tabs Name) |
| 22 | + |
| 23 | +### Barlow |
| 24 | +[Google Fonts](https://fonts.google.com/specimen/Barlow) |
| 25 | +Our main font, we use Barlow for almost everything, it's a font with good readability so when it's used for big texts we use it as Regular, when using for buttons, small titles always use as uppercase. |
| 26 | + |
| 27 | +### Unbounded |
| 28 | +[Google Fonts](https://fonts.google.com/specimen/Unbounded) |
| 29 | +Unbounded is our tertiory typography, used mainly for complementary texts (Multiplier Numbers) |
| 30 | + |
| 31 | +## 🎨 Colors |
| 32 | + |
| 33 | +### Main |
| 34 | +|Color|Name|HEX|Description| |
| 35 | +| :-: | :- | :-: | :- | |
| 36 | +| <img src="Images/Design/color-primary.png" width="100%" alt="Primary Color"> | **Vivid Blue Sky** | #00DDFB | Primary Color | |
| 37 | +| <img src="Images/Design/color-secondary.png" width="100%" alt="Secondary Color"> | **Xanthous** | ##FFB636 | Secondary Color | |
| 38 | +| <img src="Images/Design/color-tertiary.png" width="100%" alt="Tertiary Color"> | **Rose** | ##F70072 | Tertiary Color | |
| 39 | + |
| 40 | +### Dark Palette |
| 41 | +|Color|Name|HEX|Description| |
| 42 | +| :-: | :- | :-: | :- | |
| 43 | +| <img src="Images/Design/color-dark-1.png" width="100%" alt="Primary Color"> | **Rich Black** | #090F1D | Primary Color | |
| 44 | +| <img src="Images/Design/color-dark-2.png" width="100%" alt="Secondary Color"> | **Oxford Blue** | #111A30 | Secondary Color | |
| 45 | +| <img src="Images/Design/color-dark-3.png" width="100%" alt="Tertiary Color"> | **Oxford Blue #2** | #1A253E | Tertiary Color | |
| 46 | +| <img src="Images/Design/color-dark-4.png" width="100%" alt="Tertiary Color"> | **Space Cadet** | #2C344D | Tertiary Color | |
| 47 | +| <img src="Images/Design/color-dark-5.png" width="100%" alt="Tertiary Color"> | **White Smoke** | #F2F2F2 | Tertiary Color | |
| 48 | +| <img src="Images/Design/color-dark-6.png" width="100%" alt="Tertiary Color"> | **Silver** | #B8B8B8 | Tertiary Color | |
| 49 | + |
| 50 | +### Light Palette |
| 51 | +|Color|Name|HEX|Description| |
| 52 | +| :-: | :- | :-: | :- | |
| 53 | +| <img src="Images/Design/color-light-1.png" width="100%" alt="Primary Color"> | **White Smoke #2** | #F5F5F5 | Primary Color | |
| 54 | +| <img src="Images/Design/color-light-2.png" width="100%" alt="Secondary Color"> | **White** | #FFFFFF | Secondary Color | |
| 55 | +| <img src="Images/Design/color-light-3.png" width="100%" alt="Tertiary Color"> | **Jet** | #333333 | Tertiary Color | |
| 56 | +| <img src="Images/Design/color-light-4.png" width="100%" alt="Tertiary Color"> | **Gray** | #7A7A7A | Tertiary Color | |
| 57 | + |
| 58 | +### Extra |
| 59 | +|Color|Name|HEX|Description| |
| 60 | +| :-: | :- | :-: | :- | |
| 61 | +| <img src="Images/Design/color-extra-success.png" width="100%" alt="Primary Color"> | **Malachita** | #00E85F | Success Messages | |
| 62 | +| <img src="Images/Design/color-extra-information.png" width="100%" alt="Secondary Color"> | **Azure** | #0083FA | Info Messages | |
| 63 | +| <img src="Images/Design/color-extra-warning.png" width="100%" alt="Tertiary Color"> | **Sunglow** | #FFD24F | Warning Messages | |
| 64 | +| <img src="Images/Design/color-extra-error.png" width="100%" alt="Tertiary Color"> | **Red (Pantone)** | #FF0039 | Error Messages | |
| 65 | + |
| 66 | +## ✏️ Icons |
| 67 | +Our icons are from [Lucide](https://lucide.dev/), an open source icon library. |
| 68 | + |
| 69 | +--- |
| 70 | +## Questions |
| 71 | + |
| 72 | +If you have any question about designing for YARG feel free to reach out to our Lead Artist Kadu on Twitter: [**@kaduyarg**](https://twitter.com/kaduyarg) or Discord: **Kadu#7712** |
0 commit comments