Isometric Pixel Art × Isometric Tech Illustration

Same tilted projection, opposite temper: sparse vector SaaS diagrams on white against a crammed, ironic pixel city.

From the research on Isometric Pixel Art

Mix them and make something Isometric Pixel Art Isometric Tech Illustration

A sample layout drawn from the recipe: shapes from Isometric Tech Illustration, their arrangement from Isometric Tech Illustration, the finish from Isometric Pixel Art. Not a real work, and not an image of either style.

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.

Isometric Pixel Art Isometric Tech Illustration

Type from Isometric Pixel Art: Bitmap & pixel
Colour from Isometric Pixel Art: Full polychrome
Flat fields
Form from Isometric Tech Illustration: Rectilinear
Geometric primitives
Composition from Isometric Tech Illustration: Isolated object
Illusion of depth
Surface from Isometric Pixel Art: Flat

The type

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

Display · Isometric Pixel Art

Future

Pixelify Sans, standing in for Hand-pixelled lettering drawn into the scene: shop signs, billboards and brand logos sheared onto the 2:1 planes of the buildings, as in eBoy's Pixoramas

Text · Isometric Tech Illustration

Small diorama worlds of devices, servers, desks, factories and city blocks drawn on one isometric grid (about 30 degrees; pixel work uses a 2:1 step, about 26.6 degrees) with no vanishing point. Each volume has one flat tone for its top and two for its sides, on a white or pale ground, so it reads as three-dimensional without lighting or rendering. Used for hero images, onboarding, icons and explainers, it gave flat design back its depth while keeping its clean vector surfaces and its technological optimism.

Inter; Isometric Tech Illustration used Geometric and neo-grotesque web sans-serifs set flat beside the drawing, such as those of the SaaS interfaces the illustrations sit in and Isometric lettering

The colours

The ground and leading colours come from Isometric Pixel Art, with a counter-accent from Isometric Tech Illustration. The ink reads on the ground at 4.5:1 or more.

Isometric Pixel Art Isometric Tech Illustration

#f2f2ee ground · 36%
#26263a ink · 14%
#ffc933 accent · 18%
#e8413c accent · 14%
#5b6cff accent · 10%
#3d8fe0 accent · 8%

As CSS

:root {
  --ground: #f2f2ee;
  --ink: #26263a;
  --accent-1: #ffc933;
  --accent-2: #e8413c;
  --accent-3: #5b6cff;
  --accent-4: #3d8fe0;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Inter", sans-serif;
}

The two styles

A densely packed, isometric cartoon city contains colorful block-shaped buildings, crowds of tiny people, elevated trains, roads, canals, bridges, and boats. A large red billboard reads “PIXEL CITY,” while pixel-like animals decorate buildings and a giant yellow duck floats in a canal.

1998–present · Central Europe, Northern Europe, Global / networked Isometric Pixel Art Pictures built by hand from single pixels in a 2:1 dimetric 'isometric' projection, made as posters, prints, covers and web graphics rather than as game screens. Its signature is eBoy's Pixorama: a dense, toy-like city of modular buildings, cars, billboards, brand logos and tiny figures packed edge to edge in flat, saturated colour. Habbo Hotel's furnished pixel rooms, though a game world themselves, set off a wide amateur practice of isometric pixel rooms and dioramas made as pictures.

An oversized, faceted yellow light bulb rises from the centre of an isometric blue platform with connected block buildings, turquoise cube-shaped trees and a small staircase. Bold blue and turquoise lettering at the upper left reads “BRIGHT IDEAS” against a pale background.

2015–present · Global / networked Isometric Tech Illustration Small diorama worlds of devices, servers, desks, factories and city blocks drawn on one isometric grid (about 30 degrees; pixel work uses a 2:1 step, about 26.6 degrees) with no vanishing point. Each volume has one flat tone for its top and two for its sides, on a white or pale ground, so it reads as three-dimensional without lighting or rendering. Used for hero images, onboarding, icons and explainers, it gave flat design back its depth while keeping its clean vector surfaces and its technological optimism.

More combinations

With Isometric Pixel Art

With Isometric Tech Illustration

Every style combination