Tool Stack Grid
A four-group grid of tool tiles with two-letter mark badges covering Design, Development, Research, and Delivery tools used day to day.
A four-group grid of tool tiles with two-letter mark badges covering Design, Development, Research, and Delivery tools used day to day.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Tool Stack Grid shows the tools open on any given working day, arranged in four purpose groups: Design (Figma, Framer, Principle, Lottie), Development (React, TypeScript, Tailwind, Next.js), Research (Maze, Dovetail, Notion, Miro), and Delivery (Linear, GitHub, Vercel, Storybook). Each tool is a card with a two-letter mark badge and the tool name, no raster logos.
Groups and tools are two typed arrays. The two-letter mark is the distinctive choice: it gives each tile a visual anchor without importing brand assets that could drift or require licensing.
Reach for this block on an about page or a skills page to show the actual toolchain rather than abstract skills. The installer swaps the groups and tools for their own stack, keeping the lede honest: "not exhaustive, but representative."
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product designer and developer toolchain. Other configurations:
Tip: four tools per group keeps the grid even; add a fifth only if it is genuinely load-bearing to your practice.