Design Multiplay
Design Multiplay is a playful, collaborative design system inspired by the creative tools industry. It celebrates multi-color expression through a five-color gradient system of red, orange, violet, blue, and green — each representing a facet of the design process. The aesthetic is clean and tool-oriented, balancing the precision needed for professional work with the joy of creative collaboration. Cursor-colored multiplayer presence and vibrant accents make the workspace feel alive.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxComponents
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Components
Lists
Layer list uses 32px row height, 16px indent per nesting level, component icon (4 diamonds for components, frame icon for frames), name at 12px. Selected layer has #E8F0FE blue highlight. Multi-select shows continuous blue highlight. Drag reordering with blue insertion line indicator. Collapsible groups show triangle chevron.
Checkboxes
Custom 14px square, 3px border-radius, 1px solid #8C8C8C border unchecked. Checked fills #0C8CE9 with white checkmark. Small scale matches the compact panel UI. Toggle switches for boolean properties: 28px wide, 16px tall, #CCCCCC track unchecked, #0ACF83 checked.
Tooltips
#333333 background, white text, 4px border-radius, padding 4px 8px, font-size 11px, max-width 200px. Arrow 4px. Delay 300ms. Include keyboard shortcuts displayed as separate `kbd` elements with #555555 background. Used on every toolbar icon.
Navigation
Top bar 48px height, #2C2C2C dark background (design tool mode) or white (community mode). Logo left, file name center (editable inline), share/play buttons right. Left panel (layers/assets) is 240px, white, with tab switching. Right panel (properties/prototype) is 240px, white. Bottom bar shows zoom level, view options. Community uses standard white nav with horizontal links.
Search
In-canvas search (Cmd+F) is a floating bar, 320px wide, anchored top-center, 36px height, white background, 8px border-radius with shadow. Asset search in left panel is 28px, full-width within panel, #F5F5F5 background. Community search is a standard 40px input. Quick actions (Cmd+/) opens a command palette similar to Block Canvas's Cmd+K.
Elevation & Depth
Flat design — depth is conveyed through surface color variation, not shadows.
Elevation is used functionally to separate tool panels from the infinite canvas. The canvas itself is the lowest layer. Side panels (layers, properties) sit flush with no shadow, separated by 1px #E0E0E0 border. Floating panels (color picker, font selector) use `box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15)` with 8px border-radius. Dropdown menus use `box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.15)`. Context menus use the same shadow. Modal dialogs use `box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2)` with backdrop rgba(0, 0, 0, 0.3). Cursor nametags float with a slight `filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))`.
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here