Shu Ha Ri Design System - A Transparent Change Log

Discover the chronological record of all notable changes made to the Shu Ha Ri Design System. Stay informed on the evolution of this transformative tool.

Shu Ha Ri Design System - Version 1.0.3

Published

09/13/2024

Component improvements: 

Checkbox Size Header
Updated font size to 16px to match the height of other elements.

Radio Button Size Header
Increased font size to 16px for consistency across elements.

Toggle Size Header
Adjusted font size to 16px to align with the height of other UI components.

Calendar Responsiveness
The calendar component is now fully responsive, ensuring optimal display across all screen sizes.

Button Icon Size Fix
Resolved an issue where hidden icons caused buttons to shrink. Typography size is now consistent, preserving the button’s height when icons are hidden.

Shu Ha Ri Design System - Version 1.0.2

Published

08/01/2024

Icons improvements: We’ve completely reworked our icon set! Now, each icon has improved tags for easier searching and five size variants (16, 20, 24, 28, and 32px). We’ve also cleaned up some components, added nested icon swap instances, and fixed missing links to color tokens. Enjoy a smoother, more efficient design experience!

Component improvements: We’ve also added new components for checkboxes, radio buttons, and toggles, all available as cards.

Shu Ha Ri Design System - Version 1.0.1

Published

07/11/2024

Enhanced Component Flexibility: We’ve removed the overlay option from select components due to Figma’s current lack of support for gradients as variables.

Introducing Dark Theme: We’ve expanded our design system to include a comprehensive Dark Theme, offering a new layer of sophistication and usability.

Color Variable Adjustments: We’ve refined several color variables to ensure seamless alignment with our new Dark Theme, enhancing visual consistency across the board.

Shu Ha Ri Design System - Version 1.0.0

Published

06/21/2024

Welcome to the inaugural release of the Shu Ha Ri Design System, 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.
Overview
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.
Component Categories
Our system is organized into 64 component categories, each meticulously crafted to ensure consistency, accessibility, and usability.
  • Components and Variants: +7000
  • Styles: 100
  • Variables: 223
What You Will Find in Each Component Category
For every component category, we provide a detailed overview, including:
  • Component Page: An introductory page for each component, offering a comprehensive overview.
  • 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: Practical examples demonstrating how the component can be used effectively.
  • Guidelines of Usage: Best practices and guidelines to ensure optimal use of the component.
  • Variants: Display of all variations of the component, 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, ensuring flexibility and adaptability.
  • Full Instance Page: A comprehensive page showcasing all properties and states of the component, providing a holistic view.
Key Highlights of Version 1.0.0
  • Comprehensive Documentation: Each component is accompanied by detailed documentation to help you understand its use and customization options.
  • Consistency and Cohesion: Our design system ensures a unified look and feel across all components, promoting a cohesive user experience.
  • Scalability: With 3,472 components and extensive customization options, the Shu Ha Ri Design System is scalable to meet the needs of any project, big or small.
  • Flexibility: Designed to support your journey from following rules to transcending them, the system encourages creativity and innovation while maintaining a strong foundation in design principles.
We are excited to see how you will utilize the Shu Ha Ri Design System to create exceptional user experiences. Stay tuned for future updates as we continue to evolve and expand our offerings.

Elevate your design experience

Transform your projects with the full power of the Shu Ha Ri Design System. Gain unlimited access to all our components, styles, and features. Invest in the premium version today and take your designs to the next level!