StackNova / Paths / Design
PATH 04 · DESIGN

Design that ships.

Design is part of the shipping path now. This path covers the systems that keep a product visually coherent, the tools the work actually travels through, and the vocabulary that keeps designers, engineers, and managers talking about the same thing.

15 ARTICLES

Articles in this path.

From first principles to production: the vocabulary and fidelity ladder, the systems and tokens underneath, type and layout, color and accessibility, the handoff to engineering, and the craft carried over from print - brand, vector, and CMYK.

DESIGN · FOUNDATIONS / LEVEL 101

What is a design system?

Tokens, components, and patterns with the decisions baked in - the shared language that keeps a product consistent as the team grows.

Read it
DESIGN · TOOLS / LEVEL 101

What is Figma?

The browser-based design tool most product teams standardized on - multiplayer files, components, and why it became the default.

Read it
DESIGN · FUNDAMENTALS / LEVEL 101

UX vs UI

Two terms used interchangeably that name different work - the experience someone has, and the interface they have it through.

Read it
DESIGN · DESIGN PROCESS / LEVEL 101

Wireframe, mockup, prototype

Three fidelities of the same screen - structure, surface, then behavior - and which feedback each one can actually take.

Read it
DESIGN · DESIGN SYSTEMS / LEVEL 101

What are design tokens?

Named values for color, spacing, and type, stored once and referenced everywhere - the atoms a design system is built from.

Read it
DESIGN · ACCESSIBILITY / LEVEL 101

Color & accessibility in UI

Contrast ratios, WCAG, dark mode, and never relying on color alone - making a palette legible to everyone.

Read it
DESIGN · TYPOGRAPHY / LEVEL 101

Typography for interfaces

Type scale, line height, measure, and hierarchy - the craft behind text that is effortless to read and scan.

Read it
DESIGN · LAYOUT / LEVEL 101

Grids, spacing & layout

The spacing scale and grid that make an interface feel calm instead of arranged - alignment, rhythm, and breathing room.

Read it
DESIGN · HANDOFF / LEVEL 101

Design-to-development handoff

The moment a design becomes an engineer’s spec - what to include, where it breaks, and the tools that keep it lossless.

Read it
DESIGN · GRAPHICS / LEVEL 101

Vector vs raster

Math versus pixels - why Illustrator and Photoshop are different tools, and which format your logo and photos need.

Read it
DESIGN · GRAPHICS / LEVEL 101

Print vs screen

RGB versus CMYK, PPI versus DPI, bleed and safe margins - the rules that keep a design vivid on paper and on a display.

Read it
DESIGN · BRANDING / LEVEL 101

Brand identity systems

A logo is not a brand - it is one part of a system of color, type, imagery, and voice, held together by guidelines.

Read it
DESIGN · DESIGN SYSTEMS / LEVEL 201

Design systems for AI design tools

An AI design partner is exactly as on-brand as the system you hand it - the system as an input the tool executes.

Read it
DESIGN · DESIGN SYSTEMS / LEVEL 101

Design system examples

A gallery worth studying - four public systems at scale, and three downloadable system files: two teaching examples and Wise's real one as markdown.

Read it
DESIGN · DESIGN SYSTEMS / LEVEL 201

Set up your design system in Claude Design

The How-to: prepare your source material, upload it to your organization, review the system Claude generates, and publish it to your team.

Read it
EXTERNAL · CURATED

Resources for this path

Official docs, deep dives, and videos worth bookmarking - the canonical sources behind every article.