Etat Pur Design System

Roboto 

<div class="my-14 font-roboto">
        <span class="border-b border-black text-3xl">Roboto</span>
        <div class="mt-10 font-thin">
            <div class="underline">Thin (100)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-light">
            <div class="underline">Light (300)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-normal">
            <div class="underline">Normal (400)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-medium">
            <div class="underline">Medium (500)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-semibold">
            <div class="underline">Semi-Bold (600)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-bold">
            <div class="underline">Bold (700)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
        <div class="mt-10 font-black">
            <div class="underline">Black (900)</div>
            <div>0123456789</div>
            <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
            <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
            <div>abcdefghijklmnopqrstuvwxyz</div>
        </div>
    </div>
 
{% for family in families %}
    <div class="my-14 {{ family.class }}">
        <span class="border-b border-black text-3xl">{{ family.label }}</span>
        {% for weight in weights %}
            <div class="mt-10 {{ weight.class }}">
                <div class="underline">{{ weight.label }} ({{ weight.weight }})</div>
                <div>0123456789</div>
                <div>!"#$%&'()*+,-./:;<=>?@{|}~</div>
                <div>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
                <div>abcdefghijklmnopqrstuvwxyz</div>
            </div>
        {% endfor %}
    </div>
{% endfor %}
 
{
  "families": [
    {
      "label": "Roboto",
      "class": "font-roboto"
    }
  ],
  "weights": [
    {
      "label": "Thin",
      "class": "font-thin",
      "weight": 100
    },
    {
      "label": "Light",
      "class": "font-light",
      "weight": 300
    },
    {
      "label": "Normal",
      "class": "font-normal",
      "weight": 400
    },
    {
      "label": "Medium",
      "class": "font-medium",
      "weight": 500
    },
    {
      "label": "Semi-Bold",
      "class": "font-semibold",
      "weight": 600
    },
    {
      "label": "Bold",
      "class": "font-bold",
      "weight": 700
    },
    {
      "label": "Black",
      "class": "font-black",
      "weight": 900
    }
  ]
}

No notes defined.