I set out to design an AI product and discovered that I wanted more AI-specific and multi-modality components and patterns from an out-of-the-box design system.
Scalable, framework-agnostic
Accessible, flexible structure
Support rapid prototyping
Clear documentation built in
Independent project with feedback from potential users
This project’s still in progress and not quite at version 1.0..The foundation, including typography is built and I’m excited to share the journey from the very beginning. I’d love to hear your thoughts or what's on your wish list for a system like this along the way.
The system includes a flexible and scalable color foundation, starting with one primary brand color and three thoughtfully selected accent colors. These base colors serve as the backbone for semantic variables used throughout the system, like backgrounds, surfaces, and states.
Because the semantic variables are decoupled from specific (hard coded) hex values, teams can easily adapt the system to match their own brand or product identity by simply updating the base color tokens.
This modular approach ensures faster customization without needing to manually adjust every component.
These are organized by purpose rather than appearance, again giving the user flexibility to adapt to their needs without breaking anything. Categories are all mapped to base colors and adjust automatically in light or dark mode.
I've also included spacing variables. Core spacing tokens like padding, gaps, and layout sizes are pre-defined with good visual design in mind, but adopters of the system can tweak the values and make the system their own or have flexibility across different products or brands.
For typography, I defined a set of base font tokens using Inter for its clean readability and flexibility across interfaces. These tokens cover a range of sizes and line heights that can be referenced throughout the system for consistent styling. I also included IBM Plex Mono as a secondary font specifically for displaying code, system outputs, and AI-generated content. Its monospaced structure provides clarity and distinction in technical or structured contexts, making it a practical choice for tools that involve prompts, responses, or command-line interactions.
For iconography, I curated a condensed set of Material icons to keep the system lightweight and allow for adding more later. Rather than overwhelming users with every possible icon, I focused on the essentials and created component variants for icons that have multiple states or meanings. Concepts like delete, lock, and calendar can be easily swapped between options without digging through the asset panel.
I also included a small set of open-source AI-related icons to support use cases like chatbots, automation, and machine learning, giving the system a more domain-specific edge.
Having worked with a lot of data tables in Figma, I designed this one to eliminate as many common pain points as possible. I included a column layout template, a row layout template and a single column template. The row layout lets designers more easily prototype full interaction states across rows and cells, and a single column template for example can speed up the workflow in many situations.
One of the key principles I’m focusing on for components and patterns in this system is simplicity. I’m designing them to be easy to find in the assets panel, and without an overwhelming stack of variants. This is especially important for a stock design system, where adopters may need to add their own variants later.
This page will be updated as I go along, and Synapse® will be launched with its own website by June 2025.
B Blakesley ©2025
