1import"../chunks/CWj6FrbW.js";import"../chunks/CHYnKQsn.js";import{f as w,a as o,s as a,c as P,n as r,e as s}from"../chunks/Bku3A7S3.js";import"../chunks/A1awWY7G.js";import{H as A,a as h}from"../chunks/DnnnLAzW.js";import{C as I}from"../chunks/B7T-ppDI.js";import{P as i}from"../chunks/CPGskOHU.js";import"../chunks/BYnWMsUX.js";var H=P("<!> <br/> <!> <!><!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function D(k){var l=H(),d=w(l);A(d,{children:(e,n)=>{r();var t=s("Three ways to use monochrome in your UI");o(e,t)}});var c=a(d,4);h(c,{children:(e,n)=>{r();var t=s("Monochromes communicate logic, hierarchy, and state without overwhelming the user.");o(e,t)}});var u=a(c,2);i(u,{children:(e,n)=>{r();var t=s("Regardless of what colors you end up using for your brand, most likely, you can benefit from a set of monochromes as the backbone to your design, even if just for small things like text, headings and seperators.");o(e,t)},$$slots:{default:!0}});var m=a(u);i(m,{children:(e,n)=>{r();var t=s("Rather than picking three random shades of grey, it can be much nicer to work with a set of 10-15 greys that they look they are part of the same family. With Color Schemer, it's as easy as picking a base color.");o(e,t)},$$slots:{default:!0}});var f=a(m,2);h(f,{children:(e,n)=>{r();var t=s("Usecase 1: Designing Interactive States");o(e,t)}});var p=a(f,2);i(p,{children:(e,n)=>{r();var t=s("If you have a blue button, and the user hovers over it, you may want to lighten it. If they press on it, you may want to darken it. And by working with a set of monochromes, you can easily get the right colors for them.");o(e,t)},$$slots:{default:!0}});var y=a(p,2);h(y,{children:(e,n)=>{r();var t=s("Usecase 2: Establishing Layouts and Visual Hierarchy");o(e,t)}});var g=a(y,2);i(g,{children:(e,n)=>{r();var t=s('A lot of dashboards and designs layer on different shades of gray to signal what sits on top of of what and create a clear hierarchy. A simple way to make it look cohesive, and to make every "step" of the designs "toplogy" look like an "even" step up, is to simply to spin up a set of monochromes. A good trick here is to use your brands main color, desaturate it as much as you can do, and get your set of grays from it.');o(e,t)},$$slots:{default:!0}});var v=a(g,2);h(v,{children:(e,n)=>{r();var t=s("Usecase 3: Building a text hierarchy");o(e,t)}});var $=a(v,2);i($,{children:(e,n)=>{r();var t=s("Pure black text on a pure white background can be tiring for the eyes. And you probably want your titles, headers, and text to have some color variance. Nothing can pull them together like a cohesive set of monochromes.");o(e,t)},$$slots:{default:!0}});var b=a($,2);h(b,{children:(e,n)=>{r();var t=s("A quick job that looks cohesive");o(e,t)}});var _=a(b,2);i(_,{children:(e,n)=>{r();var t=s("The days of picking three random shades of grey are over - instead - treat yourself to a set of 10-15 shades of grey, in the right hue, and use that as the backbone of your design. That's what I did for this online course and website; the sidebar, the table of contents, the website, text, etc, are all pulled together from the same monochromatic set.");o(e,t)},$$slots:{default:!0}});var x=a(_,2);I(x),o(k,l)}export{D as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.