# Isometric drawings
> The isometric kit live: one 30 degree projection, one corner radius and one light, with boxes and prisms built on a slab and a mark seated on a face.
URL: https://www.prototemplate.com/docs/components/iso
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 kit [#the-kit]
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 functions [#import-and-functions]
```tsx
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);
;
```
| Function | What it returns |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `project(x, y, z)` | A world point on screen: +x runs down to the right, +y down to the left, +z straight up. |
| `topFace`, `leftFace`, `rightFace`, `silhouette`, `frontEdge` | The faces, the outline and the near vertical edge of an `IsoBox` `{ x, y, z, w, d, h }`. |
| `prismTop`, `prismFaces`, `prismSilhouette`, `prismFrontEdges` | The same for an `IsoPrism` `{ points, z, h }`, any convex plan polygon. Each face says whether it takes the left or the right shade. |
| `roundedPolygon(points, r)` | A path through the points with the family's corner radius, `ISO_RADIUS` (2.4). |
| `plane(z, ox, oy)` | The SVG transform that lays plan content on the face at height z, for marks, labels and chip seats. |
| `markPath(x, y, w, d, z)` | A flat rounded rectangle on a face: a content bar or a mark's plinth. |
| `depth(x, y, z)` | How near the camera a point sits; its sign splits an object's front from its back. |
`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 it [#when-to-use-it]
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 themes [#reduced-motion-and-themes]
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 traps [#numbers-and-traps]
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.
| What | Value | Measured on or held by |
| --------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------- |
| Plate thickness | about 4% of the footprint | The stack tower: footprint 104, thickness 4.2 |
| Air between stacked plates | about 40% of the footprint | The stack tower: 42 between plates |
| Corner radius | `ISO_RADIUS` 2.4, clamped to half of each adjoining edge | `roundedPolygon`, so a thin slab keeps its side faces |
| Corner radius on diff slats | 1.2 | At 2.4 a thin slat reads as a capsule |
| Rim alpha, plate `i` of `n` | 0.12 + 0.08 d, where d = i / (n - 1) | 0 at the bottom plate, 1 at the top |
| Top edge alpha | 0.24 + 0.24 d | The same d |
| Front edge alpha | 0.08 | Every plate |
| Labels beside a drawing | sans at 9 to 10 user units, about 0.6 alpha, leaders at 0.14 | Mono only on numbers |
| Glyphs on a chip | ``, `en` and `ja` at 6.5 px | Short glyphs read at chip scale, and words do not |
| The Locadex mark's box | a 500-unit viewBox around a glyph 199 by 222 | `markHalf = glyphWidth * (500 / 199) / 2` sizes the image box from the glyph |
* 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](https://www.prototemplate.com/skills/gt-diagrams/references/isometric.md) holds the face tones for each material, the extrusion recipe and the shimmer.
---
The index of every page on this site, for agents: https://www.prototemplate.com/llms.txt