Primer CSS Header Illustration

[ashygee]

First pass at the header illustration for Primer CSS. I included the Components header for reference but keep in mind that the Components header still uses styles prior to the standardization started during the README project.

CC @broccolini @emilybrick

[broccolini]

I dig the composition and the implementation of the new style ✨, just a few questions and feedback:

• The Aa draws my eye immediately and I'm not sure we want it to. I think it's because it's text and my brain wants to read it. It could also be the line underneath. Curious if other folks have the same reaction?
• I think the box borders should all be the same color, and I think they should be the same color as the wiggly line to be consistent with how color and line width is used in the site illustrations.
• Is the blue used for the octicons the same used on primer/components readme? It looks slightly off here but wondering if that's just because this is a screenshot or something.

Overall though I think this looks great and is a nice compliment to the components illustration. Looking forward to seeing these all looking consistent in future. This also reminded me we should have a thumbnail illustration for the readme when the new site is published—can't remember if we discussed that but I'll add it to the tracking issue.

[emilybrick]

Nice!!

My 2 cents-

• Love the dimension the dot shadows behind each box gives

• Dig the choice of icons

• I do enjoy how this feels like part of the same family as the components illustration. However, I think it might feel too similar (e.g. similar image, shapes swapped out). I think we might be able to get around this by changing the initial direction of the swooping line? IDK, could just be me, but I think changing that line's shape to be more dissimilar to the components composition would help differentiate it and make it stand out more as it's own image.

• Agree about the A, but I think if both letters + underline were the same color, it would help set it back a bit.

• The box stroke could probably stand to be consistent stroke width throughout (or more different, the contrast doesn't stand out enough right now)

[ashygee]

@broccolini @emilybrick Thanks for the feedback!!! I've listed my answers to your questions below:

• The different color box stroke is a fluke. I checked and I had accidentally had the middle box selected which is why the color and stroke width are off. 😅
• Definitely game to play with the connecting line. I'll tweak that a bit and upload some other options.
• Agree with the Aa representation. I'll see if I can mute that. Maybe making it smaller will help too.
• Yes, the Octicon color is consistent with the readme. I've been using blue-300. Maybe it's the sizing as well? In the readme the Octicons are a bit larger.

[ashygee]

Here are a few more variations to the header illustration.

Original Version

Revisions

Global changes: Muted Aa typography element.
Individual changes: Connecting line tweaks and small layout changes in v3 & v4

v2

v3

v4

cc @broccolini @emilybrick

[emilybrick]

Love the progress on these. Personally, v4 feels the strongest for me. Love the movement of the line.

Subdued 'Aa' is definitely feeling better.

Only nitpick, and this is pretty subjective:
(for v4) The left-most box feels like the focal point, which is fine – I like the balance of how visually loud that box is compared to the other two. However, the other two feel really similar in comparison. I prefer the size of the 'Aa' type in v2, to make it stand out a bit more.

These are all feeling strong though, so I'm curious, of these, which one feels the best to you?

[ashygee]

Final version of header image in this figma file:
https://www.figma.com/file/ODURCvr6uUEfT5HzgvMZUggy/Header-Illustrations?node-id=44%3A4989