Jesse James Arnold’s Post

View profile for Jesse James Arnold, graphic

Director of Design at Exygy

🎨 Color is hard. As our team leverages variables to apply themes across a design system, things break. Maintaining accessible color contrast across multiple components with various states is a beast of task. - Brand colors can vary from light to dark affecting foreground contrast. - State changes across various components require independent contrast checks for foreground text. - Yellow. (Do I need to say more? Whether its a brand or system color, yellow and orange demand special attention) 🌈 Color for brand designers working with product teams by Katie Cooper I dig everything Katie Cooper writes about color for design systems. The approach outlined offers a great perspective on how to evaluate brand color viability. It includes considerations for secondary colors and color ramps as you develop proper contrast ratios. https://lnkd.in/gna4CGCV 💛 The dark yellow problem by Lodestar Design via UX Collective I know a lot of folks have touched on this, but I like how succinctly this writeup spells out the problems when designing with yellow while trying to maintain some form or brand consistency. Mustard anyone? https://lnkd.in/gsA4FZgQ 👏 Color in design systems by Nathan Curtis A classic write up on color in design systems and considerations for theming. Big takeaways for our team included limiting how themes cascade through various components like links and buttons, as well as ensuring any “changes” to brand colors to meet the needs of the UI get approval first. If you haven’t read everything by Nathan on Medium on design systems you’re missing out! https://lnkd.in/gYXVCY2e ✨ So grateful for all the resources out there and hope some of this can be useful to your team. From our research, the team has established a few best practices: - Start by auditing color contrast options across all brand colors through color ramps and component states - Ensure a consistent lightness ramp across all steps of each color in the palette to help with predictable contrast - Pay special attention to your yellows to balance brand consistency with accessibility - Limit how brand colors cascade into critical elements such as forms, buttons and links to ensure usability - Continue to use plugins and manual review to check color contrast ratios across the system, components and patterns as you go #ui #design #designsystems #color #branding #theming #accessibility

  • No alternative text description for this image
Jesse James Arnold

Director of Design at Exygy

2mo

Color tools to the rescue! Based on the response to this post, I just posted about the tooling out there that solves for the issues that come up when scaling design systems for multiple brands. Enjoy! https://www.linkedin.com/posts/jesse-james-arnold-3473964_color-ui-design-activity-7194791787637448704-hyxV?utm_source=share&utm_medium=member_ios

Like
Reply
Ana Boyer

Designer Advocate at Figma

3mo

This is so great, thank you for sharing these resources!

Victoria D.

Cultural Anthropologist - Product Designer - Design Researcher - Cannoli Connoisseur - Making it Pop Since 2009

2mo

Great resources! Thanks for sharing these. Yellow is always the tricky one, and that super light blue.

See more comments

To view or add a comment, sign in

Explore topics