Stripe Color System
In my project, I’ve focused on designing a user interface with a carefully selected color palette to enhance both aesthetics and accessibility. The primary color is used for key interactive elements such as buttons and links, ensuring they are prominent and easy to identify. Secondary colors are employed to complement and highlight the main colors, adding visual interest and variety. Tertiary colors provide neutral accents for backgrounds and borders, while system colors are designated for alerts and notifications to effectively communicate different types of messages. By adhering to color contrast guidelines and applying these colors thoughtfully, I aim to create a clear, accessible, and engaging user experience.
Reviews
5 reviews
Great work you did here!
I would like to see more examples of user interface designs with those colors!
Hello Nurida! Your color choices are lovely, and I’d love to see more examples of how they come to life within the UI. Including your design thinking process could add even more depth to your presentation.
You’re on the right track—keep up the great work!
Your Stripe Color System project is looking great, but I’ve noticed a few areas where things might be improved! 😊
You’ve done a fantastic job using Primary Blue (#6772E5) for interactive elements and relying on base colours like Light Gray and Dark Gray for a clean backdrop. However, the Accent Purple and secondary colours seem a bit underused, making them look redundant since they aren’t showing up in the UI examples.
For the Accent Purple (#6E56CF) and secondary colours—Accent Green (#24B47E) and Accent Red (#FF6B6B)—it seems like their roles aren’t very clear since they aren’t applied in the UI. Plus, they’re quite close in colour to the system colours for success (Success Green) and error (Error Red), which can create some confusion. The similarity might make their purpose a bit redundant.
Accent Green was intended to represent growth and reliability, but it might blend in with Success Green, potentially making it less impactful. Similarly, Accent Red overlaps with Error Red, which could dilute the effectiveness of your error messaging.
Additionally, in my opinion, the use of full 100% white and black might be a bit harsh. I would suggest trying a really light grey (almost white but not quite) and a really dark grey (almost black but not as harsh). This subtle adjustment could give the design a softer and more refined look.
To make things clearer, it might help to define specific roles for these Accent Purple and secondary colours and show how they could be integrated into the design. This will help in demonstrating their usefulness and ensuring they stand out in a way that complements the primary and system colours.
The project has a strong foundation, and with a few tweaks to how the colours are used, it could be even more effective and visually engaging. Keep up the great work! 🌟
Great work! Pleasant colors and mindful choice. I'm guided by your work
Hi Nurida! Good exploration and descriptions on colours, however I missed to see more examples of a separate components, which supposed to be used with the colour and the interface in general. Depending on the purpose of the presentation, you can absolutely add your design thinking process and how did you come up with the colour palette.
One small detail that makes the experience confusing is the main page with the gradient, which isn't used further.
Otherwise, beautiful colours!
/Yuliia
You might also like

Sneak

Heuristic Evaluation - Booking.com

User persona for TikTok

Empathy Map - Revolut
![UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]](https://users-content.uxcel.com/451aa544-1b86-419f-9120-5a6ac83f023f/briefs/universaltaxprofessionals-website-revamp-informational-website-thubmnail-8090-1756604786988.jpeg)
UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]
