What this is
The Design Path on StackNova covers the craft of turning an idea into a screen a team can ship: the shared language and tokens underneath, the visual craft of type, layout, and color, the vocabulary people misuse in reviews, the fidelity ladder from sketch to clickable, the tools, the handoff to engineering, the brand and graphics fundamentals carried over from print, and the AI layer now folded into the workflow. This article is the map across that library - every Design article, sorted by the layer it covers, with a short note on each.
It is not a tutorial and not an opinionated ranking. It is the page you bookmark, send to a teammate ramping up on design, or come back to when you are not sure which article to read next.
Pick a layer, read its article, follow the cross-links. The map is the index, the articles are the depth.- how to read this page
Language
The foundation layer: the shared system that keeps a product visually coherent as more people touch it, and the named values it is built from.
A design system is the shared language of a product - tokens, components, and patterns with the decisions baked in. Design tokens are the atoms underneath it: named values for color, spacing, and type, stored once and referenced everywhere.
- → What is a design system? LEVEL 101
- → What are design tokens? LEVEL 101
- → Design system examples LEVEL 101
Craft
The visual fundamentals every screen is made of - type, space, and color - and the accessibility rules that decide whether they actually work for everyone.
Most of an interface is text sitting in a layout, colored deliberately. The type scale and hierarchy, the spacing scale and grid, and contrast-checked color are the three crafts that make a screen read as considered.
- → Typography for interfaces LEVEL 101
- → Grids, spacing & layout LEVEL 101
- → Color & accessibility in UI LEVEL 101
Vocabulary
Before you can give useful feedback, you need words that name different work. This layer settles the distinction people swap around most in meetings.
UX and UI name genuinely different work - the experience someone has with a product, and the interface they have it through. Getting the distinction right is what makes design feedback land where it can actually be acted on.
- → UX vs UI LEVEL 101
Fidelity
The ladder from idea to something you can click. Each rung answers a different question and costs more to change than the one below it.
Wireframe, mockup, and prototype are three fidelities of the same screen: structure, then surface, then behavior. Knowing which is which tells you what feedback each one can take, and stops you polishing pixels before the flow is settled.
- → Wireframe, mockup, prototype LEVEL 101
Tools
Where the work actually happens. One tool became the default surface for most product design teams.
Figma is the browser-based design tool most product teams standardized on - multiplayer files, components, and prototyping in one place. It is where the wireframes, mockups, and prototypes on the layer above are built.
- → What is Figma? LEVEL 101
Handoff
The bridge between the design file and the codebase - where a finished design becomes an engineer's spec.
A good handoff is a complete, shared description of what to build: measurements as tokens, every state, responsive behavior, assets, and interactions. The design system is what makes it a lookup instead of a translation.
- → Design-to-development handoff LEVEL 101
Brand & graphics
The fundamentals carried over from print and identity work - how images are stored, how color behaves on paper versus glass, and the system that makes a brand recognizable everywhere.
A brand identity is a system, not a logo - and applying it across surfaces means knowing when an image should be vector or raster, and what changes between RGB screens and CMYK print.
- → Brand identity systems LEVEL 101
- → Vector vs raster LEVEL 101
- → Print vs screen LEVEL 101
The AI layer
The newest part of the workflow, and the one moving fastest. It lives in the AI Path but belongs on any honest map of how design work gets done in 2026.
Claude Design is Anthropic's surface for using AI as a design partner - where UX questions get answered with working prototypes instead of static frames. It is the clearest example of the fidelity ladder collapsing: prompt to something you can click, without a formal mockup step.
- → What is Claude Design? LEVEL 101 - lives in the AI Path
- → Design systems for AI design tools LEVEL 201
- → Set up your system in Claude Design LEVEL 201 - the How-to
Three reading orders
The map is sorted by layer, but most readers want a route. Three orders, depending on who you are.
You want a working mental model
You want to speak the language
You know print - now ship product UI
Every article in the map
Every article on this map, by layer, with a one-line reason to read.
| Layer | Article | Why read it |
|---|---|---|
| Language | What is a design system? 101 | Tokens, components, and patterns with the decisions baked in - the shared language of a product. |
| Language | What are design tokens? 101 | The atoms beneath the system - named values stored once, referenced everywhere. |
| Craft | Typography for interfaces 101 | Type scale, measure, and hierarchy - the craft behind text that is effortless to read. |
| Craft | Grids, spacing & layout 101 | The spacing scale and grid that make a screen feel calm instead of arranged. |
| Craft | Color & accessibility in UI 101 | Contrast, WCAG, dark mode, and never relying on color alone. |
| Vocabulary | UX vs UI 101 | The distinction everyone uses and few define - the experience, and the interface it travels through. |
| Fidelity | Wireframe, mockup, prototype 101 | Three fidelities of the same screen, and which feedback each one can actually take. |
| Tools | What is Figma? 101 | The browser-based tool most product teams design in - and why it became the default. |
| Handoff | Design-to-development handoff 101 | What a complete handoff includes, where it breaks, and the tools that keep it lossless. |
| Brand | Brand identity systems 101 | A logo is not a brand - the full system of color, type, imagery, and voice, plus guidelines. |
| Graphics | Vector vs raster 101 | Math versus pixels - why Illustrator and Photoshop are different tools. |
| Graphics | Print vs screen 101 | RGB vs CMYK, PPI vs DPI, bleed - what changes between glass and paper. |
| AI | What is Claude Design? 101 | AI as a design partner - where UX questions get answered with working prototypes. Lives in the AI Path. |
| AI | Design systems for AI design tools 201 | The system as an input the tool executes - what that changes for the designer. |
| AI | Set up your system in Claude Design 201 | The How-to: one canonical document, hard rules, bind it, work the loop. |