I’ve seen better designed and clearer websites with two colours.
My hypothesis is that the designers and developers are all using $3k MacBooks with the ultra high quality screens that can reproduce colors that humankind could never have imagined, while I’m using a ten year old piece of crap LCD monitor that seems to be staying alive simply to spite me.
Either that, or I’m getting old and my vision is starting to slowly fade.
So often I see variations of this rather than "How does it work?"
Auxiliary verbs (like "does") are not required to form questions in Russian, Spanish, Chinese, and probably many other languages.
It's not the principle to invoke when you're talking about simply making logical mistakes. A question mark is used at the end of a question, not a statement. "How it works" is a statement. "How does it work?" would be the way to word the same CTA as a question.
Details matter because they add up to an overall impression of the quality of your work. Think of it as the "Brown M&Ms" principle, if you're familiar with that story. (Google it if you're not, it's a great anecdote.)
Removing uppercase or dots might still convey the same meaning but making it harder to read.
It may not matter that much but it does matter.
Holding them to a professional writing standard is a bit odd.
* "Cómo funciona" -> "How it works", as in "tell me how it works".
* "¿Cómo funciona?" -> "How does it work?".
The auxiliary "do/does" really looks like an extra unnecessary word, but omitting it sounds wrong to a native speaker or anyone already more used to English.
Part of the confusion could be because sentences like "but she does write" and "but she writes" mean basically the same thing (they imply different emphasis, but you know what I mean). So if someone incorrectly does pattern-matching based on those examples, I can see them thinking that "how does it work?" and "how it works?" mean the same thing.
After all, the "-s" suffix kinda looks like an abbreviation of "does", the same way the "-'re" suffix is an abbreviation of "are" ("writes" vs "does write", "they're" vs "they are").
Instead of saying "Click here and I'll tell you how it works", you're saying "did you have a question about how it works? If so, click here and I'll tell you". I'd argue it's still valid English, but it feels uncertain and weak, like you're not quite sure that's the right question to answer.
How it works? - an unsure comment about it kind of works but unsure how/why is correct reason. i typically add additional ??? to help convey the unsure nature without using shrug emoji
How does it work? - interrogatory of wanting the answer
Also, I can understand 3 police but I don't know how the 4th makes sense.
https://www.theverge.com/22652920/android-12-how-to-pixel-st...
There isn't actually 4, but that 4th one you perceive...Notice ex. search doesn't do this, it's a stubborn Android engineering politics thing.
I can't even begin to explain how this happened, but, tl;dr: that 4th color was a huge problem to everyone involved. But, once it became a Big Thing, engineer middle managers...sigh. Not worth trying to explain. The amount of chicanery was really astonishing, odds are I'll never work at a BigCo again.
Now, they're stuck with it, even though VPs were insisting it to be fixed since day -100.
To all of your points , it sure looks like he's imitating the same logic to get that off-white...but then isn't using the important part: gotta use my/Google's color space.
That's the magic to get contrast without even having to see the colors or measure ratios or any of that BS. (tl;dr: HCT color space, it's CAM16 strapped to Lab* L, and then you can describe contrasting colors by a delta in tone / L)
The color combinations are sometimes pretty pleasant, e.g. check out valued like 30 or 70 or 335.
The page is missing a "contrast" slider, and also a "saturation" slider, to make the combinations more agreeable.
Also, dark highly saturated colors often look problematic unless they cover a large enough area; the --color-accent has this problem.
This could be so much more practical with simple css definitions.
Not asking for a cookie or anything, but just demonstrating that my understanding of CSS wasn't harmed by learning Tailwind. It was the best path for me as a beginner.
Picking colors I still struggle with. I struggle to find a middle ground between "all gray but readable" (which a client once called "depressing" and compared to Soviet block housing) and "hideously garish". Gray is, unironically, one of my favorite colors, but this view is not popular.
Can't you just write everything you need in simple CSS?
It would be better, really come up with a template in which you enter 2 colors, and it gives a unique full-color design for the site. CSS has all the possibilities for this! But most web-masters use CSS variables only to store the results of each iteration of cycles.
Something something glass houses?
--primary-color: hsl(var(--hue), 50%, 90%);
--pre-primary-color: hsl(var(--hue), 50%, 95%);
--secondary-color: hsl(var(--hue), 50%, 10%);
--tertiary-color: hsl(var(--tertiary-hue), 80%, 20%);
--accent-color: hsl(var(--accent-hue), 80%, 20%);
(Yes, probably there are arguments against this, but in terms of colour theory for dummies.)
Imagine operating industrial machinery where the ”self-destruct and kill everyone” buttons are the same color, shape and position as the ”shut down safely” button.
Seriously, though, too much color is distracting and you should NEVER use it as the sole way of indicating something 'mission critical' since different people perceive colour very differently.
And if you are thinking about colorblind people when mentioning color perception, then either let them rely on other aspects (ex: shape) or don't allow colorblind people to operate the machine. I know it is not very inclusive, but if colorblindness make it more likely for the operator to kill everyone, then it is for the best (I am mostly thinking about commercial airline pilots here).
And I don't find too much color distracting. Bad use of color is, but signage often use the whole rainbow with great success. For example, metro systems all over the world assign each line a dedicated color, making for quite colorful maps, and it works, that's why they all do it.
Have you every been in airplane cockpit? There always is a switch that cuts enginees off and from what my pilot friend tells me using it in mid flight is more or less equal to killing everyone. And yes, as far as I remember it is big and red and have a lot of "do not touch" vibe around it.
I have a script [1] grab the local temp and convert that to two hue values, which it stores as CSS variables --base-temp and --accent.
Then in my CSS I set colors of various things using hsl() values based on one or the other, e.g.:
background-color: hsl(var(--base-temp),50%,96%);
(The other thing I'm proud of in that little script is that it shows you Celsius degrees unless it can determine your time zone has an American name.)
“You need 4 colors
2 for text and background(primary & secondary colors). 1 accent color to highlight important elements(number 4 & buttons). And an OPTIONAL tertiary color to add a bit of personality(the hue slider).”
So, the article contradicts itself, saying that you need 3 colors.
Also, highlighting can be done by different means than color. You can use bold text, inverted video, a different font, blinking, more subtle animations, etc.
In fact, text and background need not be different colors. Varying brightness can be sufficient.
A nice example of all of that is the original Mac. It used two shades of gray (extremely dark aka ‘black’ and extremely light aka ‘white’), but many other monochrome interfaces also showed that two colors suffice.
The author talking about "4 colors", when really he means 4 "color roles" or "theming swatches".
First of all, 4 don't cut it.
You'll need accents for all of them, to fade sidenotes, visual hierarchy and disabled elements; to differentiate states of interactive; for borders, separators, and other parts of the chrome, and visual distinction of illustrative elements like icons; to give just a few samples ..
But the shortcomings of building a design system on 3 swatches for "text, bg, button" will become obvious much sooner, since defining which of the text/bg colors works for the button text depends on the button color itself, etc.
What most frameworks, complex and simplistic alike, get wrong imho, is that you need TWO "layers" of color definition, not to cram your palette definition into semantic concerns of the ui to be decorated. Those are separate concerns!
Or better said: the purpose of design tokens is not to be an abstraction for css properties of distinctive components.
- One Layer is your brand definition, or the color palettes that will serve to define the GUIs design. These are your design tokens
- The other layer is a semantic abstraction of the requirements in the design context. These are your "text, bg, button text, button bg, ..."
The library of design tokens need to acommodate ANY context the brand design could be applied to, and thus provide a wide range of shades for whatever amount of base colors want to use in the brand design.
These will then be mapped to the second layer of "roles", and populate whatever distinct use cases in the design.
TLDR: there is no "text, bg, highlight" color. There are "primary, secondary, accent, neutral, ..." color palettes, and "copy text, copy bg, button text, button icon, button bg, hovered button, .." swatches to be populated with them.
I get that there's "brand" colors and "role" colors.[2]
Naively, I would make a set of `--brand-*` colors consisting of actual color literals (RGB, HSL, whatever) for `--brand-primary-...`, `--brand-secondary-...`, etc.
I would then make a set of `--role-*` colors that is defined exclusively in terms of `var(--brand-...)`.
If an implementation like this is in line with what you are saying, where would I find an example list of "brand" colors (primary, secondary, accent, etc) and "role" colors (copy-text, copy-bg, button-..., etc) to use?
[1] Not because your explanation was not sufficient, but because I am not a UI designer at all.
[2] Maybe not just colors. Border radii could be part of the branding as well. Box-shadows (or lack thereof) could, too. Maybe minimum padding between border and content, margins between elements, etc.
It makes a statement that you need four colors (as if you couldn't possibly make a usable site with more or less) and then locks you into a 1D slider. That slider gives you four colors without much explanation on that page itself on why this particular algorithm is useful as if this solves some general problem.
Like 320 in dark mode, makes the filled buttons, white text, invisible
See the HSL .vs OKLCH plots here; https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
That's even before going into accessibility considerations with safeguarding the sets for common types of color vision deficiencies.
Also I only clicked, because I thought it was some kind of demo on the https://en.wikipedia.org/wiki/Four_color_theorem
However, I definitely disagree with at the very least the implementation here.
To me, the background can't be some significantly saturated color. It has to be very muted. Otherwise my brain says something is wrong with it. The only combinations I found more tolerable were those where the background became a near-grey and the color was limited to the elements. It's just too much. I'm not sure why, it is just is.
And even then, the contrast felt low, like the whole page was 'foggy' or out of focus.
https://www.refactoringui.com/previews/building-your-color-p...
https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legac...
Thus workbench was originally 4 color, which did stay as default.
Conveiently, at the default hires (640x horiz resolution) 68k cpu would always be able to access chip ram, as the cpu is only able to use half the cycles, and at 4 color the blitter in Agnus uses most of the other half to stream bitplanes to Denise.
The site is a good example of aesthetics taking precedent over accessibility. No matter what slider position I chose, I couldn't get an eye-friendly hue with good contrast.
Then I toggled on DarkReader and immediately got what I needed.
With Material 3 they released Material Color Utilities, a library that can generate more complicated color schemes from a source color. It uses a color space that properly accounts for perceived brightness so there's some contrast guarantees.
Is there actually a 4 color theorem like rule for text and background colors needed, probably there is a design rule but that isn't a mathematical rule the way the 4 color theorem is. And I guess that the rule is just text and background each need a color - so two colors.
Where did this crazy sentence construction come from? I'm Ron Burgundy?