mirror of
https://github.com/penpot/penpot-export.git
synced 2025-01-21 14:12:29 -05:00
62 lines
3.5 KiB
HTML
62 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>penpot-export SCSS demo</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Work%20Sans:400,700' rel='stylesheet'>
|
|
<link rel="stylesheet" href="./styles/styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>Responsive Typography</h1>
|
|
<h2>(Resize your 🖥 browser to < 768px to emulate a 📱)</h2>
|
|
<div>
|
|
<span class="Title_Large">Title Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="Title_Medium">Title Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="Title_Small">Title Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="Body_Large">Body Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="Body_Medium">Body Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="Body_Small">Body Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="Body_Small_Uppercase">Body Small Uppercase</span>
|
|
</div>
|
|
<h1>Colors</h1>
|
|
<ul>
|
|
<li><output class="patch bg-Neutral_100"></output><label>Neutral 100</label></li>
|
|
<li><output class="patch bg-Neutral_200"></output><label>Neutral 200</label></li>
|
|
<li><output class="patch bg-Neutral_300"></output><label>Neutral 300</label></li>
|
|
<li><output class="patch bg-Neutral_400"></output><label>Neutral 400</label></li>
|
|
<li><output class="patch bg-Neutral_500"></output><label>Neutral 500</label></li>
|
|
<li><output class="patch bg-Neutral_600"></output><label>Neutral 600</label></li>
|
|
<li><output class="patch bg-Neutral_700"></output><label>Neutral 700</label></li>
|
|
<li><output class="patch bg-Neutral_800"></output><label>Neutral 800</label></li>
|
|
<li><output class="patch bg-Neutral_900"></output><label>Neutral 900</label></li>
|
|
<li><output class="patch bg-Primary_100"></output><label>Primary 100</label></li>
|
|
<li><output class="patch bg-Primary_200"></output><label>Primary 200</label></li>
|
|
<li><output class="patch bg-Primary_300"></output><label>Primary 300</label></li>
|
|
<li><output class="patch bg-Primary_400"></output><label>Primary 400</label></li>
|
|
<li><output class="patch bg-Primary_500"></output><label>Primary 500</label></li>
|
|
<li><output class="patch bg-Primary_600"></output><label>Primary 600</label></li>
|
|
<li><output class="patch bg-Primary_700"></output><label>Primary 700</label></li>
|
|
<li><output class="patch bg-Primary_800"></output><label>Primary 800</label></li>
|
|
<li><output class="patch bg-Primary_900"></output><label>Primary 900</label></li>
|
|
<li><output class="patch bg-Secondary_100"></output><label>Secondary 100</label></li>
|
|
<li><output class="patch bg-Secondary_200"></output><label>Secondary 200</label></li>
|
|
<li><output class="patch bg-Secondary_300"></output><label>Secondary 300</label></li>
|
|
<li><output class="patch bg-Secondary_400"></output><label>Secondary 400</label></li>
|
|
<li><output class="patch bg-Secondary_500"></output><label>Secondary 500</label></li>
|
|
<li><output class="patch bg-Secondary_600"></output><label>Secondary 600</label></li>
|
|
<li><output class="patch bg-Secondary_700"></output><label>Secondary 700</label></li>
|
|
<li><output class="patch bg-Secondary_800"></output><label>Secondary 800</label></li>
|
|
<li><output class="patch bg-Secondary_900"></output><label>Secondary 900</label></li>
|
|
</ul>
|
|
</body>
|
|
</html>
|