8/13/2023 0 Comments Figma dark mode![]() ![]() Currently, visual testing of color palettes happens outside of Primer Prism, typically in Figma or production applications. We plan to integrate visual testing directly into Primer Prism. Next, we plan to improve our tooling to support the following key workflows. We used Primer Prism to design several new color palettes, accelerating the creation of dark high contrast, light high contrast, and colorblind themes for GitHub. The dark color palette applied to What’s next We use pre-releases of the Primer Primitives package to test new color palettes on. To test our colors in real-world scenarios, we export the palette from Primer Prism as a JSON object and add it to Primer Primitives, our repository of design tokens. Kennedy to learn more about the fundamentals of designing color scales. The hue, saturation, and lightness curves of the blue color scaleįine-tuning color scales is more of an art than a science and often requires many micro-adjustments before the colors “feel right.” Check out Color in UI Design: A (Practical) Framework by Eric D. Blue, for example, shifts towards green hues in the tints and purple hues in the shades. Then, we compare and adjust the base color (the fifth step in the scale) across all the color scales until the palette feels cohesive and consistent.Ī side-by-side comparison of every color scaleĪfter deciding on the base color for each scale, we fine-tune the tints (lighter colors) and shades (darker colors). We create a color scale for every hue using the same lightness curve we made earlier. How vibrant do we want the colors to be?.What hues do we need (for example: red, blue, green, etc.)?.Next, we define the overall color character of our palette: In the HSLuv color space, two colors with the same lightness value will look equally bright. Primer Prism uses the HSLuv color space to ensure that the lightness values are perceptually uniform across the entire palette. So, when we have more scales, we can quickly change the tonal character of the entire color palette by adjusting a single lightness curve.Īdjusting the lightness curve of all color scales at once Primer Prism also allows us to share curves across multiple color scales. We’ll revisit hue and saturation later.Īs we change the lightness of each color, Primer Prism checks the contrast of potential color pairings in the scale using the WCAG 2 standard.ĭragging lightness sliders up and down to adjust the lightness curve of a scale In this phase, we’re only concerned with lightness and contrast. In Primer Prism, we start a new color palette by creating a new color scale and adjusting the lightness curve. ![]() What should the contrast ratio between the foreground and background be?Īlthough each palette will have a unique tonal character, we are mindful that all palettes meet contrast accessibility guidelines.How light or dark should the background be?.We start by defining the color palette’s tonal character and contrast needs: Our improved workflow for creating color palettes with Primer Prism is an iterative cycle comprised of three steps: Export color palettes to production-ready code (JSON).Edit lightness curves across multiple color scales at once.Adjust colors in a perceptually uniform color space ( HSLuv).Part of GitHub’s Primer ecosystem, Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. We’re calling our experimental color tool Primer Prism. While we were designing this new theme, we set out to improve our workflow by building an experimental tool to solve some of the challenges we encountered while designing the original dark color palette. GitHub dark mode ( unveiled at GitHub Universe in December 2020) was the result of trial and error, copy and paste, as well as back and forth in a Figma file (with more than 370,000 layers!).Ī screenshot of the Figma file we made while designing GitHub dark modeĪ few months after shipping dark mode, we began working on a dark high contrast theme to provide an option that maximizes legibility. Many people find themselves using a combination of disjointed color tools, which can be a painful experience. Yet, for many teams, implementing dark mode is still a daunting task.Ĭreating a palette for dark interfaces is not as simple as inverting colors and complexity increases if your team is planning multiple themes. Dark mode is no longer a nice-to-have feature. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |