Hire a designer

Core Principles and Design Goals

At the core of Salt are key principles that shape how it’s developed and used. The design system strives to provide a unified experience across all digital products while still giving individual teams the flexibility to tailor components to their specific needs. Striking this balance is important because different projects may call for their own unique approaches, but having a consistent foundation helps users navigate various applications with ease.

The design goals for Salt focus on encouraging collaboration among designers, developers and product managers. By creating a common language and shared understanding, Salt helps eliminate the silos that often form in larger organizations. With an emphasis on community involvement, users are invited to suggest improvements and play a role in the system’s development. This collaboration leads to better quality results and a stronger design framework.

React.js as the Foundation for Salt Components

React.js serves as the backbone of the Salt Design System, offering a modern framework that supports the creation of dynamic and responsive user interfaces. This choice of technology aligns perfectly with the needs of contemporary web development, allowing for the rapid iteration and deployment of components. React’s component-based architecture means that each element of Salt can be reused and adapted, which is essential for maintaining consistency while meeting diverse user needs.

Using React gives developers access to a vast ecosystem of tools and libraries that can enhance Salt's functionality. By adopting this technology, JP Morgan can keep Salt relevant and responsive to future developments in web design. The system is designed to evolve, staying ahead of changes in design trends and user expectations, which is essential for any effective design system.

Managing Design via Figma for Consistency

Figma plays a pivotal role in how the Salt Design System is managed and utilized. This powerful design tool facilitates collaboration among cross-functional teams, enabling designers and developers to work together seamlessly. With Figma, teams can create, share and iterate on design components in real-time, ensuring that everyone is on the same page and that the visual language remains consistent across different projects.

By incorporating Figma into the workflow, JP Morgan enhances the ability to maintain high standards of design quality. It also encourages feedback and input from various stakeholders, which is invaluable for continuous improvement. The integration of Figma with Salt allows for easy updates to components and styles, making it simpler for teams to adapt and innovate without losing sight of the core principles that the design system is built upon.

Installing Salt Packages and Dependencies

To begin, you’ll need to install Salt's core packages using npm or yarn. The primary package, @salt-ds/core, includes stable components that are essential for building your UI. If you're feeling adventurous and want to experiment with newer features, you can also check out @salt-ds/lab, which contains unstable components still in development. Make sure you also include @salt-ds/theme for CSS styling and @salt-ds/icons for SVG icons.

After you've installed these packages, it's wise to look for any extra dependencies that your project might need. The Salt documentation is really useful for this, as it walks you through the setup process and makes sure you're prepared to start your development work.

Importing Components and Styles

With your packages installed, the next step is importing the components and styles into your application. This part is pretty straightforward; you just need to import the CSS files and components at the beginning of your main application file. For example, you can import the core styles with a simple line of code.

As you start weaving Salt components into your project, you'll notice how they enable you to maintain a consistent look and feel while also providing the flexibility to customize them as needed. Salt’s design tokens drive the styling, allowing you to apply changes easily and keep everything aligned with your brand guidelines. This means you can focus on building rather than getting bogged down in style decisions.

Ensuring Accessibility Compliance with WCAG 2.1

One of the most impressive aspects of Salt is its dedication to accessibility. It meets the WCAG 2.1 standards, which means that everyone, including those with disabilities, can use your applications. This focus on inclusivity is really important in our current online environment.

To make sure your project meets these accessibility standards, pay attention to the components you choose and how you implement them. Salt components are designed with accessibility in mind, but it's always a good practice to test your application with various screen readers and across different browsers. The documentation provides guidelines on how to achieve this, making it easier to create an inclusive user experience.

Incorporating Salt into your projects can really enhance your development efficiency and boost the overall quality and accessibility of your applications. Start exploring the possibilities and enjoy the process of building with Salt!

Leveraging Theming and Design Tokens

Theming is one of the most exciting features of Salt. It allows you to create a set of visual styles that can be applied across your components, making everything feel cohesive. Design tokens are essential to this process, as they provide the basic values for elements like colors, typography, spacing and more. By utilizing design tokens, you can easily make changes throughout the entire design system. For example, if you want to update your brand color, you only need to do it in one spot and it will automatically update everywhere that color is used. This not only saves you time but also helps maintain a consistent design that aligns with your brand's identity.

What’s even better is that theming can be as simple or as complex as you need it to be. Whether you’re looking to make minor tweaks or overhaul your entire visual approach, Salt provides the flexibility to do just that, making it easier for teams to adapt to changing needs or preferences without missing a beat.

Building Custom Components with Salt

Sometimes, the pre-built components in Salt might not quite fit the bill and that’s perfectly okay. Salt is designed with extensibility in mind, allowing teams to build custom components that cater specifically to their requirements. You can take advantage of the core principles of Salt while crafting something entirely new that aligns with your project’s goals.

