Blend simplifies collaboration by offering a single source of truth for UI
— from Figma to production-ready code.
Tokenizer
Components
Documentation
Playground
Changelog
Tokenizer
The Tokeniser lets you apply your brand’s styles—like colors, fonts, and spacing—
across our app effortlessly.
Components
Accelerating design-to-dev handoff with robust,
token-driven components.
documentation
Foundation
The foundations of the Blend Design System define core primitives like color, typography, spacing, borders, and shadows. These tokens act as the visual DNA, ensuring consistency, scalability, and easy theming across all components.
Theme Provider
The Blend Design System uses a two-tier token architecture with a ThemeProvider to ensure scalable, consistent, and semantic theming. Foundation tokens define primitives, while component tokens map them to UI parts for responsive, customizable, and type-safe styling.
Blend MCP Server
The Blend MCP Server connects AI assistants with the Blend design system to generate React components, scaffold UI patterns, and access live documentation. It accelerates UI development while ensuring consistency, standardization, and AI-assisted learning.
playground
Interactive space to test and tweak component props in real-time.