cva VS Tufte CSS

cva.style

* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css

Highly recommended with this: https://github.com/joe-bell/cva

Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example

There is also class variance authoriy

https://github.com/joe-bell/cva is great for this

Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.

As it is often said in various designer forums, please avoid pure white (#FFFFFF) on black (here #111111), as it makes the text glow for the human eyes (therefore making it unreadable for long text). Instead, try to lower a bit the contrast on the text color.

Also, the dispositions for the buttons at the beginning (GitHub, NPM, ...) are not adjusted correctly for keyboard navigation (each button requires two tabs).

Appart from that, I do like a minimalist stylesheet, so I will also recommend Tufte CSS [0] for readers.

[0]: https://github.com/edwardtufte/tufte-css

CSS and HTML is great for documents - not so great for applications. Most sites end up implementing their own navigation UI/UX at a minimum (an application) - many end up as more applications.

For an example of "documents", see eg:

https://edwardtufte.github.io/tufte-css/

Or

https://alistapart.com/article/building-books-with-css3/

Just for kicks, I applied Tufte CSS[0] onto the page using a browser extension. Great ROI.

0. https://edwardtufte.github.io/tufte-css/

It's not the answer you're looking for, but https://edwardtufte.github.io/tufte-css/ might be of interest to you

A famous physicist, Richard Feynman, had a practice in his his extensive writing, e.g. a three-volume physics text, to use the methodology of sentences which then cumulate sequentially into paragraphs. (ht Ed Tufte)