Stylogeny combining CalArts Style × Flash Vector Cartoon

Try

Style combination · Pairs well

CalArts Style × Flash Vector Cartoon

Direct precursor: both build flat-vector, rounded characters with even strokes that a crew can redraw and tween; this style adds sliver or dot eyes and softer, thinner-limbed proportions.

From the research on CalArts Style (Rounded Cartoon Character Design)

Mix them and make something CalArts Style Flash Vector Cartoon

WowCalArts Style × Flash Vector Cartoon
A sample layout drawn from the recipe: shapes from CalArts Style, their arrangement from Flash Vector Cartoon, the finish from CalArts Style. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

CalArts Style (Rounded Cartoon Character Design) Flash Vector Cartoon (Newgrounds-Era Web Animation)

Type from Flash Vector Cartoon
Colour from CalArts Style
Form from CalArts Style
Composition from Flash Vector Cartoon
Surface from CalArts Style

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Flash Vector Cartoon

Wow

Pixelify Sans, standing in for Bitmap-emulating pixel fonts made to stay crisp at small sizes in Flash (e.g. Craig Kroeger's Miniml) for interface text such as preloaders, menus and buttons

Text · CalArts Style

A pejorative, disputed label for the rounded character design of 2010s American TV animation: big heads, dot or sliver eyes, thin limbs, soft uniform outlines and flat candy colours. Renzetti calls it meaningless name-calling; Muto calls it oversimplifying and vague. It lumps very different shows together and is partly a fan-culture proxy. Visual traits are an editorial synthesis, not from the cited article.

Nunito; CalArts Style used Hand-drawn show-title lettering and Rounded sans-serifs

03

The colours

The ground and leading colours come from CalArts Style, with a counter-accent from Flash Vector Cartoon. The ink reads on the ground at 4.5:1 or more.

CalArts Style (Rounded Cartoon Character Design) Flash Vector Cartoon (Newgrounds-Era Web Animation)

  • #fdf3e1 ground · 36%
  • #2b2a3a ink · 14%
  • #ffd35c accent · 18%
  • #ff3333 accent · 14%
  • #7aa7f0 accent · 10%
  • #66cc33 accent · 8%

As CSS

:root {
  --ground: #fdf3e1;
  --ink: #2b2a3a;
  --accent-1: #ffd35c;
  --accent-2: #ff3333;
  --accent-3: #7aa7f0;
  --accent-4: #66cc33;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Nunito", sans-serif;
}

05

More combinations

With CalArts Style

With Flash Vector Cartoon

Every style combination