Design Guide

This is the design guide for this site. This page shows native HTML elements as well as custom components that have been styled for this site. This page exists for the purpose of identifying which elements and components have styles specifically created for them and showcasing those styles. As such, this is not a typical page, and you will encounter a fair bit of lorem ipsum content below.

Below, I've left notes about some of the design choices and features of different elements, but those notes are not meant to be considered complete or exhaustive. For further documentation on use or modifying these styles, see the CSS file or the site's ReadMe page.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae et est laborum doloribus voluptatem veniam harum odio, dolorum in, veritatis sint, rem expedita iusto nihil?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum debitis id dolor autem saepe pariatur harum expedita, hic cumque tempore. Culpa quidem, eius numquam facilis.

Heading Level 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit recusandae quibusdam reiciendis quas, maxime atque cum veniam debitis consequuntur ea dolorum distinctio est quasi laborum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat quis asperiores, vitae cumque aspernatur adipisci neque, dolore eos accusantium quos, suscipit minima saepe aliquam.

Heading Level 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat amet cumque fuga, quas minus! Corrupti eligendi modi quisquam, tempora non optio maiores eum beatae recusandae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, illo, accusamus. Ea quis soluta nesciunt amet unde quia ex distinctio nam illo. Dolorem, dolor temporibus!

Heading Level 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis veniam, quisquam eaque vero saepe et laudantium aliquam doloribus neque repellendus. Unde, enim autem doloribus voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio earum praesentium nulla repellendus consequuntur magnam voluptatem? Natus nostrum minima, nesciunt cum mollitia et dolorem. Doloremque.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, voluptates quibusdam culpa totam ipsa placeat cupiditate cum, vel voluptatum ex id necessitatibus commodi! Reprehenderit, veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ratione, reiciendis voluptate rerum laboriosam molestiae, odio quibusdam minima rem voluptates expedita, temporibus provident modi ipsa!

Dark Mode & Light Mode

This site supports both dark and light modes. Change your OS or user agent preferences to change between modes.

Inline Elements

The a element. This element has unique styles for hover and focus states.

Here are some elements that appear bolded: the b element, the strong element.

Here are some elements that appear italicized: the i element, the em element, the cite element.

The ::selection pseudo-element is styled as well. Highlight this text to see it change color.

Here is the <mark> element: this text is marked/highlighed.

Here is the <code> element: this is the <code> element.

Here is the <kbd> element: Alt+D jumps your focus to the browser's URL/search bar.

Lists

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3
   1. List Item 3.1
   2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
   3. List Item 3.3
4. List Item 4

Unordered List

• List Item 1
• List Item 2
• List Item 3
  • List Item 3.1
  • List Item 3.2
    • List Item 3.2.1
    • List Item 3.2.2
  • List Item 3.3
• List Item 4

Description List

Definition Term 1

Definition Description 1

Definition Term 2

Definition Description 2

Tables

Block Level Elements

Block Level Code

<a href="#same-page-link-target">Jump to kittens!</a>  
<h2 id="same-page-link-target">Kittens!</a>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam error blanditiis et culpa ut vero ea quibusdam, consequatur natus quidem nihil officiis a porro accusamus accusantium facilis amet dolore beatae?

Details/Summary

Links & Buttons

Inline

Here is a standard inline link: Ann Leckie is one of my favorite authors. Links have unique states for hover and focus styles.

“Undercover” Links

Below is a set of “undercover” links. I use these in the header and the footer. They look more or less like simple, free-floating links, but they have a nice rounded outline which appears on focus and which gives the impression of being a button.

In a list of links, give the <ul> or <ol> element class="link-undercover--list", and give each link class="link-undercover", like so:

• About This Site
• Site Map

If you have one standalone undercover link, give it both of these classes: class="link-undercover link-undercover--standalone", like so:

“Turncoat” Links

Next up we have “turncoat” links. I use these for tag links after blog posts. They look like classic outline buttons, and in a focus or hover state, their colors flip. These links are often prefaced by a decorative SVG icon.

In a list of links, give the <ul> or <ol> element class="link-turncoat--list", and give each link class="link-turncoat", like so:

• publishing
• disability
• cartoons

If you have one standalone turncoat link, give it both of these classes: class="link-turncoat link-turncoat--standalone", like so:

The standalone turncoat links have some extra padding.

Footnotes

Here is a paragraph that includes an inline footnote reference.^{Footnote 1} As you can see, there is a <sup> element that includes an <a> element. The <a> includes visually hidden text that says, "Footnote". The <a> element links to a list item lower in the page.

Footnotes

1. Footnotes are an ordered list under a heading. After a footnote, there is a link to return users to the footnote reference in the text. That link visually appears as the ↩ icon, but has a unique accessible name provided via the aria-label attribute. ↩