# 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.

- Period: 2015–present
- Where: Global / networked
- Origin: Product, agency and startup web design of the later 2010s, which took the parallel projection of engineering drawing and of isometric video games (Zaxxon and Knight Lore in the early 1980s, eBoy's pixel Pixoramas from 1998) into flat vector illustration. The start date is approximate.
- Branch: Digital native
- Also known as: Isometric illustration, Isometric web illustration, SaaS isometric
- Page: https://stylogeny.com/styles/isometric-tech-illustration/

## How it works

- Draw every object on one isometric grid: verticals stay vertical, the other two axes run at the same angle, and there is no vanishing point.
- Give each volume three flat tones, lightest on top and two darker sides, instead of shading or lighting.
- Build a self-contained diorama on a tile, platform or floating island and leave the ground around it empty.
- Explain a system by connecting its parts with pipes, cables, arrows or lines of data across the grid.
- Keep human figures small and generic so the devices, screens and buildings carry the story.
- Set the type flat and frontal beside the drawing, in a clean sans-serif, so the picture alone holds the depth.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (defining)
- [Diagonal axis](https://stylogeny.com/design-choices/diagonal-axis/) (characteristic)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining)
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (characteristic)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (occasional)

### Typography
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic)
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (occasional)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (occasional)

### Colour
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (defining)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (characteristic)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (occasional)
- [Pastel](https://stylogeny.com/design-choices/pastel/) (occasional)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (occasional)

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (defining)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (defining)
- [Angular & zigzag](https://stylogeny.com/design-choices/angular-and-zigzag/) (occasional)
- [Pictogram](https://stylogeny.com/design-choices/pictogram/) (occasional)
- [Stylised figuration](https://stylogeny.com/design-choices/stylised-figuration/) (occasional)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (characteristic)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (defining)
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (occasional)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (characteristic)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (occasional)

### Tone & intent
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (defining)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (characteristic)
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (characteristic)
- [Utopian & idealistic](https://stylogeny.com/design-choices/utopian-and-idealistic/) (occasional)

Avoids: Naturalistic depiction, Whiplash line, Paper & letterpress bite, Painterly brushwork, Straight photography, Script, Abundant decoration, Collage & layering

Palette: #f4f6fb, #5b6cff, #3a44b8, #2bc4b4, #ffb648, #1f2440

Typefaces: Geometric and neo-grotesque web sans-serifs set flat beside the drawing, such as those of the SaaS interfaces the illustrations sit in (a working recommendation: the style has no settled typographic canon), Isometric lettering: letters drawn as blocks and sheared onto the same 30-degree planes as the objects, used for signs, logos and labels inside the scene

Known for: eBoy (founded 1997 by Kai Vermehr, Steffen Sauerteig and Svend Smital; based in Berlin and Los Angeles): isometric pixel Pixoramas of cities such as Berlin, London, Tokyo and San Francisco, from 1998 (precedent); Zaxxon (Sega, 1981 in Japan, 1982 internationally) and Knight Lore (Ultimate Play the Game, ZX Spectrum, 1984): early isometric video games (precedent); Monument Valley (ustwo games; lead designer and artist Ken Wong, 2014): isometric puzzle game of impossible architecture (precedent and parallel); Psych X86 agency website: hero section with isometric device illustrations at 30 degrees, cited in Nataly Birch's undated Speckyboy roundup of isometric illustration in web design; Optima Ninja (human characters mixed into isometric scenes spread down the landing page) and Laszczuk (an isometric background with focal points that lead the eye down the page, roughened by grunge textures and gradients), both cited in the same Speckyboy roundup; Imarc (web agency, Amesbury, Massachusetts): isometric "behind the scenes" illustrations of its own offices, in a 2020 trend post where Lead Designer Kelly Freitas says such illustrations let users picture an environment without photography (Imarc blog, 7 April 2020)

## Where it comes from, and what it’s close to

- Grew out of: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016)
- Influenced by: [Bitmap & Pixel Graphics](https://stylogeny.com/styles/bitmap-pixel.md) (1977–1995)
- Alike in its design choices: [Low Poly Illustration](https://stylogeny.com/styles/low-poly.md) (2012–present), 72% alike
- Alike in its design choices: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present), 67% alike
- Alike in its design choices: [Schematic Transit Diagram (Beck Tube Map Idiom)](https://stylogeny.com/styles/transit-diagram-map.md) (1931–present), 65% alike
- Alike in its design choices: [Generative & Dynamic Identities](https://stylogeny.com/styles/generative-identity.md) (2007–present), 65% alike
- Alike in its design choices: [NFT Profile-Picture Collections (CryptoPunks to Bored Apes)](https://stylogeny.com/styles/nft-pfp-collections.md) (2017–present), 61% alike
- Alike in its design choices: [Corporate Memphis](https://stylogeny.com/styles/corporate-memphis.md) (2017–present), 61% alike

## Sources

- https://en.wikipedia.org/wiki/Isometric_projection
- https://en.wikipedia.org/wiki/Isometric_video_game_graphics
- https://en.wikipedia.org/wiki/EBoy
- https://en.wikipedia.org/wiki/Monument_Valley_(video_game)
- https://speckyboy.com/isometric-illustrations-web-design/
- https://www.imarc.com/blog/designs-you-should-know-about

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Isometric Tech Illustration”, https://stylogeny.com/styles/isometric-tech-illustration/