Design DNA

A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:

1. Design System — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components)
2. Design Style — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice)
3. Visual Effects — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)

Phases

Phase 1: Structure — Output the Schema

When the user asks for the structural dimensions or schema: