A comprehensive toolkit designed to elevate your design process and enhance your product’s user experience. Inspired by the Japanese martial arts concept of "Shu Ha Ri," our design system embodies the stages of learning and mastery, providing a structured yet flexible framework for designers at all levels. 𝗢𝘃𝗲𝗿𝘃𝗶𝗲𝘄 The Shu Ha Ri Design System is built to support your journey through three stages of design mastery: ↪️ Shu (Follow the Rules): Adhere to established design principles and guidelines to build a strong foundation. ↪️ Ha (Break the Rules): Innovate and experiment while maintaining a cohesive user experience. ↪️ Ri (Transcend the Rules): Achieve mastery and create new paradigms and approaches. 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗖𝗮𝘁𝗲𝗴𝗼𝗿𝗶𝗲𝘀 Our system is organized into 64 component categories, each meticulously crafted to ensure consistency, accessibility, and usability. Total Components: 3,472 Styles: 102 Variables: 207 𝗪𝗵𝗮𝘁 𝗬𝗼𝘂 𝗪𝗶𝗹𝗹 𝗙𝗶𝗻𝗱 𝗶𝗻 𝗘𝗮𝗰𝗵 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗖𝗮𝘁𝗲𝗴𝗼𝗿𝘆 For every component category, we provide a detailed overview, including: ↪️ Component Page: Each component's introductory page offers a comprehensive overview. Only in the full version ↪️ Description: A clear and concise explanation of the component’s purpose and functionality. ↪️ Anatomy: A breakdown of the component’s structure, highlighting its key elements. ↪️ Example of Use: Examples demonstrating where and how the component can be used effectively. ↪️ Guidelines of Usage: Best practices and guidelines to ensure optimal component use. ↪️ Variants: Display all component variations, showcasing different styles and states. ↪️ States: An exhaustive list of all possible states the component can exist in (e.g., active, disabled, focused). ↪️ Sizes: All available size options for the component, ensure flexibility and adaptability. ↪️ Full Instance Page: A comprehensive page showcasing all components' properties and states provides a holistic view.

Shu Ha Ri - Design System - V.1.0.0

Design with Mastery and Flexibility

Design with Mastery and Flexibility