[SUCS Devel] [Git][sucs/sucs][49-new-logo-and-general-design-language] first version of the style guide

Thu Feb 27 15:26:50 GMT 2020


Zev Cooper-bennun pushed to branch 49-new-logo-and-general-design-language at sucs / SUCS


Commits:
5151df70 by Papergami45 at 2020-02-27T15:25:58+00:00
first version of the style guide

- - - - -


3 changed files:

- + styleguide/styleguide
- + styleguide/styleguide.md
- + styleguide/styleguide.md.backup


Changes:

=====================================
styleguide/styleguide
=====================================
@@ -0,0 +1,32 @@
+# Intro
+
+This is a brief style guide for people creating SUCS content (posters, fliers, web design, etc).
+
+# Logos
+
+There are 4 logos for SUCS, and all follow different purposes:
+
+1. Primary - this logo is what you should use for most project, and includes the name of the society along with the icon.
+2. Icon - this is the logo but missing the text. This is most useful for when you need a more compact logo, eg website icons, chat icons, etc.
+3. Printing - these variations of the logo are missing the orange circle, are inverted, and are for printing SUCS materials onto white paper.
+4. Legacy - these are the old logos, and will be deprecated over time, being replaced with the new logo. You shouldn't have any reason to use these in most cases, but we will keep them around just in case.
+
+# Colors
+
+* Primary Orange - #e86c39
+* Primary Dark Grey - #141414
+* Secondary Dark Grey - #474747
+
+# Fonts
+
+1. Source Serif Pro - Formal
+2. Source Code Pro - Code stuff/Logo S
+3. Source Sans Pro - General Text
+
+# Usage
+
+It's best to use Source Sans Pro for most text, and Serif Pro for more formal usage.
+
+Use the primary logo in all cases you can, apart from semi-formal to formal printing, in which case use the printing logo. Only use the icons when necessary, e.g the text would be too small to read using the main logo, or for something like a Discord icon.
+
+For printing etc, use pure white as the main colour. However, with digital projects, using Primary Dark Grey is the best choice, with Secondary Dark Grey as accenting. Introducing Primary Orange is essential, and best for interactive options. Use secondary orange for a "negative", and primary orange for a "positive". Eg, a join button - before joining, use secondary orange. After clicking join, switch it to primary orange.


=====================================
styleguide/styleguide.md
=====================================
@@ -0,0 +1,32 @@
+# Intro
+
+This is a brief style guide for people creating SUCS content (posters, fliers, web design, etc).
+
+# Logos
+
+There are 4 logos for SUCS, and all follow different purposes:
+
+1. Primary - this logo is what you should use for most project, and includes the name of the society along with the icon.
+2. Icon - this is the logo but missing the text. This is most useful for when you need a more compact logo, eg website icons, chat icons, etc.
+3. Printing - these variations of the logo are missing the orange circle, are inverted, and are for printing SUCS materials onto white paper.
+4. Legacy - these are the old logos, and will be deprecated over time, being replaced with the new logo. You shouldn't have any reason to use these in most cases, but we will keep them around just in case.
+
+# Colors
+
+* Primary Orange - #e86c39
+* Primary Dark Grey - #141414
+* Secondary Dark Grey - #474747
+
+# Fonts
+
+1. Source Serif Pro - Formal
+2. Source Code Pro - Code Stuff/Logo 
+3. Source Sans Pro - General Text
+
+# Usage
+
+It's best to use Source Sans Pro for most text, and Serif Pro for more formal usage.
+
+Use the primary logo in all cases you can, apart from semi-formal to formal printing, in which case use the printing logo. Only use the icons when necessary, e.g the text would be too small to read using the main logo, or for something like a Discord icon.
+
+For printing etc, use pure white as the main colour. However, with digital projects, using Primary Dark Grey is the best choice, with Secondary Dark Grey as accenting. Introducing Primary Orange is essential, and best for interactive options. Use Secondary Orange for a "negative", and Primary Orange for a "positive". Eg, a join button - before joining, use Secondary Orange. After clicking join, switch it to primary orange.


=====================================
styleguide/styleguide.md.backup
=====================================
@@ -0,0 +1,32 @@
+# Intro
+
+This is a brief style guide for people creating SUCS content (posters, fliers, web design, etc).
+
+# Logos
+
+There are 4 logos for SUCS, and all follow different purposes:
+
+1. Primary - this logo is what you should use for most project, and includes the name of the society along with the icon.
+2. Icon - this is the logo but missing the text. This is most useful for when you need a more compact logo, eg website icons, chat icons, etc.
+3. Printing - these variations of the logo are missing the orange circle, are inverted, and are for printing SUCS materials onto white paper.
+4. Legacy - these are the old logos, and will be deprecated over time, being replaced with the new logo. You shouldn't have any reason to use these in most cases, but we will keep them around just in case.
+
+# Colors
+
+* Primary Orange - #e86c39
+* Primary Dark Grey - #141414
+* Secondary Dark Grey - #474747
+
+# Fonts
+
+1. Source Serif Pro - Formal
+2. Source Code Pro - Code Stuff/Logo 
+3. Source Sans Pro - General Text
+
+# Usage
+
+It's best to use Source Sans Pro for most text, and Serif Pro for more formal usage.
+
+Use the primary logo in all cases you can, apart from semi-formal to formal printing, in which case use the printing logo. Only use the icons when necessary, e.g the text would be too small to read using the main logo, or for something like a Discord icon.
+
+For printing etc, use pure white as the main colour. However, with digital projects, using Primary Dark Grey is the best choice, with Secondary Dark Grey as accenting. Introducing Primary Orange is essential, and best for interactive options. Use Secondary Orange for a "negative", and Primary Orange for a "positive". Eg, a join button - before joining, use Secondary Orange. After clicking join, switch it to primary orange.



View it on GitLab: https://projects.sucs.org/sucs/sucs/commit/5151df704d59c26550e0101f164f3544b39cb538

-- 
View it on GitLab: https://projects.sucs.org/sucs/sucs/commit/5151df704d59c26550e0101f164f3544b39cb538
You're receiving this email because of your account on projects.sucs.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sucs.org/pipermail/devel/attachments/20200227/a54fbbbe/attachment-0001.html>
