This process assumes that you already know what the design should look like. You could probably use the tips after a period of exploration.
The whole "only use five colours", of which one is black and three are meant for indication/states (error, warning, success) is an odd tip. Personally I always use a minimum of:
- Dark A
- Dark B
- Light A
- Light B
...and that's a minimum. Expecially important is the use of a primary and a variant colour as the primary palette.
Transparency on text is bad. Use Color instead. Is better for the developer and renders faster than transparency text.
renders faster than transparency text
Do you know of any case studies for this?
First just think about it in css style: Color: #232323 in comparsion to rgba(X,X,X,0.2). There are more characters to compile in the dom tree. More characters in the dom tree result in heavier loading time.
Second like Geffrey mentioned. In the color only example the browser just got two colors to calculate and to render. In your alpha example it has to calculate a third color. At first the background color than the alpha color that lies above and than the combined color of them two. I think there is no case studie needed, it is just logic.
I think you missed my point. I understand the reason it could be more expensive to render rgba. I'm not questioning that. I'm just wondering how much more expensive it is. Like are we talking 1ms or 100ms. That matters.
I think it matters anyway. Lets have look what good old Jacob says: https://www.nngroup.com/articles/response-times-3-important-limits/