Creating custom components involves understanding both the design and functionality aspects of your project. With Salt’s guidelines and best practices, you can develop components that not only look great but are also user-friendly and accessible. This process encourages innovation and experimentation, enabling you to push the boundaries of what’s possible while still maintaining a connection to the established design system.

Balancing Core Components and Domain-Specific Extensions

As you dive deeper into customizing Salt, it’s essential to strike a balance between using the core components and developing domain-specific extensions. Core components provide a solid foundation, ensuring that all teams have a consistent starting point. However, there will always be instances where specific needs arise that require tailored solutions.

The key is to maintain a strong connection to the Salt framework while empowering teams to innovate. By using the core components as a base, teams can create extensions that offer the flexibility needed for their unique use cases without straying too far from the established design language. This balance promotes collaboration and ensures that every extension enhances the overall system rather than complicates it.

In the end, customizing and extending the Salt Design System is all about empowering teams to create meaningful, user-centered designs without sacrificing consistency or quality. With the right approach, your project can thrive while still feeling like a part of the larger Salt ecosystem.

Fostering Enthusiastic Adoption and Community Engagement

Creating a sense of community around the Salt Design System is one way to drive enthusiastic adoption. When team members feel they are part of something bigger and can contribute to the design system's evolution, they are more likely to embrace it. Regular workshops, like the upcoming "Inspect & Reflect" event, become vital spaces where practitioners can connect, share insights and learn from one another. These interactions can help demystify the system and make it feel less like a rigid set of rules and more like a living, evolving resource.

It's also important to provide platforms for feedback. This involves paying attention to how teams are using the system and identifying any challenges they face. By welcoming suggestions and making changes based on genuine user experiences, the Salt Design System can grow in ways that truly address its users' needs. Engaging with the community in this way builds trust, making adoption feel less like a requirement and more like a collaborative effort to create a better product.

Managing Fragmentation and Intentional Variations

Fragmentation can easily become an issue in any design system, especially in diverse teams where different projects might have unique requirements. However, the Salt Design System encourages what we like to call "intentional variations." This means allowing teams the flexibility to adapt components to fit their specific needs while still adhering to core guidelines. It's a balancing act too much variation can lead to inconsistency, while too little might stifle creativity and responsiveness.

To manage this effectively, it's essential to index these variations. Keeping track of which adaptations are purposeful and which might have arisen accidentally helps maintain the integrity of the design system. This awareness allows teams to understand the rationale behind certain modifications and fosters a culture of collaboration, where sharing best practices and components becomes the norm rather than the exception.

Using Figma and Collaborative Tools for Alignment

Figma plays a pivotal role in ensuring alignment across teams using the Salt Design System. It serves as a common platform where designers and developers can come together to connect their ideas and work collaboratively. By utilizing Figma's capabilities, teams can actively participate in the design process, ensuring that everyone is on the same page. This not only streamlines communication but also enhances the way teams collaborate.

Figma's design system makes it easy for teams to access components and guidelines, allowing them to seamlessly integrate these elements into their projects. The platform also offers collaborative features that enable real-time feedback and discussions, which help clarify design choices and align objectives across different teams. Since everyone has access to the same tools and resources, it creates a sense of unity that leads to a more cohesive product and a smoother workflow.

Design System Agility Beyond React.js

The agility of the Salt Design System isn't solely tied to its foundation in React. It extends to its architecture and the philosophies guiding its development. By promoting a modular approach, Salt allows for components to be created, updated or replaced without affecting the overall system negatively. This modularity means that as new design trends or user interface paradigms emerge, components can evolve seamlessly.

The design system also promotes teamwork among different groups. With a common language and a clear understanding of how to use the system, designers and developers can collaborate more effectively. When everyone agrees on best practices and standards, it creates a space where innovation can flourish. This teamwork plays an important role in helping the design system quickly adapt to new needs while keeping the brand identity consistent.

Exploring AI's Role in Design System Development

Artificial Intelligence is making waves across various industries and design systems are no exception. The potential for AI to streamline processes, enhance user experiences and provide data-driven insights is immense. In the context of Salt, integrating AI could mean smarter component recommendations based on user behavior or predictive analytics that help shape future iterations of the design system.

Still, integrating AI comes with its own set of challenges. While current models can produce some impressive results, they sometimes give information that isn't completely accurate. This inconsistency can shake people's trust in the system. That's why it's important for designers and developers to grasp not just what AI can do, but also where it might fall short. Training AI systems with knowledge specific to a particular field is key to making sure they deliver relevant and accurate support.

The aim is to develop a design system that grows alongside technology without losing its core integrity. This involves finding the right balance: allowing teams to harness the power of AI while also implementing strong governance and quality control. By achieving this balance, Salt can not only keep up with technological advancements but also set the standard for innovative design practices.