Let's see the first example on the site :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css"></script>
  </head>
  <body class="bg:#121212">
    <div class="flex jc:space-around">
      <article>
        <div class="bg:gray-22 p:10 r:10 max-w:350 b:1|solid|white">
          <img class="object:cover w:full square r:5" src="https://css.master.co/images/clothes.jpeg" loading="lazy" alt="clothes" />
          <div class="mt:10 p:15 color:white">
            <div class="font:24 font:bold capitalize">texture crew sweater</div>
            <div class="font:14 font:gray-66 mt:5">Designed for on the move</div>
            <div class="mt:12 font:semibold">$120.0 USD</div>
            <div class="mt:12 flex gap:8">
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3 b:3|solid|gold:hover">
                <div class="bg:white full round">white</div>
              </button>
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#999 full round">white</div>
              </button>
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#333 full round">white</div>
              </button>
            </div>
            <div class="mt:20 font:12 font:semibold letter-spacing:2 font:gray-66 uppercase">size</div>
            <div class="mt:12 flex gap:8">
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XS</button>
              <button class="p:10|15 r:3 font:14 font:semibold bg:gray-28">S</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">M</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">L</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XL</button>
            </div>
            <a class="font:gray-66 font:12 text:underline mt:20 inline-block color:white" href="/"> Get delivery dates </a>
          </div>
        </div>
      </article>
    </div>
  </body>
</html>

You can test it here : DEMO

The setup is really simple (you can of course use npm i...).
At first glance I can read the code fluently, not more complicated than Tailwind, perhaps even easier.

For curiosity, here the css code which is inserted in the DOM :

Very easy to read, isn't it ?

Without any optimisations, here is the lighthouse score OnlineDemo:

Not bad, for a first draft...

Cherry on the cake, VStudio Code intellisense is also provided

What do you think?

Stay tuned...

First post about Master CSS