Isometric drawings

The isometric family draws GT's infrastructure: stacks, chips, plates and the Locadex iso. Every drawing goes through one module, src/app/d/toolchain/diagrams/iso.ts, with one 30 degree projection, one corner radius and one light from the upper left, so separate drawings read as one set. The gt-diagrams skill holds the rules, and its reference drawings include the Locadex iso.

The kitCopy Anchor Link

The plate builds a solid on a slab with the kit's own functions. Width, depth and height size a box, and Solid swaps the box for a hexagonal or octagonal prism extruded from its plan polygon the same way. Mark seats the GT mark on the solid's top face with plane(z).

Each solid is drawn in the extrusion recipe: the opaque hull first, which hides whatever stands behind it, then the three visible faces, then only the hairlines that the silhouette and the top contour do not already draw. A later solid painted over an earlier one occludes it with no depth sorting.

Import and functionsCopy Anchor Link

import { frontEdge, leftFace, plane, rightFace, roundedPolygon, segment, silhouette, topFace, type IsoBox } from '@/app/d/toolchain/diagrams/iso';

const box: IsoBox = { x: -28, y: -24, z: 4.2, w: 56, d: 48, h: 18 };
const [a, b] = frontEdge(box);

<g>
  <path className='hull' d={roundedPolygon(silhouette(box))} />
  <path className='right' d={roundedPolygon(rightFace(box))} />
  <path className='left' d={roundedPolygon(leftFace(box))} />
  <path className='top' d={roundedPolygon(topFace(box))} />
  <path className='line' d={roundedPolygon(silhouette(box))} />
  <path className='hair' d={roundedPolygon(topFace(box))} />
  <path className='line' d={segment(a, b)} />
</g>;

IsoFrame wraps a drawing in the family's 240 by 180 frame and its props, className, strokeWidth, accent and title, which every drawing in the family takes.

When to use itCopy Anchor Link

Use the kit for infrastructure: a stack of layers, a device, a plate of chips, a mark on a slab. Keep the light from the upper left and the shading in its order: the top lightest, the front-left face in the middle and the front-right face darkest. Spend the accent on one object at most. A diagram of a flow between parts uses the doubled line instead.

Reduced motion and themesCopy Anchor Link

The kit draws still geometry; a host that animates it, as the stack tower does, runs its own timeline and holds a still under reduced motion. The plate's faces are the stage's ink at 4, 9 and 15 percent, so on paper they shade like daylight, and on ink they take the night shading the dark bands use.

Numbers and trapsCopy Anchor Link

The projection and the light make the drawings agree on angle and shade. These proportions and alphas make them agree on weight, so a stack drawn for one page sits beside a chip drawn for another as one set.

• Depth comes from each plate's stroke alpha. Group opacity carries no depth in this family. The pricing board's is-dim at opacity 0.32 marks a selection and says nothing about depth.
• A hand-written scale(1 0.5) rotate(45) is the 2:1 dimetric squash. Its y to x ratio is 0.5 where the 30 degree face needs 0.577, so a mark placed that way lies flatter than the face under it. Seat flat art with plane(z, ox, oy). Its matrix is the flat-to-iso map in one step, and it agrees with project() on that plane: rotate 45 degrees, scale y by tan 30 (0.577), then scale the whole by the square root of 1.5.
• Every point goes through project() or plane(), the two functions that hold the 30 degree projection.
• Plates are opaque. The first plates were frosted glass, a near-opaque hull under a diagonal white sheen, and BRAND.md section 9 lists glassmorphism under Avoid. The stack tower and the Locadex iso use opaque plates with no sheen.
• The line audit reads lines from computed CSS and cannot see SVG strokes, so check every junction of a drawing by eye in 2x crops.

The gt-diagrams skill's isometric reference holds the face tones for each material, the extrusion recipe and the shimmer.