Now that you understand all the elements that make up our illustration style, here are some granular details on how to create them for your next illustration project. If you get stuck, ask someone in the #brand channel in Slack for guidance.
What about icons?
Icons are more utilitarian than illustrations. They are used on small UI details, like validating a form or as a magnifying glass inside a search box. Illustrations, on the other hand, are bigger in scale, utilize more colors, and convey a larger story.
The shadow is always behind the legs, and the legs have a “butt cap” endpoint.
The arms, at the shoulders, and the legs always live behind the body. The end cap is always round.
At 1x, the body radius of the Appling should be 4px, the stroke of the arms and legs 2px, and the shadow 1px high.
At 2x, the body radius of the Appling should be 8px, the stroke of the arms and legs 4px, and the shadow 3px high.
For white backgrounds, use $storm or #F1F4F5 for the shadow. All other elements stay the same.
For #F1F4F5 backgrounds, use $adamantium or #DADFE2 for the shadow. All other elements stay the same.