The Syndio design team created a new design system when we designed the second product in the platform, then gradually retrofitted the existing product to fit the new system as time and focus allowed. Because Syndio\u2019s product UI was primarily data visualization and decision making oriented, we wanted a super minimal presence for our design elements so that content could be the focus. We built out a drag and drop library in Figma including all icons, form elements, color and type specifications, template features, template spacing, etc. We worked across siloed dev teams to build storybook specifications, including custom components to meet specific needs, evaluated frontend frameworks for capabilities, and managed transition to Mantine, Tanstack and others. Accessibility was core to everything. We also extended documentation by writing a library of detailed template specs to provide engineer guidance on composing screens using components to drive consistency and reduce review cycles.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Invisible design The Syndio design team created a new design system when we designed the second product in the platform, then gradually retrofitted the existing product to fit the new system as time and focus allowed. Because Syndio\u2019s product UI was primarily data visualization and decision making oriented, we wanted a super minimal presence for … <\/p>\n![\"\"](\"https:\/\/abellenz.com\/wp-content\/uploads\/2025\/09\/design-system-2x-1-1414x2048.png\")
<\/figure>\n\n\n\n