Game art style guide

This document describes an accessible art style to create game art efficiently. This is the style we use in our Godot tutorials. It uses a flat design to make the sprites read well.


We designed this visual language to be:

  • Clear. The game should always read well.
  • Colorful and appealing. We want it to be warm and attractive to the eye.
  • Accessible even to inexperienced digital artists. It relies on simple shapes and vector graphics.


We use the Pear36 color palette for all of our sprites. With 36 colors, it has enough hues to distinguish props in the game without becoming too hard to pick the right color.

Here are some tips on picking striking colors.

Value contrast

Use value contrast to make gameplay assets more visible than the background:

  • Use bright tones for the characters, enemies, loot, and interactive objects.
  • Use darker tones for trees, the grass, houses, and everything that’s part of the background.

You should also use outlines to highlight foreground sprites.

Picking good hues

You can use the natural hue of an element whenever possible such as orange and red for lava, or brown for a tree’s trunk.

However, there are many cases where colors are symbolic. An example of this is using green to represent the health of a character. In these cases, look for references and use standard conventions:

  • Red is a great tone to convey danger. It can also represent love or life as in a red heart.
  • Green can represent health, healing, bonuses, or endurance.
  • Yellow stands out and works well for coins, but also indicators like an arrow that tells the player where to go, or a quest marker.

There are no hard rules. What matters is that the players understand the game from its graphics.

You may have seen infographics about the meaning of colors. Take them with a pinch of salt. The perception of colors varies between cultures and depends on the context. I’ve read multiple times that purple would be the color of royalty. But if you look at historical portraits or outfits of kings and queens, you’ll find a lot of red, gold, beige, or black. These are the colors that come to my mind when thinking of “royalty.”

Complementary colors

Complementary colors are colors that, when mixed, cancel each other out and turn into gray. On the computer, in the RGB color model, these colors correspond to hues that are opposite on the color wheel.

Star-shaped wheel representing complementary colors

Complementary color star used by the painters of the 19th century

By Kwamikagami - Own work, CC BY-SA 4.0,

These colors offer a striking visual contrast. You can use them to express relationships between game elements:

  • Orange and blue portals can be two parts of the same system.
  • Blue walls and floor can suggest a safe environment while the red lava reads as unsafe.
  • A green player and a purple enemy indicate opposite characters.

Use lighter outline colors

With a dark background, a bright outline offers maximum visual contrast. That’s why we use a lighter outline color compared to a sprite’s fill.

Not every element needs outlines. In the image at the top of this guide, the coins stand out thanks to their bright yellow fill.


Minimalism is the core of the shapes' design. Simplicity is essential and helps distinguish each element.

Squares usually represent reliable elements. Their behavior is predictable and consistent. You could use squares for the player, static platforms, floors, walls, and even lava since its surface is flat.

Circles usually represent interactive elements such as coins, hearts, portals, or the top part of enemies since players can stomp them.

Triangles usually convey danger and avoidance. Use them for elements that cause damage on contact or to give direction. For example, an enemy could consist of a circle and a triangle, meaning its top part is safer than its sides.

You can mix these characteristics to convey better meaning with slightly more complex shapes.

Take the following image:


Here, the meteors are created from two differently sized circles to distinguish their rotation easily. The players are also notched triangles to communicate their look direction; bullets are capsules to convey movement.


We are currently using Montserrat Bold font for most of the text used in-game. It’s a good sans serif font with enough weight to be readable while still maintaining its place in the game screen’s hierarchy.


While teaching, we often use debug elements that need to be readable yet distinguishable from in-game elements. This helps us properly explain technical information. For that, we use a monospace bold font. $alt

Transparent debug elements allow us to show how our input affects the game instantly.



With this in mind, be as creative as necessary to express information without complexity. Focus on teaching good game development concepts with quality visuals. $alt

In summary:

  • Use the visuals to suggest function.
  • Each element should be distinct and unique.
  • Favor simplicity over complexity.
  • Abstract behavior through well-established concepts.


All the assets in this guide are released under the CC-By Attribution 4.0 license. You can reuse and modify them however you’d like, under the following terms:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.

You can do it like so:

GDQuest art assets CC-By 4.0 GDQuest, Pigdev, and contributors.



Here are some game mockups based on this art style.

Landscape Topdown Shooter

Landscape Topdown Shooter

Landscape Topdown Strategy

Landscape Topdown Strategy

Main Screen

Main Screen

Options Menu

Options Menu

Mobile Topdown Shooter

Mobile Topdown Shooter

Mobile Platformer

Mobile Platformer

Mobile Topdown Adventure

Mobile Topdown Adventure

Debug Console

Debug Console

Topdown Debug Mode

Topdown Debug Mode


Here are individual svg files you can use as a base to create game art in this art style.

Topdown Player$alt
Topdown Player Selected$alt
Topdown Enemy$alt
Topdown Enemy Selected$alt
Topdown Neutral$alt
Sidescroll Player$alt
Sidescroll Enemy$alt
Sidescroll Portal Orange$alt
Sidescroll Portal Blue$alt
Topdown Portal Orange$alt
Topdown Portal Blue$alt
Projectile Enemy$alt
Projectile Player$alt