Redesign Initiative at Tuist

Background:

Tuist has been a leading product within Apple’s app ecosystem. While the CLI has served as the core foundation of Tuist, we are investing more and more in extending its capabilities on a server, including a dashboard. As part of this initiative, I will be focusing on creating a design system that will serve as the backbone for the dashboard and for all future design work.

Plan:

To kick off this redesign initiative, my general plan for creating the design system is as follows:

Research and Inspiration:

  • Analyze industry-leading design systems like Polaris (Shopify), Carbon (IBM), and Material Design (Google) to draw inspiration for components, layouts, and interaction patterns.
  • Review Tuist’s existing UI and CLI elements to maintain brand consistency and ease of use.

Define Style Guide:

  • Establish core elements: typography, color palette, spacing, and grid system.
  • Define design tokens for use across components (e.g., text sizes, padding, margin, shadow).
  • Ensure accessibility standards, including color contrast, font sizing, and screen reader compatibility.

Component Library:

  • Create reusable components like buttons, form inputs, modals, navigation bars, and tooltips.
  • Define the state for each component (default, hover, focus, disabled, error).
  • Ensure components are flexible to accommodate different types of user interactions and tasks within the dashboard.

Next Steps:

  • Finalize the style guide and component designs.

Once the design system is ready, we’ll be open-sourcing everything. I’d love to hear your thoughts—feel free to share any suggestions or comments about what you’d like to see in the new dashboard!

3 Likes

I couldn’t be more excited about this. Since the early days, we’ve placed a strong emphasis on code craftsmanship. However, despite our best efforts, our design was never on par with our code. We often relied on purchasing themes or using free options, then adapting them to fit Tuist. As a result, we never had a unique identity.

This work will change that. For the first time, we’ll have a set of design primitives that not only ensure visual consistency but also allow us to iterate faster when building new features. I can’t wait to see how this evolves! :rocket:

3 Likes

Update on Tuist Redesign Initiative

  • Style Guide Completion:
    The style guide is finalized, establishing the foundation of our design system. We’ve chosen the OKLCH color space for our palette due to its superior accessibility, flexibility in color adjustments, and extensive color range. Unlike traditional color spaces, OKLCH aligns more closely with human perception, making it ideal for creating a visually balanced and accessible interface. For more in-depth information, check out this blog post.

  • Icon System Selection:
    We’ve opted to use Tabler Icons as the basis of our icon system. Tabler offers a broad selection of icons and flexibility that aligns well with our design needs. As an open-source library, it supports our commitment to community-driven design and makes it easy to scale our icon usage across various products.

Next Steps:
Moving forward, the next phase will be to create the core components using the style guide as our reference.

1 Like