Technical Illustration System

The visual language where cross-hatching meets isometry meets floating UI. Used by infrastructure and developer-tool companies (Agno, Adaline, Dashter, Railway, Render) to communicate system architecture as physical objects you can almost touch.

Reference images archived at wiki/assets/technical-illustration/.

What This Style Is Called

There is no single industry name. It lives at the intersection of several traditions:

The compound name: "Isometric exploded-view technical illustration with cross-hatched fills." For short: technical isometric or infra illustration.

The Five Techniques

1. Isometric Projection

No vanishing point. All edges at the same scale. Objects at 30 degrees from horizontal (the standard isometric angle). This makes everything feel like a precise engineering model rather than a photograph.

Construction rules:

• X-axis: 30 degrees right of horizontal
• Y-axis: 30 degrees left of horizontal
• Z-axis: vertical
• All three axes use the same scale (no foreshortening)
• Grid: equilateral triangles, not squares

In Figma/code: Use a 30-degree transform grid. Shapes drawn orthogonally, then rotated and skewed: transform: rotateX(60deg) rotateZ(-45deg). For CSS isometric: transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg) (adjust to taste).

In SVG/illustration tools: Draw flat, then apply isometric matrix. Affinity Designer and Illustrator both support isometric grids natively. Figma plugins: Easometric, Isometric.

2. Exploded View (Vertical Separation)

Stack layers along the Z-axis with uniform gaps. Each layer is a logical component of the system. The viewer reads bottom-to-top as infrastructure-to-interface.

Agno's stack (from the reference images):

┌─────────────────────┐  ← API surface (logo, single icon)
│                     │
└─────────────────────┘
         ↕ gap
┌───┐ ┌───┐ ┌───┐      ← Agents (multiple smaller blocks)
│ ◔ │ │ ◔ │ │ ◔ │
└───┘ └───┘ └───┘
┌───┐ ┌───┐            ← (second row of agents)
│ ◔ │ │ ◔ │
└───┘ └───┘
         ↕ gap
┌─────────────────────┐  ← Runtime / infrastructure
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│     (cross-hatched fill)
└─────────────────────┘

Rules:

• 3-5 layers maximum. More than 5 becomes unreadable.
• Top layer = what the user touches. Bottom layer = infrastructure.
• Uniform gap between layers (~20-30% of layer height).
• Each layer has consistent internal detail density.
• The bottom/foundation layer often uses cross-hatching to signal "substrate."

3. Cross-Hatching

Parallel diagonal lines at 45 degrees, evenly spaced. Communicates materiality - the surface has texture, weight, substance. Used sparingly: only on infrastructure/foundation layers, background panels, or to indicate "this is different from the other layers."

Specs from the reference images:

Variations:

• Single hatch: One direction only. Lighter, more modern.
• Cross-hatch: Two intersecting directions. Denser, more traditional, more "blueprint."
• Stipple hatch: Short dashes instead of continuous lines. Looser, more hand-drawn.
• Gradient hatch: Line density increases toward edges. Creates a sense of curvature.

In CSS/SVG: Use SVG <pattern> elements with <line> children, referenced via fill="url(#hatch)". For CSS-only, use repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 6px).

<pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
  <line x1="0" y1="0" x2="0" y2="6" stroke="#000" stroke-width="0.75"/>
</pattern>

4. Floating UI Composition

Real UI elements (cards, menus, tables) layered at offset positions with shadows, creating the illusion of depth on a 2D marketing page. The key is that these are recognizable product screenshots, not abstract shapes.

From the Dashter reference:

• Database schema panel underneath
• Column detail popover floating above-left
• Context menu (View credentials / Replace / Detach) floating above-right
• Cross-hatched badge on certain rows
• Each layer has its own drop shadow

Construction rules:

• 3-4 overlapping elements maximum
• Each element offset 20-40px from the one behind it
• Shadows increase in intensity for higher elements
• Background element is ~80% opacity or slightly blurred
• Foreground element is 100% sharp and fully visible
• At least one element should bleed off the edge of the frame (creates dynamism)

Shadow stack:

/* Back layer */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

/* Middle layer */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

/* Front layer */
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);

5. Isometric Grid Showcase

Multiple screens arranged on an isometric plane, usually at a 30-45 degree angle. Shows product breadth - "look at everything we built." Almost always dark background to make screens pop.

From the dark showcase reference:

