The General Translation isometric family.
node scripts/install-skills.mjs gt-isometric --project <dir>Run it from a Prototemplate checkout. It links skills/gt-isometric into the project’s .claude/skills and .agents/skills; --copy vendors the folder instead, and --dry-run prints each step first.
General Translation (GT) builds the full stack for localization: i18n libraries, context-aware translation APIs, a CDN that serves translations, and Locadex, an AI agent that internationalizes a code repository and opens a pull request with the changes (BRAND.md section 9). Kevin is Kevin Liu at GT; his verdicts on the drawings are quoted below with their dates. GT draws every three-dimensional figure in one isometric family: one 30 degree projection, one light direction, one corner radius and one plate material, so drawings on the landing, in the deck and in the films read as one set. The geometry lives in one kit, iso.ts, which every React figure imports; the films repeat the same map in their own HTML. The Locadex isometric is the reference standard: it was the one element of the first v0 build that Kevin approved (2026-08-04).
Paths are relative to a Prototemplate checkout ($PROTOTEMPLATE, github.com/Kevin-Liu-01/Prototemplate, Kevin's design hub with the canon in DESIGN.md and BRAND.md) unless they name $GT_CLOUD (a checkout of github.com/generaltranslation/gt-cloud at origin/main, the monorepo whose apps/landing serves generaltranslation.com). Copyable code for every recipe below is in references/recipes.md.
Order of work for a new drawing:
plane() (sections 4 and 5).The map, with the camera at (+, +, +):
project(x, y, z) = [(x - y) * cos30, (x + y) * sin30 - z]ISO_COS30 = 0.8660254037844387, ISO_SIN30 = 0.5, ISO_RADIUS = 2.4.src/app/d/toolchain/diagrams/iso.ts in Prototemplate and $GT_CLOUD/apps/landing/src/components/landing/shared/iso.ts. They match function for function (the gt-cloud copy is reformatted by its formatter). Change both together.| export | returns |
|---|---|
project(x, y, z) | the screen point Pt |
depth(x, y, z) | x + y + z; positive is the near half of an object. The kit's comment names the edge globe as its user, but no drawing in either repository imports it today |
isoCircle(r, z) | { rx, ry, cy } for an SVG ellipse: a ground-plane circle of radius r at height z |
xy, polyline, segment | path strings, coordinates rounded to 0.01 |
IsoBox | { x, y, z, w, d, h }, occupying x to x+w, y to y+d, z to z+h |
topFace, leftFace, rightFace | the four projected corners of the top, the +y face and the +x face |
silhouette(box) | the hexagonal outer edge |
frontEdge(box) | the one interior vertical edge that the silhouette and the top contour do not draw |
roundedPolygon(points, r) | a closed path rounded in screen space at ISO_RADIUS; the radius is clamped to half of each adjoining edge so a thin slab keeps its side faces |
plane(z, ox, oy) | matrix(cos30 sin30 -cos30 sin30 sx sy): places flat art drawn in plan coordinates into the z plane, anchored at plan (ox, oy) |
markPath(x, y, w, d, z, r) | a flat rounded rectangle lying in a z plane: content bars, chip seats, sign bars |
IsoPrism | { points, z, h }: a convex plan polygon extruded from z to z+h, points wound like the box corners |
prismTop, prismFaces, prismSilhouette, prismFrontEdges | the prism's top ring, its visible side faces with their shade, its outer edge and its interior verticals |
A prism side face is visible when the outward normal of plan edge a to b, (by - ay, ax - bx), has a positive x + y sum. It shades right when the normal leans toward +x and left when it leans toward +y.
The components in IsoSolid.tsx build on the kit: IsoSlab (a box with three faces, silhouette, top contour and front edge; tone is ink, soft, hair, accent or none; faces={false} leaves a wireframe), IsoPlane (a flat card), IsoWire (a polyline through world points) and IsoArrow (a flat arrowhead pointing along +x). IsoFrame.tsx wraps them in the shared 240 by 180 viewBox (ISO_VIEW_W, ISO_VIEW_H), which fixes the relative scale of the family. Its strokeWidth (default 1.2) sets --iso-sw, accent switches the accent on or off, and title gives the drawing role='img'; without a title the drawing is aria-hidden.
The same map can be reached from a flat drawing: rotate it 45 degrees, scale y by tan 30 (0.577) and scale the whole by the square root of 1.5. At full strength that matrix equals project() at z = 0, and the designing-docs film interpolates all three with one tilt dial (section 7). 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. The deck's iso slide (deck/slides/35-iso.html) places its GT mark that way. Use plane().
Light comes from the upper left, always. Exactly three faces show. The top carries the least ink, the +y face (left) more and the +x face (right) the most. Nothing in the family lights a solid from another side, and accent faces keep the same order.
| material | where | top | left (+y) | right (+x) |
|---|---|---|---|---|
| line family, translucent | iso.css .iso-face-*, IsoSlab | currentColor 4% | 9% | 15% |
| line family on ink | the kit plate (craft.css), over an ink hull | white 4% | 9% | 15% |
| line family, accent faces | iso.css | accent 11% | 18% | 27% |
| opaque plate, dark | the tower and the Locadex iso | #151515 | #0d0d0d | #090909, hull #090909 |
| opaque plate, dark, hot or lifted | the same | #1b1b1b | #131313 | #0e0e0e |
| opaque plate, light | the tower (fullstack.css) | #f7f6f4 | #edebe8 | #e3e1dd, hull #e3e1dd |
| opaque plate, light | the Locadex iso: #070707 mixed into --tc-panel | 5% | 9% | 14%, hull 14% |
| opaque plate, paper | the pricing platform: ink mixed into paper | 6% | 16% | 28% |
Other tones in iso.css: content marks on a face 26%, the soft stroke 55%, the hair stroke 30% at 0.82 of the stroke width, and the accent stroke at 1.15 of it. The accent comes from --iso-accent. Set it from the page accent (#2f5ce0 on paper, #86a8ff on the dark band). The #3f6dfa fallback in iso.css is a different blue.
The percentages are amounts of ink. On paper they make the top the lightest face. With light ink on a dark ground the same amounts make the top the darkest face and the right face the brightest: the kit plate fills white at 0.04, 0.09 and 0.15 over ink (src/app/craft/craft.css), and the docs film fills its side faces with Bayer tones of 0.3 (left) and 0.56 (right) over navy. The opaque dark material of the tower and the Locadex iso sets luminance by value and keeps the top lightest in both themes. When you extend a drawing, use its material, and check the face order in both themes.
On paper the dark plates convert. The Locadex plate reads --tc-panel, its white hairlines become #070707 at the same alphas, and the accent becomes the page's --tc-accent (#2f5ce0), because #86a8ff loses its contrast on white. The light block in locadex.css records the direction behind it: on light, no black boxes.
Build new plates from the opaque material. The frosted glass plates (tc-stack-iso.tsx, GovernedColumn.tsx, toolchain/locadex/LocadexIso.tsx: a near-opaque hull under a diagonal white sheen gradient) came first. BRAND.md section 9 lists glassmorphism under Avoid, and the tower and the Locadex iso use opaque plates with no sheen.
Each solid paints in this order, and each line is drawn once:
roundedPolygon(silhouette(box)) with an opaque fill. It hides whatever sits behind it and below it.leftFace, rightFace and topFace, each through roundedPolygon.vector-effect: non-scaling-stroke: the rim (the hull path stroked), the front edge (segment over frontEdge(box)) and the top contour (the top face path stroked).For a prism, the hull is prismSilhouette, the faces come from prismFaces with their shade, and the interior verticals come from prismFrontEdges (src/app/craft/IsoDemo.tsx).
GlyphChip in StackTower.tsx, Chip in Locadex.tsx).TAP_Y in StackTower.tsx)..v0s-slab) and set its CSS z-index from the timeline. Inside one SVG the paint order is fixed by the document.pnpm lint:lines reads lines from computed CSS and cannot see SVG strokes. Check every junction of a figure by eye at 2x pixel crops (DESIGN.md section 2).One corner radius serves the family: ISO_RADIUS = 2.4. The overrides in shipped code are on small parts only: diff slats 1.2 (1 on the pricing platform), sign bars 0.4 and IsoArrow 1.2. The deck's iso slide (deck/slides/35-iso.html) says the family uses square corners and draws its plate with sharp polygons, and BRAND.md section 9 lists "no rounded corners" in its direction line, while every shipped drawing rounds at 2.4. Follow the code and DESIGN.md section 6 until Kevin settles the difference.
A plate is about 4 percent of its footprint thick, with about 40 percent of the footprint as air between stacked plates.
| drawing | footprint | thickness | air between plates |
|---|---|---|---|
| stack tower | 104 | 4.2 (4.0%) | 42 (40%) |
| toolchain stack | 84 | 3.2 | 34 |
| governed column | 86, base plate 110 | 3.2 | 34 |
| toolchain Locadex run | 84 | 3.2 | 38 |
| pricing platform | 104 | 4.2 | 38 |
| Locadex iso | repository 76, output 64, agent slab 44 hovering at z 54 | 3, 3 and 7 | |
| kit plate | 104, chips 26 and 34 | 4.2, chips 4 to 7 |
Depth comes from per-plate stroke alpha. Group opacity carries no depth in this family. With d = i / (n - 1), 0 at the bottom plate and 1 at the top:
Pass the alphas as inline custom properties (--v0s-rim-a, --v0s-edge-a, --ldx-rim-a, --ldx-edge-a) and keep the paint in CSS. The pricing board's is-dim (opacity 0.32) is a selection state and carries no depth.
Each drawing has one accent object: the merged pull request chip (Locadex iso), the payload chip on the translations plate (tower), the delivered-string chip on the runtime plate (toolchain stack), the live v214 chip (governed column) and the +38 bar (toolchain Locadex run). The shipped drawings also use the accent hue for light and motion: the scan beam, the wire pulses, the rail fill and the hot plate's top edge. The Locadex iso once warmed its mark to the accent as the beam passed under it; Kevin read it as flashing, so the mark now holds its resting ink.
Artwork on faces:
plane(): glyph strokes, icons, wires and marks. Kevin asked that the tags sit on the layers and never turn toward the viewer (quoted in StackTower.tsx).plane() group keep vectorEffect='non-scaling-stroke' so they stay 1px.<T>, en and ja at 6.5px mono on the pricing platform). Words do not. The enterprise round of 2026-08-11 named its context keys in the stage label instead.+38 −6 in the Locadex chip reading). The .iso-label class in iso.css is a 9px mono default from the earlier family, used only by the unmounted SdkStack.tsx; set labels in sans. At the 720px cut, size labels by their effective size: the Locadex frame renders at about 0.89x at 390px wide, so 9 becomes 10.5. The tower carries no type, and the copy beside it names the plates (Kevin: no words by the diagram).Brand marks render as alpha masks so the shape takes the surface's ink (BRAND.md section 4). A logo image laid over a face in screen space is the defect this rule prevents; the sign-in round of 2026-08-11 replaced one with a mask in the face.
The static seat, as on the Locadex slab:
<mask maskUnits='userSpaceOnUse' style={{ maskType: 'alpha' }}> holding an <image> of the asset. Mask coordinates resolve in the user space of the element that uses the mask, so write them in the same plan coordinates as the rect.<rect> filled from a CSS class (a token or the plate's ink step) with mask='url(#id)', inside <g transform={plane(z, ox, oy)}>.The shimmer seat moves plane() inside the mask and keeps the rects in screen space (section 6).
Assets in public/brand/ (Prototemplate and the gt-cloud landing carry the same files):
locadex-mark.svg for large seats. Its viewBox is 500 square and the drawn glyph spans 199 by 222 of it, so size the image box from the glyph: markHalf = glyphWidth * (500 / 199) / 2. The tower seats a 28-unit glyph in a 70-unit image box. The Locadex slab's image box is 32 units, so its glyph is about 13 units wide.no-bg-locadex-logo-light.png for small seats (a 16-unit image box on the pricing platform). The SVG's ring geometry breaks at small sizes.no-bg-gt-logo-light.png for the GT mark. The mask reads alpha only, so the light or dark variant makes no difference. gt-logo-light.svg may carry a ground; keep it out of masks.SiGithub at a half size of 4.6).Placement:
no-bg-gt-logo-light-96.png and no-bg-gt-logo-dark-96.png in plane() as two images that CSS toggles by theme (.v0s-dash-mark.is-light and .is-dark). New work uses the mask.DitheredMark (src/app/d/toolchain/diagrams/DitheredMark.tsx, mirrored in $GT_CLOUD/apps/landing/src/components/landing/shared/DitheredMark.tsx) renders a mark as masked ink with a Bayer-dithered highlight band sweeping through it. It is the one animated effect a mark may carry: no GIF and no filter glow (BRAND.md section 4).
BAYER4, the glyph field's matrix). SHINE_TIERS gives coverage and width: 16 and 7, 10 and 12, 6 and 18, 3 and 26, 1 and 36. Each window contains the previous one and ordered dither nests by construction, so the overlap composes the ramp exactly. The glint fill is opaque, so a cell covered twice never brightens.rotate() window failed: GSAP's SVG origin compensation shifted the whole sweep about 180 units off the mark.plane() sits inside the mask, so the masked rects and the dither cells live in screen space and stay square. shapeRendering='crispEdges' keeps the cells 1-bit at any zoom. The cell is 1.05 units by default, about 1.9px at the tower's resting width (Kevin asked for smaller dots), and a pattern tile is four cells.Props: id (a unique prefix, since SVG ids are document-global), href or maskContent, plane, markHalf, cover (the screen-space rect the ink and the shimmer span: project the glyph's plan corners and pad them by a few units), maskBox (default -120, -80, 240, 160; it must contain the cover), cell, tiers, inkClassName, glintClassName, shineClassName and stripeData (the two attributes the driver queries, default data-ldx-stripe and data-ldx-stripe2).
The driver: shineTravel(cover) returns two x positions, from and to, where the widest window sits just clear of the cover before it enters and just clear after it leaves, with 4 units of margin, measured along the band's normal (a window at 60 degrees moves only cos 60 along its normal per unit of x). Tween both stripe sets from from to to with ease: 'none', repeat: -1, created paused, at about 56 units per second, and start the counter-sheen with .time(lap / 2). Every pass enters clear of the mark, crosses all of it and leaves past its right edge (Kevin, tower round 10: "make it cross the whole locadex all the way to the right"). Without JS or under reduced motion the markup is the still: the primary band mid-glyph and the counter-sheen clear of it.
The tower's tones: resting ink white at 0.3, the shimmer group at 0.5 opacity and the glint #e9edf2. On the hot plate the ink takes the accent, the shimmer goes to full opacity and the glint mixes 70% white with the accent.
The motion rules of DESIGN.md section 9 apply. Every loop is created paused. A ScrollTrigger or an IntersectionObserver plays it only while its section is on screen, and only while its plate exists. Multi-phase choreography lives on one timeline. prefers-reduced-motion skips setup, and the markup pose is the still.
The tower build (src/app/d/_v0/sections/FullStack.tsx):
scrub: 0.35) spans the read, and a piecewise map converts it, anchored on each beat's lock-in. A beat locks in when the center of its copy block reaches the 55% read line, measured on the copy from flow geometry. The copy highlight uses a separate 80% line (DESIGN.md section 14).set inside the timeline, so a rewind restores it.The tower's top plate (the agents plate, called the capstone in the code; full size again after Kevin's "make the top layer the same size as the other"):
pathLength 1000 and strokeDasharray='110 140', a 7 s lap from offset 180 to -820;beamAt(t) re-projects the four corners for t from -1 to 1, because a leaning quad cannot be a translated constant. The aperture (half width 26) sways 16 units in y under the plate while the landing (half width 40) sways 30 across the plate below, 2.5 s, sine.inOut, yoyo. The top edge rises 9 units above the plate's underside, hidden by the hull, so the 12 px lift never opens a gap;The Locadex iso uses the same beam at 3.6 s, sine.inOut, yoyo. Its top edge sways 14 units so it stays under the 22-unit half width of the slab (Kevin: "the scanner is going beyond the locadex square"), while the landing sways 28 and spreads to a half width of 34 over the module chips.
Plates that separate and settle. The toolchain stack, the toolchain Locadex run and the governed column raise one plate on hover or focus, ink its leader and caption, and draw its doubled top edge: the top contour inset by a constant world margin (3.4 or 2.4 units), which projects to a constant screen gap.
Dash rules for iso motion (gt-motion section 7 holds the full list of dash traps):
autoRound: false on every dash-offset tween. GSAP integer-rounds px CSS properties, which froze a dash for about four frames and then jumped it a whole unit. A dash that loops (the glints, the context waves) also normalizes pathLength to 1000 so one unit is sub-pixel; the draw-on taps keep pathLength 100.strokeDasharray='100 200'. At exactly 100 a dash edge sits on the path's end and Chromium bleeds a sub-pixel fleck.vector-effect: non-scaling-stroke Chromium computes dashes in screen space and ignores pathLength. A dash that must measure a fraction of a path (the Locadex progress ring) uses user units with neither.The designing-docs film bridge (motion/films/blog-designing-docs/index.html, the bridge block; motion/ is local and owned by the films work, so read it only. A clone without motion/ can watch the bridge in the committed cut public/media/designing-docs-film.mp4, and recipe 9 holds its matrix). Kevin (2026-10-02): "bring back the isometric view that transitions into more in the designing docs film, no need to replace anything". Round 7d shipped it on 2026-10-03:
2 4) run from each lifted corner to where it stood.#86a8ff through the iso view and returns to the page's #2f5ce0 as the page lies flat.Review motion in a real browser or a Playwright capture. The in-app browser pane pauses requestAnimationFrame, so loops and shaders stand still there.
| reference | where | what to copy |
|---|---|---|
| Locadex iso | src/app/d/_v0/sections/Locadex.tsx and locadex.css (route /d/singularity-dossier; the production copy is in src/app/d/production/sections/); $GT_CLOUD/apps/landing/src/components/landing/sections/locadex/Locadex.tsx | the reference standard: the repository plate with a 3 by 3 module grid, the agent slab hovering with the Locadex mark and the leaning scan beam, and the output plate with signed diff slats and the upright merged chip, in both themes |
| stack tower | src/app/d/_v0/sections/StackTower.tsx, FullStack.tsx and fullstack.css; $GT_CLOUD/apps/landing/src/components/landing/sections/fullstack/ | four opaque plates with one artifact per face, the rail and its leaders, the scroll build, and the top plate's shimmer, glints, beam and diff hunk |
| governed column | src/app/d/toolchain/enterprise/GovernedColumn.tsx (route /d/toolchain/enterprise; gt-cloud main no longer carries it) | the composition: the organization plates (glossary, style directives, scoped access) sit on top, the review plates under them and a wider delivery base at the bottom, so the stacking order shows that what ships sits under every organization decision; a caption ledger grouped by tier and wired by doubled leaders drawn in an HTML overlay measured off anchors; and a rest state with the review gate lit. Its plates are glass; build them opaque |
| pricing platform | $GT_CLOUD/apps/landing/src/components/pages/pricing/PricingStackDiagram.tsx and pricing-page.css | four full-footprint plates with station numbers (01 to 04) lying in each top face by its left corner, one artifact per face in the front band, seated <T>, en and ja, the small Locadex mask, and the is-hot and is-dim selection. The file is unmounted since gt-cloud #5007 removed its section on 2026-09-29. Kevin's verdict on the 2026-08-11 pricing round: "nothing redeeming but the isometrics" |
| kit plate | src/app/craft/IsoDemo.tsx, shown at /docs#iso (/craft redirects to /docs) | the minimum recipe: one slab, two box chips and one hexagonal prism |
| docs film bridge | motion/films/blog-designing-docs/index.html; the cut is public/media/designing-docs-film.mp4 | flat to iso and back in one matrix; plates that lift apart and settle |
The toolchain stack (src/app/d/toolchain/diagrams/tc-stack-iso.tsx, route /d/toolchain) and the toolchain Locadex run (src/app/d/toolchain/locadex/LocadexIso.tsx, route /d/toolchain/locadex) are earlier glass siblings. Copy their glyph vocabulary (code lines, a prompt chevron, diff gutters, points of presence, the check) and leave their material.
project() or plane(). No hand-written skew, scale(1 0.5) or CSS 3D transform.ISO_RADIUS everywhere except diff slats, sign bars and arrowheads.--iso-accent set from the page accent.plane(), from the right asset for its size, and the Locadex mark sits on the Locadex slab.shineTravel, and a counter-sheen half a lap behind.GT skills in this set: gt-diagrams (the doubled-line connector and flat diagrams), gt-dither (the Bayer language and its engines), gt-motion (GSAP and scroll rules), gt-films (the HyperFrames films), gt-brand (marks, color, the accent) and gt-lints (the line auditor). General skills in Kevin's wiki that this one depends on: create-graphics, design-engineering-polish, hyperframes-animation, hyperframes-keyframes and agent-browser.
/d/singularity-dossier, as the completed reference) and section 9 (the direction line and the avoid list, including glassmorphism).src/app/d/toolchain/diagrams/iso.ts, IsoSolid.tsx, IsoFrame.tsx, iso.css, DitheredMark.tsx and tc-stack-iso.tsx.src/app/d/_v0/sections/Locadex.tsx, locadex.css, StackTower.tsx, FullStack.tsx and fullstack.css; the production copies in src/app/d/production/sections/.src/app/d/toolchain/enterprise/GovernedColumn.tsx, src/app/d/toolchain/locadex/LocadexIso.tsx, src/app/craft/IsoDemo.tsx, src/app/craft/craft.css and src/app/craft/libraries.ts (the kit entry shown on /docs).deck/slides/35-iso.html (the brand deck's iso slide) and docs/figma-v0-spec.md (Locadex is an isometric diagram, never a gif).motion/films/blog-designing-docs/index.html, the bridge block (round 7d).apps/landing/src/components/landing/shared/iso.ts, DitheredMark.tsx and DitheredLedgerMark.tsx; apps/landing/src/components/landing/sections/fullstack/StackTower.tsx; apps/landing/src/components/landing/sections/locadex/Locadex.tsx; apps/landing/src/components/pages/pricing/PricingStackDiagram.tsx and pricing-page.css; .agents/skills/gt-landing/references/design.md (the landing's code map).StackTower.tsx, FullStack.tsx and Locadex.tsx: tags lie on the layers, the scanner stays inside the slab, the shimmer crosses the whole mark, the warm-to-accent pulse read as flashing, the top plate full size, no words by the diagram, the figure never moves down.redesign-v0-verdict (2026-08-04), k-pages-restart-round (2026-08-11, the seated-mark technique) and gt-motion-films (the 2026-10-02 request and round 7d landing on 2026-10-03).The folder skills/gt-isometric as agents fetch it. Each file opens raw.
SKILL.mdreferences/recipes.md