Typography
Desktop 1920*1080
52px
Headline
36px
Headline
28px
Headline
20px
Headline
24px
Subtitle
24px
Body
20px
Body
18px
Subtitle
16px
Body
14px
Body
14px
Label
14px
Banner Text
12px
Hyperlink
12px
Component Level
10px
Small
Tablet 1024*1366
48px
Headline
32px
Headline
24px
Headline
20px
Subtitle
20px
Body
16px
Body
10px
Body
8px
Overline
Color
Main Text
#363431
Sub Text
#5F5F5F
Placeholder
#7A7A7A
Disabled
#363431 50%
Link
#167DF5
Copy
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Desktop 1920*1080</h5>
<div class="container-fluid text-sans-serif">
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">52px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-52">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">36px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-36">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">28px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-28">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">20px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-20">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">24px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-24">Subtitle</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">24px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-24-fw500">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">20px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-20">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">18px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-18">Subtitle</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">16px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-16">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">14px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-14">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">14px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-14-fw500">Label</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">14px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-14-fw700">Banner Text</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">12px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-12">Hyperlink</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">12px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-12-fw700">Component Level</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold font-10">10px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-10">Small</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body max-height">
<h5 class="card-title">Tablet 1024*1366</h5>
<div class="container-fluid text-sans-serif">
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">48px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-48">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">32px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-32">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">24px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-24-tab">Headline</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">20px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-20-tab">Subtitle</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">20px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-20-fw500-tab">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold">16px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-16-tab">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold font-10-tab">10px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-10-tab">Body</h1>
</div>
</div>
<div class="row py-3 align-items-center">
<div class="col-sm-3">
<small class="font-weight-bold font-8-tab">8px</small>
</div>
<div class="col-sm-9">
<h1 class="mb-0 font-8-tab">Overline</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Color</h5>
<div class="row color-swatches">
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
<div class="color-swatch">
<div class="color-swatch-header bg-maintext">
</div>
<div class="color-swatch-body">
<h5 class="color-swatch-body-label">Main Text</h5>
<p class="color-swatch-body-value">#363431</p>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
<div class="color-swatch">
<div class="color-swatch-header bg-subtext">
</div>
<div class="color-swatch-body">
<h5 class="color-swatch-body-label">Sub Text</h5>
<p class="color-swatch-body-value">#5F5F5F</p>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
<div class="color-swatch">
<div class="color-swatch-header bg-placeholder">
</div>
<div class="color-swatch-body">
<h5 class="color-swatch-body-label">Placeholder</h5>
<p class="color-swatch-body-value">#7A7A7A</p>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
<div class="color-swatch">
<div class="color-swatch-header bg-disabled">
</div>
<div class="color-swatch-body">
<h5 class="color-swatch-body-label">Disabled</h5>
<p class="color-swatch-body-value">#363431 50%</p>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6">
<div class="color-swatch">
<div class="color-swatch-header link">
</div>
<div class="color-swatch-body">
<h5 class="color-swatch-body-label">Link</h5>
<p class="color-swatch-body-value">#167DF5</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>