Branding Guidelines

Color

SIGPwny is "dark mode first" and most colors are designed to be used on black for sufficient contrast. Combined with the primary green on black, this color scheme imitates a terminal, creating the traditional "hacker" feeling.

In cases where light mode or brighter backgrounds need to be used, we provide limited guidance on alternative colors.

Accessibility

As part of the inclusive nature of SIGPwny, it is critical that colors are used in a way which is accessible for everyone.

  • Primary colors must have a contrast ratio of at least 7:1 in order to fulfill WCAG 2.1 Level AAA.
  • Secondary colors must have a contrast ratio of at least 4.5:1 in order to fulfill WCAG 2.1 Level AA.
  • Using color to distinguish two or more elements should be avoided at all cost. Other distinguishing features, such as text, icons, shapes, or patterns should be used in conjunction with color to assist color-blind users.

Neutral Colors (Surface and Content)

Surface colors are used to establish a background and build hierarchy. Half steps (-050) are used as hover or active colors.

Content color for text is generally either pure white (#ffffff) or pure black (#000000). We provide the WCAG contrast ratios for brand colors based on these colors. However, content color can be any color as long as the accessibility guidelines are followed.

surface-000: #000000
surface-100: #222222
surface-200: #444444

Brand Colors

General

pwny-green: #33cc55 9.9:1 (WCAG AAA)
pwny-green-light: #00ff55 15.43:1 (WCAG AAA)
pwny-green-dark: #137137 6.09:1 (WCAG AA)

Seminar

pwny-blue: #41aaff 8.41:1 (WCAG AAA)

Capture-the-Flag

Warning: pwny-red is not WCAG AAA compliant and will be changed in the future.

pwny-red: #ff4040 ⚠️ 6.05:1 (WCAG AA)

Embedded Team

pwny-yellow: #ffc000 12.79:1 (WCAG AAA)

Purple Team

pwny-purple: #dd5fff 7.15:1 (WCAG AAA)

Orange

pwny-orange: #ed7a31 7.42:1 (WCAG AA)

Printing Colors (CMYK)

When creating printed materials, such as shirts or posters, CMYK color mode is used instead of RGB. Please ensure that your graphics software is set to use CMYK. We also provide the corresponding RGB value based on an algorithmic CMYK to RGB conversion - however this may not be accurate.

Typography

Presently, Helvetica Neue is used as our primary font for just about everything. Helvetica Neue Bold is used for logo wordmarks and headers, while Helvetica Neue Regular is used for body text.

Consolas is used as the font for code and monospace purposes.

User Interface

Microsoft Fluent 2 is the basis for most of our user interface design. For iconography, Fluent Icons are primarily used, along with Fluent Emoji.

Miscellaneous

  • Unless being written out, dates should be written in YYYY-MM-DD format rather than ambiguous formats such as MM-DD-YYYY or DD-MM-YYYY
  • Prioritize the usage of left-aligned content over center-aligned content. Avoid right-aligned content as much as possible.
  • When using quotes, ensure that "straight quotes" are used instead of “smart quotes” in content.