Use brand identity colors

[baisong]

Changes related to #18:

• Replaces two yellow-ish backgrounds with white.
• Replaces cyan-green, purple, red, and blue colors with official (similar) hex codes
• Restores border around project items for better visibility on new white background

Before

1 of 4

2 of 4

3 of 4

4 of 4

After

1 of 4

2 of 4

3 of 4

4 of 4

[baisong]

P.S. I tried using the Brand Yellow (#ffea00) as a background, but it seemed very harsh, that's why I replaced the two yellow zones with white.

An alternative might be to create brand pastel variants of all eight colors, and use those?

[baisong]

Good call. From the brand guide, white text on the purple color only passed 3 of the 4 tests. I updated the PR to have a slightly darker purple, which passes all four tests.

[baisong]

Here's the color contrast checker results for the proposed sections, based on Web Content Accessibility Guidelines (WCAG) 2.0:

• Who We Are (Foreground: #333333, Background: #64FFDA) ✓ Passes all 4 tests
• Mission (Foreground: #FFFFFF, Background: #8800CC) ✓ Passes all 4 tests
• Projects (Foreground: #333333, Background: #FFFFFF) ✓ Passes all 4 tests
• Get Started (Foreground: #333333, Background: #64FFDA) ✓ Passes all 4 tests
• Media (Foreground: #333333, Background: #FFFFFF) ✓ Passes all 4 tests

[baisong]

Or, alternatively, we could close this PR without merging, and go with this updated pastel pallette:

https://github.com/ProgressiveCoders/progcode-website/pull/22

[stephenscapelliti]

Oren, are the 4 tests for matching to the brand guidelines?

[baisong]

Hi @stephenscapelliti, no they were for visual accessibility (color contrast tests).

However, I misunderstood the task, and moved my work over into the Pastel update (#22).

Closing this PR in favor of #22