What if design systems were built to truly connect design and development from day one?

Rectangle’s is a design system focused on creating a scalable, consistent, and production-ready foundation for digital products. Instead of treating design and front-end as separate layers, this system is structured to keep both fully aligned.

It includes core foundations such as color, typography, spacing, and semantic tokens, all defined to support real-world implementation. The goal is not just visual consistency, but a system that can scale across products, teams, and use cases.

The system was built starting from foundations — defining global and semantic variables for color, typography, and spacing directly in Figma.

These tokens are structured to be easily mapped to front-end environments, enabling a consistent design language across both design and code. Responsive values and semantic layers were introduced to ensure flexibility while maintaining clarity.

Components are designed on top of this foundation, following a consistent logic that allows them to scale and adapt without breaking the system.

The project is organized into multiple files, separating foundations, components, and explorations, creating a modular and maintainable structure.

Design systems shouldn’t just look consistent — they should behave consistently across design and code.