Alain Afflelou Design System

Typography 

<div class="mt-10 font-light">
        <div class="underline">Light</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            <div class="flex items-end">
                <div class="text-xs font-light">XS</div>
            </div>
            <div class="flex items-end">
                <div class="text-sm font-light">SM</div>
            </div>
            <div class="flex items-end">
                <div class="text-base font-light">BASE</div>
            </div>
            <div class="flex items-end">
                <div class="text-lg font-light">LG</div>
            </div>
            <div class="flex items-end">
                <div class="text-xl font-light">1XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-2xl font-light">2XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-3xl font-light">3XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-4xl font-light">4XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-5xl font-light">5XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-6xl font-light">6XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-7xl font-light">7XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-8xl font-light">8XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-9xl font-light">9XL</div>
            </div>
        </div>
    </div>
    <div class="mt-10 font-normal">
        <div class="underline">Normal</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            <div class="flex items-end">
                <div class="text-xs font-normal">XS</div>
            </div>
            <div class="flex items-end">
                <div class="text-sm font-normal">SM</div>
            </div>
            <div class="flex items-end">
                <div class="text-base font-normal">BASE</div>
            </div>
            <div class="flex items-end">
                <div class="text-lg font-normal">LG</div>
            </div>
            <div class="flex items-end">
                <div class="text-xl font-normal">1XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-2xl font-normal">2XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-3xl font-normal">3XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-4xl font-normal">4XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-5xl font-normal">5XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-6xl font-normal">6XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-7xl font-normal">7XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-8xl font-normal">8XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-9xl font-normal">9XL</div>
            </div>
        </div>
    </div>
    <div class="mt-10 font-medium">
        <div class="underline">Medium</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            <div class="flex items-end">
                <div class="text-xs font-medium">XS</div>
            </div>
            <div class="flex items-end">
                <div class="text-sm font-medium">SM</div>
            </div>
            <div class="flex items-end">
                <div class="text-base font-medium">BASE</div>
            </div>
            <div class="flex items-end">
                <div class="text-lg font-medium">LG</div>
            </div>
            <div class="flex items-end">
                <div class="text-xl font-medium">1XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-2xl font-medium">2XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-3xl font-medium">3XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-4xl font-medium">4XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-5xl font-medium">5XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-6xl font-medium">6XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-7xl font-medium">7XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-8xl font-medium">8XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-9xl font-medium">9XL</div>
            </div>
        </div>
    </div>
    <div class="mt-10 font-semibold">
        <div class="underline">Semi-Bold</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            <div class="flex items-end">
                <div class="text-xs font-semibold">XS</div>
            </div>
            <div class="flex items-end">
                <div class="text-sm font-semibold">SM</div>
            </div>
            <div class="flex items-end">
                <div class="text-base font-semibold">BASE</div>
            </div>
            <div class="flex items-end">
                <div class="text-lg font-semibold">LG</div>
            </div>
            <div class="flex items-end">
                <div class="text-xl font-semibold">1XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-2xl font-semibold">2XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-3xl font-semibold">3XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-4xl font-semibold">4XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-5xl font-semibold">5XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-6xl font-semibold">6XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-7xl font-semibold">7XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-8xl font-semibold">8XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-9xl font-semibold">9XL</div>
            </div>
        </div>
    </div>
    <div class="mt-10 font-bold">
        <div class="underline">Bold</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            <div class="flex items-end">
                <div class="text-xs font-bold">XS</div>
            </div>
            <div class="flex items-end">
                <div class="text-sm font-bold">SM</div>
            </div>
            <div class="flex items-end">
                <div class="text-base font-bold">BASE</div>
            </div>
            <div class="flex items-end">
                <div class="text-lg font-bold">LG</div>
            </div>
            <div class="flex items-end">
                <div class="text-xl font-bold">1XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-2xl font-bold">2XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-3xl font-bold">3XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-4xl font-bold">4XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-5xl font-bold">5XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-6xl font-bold">6XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-7xl font-bold">7XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-8xl font-bold">8XL</div>
            </div>
            <div class="flex items-end">
                <div class="text-9xl font-bold">9XL</div>
            </div>
        </div>
    </div>
 
{% for weight in weights %}
    <div class="mt-10 {{ weight.class }}">
        <div class="underline">{{ weight.label }}</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="line-through">Lorem Ipsum.</div>
        <div class="flex space-x-4">
            {% for size in sizes %}
                <div class="flex items-end">
                    <div class="{{ size.class }} {{ weight.class }}">{{ size.label }}</div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}
 
{
  "weights": [
    {
      "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
    }
  ],
  "sizes": [
    {
      "label": "XS",
      "class": "text-xs"
    },
    {
      "label": "SM",
      "class": "text-sm"
    },
    {
      "label": "BASE",
      "class": "text-base"
    },
    {
      "label": "LG",
      "class": "text-lg"
    },
    {
      "label": "1XL",
      "class": "text-xl"
    },
    {
      "label": "2XL",
      "class": "text-2xl"
    },
    {
      "label": "3XL",
      "class": "text-3xl"
    },
    {
      "label": "4XL",
      "class": "text-4xl"
    },
    {
      "label": "5XL",
      "class": "text-5xl"
    },
    {
      "label": "6XL",
      "class": "text-6xl"
    },
    {
      "label": "7XL",
      "class": "text-7xl"
    },
    {
      "label": "8XL",
      "class": "text-8xl"
    },
    {
      "label": "9XL",
      "class": "text-9xl"
    }
  ]
}

No notes defined.