Document new minicon standard

[jimmynotjim]

Based on the rules identified in #547, document the standard for both editing and creating new icons.

[Dnpizarro]

@designlanguage I wanted to document the 40pt line width option. I'm thinking we should probably discuss over hang outs. I'll connect with you over chat.

[designlanguage]

@Dnpizarro - Yes, let's discuss over hangouts. From these screenshots, it looks like there might be a few exceptions. The arrow looks much thicker than 40 pt, and the $ looks thinner, so we should formalize if/where/when we use different rules. Same thing with filled in shapes like the fax machine.

It'll also be good to share with the team and get feedback on these. I'll add the initial explorations for documentation also:

Version	Samples
Original
Original w/ circle
30pt outline
30pt outline circle
30pt filled circle
40/30pt outline
50/30pt outline

[designlanguage]

Seeing the outlined version of the minicons in context, we wanted to try a more filled in version to help them stand out from the text.

We would still keep some elements outlined to help recognition (like paper).

[jimmynotjim]

@designlanguage @Dnpizarro any notes we can dump in here from this sprint before we forget about them? Maybe a bit about changing from baseline positioned to vertically centered on baseline and cap height at certain sizes. Could also include the change in line widths from circle icons to individual glyphs.

[Scotchester]

Once it was determined that the icons would all live on Illustrator artboards of the same dimensions, @jimmynotjim and I needed to create a batchable action in Illustrator to remove whatever left and right whitespace exists in the files provided to us by the designers, so that when we actually display them on a webpage, that whitespace is not rendered.

As there is no simple command to do that kind of thing in Illustrator, we determined with some Googling that the easiest way to handle it would be to write an Illustrator script – a snippet of JavaScript that can be executed on an Illustrator document. We found some Adobe forum answers to get us started down this path, beginning with the example script found here. Once that was working, we began iterating on the script to get it to do what we wanted, primarily referring to the official Adobe llustrator CC 2017 Scripting Guide [PDF].

The final script we arrived at is documented in https://github.com/cfpb/design-manual/issues/577#issuecomment-359943240

[designlanguage]

Starting the documentation on the rules for our icon set. To be continued...

The Artboard

To start, we created an artboard based on Avenir Next. Our icons are often used alongside Avenir Next, so it's important that juxtaposition always looks good. By matching the x-height, cap height, etc, of Avenir, we can determine how each icon aligns with the text beside it.

The standard artboard has a width of 1000 pts and a height of 1200 pts. [Add explanation about the 200pts of padding for web]

Icon sizing

Our icons have a variety of heights and widths, but it's important that they appear relative in size to each other. To accomplish that, we created a sizing grid:

Horizontal	Mid-horizontal	Square	Circle	Mid-vertical	Vertical

This grid directly relates to relatively sizing rectangular icons, but some icons are irregular shapes. In those cases, optical sizing is important.

Fits grid	Fits grid	Optical sizing	Optical sizing

Relating open icons and circle icons

When typing or placing an icon next to Avenir in print or web, all icons should have a similar size. This includes the overall size of circled icons, and icons outside of circles.

So we created two sizing grids, a smaller one that fits within the standard circle, and a larger grid for icons outside of the circle. That allows the same icon inside and outside the circle to have a similar visual prominence:

Alignment

Circle icon alignment

The overall position of a circle icon is centered on the cap height of Avenir Next. Inside the circle, icons are centered (optically).

Position of circle	Position of icon within circle

Open icon alignment

Outside of the circle, centering the icon often leaves it floating next to Avenir. To solve that, we started the grid on the baseline for more horizontal icons. Once an icon becomes taller than the cap height of Avenir, then it becomes centered on the cap height.

Horizontal	Mid-horizontal	Square	Circle	Mid-vertical	Vertical

Shapes & detail

There are two types of icon shapes.

Simple icons

Simple icons are built from rounded strokes, not filled in shapes. Their main purpose is for navigation or status, and can be used at the smallest size (alongside Avenir paragraph text).

Element	Open icon	Circle icon
Example
Stroke weights	130pt	100pt

Complex icons

Complex icons are built from geometric shapes and they have rounded edges. Details inside the overall shape may have right angles if necessary though.

Element	Open icon	Circle icon
Example
Stroke weights	70pt	50pt
Corner radii	30pt & 70pt	20pt & 50pt

The standard stroke weights apply to objects in the icon, as well as the minimum negative space between objects.

[More to come]

[Scotchester]

Excellent start, George!