• Deep navy/indigo background (#0a0a1a or similar)
• Screens at ~30 degrees, uniform spacing
• Each screen has a subtle border or glow
• Accent color (purple/indigo) used for interactive elements within screens
• Atmospheric blur or vignette at edges

Construction: Create a grid of flat screenshots, then apply the isometric transform to the entire grid container. Add a perspective container for slight depth scaling.

Color Palette

This style uses a strict, limited palette:

One accent maximum. Agno uses red (#ef4444) for CTAs only. Everything else is black and white. The illustrations themselves are purely monochrome - the accent never appears inside the diagram.

Typography Pairing

This style consistently uses monospace or technical typefaces:

Pseudo-Technical Brand Posters

The Holographik bookmark is adjacent to technical illustration but less diagrammatic: black field, white micro-labels, coordinates, copyright marks, small diagrams, brand marks, and AI-generation labels such as TXT2IMG, MIDJOURNEY, STABLE DIFFUSION, and RUNWAYML. The artifact reads as a fictional system sheet or brand operating manual. Use it when a brand surface needs technical legitimacy or AI-era process texture; do not treat the labels as real tool provenance. Source: X/@FigsFromPlums and local image artifact, 2026-07-03

Construction rule: pair one dominant empty field with tiny system labels, diagram marks, coordinates, and restrained brand marks. Keep the microcopy sparse enough that it creates atmosphere without becoming fake documentation.

How to Make These

Quick-Start: Isometric Exploded Diagram in Figma

1. Enable isometric grid plugin (Easometric or similar)
2. Draw each layer flat (rectangles, rounded rectangles)
3. Add icon details to each layer using Lucide/Phosphor at 1px stroke
4. Apply isometric transform: skewX(-30deg), scaleY(0.866)
5. Stack layers vertically with 40-60px gaps
6. Add cross-hatch fill to the bottom infrastructure layer using a pattern fill
7. Stroke: 1-1.5px black. No fills except white and hatch pattern.
8. Export at 2x for retina

Quick-Start: Floating UI Composition

1. Take real product screenshots or build components in Figma
2. Arrange 3-4 elements with offset overlap
3. Add increasing drop shadows per layer (8px → 24px → 36px blur)
4. Crop so one element bleeds off-frame
5. Add cross-hatch pattern to one decorative element (a badge, a background panel)
6. Keep the background clean (off-white or transparent)

Quick-Start: SVG Cross-Hatch Pattern (Copy-Paste)

<svg width="0" height="0">
  <defs>
    <pattern id="hatch-45" width="6" height="6"
             patternUnits="userSpaceOnUse"
             patternTransform="rotate(45)">
      <line x1="0" y1="0" x2="0" y2="6"
            stroke="currentColor" stroke-width="0.75"/>
    </pattern>
    <pattern id="crosshatch" width="6" height="6"
             patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="6" y2="6"
            stroke="currentColor" stroke-width="0.5"/>
      <line x1="6" y1="0" x2="0" y2="6"
            stroke="currentColor" stroke-width="0.5"/>
    </pattern>
  </defs>
</svg>

<!-- Usage -->
<rect width="200" height="40" fill="url(#hatch-45)" />
<rect width="200" height="40" fill="url(#crosshatch)" />

Quick-Start: CSS Cross-Hatch Background

.hatch {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, 0.06) 5px,
    rgba(0, 0, 0, 0.06) 6px
  );
}

.crosshatch {
  background:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 5px,
      rgba(0, 0, 0, 0.06) 5px, rgba(0, 0, 0, 0.06) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 5px,
      rgba(0, 0, 0, 0.06) 5px, rgba(0, 0, 0, 0.06) 6px
    );
}

CSS Isometric Transform

.isometric-container {
  transform: rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.isometric-layer {
  transform: translateZ(var(--layer-z));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

Reference Sites

Prompt Recipe: Generating These Diagrams

For AI image generation (Midjourney, DALL-E, Flux):

Isometric exploded view technical illustration of a [system].
Monochrome black line art on light gray (#f5f5f5) background.
Cross-hatched fill on the bottom infrastructure layer.
3-4 separated layers showing [top: API, middle: components, bottom: infrastructure].
Clean 1px strokes, no color, no shading, no gradients.
Engineering drawing style, patent illustration aesthetic.
White fill for solid shapes, hatched fill for substrate.
Minimal, precise, Dieter Rams meets technical manual.

Checklist - Before Shipping a Technical Illustration

• Isometric angle is consistent (30 degrees from horizontal)
• All parallel lines actually stay parallel (no accidental perspective)
• Cross-hatch lines are evenly spaced (4-6px) at 45 degrees
• Stroke weight is uniform (1-1.5px) across the entire illustration
• At most one accent color, and it only appears on CTAs / not inside the diagram
• Exploded layers are limited to 3-5
• Bottom layer reads as "foundation" (cross-hatch or heavier visual weight)
• Labels use monospace typeface
• Floating UI compositions have 3-4 elements max with increasing shadow depth
• Background is off-white (#f5f5f5) for light mode, deep navy (#0a0a14) for dark

---

Timeline

• 2026-07-03 | Added FigsFromPlums' Holographik image as pseudo-technical brand-poster vocabulary: sparse white system labels, coordinates, AI model/process labels, small diagrams, and brand marks on black. Source: X/@FigsFromPlums, 2026-03-27; Source: local image artifact, 2026-07-03
• 2026-04-12 | Created from analysis of Kevin's reference images: Dashter floating UI, Adaline stepped/fanned cards, Agno isometric exploded view (2 variants), dark isometric grid showcase. Supplemented with live screenshots from agno.com and adaline.ai. Characterized the visual language as "technical isometric illustration" combining isometric projection, exploded axonometric views, cross-hatching, floating UI composition, and isometric grid showcase. Codified construction rules, color palette, SVG/CSS patterns, and prompt recipes for reproducibility. Source: Kevin Liu reference images, agno.com, adaline.ai