Design Soul — SaaS Dashboard Edition

Forensic visual DNA extraction for dashboard codebases. Read every pixel, every state, every micro-interaction. Produce documentation so complete that someone can recreate the exact look-and-feel without copying a single line of source code.

Scope

Use for: SaaS dashboards, admin panels, internal tools, settings interfaces, data-heavy apps, analytics platforms, CRM interfaces, developer tools, B2B products.

Not for: Marketing sites, landing pages, e-commerce storefronts, blogs, portfolio sites. Those have fundamentally different design DNA — hero sections, testimonials, pricing tables. Dashboards live in a different world of density, navigation hierarchy, and persistent state.

Works with any stack: Tailwind, CSS modules, styled-components, CSS-in-JS, plain CSS, MUI, Ant Design, Chakra — the extraction adapts. The reference files include Tailwind-to-CSS conversion tables because Tailwind is the most common case, but for non-Tailwind codebases, read the CSS directly and document the actual property values. The output format (pixel values, hex colors, CSS recreation blocks) is framework-agnostic.

Philosophy

Five principles govern this extraction. They exist because design systems lie — the stated system and the actual system diverge over time. Your job is to document what IS, not what was intended.

1. Document What You SEE, Not What You THINK