GDL - Global Design Language

Atomictypos 

<div class="l-list-border">

    <span class="u-capitalize u-block u-pl-base u-font-xs u-font-serif-display-stack">serif-display-stack | font-xs</span>

    <span class="u-capitalize u-block u-pl-base u-font-xs u-font-serif-text-stack">serif-text-stack | font-xs</span>

    <span class="u-capitalize u-block u-pl-base u-font-xs u-font-sans-grotesk-stack">sans-grotesk-stack | font-xs</span>

    <span class="u-capitalize u-block u-pl-base u-font-sm u-font-serif-display-stack">serif-display-stack | font-sm</span>

    <span class="u-capitalize u-block u-pl-base u-font-sm u-font-serif-text-stack">serif-text-stack | font-sm</span>

    <span class="u-capitalize u-block u-pl-base u-font-sm u-font-sans-grotesk-stack">sans-grotesk-stack | font-sm</span>

    <span class="u-capitalize u-block u-pl-base u-font-base u-font-serif-display-stack">serif-display-stack | font-base</span>

    <span class="u-capitalize u-block u-pl-base u-font-base u-font-serif-text-stack">serif-text-stack | font-base</span>

    <span class="u-capitalize u-block u-pl-base u-font-base u-font-sans-grotesk-stack">sans-grotesk-stack | font-base</span>

    <span class="u-capitalize u-block u-pl-base u-font-lg u-font-serif-display-stack">serif-display-stack | font-lg</span>

    <span class="u-capitalize u-block u-pl-base u-font-lg u-font-serif-text-stack">serif-text-stack | font-lg</span>

    <span class="u-capitalize u-block u-pl-base u-font-lg u-font-sans-grotesk-stack">sans-grotesk-stack | font-lg</span>

    <span class="u-capitalize u-block u-pl-base u-font-xl u-font-serif-display-stack">serif-display-stack | font-xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-xl u-font-serif-text-stack">serif-text-stack | font-xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-2xl u-font-serif-display-stack">serif-display-stack | font-2xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-2xl u-font-serif-text-stack">serif-text-stack | font-2xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-2xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-2xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-3xl u-font-serif-display-stack">serif-display-stack | font-3xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-3xl u-font-serif-text-stack">serif-text-stack | font-3xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-3xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-3xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-4xl u-font-serif-display-stack">serif-display-stack | font-4xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-4xl u-font-serif-text-stack">serif-text-stack | font-4xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-4xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-4xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-5xl u-font-serif-display-stack">serif-display-stack | font-5xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-5xl u-font-serif-text-stack">serif-text-stack | font-5xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-5xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-5xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-6xl u-font-serif-display-stack">serif-display-stack | font-6xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-6xl u-font-serif-text-stack">serif-text-stack | font-6xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-6xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-6xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-7xl u-font-serif-display-stack">serif-display-stack | font-7xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-7xl u-font-serif-text-stack">serif-text-stack | font-7xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-7xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-7xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-8xl u-font-serif-display-stack">serif-display-stack | font-8xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-8xl u-font-serif-text-stack">serif-text-stack | font-8xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-8xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-8xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-9xl u-font-serif-display-stack">serif-display-stack | font-9xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-9xl u-font-serif-text-stack">serif-text-stack | font-9xl</span>

    <span class="u-capitalize u-block u-pl-base u-font-9xl u-font-sans-grotesk-stack">sans-grotesk-stack | font-9xl</span>

</div>
 
<div class="l-list-border">
{% for typo in typos %}
  {% for family in families %}
    <span class="u-capitalize u-block u-pl-base u-{{typo.name}} u-font-{{family.name}}">{{family.name}} | {{typo.name}}</span>
  {% endfor %}
{% endfor %}
</div>
 
{
  "typos": [
    {
      "typo": null,
      "name": "font-xs"
    },
    {
      "typo": null,
      "name": "font-sm"
    },
    {
      "typo": null,
      "name": "font-base"
    },
    {
      "typo": null,
      "name": "font-lg"
    },
    {
      "typo": null,
      "name": "font-xl"
    },
    {
      "typo": null,
      "name": "font-2xl"
    },
    {
      "typo": null,
      "name": "font-3xl"
    },
    {
      "typo": null,
      "name": "font-4xl"
    },
    {
      "typo": null,
      "name": "font-5xl"
    },
    {
      "typo": null,
      "name": "font-6xl"
    },
    {
      "typo": null,
      "name": "font-7xl"
    },
    {
      "typo": null,
      "name": "font-8xl"
    },
    {
      "typo": null,
      "name": "font-9xl"
    }
  ],
  "weights": [
    {
      "weight": null,
      "name": "normal",
      "value": 400
    },
    {
      "weight": null,
      "name": "medium",
      "value": 500
    },
    {
      "weight": null,
      "name": "bold",
      "value": 700
    },
    {
      "weight": null,
      "name": "black",
      "value": 900
    }
  ],
  "families": [
    {
      "family": null,
      "name": "serif-display-stack"
    },
    {
      "family": null,
      "name": "serif-text-stack"
    },
    {
      "family": null,
      "name": "sans-grotesk-stack"
    }
  ]
}

No notes defined.