Stylogeny combining Bitmap × Isometric Tech Illustration

Try

Style combination · Pairs well

Bitmap × Isometric Tech Illustration

Draw the same isometric world in visible pixels for an eBoy-like, game-flavoured version.

From the research on Isometric Tech Illustration

Mix them and make something Bitmap Isometric Tech Illustration

FutureBitmap × Isometric Tech1977 · 2015
A sample layout drawn from the recipe: shapes from Isometric Tech Illustration, their arrangement from Isometric Tech Illustration, the finish from Bitmap. 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.

Bitmap & Pixel Graphics Isometric Tech Illustration

Type from Bitmap
Colour from Isometric Tech Illustration
Form from Isometric Tech Illustration
Composition from Isometric Tech Illustration
Surface from Bitmap

02

The type

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

Display · Bitmap

Future

Pixelify Sans, standing in for Chicago (Susan Kare, 1984)

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

03

The colours

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

Bitmap & Pixel Graphics Isometric Tech Illustration

  • #f4f6fb ground · 36%
  • #1f2440 ink · 14%
  • #ffb648 accent · 18%
  • #9bbc0f accent · 14%
  • #5b6cff accent · 10%
  • #ff55ff accent · 8%

As CSS

:root {
  --ground: #f4f6fb;
  --ink: #1f2440;
  --accent-1: #ffb648;
  --accent-2: #9bbc0f;
  --accent-3: #5b6cff;
  --accent-4: #ff55ff;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Inter", sans-serif;
}

04

The two styles

A retro pixel-art space navigation interface shows a gridded star map with a spiral galaxy, colorful stars, and green celestial bodies. A right-hand panel displays a cyan planet and its statistics, while object cards and a command menu run along the bottom. 1977–1995 · North America, East Asia Bitmap & Pixel Graphics Graphics and lettering built from the square pixels of low-resolution screens (arcade and console sprites, home-computer displays and the first graphical user interfaces), where every dot was placed by hand within tight limits of memory, resolution and palette. Designers such as Susan Kare turned those constraints into a language of legible pictogram icons, jagged bitmap fonts and dithered tones. 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.

05

More combinations

With Bitmap

All 19 combinations with Bitmap

With Isometric Tech Illustration

Every style combination