Windy CSS styleguide

    <div class="rounded-box m-15 size-l bg-white">
        <div class="badge fg-white bg-gray size-m boxshadow">.bg-white</div>
        <span class="fg-gray">.fg-gray</span>
        <span class="fg-black">.fg-black</span>
        <span class="fg-red">.fg-red</span>
        <span class="fg-red-light">.fg-red-light</span>
        <span class="fg-error">.fg-error</span>
        <span class="fg-ok">.fg-ok</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray-light">
        <div class="badge fg-white bg-gray size-m boxshadow">.bg-gray-light</div>
        <span class="fg-gray">.fg-gray</span>
        <span class="fg-black">.fg-black</span>
        <span class="fg-red">.fg-red</span>
        <span class="fg-red-light">.fg-red-light</span>
        <span class="fg-error">.fg-error</span>
        <span class="fg-ok">.fg-ok</span>
    </div>
    <div class="rounded-box m-15 size-l bg-transparent">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-transparent</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-yellow">.fg-yellow</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-gray</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-gray-light">.fg-gray-light</span>
        <span class="fg-orange-light">.fg-orange-light</span>
    </div>
    <div class="rounded-box m-15 size-l bg-gray-dark">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-gray-dark</div>
        <span class="fg-white">.fg-white</span>
        <span class="fg-gray-light">.fg-gray-light</span>
        <span class="fg-orange-light">.fg-orange-light</span>
    </div>
    <div class="rounded-box m-15 size-l bg-red">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-red</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-red-light">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-red-light</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-orange">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-orange</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-ok">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-ok</div>
        <span class="fg-white">.fg-white</span>
    </div>
    <div class="rounded-box m-15 size-l bg-error">
        <div class="badge fg-gray bg-white size-m boxshadow">.bg-error</div>
        <span class="fg-white">.fg-white</span>
    </div>