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.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
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.