Brand colors

[jimmynotjim]

Updated all the brand colors so we can update this project to CFv4.

Changes

• Updated the color palette to match latest
• Updated the color swatches to utilize a template that pulls the colors from the CSV file
• Updated the source code link

Additions

• Added CSV file that is exported from the color spec document
• Added a Less variables generation script that pulls the colors from the CSV file

Testing

• Run ./setup.sh to install new dependencies and rebuild
• Run npm run colors to regenerate the color palette
• Run grunt less and npm start
• Navigate to http://localhost:4000/brand-guidelines/color-principles.html

Review

• @Scotchester
• @designlanguage
• @nataliafitzgerald

Preview this PR without the whitespace changes

Notes

Todos

Checklist

• [ ] Changes are limited to a single goal (no scope creep)
• [ ] Code can be automatically merged (no conflicts)
• [ ] Code follows the standards laid out in the front end playbook
• [ ] Passes all existing automated tests
• [ ] New functions include new tests
• [ ] New functions are documented (with a description, list of inputs, and expected output)
• [ ] Placeholder code is flagged
• [ ] Visually tested in supported browsers and devices
• [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[Scotchester]

It didn't make sense to add the other tints of green to the primary palette. Not sure if we should re-work the primary, background, secondary lists or what, because grays aren't always backgrounds and I'd argue @green-20 isn't a primary brand color.

I agree that we should re-think how the palette is framed on the color principles page.

[jimmynotjim]

From @designlanguage

Rather than “CMYK coming soon”, can we just not include CMYK until we have those values?

I agree with Jimmy’s comments about the color groupings. We can show just our green as the primary color, but I don't think the tints need to be excluded.

Another factor is that with the added tints for all colors, it wouldn't neatly fit in the four columns of the current design. How about a different tabular format... something like this:

Just to clarify the groupings... I think we only need primary and secondary colors (along with respective tints).

[jimmynotjim]

@Scotchester @nataliafitzgerald @designlanguage If I take care of the CMYK can we merge it as is and backlog the layout? That's really a task all to itself.

[jimmynotjim]

[Scotchester]

I thought you wanted to merge this before doing all that work? 😜

[jimmynotjim]

@nataliafitzgerald @designlanguage here's a preview of what the new layout looks like (ignore the misalignments between the three screenshots)

[Scotchester]

That is looking :fire:

[Scotchester]

You might already be planning this, but how about we format the hex value in a fixed-with font?

[designlanguage]

I don't think Green 60 and Green 20 should be primary colors. It could just be CFPB green and Black, (possibly with each spanning 2 columns, with a swatch as thin as the secondary colors).

[designlanguage]

Besides that, I agree that this is looking great @jimmynotjim and @Scotchester !

[designlanguage]

One other thought: the body copy under primary color doesn't need to mention whitespace. It's already mentioned above in the text under Color (but maybe that's just placeholder text anyway).

[jimmynotjim]

Updated the font-face of the values to monospace per @Scotchester

@designlanguage that's the exact copy from the GDoc. Let's update it there to what you want for both that and the tints and I'll copy it over.

[jimmynotjim]

@designlanguage here's what the primary colors look like at 2 columns and the same height as the others

[jimmynotjim]

Bah! @designlanguage realized I was looking at the wrong text that you had commented on. I've removed the repetitive text from under the "Primary" heading and removed the placeholder text from under the "Tint" heading.

[jimmynotjim]

@Scotchester do you want to run this locally as a sanity check before we merge it?

[Scotchester]

@jimmynotjim Yes I do. Ready for me to give it a go?

[jimmynotjim]

@Scotchester I think I've addressed everything.

[Scotchester]

Great work on this! :shipit: