Style Guide

PLEASE NOTE THAT THIS SLIGHTLY OUTDATED AND REQUIRES UPDATING

Accessible content

We have a special care for making our page as most accessible as possible. Useful tools:

Web Content Accessibility Guidelines (WCAG) made in "cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally"
Color Pallet Builder helps you preview how you pallet can be combined
Contrast checker helps you understand where contrast colours can be applied and accessibility level
Tanaguru helps you find a best colour match
Color Safe helps you create an accessible colour pallet

Fonts

Headers: Abhaya Libre made by mooniak collective

Variation and body: Montserrat made by Julieta Ulanovsky

***For more fonts usage, please select from Badass Libre Fonts by Womxn

Colour Pallet

Colour pallet is based on rose PyLadies Geek logo (with a slight variation to be more accessible, working in minumum AA standard both in white and black). Pallet has variations with blue and yellow (following Python, but also using tones variations) and grays derived. Colour pallet can go for a more light deviation or more pastel, depending on situation... and also to never be bored.

Main PyLadies colour *adapted #FA023C

Dark rose: #8C002B | Light rose: #FFD6DA

Dark blue: #232F40 | Light blue: #B2CCE5

Main yellow: FFD700 | Light yellow: #FFED8C

Dark gray: #3A3F3A | Medium gray: #818481 | Light gray: #A5A7A5

About Main PyLadies Berlin colour:

#FA023C

Shades and Tints

Triadic, analogous, monochromatic, complementary, black and white background

Shades of Gray

Light gray #8B9090 3:2 (white background) | 6:4 (black background)

Medium gray #776C7C 4:9 (white background) | 4.2 (black background)

Dark gray #544C58 8:2 (white background only)

***Please don't mix gray tones, they are not accessible compatible

Accessibility check (small and strong text) in different backgrounds Shades of Gray with blue and red, violetish tint aimed to be a little more soft, verified for accessibility content

Accessibility check for the light gray in white background Light gray attends minimum accessibility with white background, good for back bagground

Accessibility check for the light gray in white background Accessibility check for Medium gray in white background

Notes... All darks has being colour checked to match all lights. But darks cannot go with darks nor lights with lights. Main colour can go with any colour, BUT be aware that constrast average will be 3, the minimum acceptable. All darks goes well with white, as well as all lights goes well with black. Main can go with both, better with white, but as noted before, with minimum accessibility acceptable. Medium gray goes with nothing o_O please use with moderation, just for details or gradient.

Follow a few screen shots of the pallet and it's accessibility check.

Main Dark Pallet

Main dark colour pallet