+ {{ committee.colors[0].hex }} +
+ UCLA ACM
+ Styleguide
+
+
+ Welcome to the UCLA ACM branding guideline website!
+ Here you can find information about our branding
+ alongside a collection of resources and assets.
+
+ Guidelines
+Logomarks
++
ACM at UCLA logomarks are visual cues of what each committees, and ACM as a whole, does.
+Spacing and Sizing
++
Standard logomark images are pre-formatted to meet clearspace requirements. In cases where you need to modify these assests to create custom logomarks, use the following templates to maintain sufficent clearspace.
+For stand-alone logos, use the following template.
+For wordmarks-logo combo, use the following template. If no committee name is present, + remove the dot and treat the ‘m’ as the rightmost character
+ {% include "assetbox-template-large.html", title: "Download Template" , file: "partials/large-partial-01.svg" %} + {% include "assetbox-template-large.html", title: "Download Template" , file: "partials/large-partial-02.png" %} +Color
++
All logos come in two types - light and dark. Makes sure to use the version that maintains a color contrast of at least 0.7 between the background and the color of the diamond.
+Wordmarks
++
ACM at UCLA Wordmarks are used when the name of the comittee has to be clarified. Built using the proprietary Westwood Sans font, they are designed to be legiable in large print while keeping it aligned with ACM’s geometric art style. They can either be used alongside the logomark, or by itself.
+Spacing and Sizing
++
Standard logomark images are pre-formatted to meet clearspace requirements. In cases where you need to modify these assests to create custom logomarks, use the following templates to maintain sufficent clearspace.
+For wordmarks-logo combo, use the following template. Note that this is the same as the template in the “Logomark” section
+For wordmarks-logo combo, use the following template. If no committee name is present, remove the dot and treat the ‘m’ as the rightmost character.
+ {% include "assetbox-template-large.html", title: "Download Template" , file: "partials/spacing-01.png" %} + {% include "assetbox-template-large.html", title: "Download Template" , file: "partials/spacing-02.svg" %} +Color
++
Comittee wordmarks, in addition to light/dark versions, have a “basic” version and the gradient version. Whenever possible, the gradient version should be used. The basic version should be reserved for cases where colors are limited, such as physical merchendise, or when the gradient has a low color contrast compared to the background
+In Type
++
When typing out wordmarks as text, capitalize ACM as well as the first letter in the second word. The dot should be converted to a space.
+ +To add subtitles, use a vertical line separated by a single space:
+ACM Hack | Hackschool Series
+Compliance
++
In order to comply with UCLA and ACM’s branding plicies, there are several rules to follow.
+UCLA Policies
++
These rules apply for all activities on campus
+ +ACM Policies
++
These rules apply for all activities/materials directly dealing with ACM HQ.
+ +Colors
++
Each committee, including the general ACM at UCLA, has 4 colors defined, as well as a “gradient”.
+ {% include "guidelines-color-grid.html"%} +Ratio
++
New ACM branding recommends light theme. The bottom chart shows a recommended ratios of colors. The exact ratios are not specified to allow flexibility in design.
+ +Typography
++
ACM at UCLA has 4 fonts defined for various uses
+Wordmark Font
+Westwood Sans is a proprietary font made by ACM to be used in wordmarks, and wordmarks only.
+Header Font
+Poppins is the header font, used for headers in posters and websites. As such, any text using Poppins should not exceed about dozen words. For longer phrases, use the body font.
+Body Font
+Open Sans is the body text, generally used for sentences and paragraphs.
+Code Font
+Source Code Pro is used when writing code.
+Art
++
ACM at UCLA, like many other tech-related organizations, predominatly use vector-based art, However, in order to help it stand out from other organizations, there are several key art directions to follow.
+Vector is the basics
+Pixel-based art should rarely, if ever, be used. This is to make inmplementations on digital media easier, as well as to speed up production.
+Light Theme
+ACM branding recommends light theme, and this should be applied to art as well.
+Soak it up
+The overall color of art should reflect the committee’s color palette - even for things that usually don’t have color.
+Bold and Brilliant
+Do not shy away from using vivid colors, unusual color palettes, etc.
+Details
+Strike a balance between realism and abstract. Above, the keyboard has detailed bumps, while indivisual letters are removed to avoid clutter.
+Give it depth
+Whenever possible, create perception of depth using color, gradients, and/or shadows.
+Questions?
++
Contact Haki or Tomoki.
+ACM - {{ committee.title }} -
-{{ committee.tagline }}
-Logomarks
-We suggest using the white and black logomarks in situations where the primary logomark may not be clearly visible.
- {% capture logomark_filepath %}logos/{{committee.filename}}-logo.png{% endcapture %} - {% capture white_logomark_filepath %}logos/{{committee.filename}}-logo-white.png{% endcapture %} - {% capture black_logomark_filepath %}logos/{{committee.filename}}-logo-black.png{% endcapture %} - - {% include "assetbox.html", title: "Primary logomark", file: logomark_filepath %} - {% include "assetbox.html", title: "White logomark", file: white_logomark_filepath %} - {% include "assetbox.html", title: "Black logomark", file: black_logomark_filepath %} - - {% capture logomark_dl %}{{committee.filename}}-logomarks.zip{% endcapture %} - {% capture logomark_dl_button %}Download all {{committee.title}} logomarks{% endcapture %} - {% include "button.html", file: logomark_dl, filename: logomark_dl, content: logomark_dl_button %} - -Social media logomarks
-Social media doesn't let you add margins to profile pictures, so we've done it for you. Use these files for social media profiles.
- {% capture logomark_dl_sm %}{{committee.filename}}-logomarks-sm.zip{% endcapture %} - {% capture logomark_dl_sm_button %}Download all {{committee.title}} logomarks for social media{% endcapture %} - {% include "button.html", file: logomark_dl_sm, filename: logomark_dl_sm, content: logomark_dl_sm_button %} - - -Wordmarks
-We suggest using the wordmark contrasts the most with the background.
- {% capture darkcolor_wordmark_filepath %}logos/{{committee.filename}}-wordmark-darkcolor.png{% endcapture %} - {% capture lightcolor_wordmark_filepath %}logos/{{committee.filename}}-wordmark-lightcolor.png{% endcapture %} - {% capture light_wordmark_filepath %}logos/{{committee.filename}}-wordmark-light.png{% endcapture %} - {% capture dark_wordmark_filepath %}logos/{{committee.filename}}-wordmark-dark.png{% endcapture %} - {% capture fullcolor_wordmark_filepath %}logos/{{committee.filename}}-wordmark-fullcolor.png{% endcapture %} - - {% include "assetbox.html", title: "Primary wordmark", file: darkcolor_wordmark_filepath %} - {% include "assetbox.html", title: "Secondary wordmark", file: lightcolor_wordmark_filepath %} - {% include "assetbox.html", title: "Light wordmark", file: light_wordmark_filepath %} - {% include "assetbox.html", title: "Dark wordmark", file: dark_wordmark_filepath %} - {% include "assetbox.html", title: "Full color wordmark", file: fullcolor_wordmark_filepath %} - - {% capture wordmark_dl %}{{committee.filename}}-wordmarks.zip{% endcapture %} - {% capture wordmark_dl_button %}Download all {{committee.title}} wordmarks{% endcapture %} - {% include "button.html", file: wordmark_dl, filename: wordmark_dl, content: wordmark_dl_button %} - -Colors
- {{ content }} - - {%- for color in committee.colors %} - {% include "colorswatch.html", name: color.name, hex: color.hex, rgb: color.rgb %} - {% endfor -%} - -Pattern/Motif
-Unfortunately no pattern assets exist on their own, but we suggest using the corresponding facebook group cover photos for reference:
- -Logomarks
+We suggest using the white and black logomarks in situations where the primary logomark may not be clearly visible.
+ {% capture logomark_filepath %}logos/{{committee.filename}}-logo.png{% endcapture %} + {% capture white_logomark_filepath %}logos/{{committee.filename}}-logo-light.png{% endcapture %} + {% capture black_logomark_filepath %}logos/{{committee.filename}}-logo-dark.png{% endcapture %} + +{% include "assetbox-light.html", title: "Primary logomark", file: logomark_filepath %} +{% include "assetbox-dark.html", title: "White logomark", file: white_logomark_filepath %} +{% include "assetbox-light.html", title: "Black logomark", file: black_logomark_filepath %} + +{% capture logomark_dl %}{{committee.filename}}-assets.zip{% endcapture %} +{% capture logomark_dl_button %}Download all {{committee.title}} logomarks{% endcapture %} +{% include "button.html", file: logomark_dl, filename: logomark_dl, content: logomark_dl_button %} + +Wordmarks
+We suggest using the wordmark contrasts the most with the background.
+{% if committee.filename != "acm" %} +{% capture darkcolor_wordmark_filepath %}logos/{{committee.filename}}-wordmark-light-gradient.png{% endcapture %} +{% capture lightcolor_wordmark_filepath %}logos/{{committee.filename}}-wordmark-dark-gradient.png{% endcapture %} +{% capture light_wordmark_filepath %}logos/{{committee.filename}}-wordmark-light.png{% endcapture %} +{% capture dark_wordmark_filepath %}logos/{{committee.filename}}-wordmark-dark.png{% endcapture %} +{% include "assetbox-light.html", title: "Primary wordmark", file: lightcolor_wordmark_filepath %} +{% include "assetbox-dark.html", title: "Secondary wordmark", file: darkcolor_wordmark_filepath %} +{% include "assetbox-dark.html", title: "Light wordmark", file: light_wordmark_filepath %} +{% include "assetbox-light.html", title: "Dark wordmark", file: dark_wordmark_filepath %} + +{% else %} +{% capture logo_wordmark_filepath %}logos/{{committee.filename}}-logo-wordmark.png{% endcapture %} +{% capture light_logo_wordmark_filepath %}logos/{{committee.filename}}-logo-wordmark-light.png{% endcapture %} +{% capture dark_logo_wordmark_filepath %}logos/{{committee.filename}}-logo-wordmark-dark.png{% endcapture %} +{% capture logo_wordmark_extended_filepath %}logos/{{committee.filename}}-logo-wordmark-extended.png{% endcapture %} +{% capture light_logo_wordmark_extended_filepath %}logos/{{committee.filename}}-logo-wordmark-extended-light.png{% endcapture %} +{% capture dark_logo_wordmark_extended_filepath %}logos/{{committee.filename}}-logo-wordmark-extended-dark.png{% endcapture %} +{% capture light_wordmark_filepath %}logos/{{committee.filename}}-wordmark-light.png{% endcapture %} +{% capture dark_wordmark_filepath %}logos/{{committee.filename}}-wordmark-dark.png{% endcapture %} +{% include "assetbox-light.html", title: "Logo wordmark", file: logo_wordmark_filepath %} +{% include "assetbox-dark.html", title: "Light logo wordmark", file: light_logo_wordmark_filepath %} +{% include "assetbox-light.html", title: "Dark logo wordmark", file: dark_logo_wordmark_filepath %} +{% include "assetbox-light.html", title: "Wordmark extended", file: logo_wordmark_extended_filepath %} +{% include "assetbox-dark.html", title: "Light wordmark extended", file: light_logo_wordmark_extended_filepath %} +{% include "assetbox-light.html", title: "Dark wordmark extended", file: dark_logo_wordmark_extended_filepath %} +{% include "assetbox-dark.html", title: "Light wordmark", file: light_wordmark_filepath %} +{% include "assetbox-light.html", title: "Dark wordmark", file: dark_wordmark_filepath %} +{% endif %} + +Colors
+ {{ content }} + +{% include "color-grid-committees.html", committeePg: committee %} + +Pattern/Motif
+Unfortunately no pattern assets exist on their own, but we suggest using the corresponding facebook group cover photos for reference:
+Applied Motif:
+ +
Base Motif:
+ +