<div class="p-5">
<div class="pb-5 mb-4 grid gap-2">
<h2 class="text-4xl font-bold">Design system font</h2>
<div class="flex gap-14">
<div>
<p class="text-2xl">IBM Plex Sans</p>
<p class="font-regular">regular 400</p>
<p class="font-medium">medium 500</p>
<p class="font-bold">bold 700</p>
</div>
</div>
</div>
<div class="grid gap-12">
<h2 class="text-4xl font-bold">Styles</h2>
<div class="grid gap-8">
<div class="grid gap-2">
<h3 class="text-2xl font-bold">Headings</h3>
<p>Heading element styles</p>
</div>
<div class="grid gap-2">
<h1 class="n7-heading-1">Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong></h1>
<p>classes: <strong>n7-heading-1</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 3.75rem - 60px</p>
</div>
<div class="grid gap-2">
<h2 class="n7-heading-2">Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong></h2>
<p>classes: <strong>n7-heading-2</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 3rem - 48px</p>
</div>
<div class="grid gap-2">
<h3 class="n7-heading-3">Heading 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</strong></h3>
<p>classes: <strong>n7-heading-3</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 2.25rem - 36px</p>
</div>
<div class="grid gap-2">
<h4 class="n7-heading-4">Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong></h4>
<p>classes: <strong>n7-heading-4</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 1.5rem - 24px</p>
</div>
<div class="grid gap-2">
<h5 class="n7-heading-5">Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong></h5>
<p>classes: <strong>n7-heading-5</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 1.25rem - 20px</p>
</div>
<div class="grid gap-2">
<h6 class="n7-heading-6">Heading 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua dolore magna aliqua</strong></h6>
<p>classes: <strong>n7-heading-6</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 1rem - 16px</p>
</div>
</div>
<div class="grid gap-8">
<div class="grid gap-2">
<h3 class="text-2xl font-bold">Display Headings</h3>
<p>Heading-like styles</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-1">Dispay 1 - The quick brown fox</strong></p>
<p>classes: <strong>n7-display-heading-1</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 8rem - 128px</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-2">Display 2 - The quick brown fox</strong></p>
<p>classes: <strong>n7-display-heading-2</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 6rem - 96px</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-3">Display 3</strong></p>
<p>classes: <strong>n7-display-heading-3</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 4.5rem - 72px</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-4">Display 4</strong></p>
<p>classes: <strong>n7-display-heading-4</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 3.75rem - 60px</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-5">Display 5</strong></p>
<p>classes: <strong>n7-display-heading-5</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 3rem - 48px</p>
</div>
<div class="grid gap-2">
<p class="n7-display-heading-6">Display 6</strong></p>
<p>classes: <strong>n7-display-heading-6</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 2.25rem - 36px</p>
</div>
</div>
<div class="grid gap-8">
<div class="grid gap-2">
<h3 class="text-2xl font-bold">Body</h3>
<p>Page body styles</p>
</div>
<div class="grid gap-2">
<p class="n7-body-xs">Body xs</strong></p>
<p>classes: <strong>n7-body-xs</strong></p>
<p>font: IBM Plex Sans</p>
<p>font size: 0.75rem - 12px</p>
</div>
</div>
<div class="grid gap-8">
<div class="grid gap-2">
<h3 class="text-2xl font-bold">Text</h3>
<p>Additional text styles</p>
</div>
<div class="grid gap-2">
<p class="text-2xl font-normal font-sans">text-2xl</strong></p>
<p>classes: <strong>text-2xl font-normal font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.5rem - 24px</p>
</div>
<div class="grid gap-2">
<p class="text-2xl font-bold font-sans">text-2xl-bold</strong></p>
<p>classes: <strong>text-2xl font-bold font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.5rem - 24px</p>
</div>
<div class="grid gap-2">
<p class="text-2xl font-bold underline font-sans">text-2xl-bold-underline</strong></p>
<p>classes: <strong>text-2xl font-bold underline font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.5rem - 24px</p>
</div>
<div class="grid gap-2">
<p class="text-3xl font-normal font-sans">text-3xl</strong></p>
<p>classes: <strong>text-3xl font-normal font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.875rem - 30px</p>
</div>
<div class="grid gap-2">
<p class="text-3xl font-bold font-sans">text-3xl-bold</strong></p>
<p>classes: <strong>text-3xl font-bold font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.875rem - 30px</p>
</div>
<div class="grid gap-2">
<p class="text-3xl font-bold underline font-sans">text-3xl-bold-underline</strong></p>
<p>classes: <strong>text-3xl font-bold underline font-sans</strong></p>
<p>font: Font name</p>
<p>font size: 1.875rem - 30px</p>
</div>
</div>
</div>
</div>
<div class="p-5">
<div class="pb-5 mb-4 grid gap-2">
<h2 class="text-4xl font-bold">Design system font</h2>
<div class="flex gap-14">
{% for font in fonts %}
<div>
<p class="text-2xl">{{ font.name }}</p>
{% for weight in font.weights %}
<p class="font-{{ weight.label }}">{{ weight.label }} {{ weight.value }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="grid gap-12">
<h2 class="text-4xl font-bold">Styles</h2>
{% for style in styles %}
<div class="grid gap-8">
<div class="grid gap-2">
<h3 class="text-2xl font-bold">{{ style.name }}</h3>
<p>{{ style.description }}</p>
</div>
{% for typo in style.typos %}
<div class="grid gap-2">
<{% if typo.tag %}{{ typo.tag }}{% else %}p{% endif %} class="{{ typo.classes }}">{{ typo.name }}</strong></{%- if typo.tag -%}{{ typo.tag }}{% else %}p{% endif %}>
<p>classes: <strong>{{ typo.classes }}</strong></p>
<p>font: {{ typo.font }}</p>
<p>font size: {{ typo.size }}</p>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{
"fonts": [
{
"name": "IBM Plex Sans",
"weights": [
{
"label": "regular",
"value": 400
},
{
"label": "medium",
"value": 500
},
{
"label": "bold",
"value": 700
}
]
}
],
"styles": [
{
"name": "Headings",
"description": "Heading element styles",
"typos": [
{
"name": "Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": "h1",
"classes": "n7-heading-1",
"font": "IBM Plex Sans",
"size": "3.75rem - 60px"
},
{
"name": "Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": "h2",
"classes": "n7-heading-2",
"font": "IBM Plex Sans",
"size": "3rem - 48px"
},
{
"name": "Heading 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
"tag": "h3",
"classes": "n7-heading-3",
"font": "IBM Plex Sans",
"size": "2.25rem - 36px"
},
{
"name": "Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"tag": "h4",
"classes": "n7-heading-4",
"font": "IBM Plex Sans",
"size": "1.5rem - 24px"
},
{
"name": "Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"tag": "h5",
"classes": "n7-heading-5",
"font": "IBM Plex Sans",
"size": "1.25rem - 20px"
},
{
"name": "Heading 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua dolore magna aliqua",
"tag": "h6",
"classes": "n7-heading-6",
"font": "IBM Plex Sans",
"size": "1rem - 16px"
}
]
},
{
"name": "Display Headings",
"description": "Heading-like styles",
"typos": [
{
"name": "Dispay 1 - The quick brown fox",
"classes": "n7-display-heading-1",
"font": "IBM Plex Sans",
"size": "8rem - 128px"
},
{
"name": "Display 2 - The quick brown fox",
"classes": "n7-display-heading-2",
"font": "IBM Plex Sans",
"size": "6rem - 96px"
},
{
"name": "Display 3",
"classes": "n7-display-heading-3",
"font": "IBM Plex Sans",
"size": "4.5rem - 72px"
},
{
"name": "Display 4",
"classes": "n7-display-heading-4",
"font": "IBM Plex Sans",
"size": "3.75rem - 60px"
},
{
"name": "Display 5",
"classes": "n7-display-heading-5",
"font": "IBM Plex Sans",
"size": "3rem - 48px"
},
{
"name": "Display 6",
"classes": "n7-display-heading-6",
"font": "IBM Plex Sans",
"size": "2.25rem - 36px"
}
]
},
{
"name": "Body",
"description": "Page body styles",
"typos": [
{
"name": "Body xs",
"classes": "n7-body-xs",
"font": "IBM Plex Sans",
"size": "0.75rem - 12px"
}
]
},
{
"name": "Text",
"description": "Additional text styles",
"typos": [
{
"name": "text-2xl",
"classes": "text-2xl font-normal font-sans",
"font": "Font name",
"size": "1.5rem - 24px"
},
{
"name": "text-2xl-bold",
"classes": "text-2xl font-bold font-sans",
"font": "Font name",
"size": "1.5rem - 24px"
},
{
"name": "text-2xl-bold-underline",
"classes": "text-2xl font-bold underline font-sans",
"font": "Font name",
"size": "1.5rem - 24px"
},
{
"name": "text-3xl",
"classes": "text-3xl font-normal font-sans",
"font": "Font name",
"size": "1.875rem - 30px"
},
{
"name": "text-3xl-bold",
"classes": "text-3xl font-bold font-sans",
"font": "Font name",
"size": "1.875rem - 30px"
},
{
"name": "text-3xl-bold-underline",
"classes": "text-3xl font-bold underline font-sans",
"font": "Font name",
"size": "1.875rem - 30px"
}
]
}
]
}
Typographic rules and classes for interface
Font size are defined in rem
Line height is unitless value eg: 1, 1.25, 1.375, 1.5, 1.625, 2