Homepage hero: FEC design

[ericronne]

I think it might be better to track each hero design in a separate issue, especially since it could take a while to generate all of the ones listed in issue #1952. Hope y'all agree! Here's a design for fec. (Note that the comp width is 1024; the image will responsively resize / shift.)

Concept makes use of a magnifying glass to abstractly represent the functionality of the fec tool, which enables users to examine financial data related to campaigns, candidates, and the like. I've used a graph from the site itself, so the hero image hints at the actual design of the site.

Option A: Gray magnifying glass

Option B: Green magnifying glass

@jenniferthibault as the visual designer for fec, please let us know your thoughts here!

**Note: i've reduced the font size on the intro panel, in order to accommodate longer text. We may still need to massage the panel design, but hopefully this works for now.

cc @coreycaitlin @gboone (and feel free to tag others!)

[ericronne]

And with just the first two words in white (more balanced from a visual standpoint, content thoughts @coreycaitlin?)...

Option A alt: Gray magnifying glass

Option B alt: Green magnifying glass

[jenniferthibault]

@ericronne sorry for the delay!

This works for me, and I prefer the colored magnifying glass because it has better contrast. Would it work better on the 18F site if the magnifying glass was a blue from our palette? The large dark teal feels a bit clunky and out of place. Even though it comes from the FEC palette, I think it might be better in context to use 18F colors?

[coreycaitlin]

@ericronne Hmm, I kind of like Opt A alt (it feels just slightly easier to read), but I could really go either way! Can you send over a version of whichever image file you're relatively happy with so we can get it up while you're out?

[ericronne]

Blue works fine, reduced the magnifier so it wouldn't dominate so much. Text is fpo. Pithier the better, imo, and helps us avoid this issue: currently the box grows to accommodate the text length, which also makes the image taller to fit. This is a solid approach from a responsiveness standpoint, but ideally the height of this image would remain the same for all hero images, for design consistency. I'm not sure how we would go about ensuring that from a code standpoint.

Here's the png.*

*Time permitting, i can try to rebuild this from scratch as an svg.

[coreycaitlin]

I think this has moved along to implementation 🎉 closing this out for now.