Tetrisly Design System

Hi all,

We’re excited to introduce a brand-new Tetrisly Design System! It’s coming along with Figma, React components, and usage docs.

We carefully crafted UI components, leveraging the idea of design tokens. Now you can easily customize and start designing right away to deliver faster.

Preview in Figma

✨ What does make the new Tetrisly unique?

👀 Focus on product delivery Don't waste time reinventing components and looking for the most suitable library structure. Save money and resources by replacing this process with a tool that does it all. Focus on product improvements, design right away and ship faster.

💎 No more junk components The usefulness of a design library shouldn't be measured by the number of components or variants it has. Get rid of junk inside your library. Ensure it only has carefully selected and customizable components without UX mistakes.

📅 Documentation and React components are in progress The Tetrisly team is continuing to work on usage documentation and React components. These deliverables will help our users deliver their products faster and ensure quality, usability and unified experiences for their users.

🌈 Contrast-based and intuitive color system The whole range of colors is scalable and consistent, all of them shining in the same way. Each color is prepared based on WCAG standards. Our unique naming system allows you to add new shades easily. The color system is designed within the HSL color space.

💠 Tetrisly Icon Library A clean, consistent, and pixel-perfect icon set (20x20, 1.5px) crafted specifically for modern UI design.

🔋 Super-charged by 400+ designers and engineers Tetrisly is part of VirtusLab — a global software engineering company. That’s why we have cutting-edge technologies written in our DNA. Our expertise focuses on UI/UX Design and Design Systems. We aim to bring a human face and common understanding to your product before it’s coded.

🎨 Well-crafted Figma Tetrisly is constantly updated with the newest Figma features like auto-layout, properties, nested instances and more.

⚙️ Color and typography tokens to ensure consistency and customization Each component is prepared based on color or typography tokens. Color or Typography Token is a semantic representation of the color that helps understand how or when the token should be used. It helps to limit design decisions and place them in specific contexts.

⛰️ It’s just the beginning The version of Tetrisly you are seeing now is just the beginning of our journey on the roadmap. We have a lot of milestones and goals to reach ahead of us. Our backlog is full of new ideas and features that will change the game. We want to transform the way you create and deliver products every day.

✨ Find out more: new.tetrisly.com