Typography

Inter for words, Geist Mono for codes; one scale of sizes

Headings

Sizes and weights from the type scale.

title-1 · 24/32Page title

title-2 · 20/28Section title

title-3 · 16/24Card title

Show the code

<div class="w-100">
<div class="type-row">
<small>title-1 · 24/32</small>
<span class="title-1">Page title</span>
</div>
<div class="type-row">
<small>title-2 · 20/28</small>
<span class="title-2">Section title</span>
</div>
<div class="type-row">
<small>title-3 · 16/24</small>
<span class="title-3">Card title</span>
</div>
</div>

Text

Body, small and secondary text.

body · 14/20

A café and grocery with three stores in and around Portland, Maine.

fs-sm · muted

Updated at 17:30.

mono · numbers

R-041182 · $55.23 · 07110 01000 37

Show the code

<div class="w-100">
<div class="type-row">
<small>body · 14/20</small>
<p>A café and grocery with three stores in and around Portland, Maine.</p>
</div>
<div class="type-row">
<small>fs-sm · muted</small>
<p class="fs-sm muted">Updated at 17:30.</p>
</div>
<div class="type-row">
<small>mono · numbers</small>
<p class="mono">R-041182 · $55.23 · 07110 01000 37</p>
</div>
</div>

Quote and code

A customer’s words; a key to press.

“The best flat white in Portland, and they remember my order.”
A customer on Google

Press / to search. The receipt number is R-041182.

Show the code

<div class="stack w-100">
<blockquote class="quote">“The best flat white in Portland, and they remember my order.”<footer>A customer on Google</footer>
</blockquote>
<p>Press <kbd class="kbd">/</kbd> to search. The receipt number is <code class="mono">R-041182</code>.</p>
</div>

Lists

Bullets and numbers.

Coffee
Bakery
Grocery

Count the drawer
Check the totals
Close the till

Show the code

<div class="row w-100">
<div class="col-12 col-md-6">
<ul class="ps-4">
<li>Coffee</li>
<li>Bakery</li>
<li>Grocery</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ol class="ps-4">
<li>Count the drawer</li>
<li>Check the totals</li>
<li>Close the till</li>
</ol>
</div>
</div>