branden higby

styleguide

Typography

HeadingFont Size

h1

1.75em

h2

1.5647em

h3

1.399em

h4

1.209em
h5
1.1184em

Fonts

Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, erat non laoreet fringilla, ex tellus commodo tellus, vel dignissim elit elit at neque. Sed fermentum dignissim sodales. Vivamus a nisl diam. Donec a orci ligula. Donec feugiat leo sed magna ultricies ullamcorper. Integer a fermentum quam.[1]

IBM Plex Mono

Phasellus sit amet lectus nec tortor tempus posuere vitae id magna. Donec ullamcorper, purus id ultricies condimentum, velit elit facilisis leo, id interdum velit tellus eget risus. Fusce condimentum tincidunt ipsum, non varius felis ultricies a. Integer tincidunt mi a odio maximus semper. Ut pharetra urna vel quam ultricies, vehicula ornare urna lacinia.[2]

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Code

This is how inlined code looks like. [3]

You can press B A for a secret.

<!-- This is a pre with HTML syntax highlighting -->

<body>
  <p>My favorite number is <code class="higby">65</code>!</p>
</body>

Colors

Grid

Elements

Images

Example Kitten
Images Can Be Captioned

HR


Blockquotes

Here's a blockquote using the cite tag[4]:

...a Blight always upholds their end of the deal.Alador Blight

And one without:

This site is made with Eleventy

Tables

NameResponsible
Count ChoculaActs responsible, is not
Franken BerryIs capable, but isn't
Boo BerryOnly when alone
Fruit BrutePhysically incapable
Yummy MummyInsists they're the most responsible, isn't

  1. Here is the footnote. ↩︎

  2. Here is the footnote. ↩︎

  3. Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
    belong to the previous footnote. ↩︎

  4. Here is the footnote. ↩︎