In a mature design system like Moxio’s, every detail is carefully considered to create a seamless and accessible user experience. Even the smallest elements play a crucial role in enhancing usability without compromising aesthetics and accessibility.  

In this blog we take the subtle link as an example of how you can creatively challenge yourself as a product designer to create the best user experience within the constraints of a Design System.  

The case 
Our applications for information management, mostly used in the world of infrastructure, are built on ‘tables’. These tables contain a lot of hyperlinks, with different links for each cell. The links help the user to dive, layer for layer, deeper into the asset/data structure.  
You can imagine that these links can be quite overwhelming and too prominent when using a regular hyperlink with blue color and underline. It would easily undermine the hierarchy of the application: 

 
Regular hyperlinks in tables can easily undermine the hierarchy of an interface. 

We can consider a secondary link, but this would still be too prominent: 

 
A secondary link would still be too prominent.  

A subtle link would do the job in terms of hierarchy, but… they have no distinguishing element compared to regular text in their default state and there is no sign whatsoever (beside context) that the text is clickable at all. So subtle links as we know them would not be very accessible for our users either: 

 
Subtle links as we know them are not very accessible either. 

The challenge 
So the challenge is to design a subtle link, that can be thoughtfully integrated into our interfaces, maintaining visual hierarchy while remaining accessible to all users. How can we strike the right balance between aesthetics, functionality, and inclusivity? Let’s explore the nuances. 

Accessibility: The key to inclusive subtle links 
Subtle links can contribute to an elegant user experience, but it is essential not to overlook accessibility. People with visual impairments or color blindness may struggle to recognize regular subtle links. Let’s take the following into account:  

• Color contrast: Ensure that the link color has sufficient contrast with the background to guarantee readability according to WCAG guidelines. 

• Underlining: While subtle styling is desirable, an underline helps users to identify the link.  

• Focus states: For keyboard navigation, the focus indicator must be clearly visible, so users know exactly where they are. 

Consistency within the design system: why it matters 
A good design system requires consistency, and subtle links are no exception. By adopting a standardized approach, designers can provide a unified user experience. Consider the following: 

• Clear guidelines on when to use subtle links 

• Using the same styling for links in similar contexts to ensure recognition. 

• Regular audits of the design system to minimize inconsistencies. 

User behavior and psychology: what makes subtle links effective 
The human brain is trained to recognize patterns and anticipate interactions. If links are too subtle, users may easily overlook them. Some insights from UX research include: 

• Fitts’s Law: Users spend more time searching for actions when they are not clearly indicated. 

• Visual hierarchy: Ensure that subtle links do not compete with primary CTAs but still stand out sufficiently in their context. 

• Micro-interactions: Animations or slight color changes on hover can be a subtle yet clear indicator. 

Conclusion: Striking the balance between Form and Function 
While wrapping our head around all the above, we found out that the underline can be styled separate from the text color. This gave us the chance to style subtle links réally subtle and balance discoverability, hierarchy, and accessibility.

 
Accessible and still subtle links, within the visual hierarchy of other elements. 

In the meantime, we have implemented a subtle link where the underline is a lighter color / shade than the text itself. This ensures that links remain easily identifiable without overwhelming the surrounding content. By maintaining a clear visual distinction while respecting the overall design hierarchy, our solution offers a more user-friendly and accessible alternative to other existing approaches.  

By combining creativity with best practices, your design system will remain not only visually appealing but also functional and inclusive for everyone.