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!
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!
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.
I’ve started building components based on the design system I created earlier. Each component is carefully crafted with attention to detail. and it’s really coming together—I’m proud of the progress! Here are a few components I’ve worked on so far:
In case you missed it, we’re supporting both light and dark modes for the dashboard!
Next Steps:
I’ll continue building the components needed for the dashboard. Once the initial set is complete, we’ll move on to redesigning the dashboard’s UX and UI.
I’ve been working on this for over 1.5 months, creating the components needed for the dashboard. I’m really happy with how the design system is shaping up. I’ve paid close attention to the details of every component and went with a skeuomorphic design style because I feel that making it too simple can feel boring. This gives the Tuist dashboard its own unique look and character.
Next steps:
Just a few components are left to finish. Once they’re done, I’ll start converting them into web components and work on structuring our dashboard layout.
The Noora Design System is officially complete! Every component has been meticulously crafted with great attention to detail. Each one is fully documented and includes examples for implementation. We’re now ready to start brainstorming ideas for the new dashboard design.
