Daily Shaarli

All links of one day in a single page.
Naming colors in design systems
thumbnail

Spectrum’s colors are mapped to our design tokens, which are all the values needed to construct and maintain a design system—such as spacing, color, typography, object styles, and animation—represented as data. Our naming decisions for Spectrum leverage industry terminology and commonly known terms whenever possible, so we avoid choosing names for colors that wouldn’t be recognizable beyond the design and development community. We also avoid names that are trendy, subjective, or in languages other than U.S. English.

https://spectrum.adobe.com/page/color-system/
https://spectrum.adobe.com/page/color-palette/
https://uxdesign.cc/how-should-you-name-your-colors-in-a-design-system-3086513476df

Typography Manual by Mike Mai
thumbnail

A set of rules that will improve your typography 10x.

Use Traditional Point Sizes

Display     Double Canon    4.666
Heading 1   Canon   3.999
Heading 2   Double Great Primer 2.999
Heading 3   Double English  2.333
Heading 4   Double Pica 2.000
Heading 5   Paragon 1.666
Heading 6   English 1.166
Body        Pica    1.000
Fine Print 1    Small Pica  0.916
Fine Print 2    Bourgeois   0.750

Use Serif for Italic Text

Reduce Heading Spacing

The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.

Use Thin Space

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.

The HTML code is  . You can go even further with Hair Space  

Don’t Use Helvetica, Inter, & Roboto

Pattern Club | Find Pattern Inspiration
thumbnail

A curated gallery of patterns, textures & visuals by awesome designers & illustrators

Camera obscura: the case against AI in classrooms: Matthew Butterick

Research means more than fact-checking

When I first used GitHub Copilot, I said it “essen­tially tasks you with correcting a 12-year-old’s home­work … I have no idea how this is prefer­able to just doing the home­work your­self.” What I meant is that often, the focus of program­ming is not merely producing code that solves a problem. Rather, the code tends to be the side effect of a deeper process, which is to learn and under­stand enough about the problem to write the code. The authors of the famous MIT program­ming text­book Struc­ture and Inter­pre­ta­tion of Computer Programs call this virtuous cycle proce­dural epis­te­mology. We could also call it by its less exotic name: research.

It's time to learn oklch color
thumbnail

I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”)

  • It’s based on human perception
  • It can define any color
  • the chroma value is a number between 0 and 0.37
mbutterick/pollen: book-publishing system - pollen - Gitea: Git with a cup of tea
thumbnail

pollen - book-publishing system

Perceptually uniform color models and their implications / Max Bo | Observable
thumbnail

This notebook was created as a learning exercise to teach myself about color theory. I have interleaved some lightly altered prose from a variety of sources which I found informative, which I have made a best attempt to cite in the References section at the end of the notebook. I would like to extend my thanks to the cited authors for their work. Munsell color system Albert Munsell, an artist and professor of art at the Massachusetts Normal Art School wanted to create a rational way to describe color

Munsell color system

I Restored a 1950's Boston "Champion" Pencil Sharpener - Reddit

Finished! Ready for the next generation of pencil sharpening! I made a full restoration video of the project which can be found at the link below.
https://youtu.be/EZUwunWWCLA