Building a headless design system
We spent two years building Shu Ha Ri - a flexible system that works across different platforms. The goal was to give designers and developers the freedom to work how they need to while keeping everything consistent.
Key attributes
Flexibility, efficiency, and consistency
Shu Ha Ri embodies principles of martial arts philosophy: learning, breaking conventions, and mastering innovation. This guides its efficiency in scaling projects and ensuring consistent user experience across frameworks. The design system prioritizes responsiveness, modularity, and component adaptability.
Follow the rules
In the Shu stage, designers follow established principles to master fundamentals, focusing on building a strong foundation.
Break the rules
In the Ha stage, designers, having mastered the system, start innovating and deviating intelligently to adapt to new contexts.
Transcend the rules
In the Ri stage, designers transcend the system, using their deep mastery to create new design paradigms and principles for unique situations.
Design process
Crafting a modular solution
The Shu Ha Ri design system was built using Figma to optimize Auto Layout, dark mode, and customizable components. This headless system allows freedom from rigid frameworks, empowering users to integrate it into any workflow - whether they are agencies, startups, or freelancers. The system was crafted through multiple stages of research, prototyping, and iteration over two years.
Shu Ha Ri is a robust design system built for Figma, offering essential features
It revolves around modularity, empowering designers to efficiently create diverse instances with a single master component. Leveraging Figma's capabilities, our components fully utilize properties and nested instances.
Built on Auto Layout 5.0, our components dynamically adjust, expand, and rearrange as content evolves
This functionality guarantees a consistently refined design experience across all devices and screen sizes, delivering strong user experiences.
Shu Ha Ri incorporates variables and tokens for colors, typography, and measurement
This integration simplifies the process of transitioning designs to dark mode and ensures effortless adaptation to varying screen sizes, enhancing overall flexibility and usability.
Visual identity
Functional and scalable
The system uses a neutral color palette, carefully designed for dark mode and adaptable across diverse brand aesthetics. Its typography, icons, and UI elements focus on legibility, scalability, and simplicity to enhance flexibility and usability.
Application
Built for seamless experiences
Shu Ha Ri is applied across various digital touchpoints - web, mobile, or enterprise-level applications. By offering a wide array of customizable and reusable components, the system empowers teams to quickly scale designs and maintain brand consistency across all digital products.
Vision and mission
Pioneering new design paradigms
Shu Ha Ri's mission is to empower teams by building the best possible tools for digital product design. It aims to pioneer design innovations by integrating user-friendly systems that evolve with time, helping designers "learn the rules, break the rules, and then create their own way."
Font family
Primary typeface
Our design system uses SF Pro Display and SF Pro Text as the default typefaces. These fonts are highly versatile and designed specifically for optimal readability on screens.
SF Pro Display is optimized for larger sizes, making it perfect for headlines and prominent text, while SF Pro Text is tailored for smaller sizes, ensuring readability in body copy.
Colours
Holistic approach to color strategy
Explore how Figma's color variables form the foundation of your design palette. Harness both primitive and semantic techniques for a comprehensive and intuitive color system.
The future of headless design systems
Shu Ha Ri demonstrates the power of modularity and scalability in the design space. It provides users with the tools they need to build dynamic, responsive experiences while fostering innovation and creativity without limitations.
Download Shu Ha RiDocumentation
Best practices, design principles, and detailed component usage
The documentation for our design system is a comprehensive resource designed to guide users in leveraging the full potential of Shu Ha Ri. This documentation empowers designers and developers by providing clear instructions and visual references, fostering creativity while maintaining coherence within the system. Whether you're a beginner or a seasoned professional, our documentation will support your journey in mastering design with Shu Ha Ri.