What should a strong visual design system include?

A strong visual design system should include: a color palette with defined primary, secondary, and neutral tokens plus their semantic variants (success, warning, error states); a typography scale with defined sizes, weights, line heights, and usage rules for headings, body, captions, and UI labels; a spacing system based on a consistent base unit (commonly 4px or 8px) that governs padding and margin across all components.

Additionally, it should include: an icon library with consistent stroke weight and optical sizing; a grid system defining column counts and gutter widths at each breakpoint; a component library covering buttons, forms, navigation, cards, and modals in all their states (default, hover, active, disabled, error); and motion guidelines for animation timing and easing. All of this should be documented in Figma and, ideally, mirrored in a coded component library for developer implementation.