Style Guide

This page exists to display every HTML element the site’s stylesheet handles. It is a reference for design consistency, not a page meant for visitors.

Color Palette

The site’s colors shift with the time of day. Use the switcher above to see each palette. The swatches below read from the live CSS custom properties.

Headings

The heading hierarchy uses Cormorant for display type. What follows is each level rendered in sequence.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Paragraph Text

Body text is set in Crimson, a serif face designed for extended reading. The measure is capped at 62 characters to keep lines comfortable. Here is a second paragraph to show vertical rhythm between blocks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A third paragraph follows. Notice the spacing between paragraphs and how the line height carries the eye down the page without crowding.

Inline Elements

This sentence contains bold text and italic text and bold italic text together. Here is some inline code within a sentence. Here is a link to another page and here is a visited link for comparison. Here is strikethrough text for completeness.

Blockquote

The universe is not only queerer than we suppose, but queerer than we can suppose.

A blockquote with multiple paragraphs:

The first paragraph of the quotation sits here, establishing the thought.

The second paragraph continues it. Notice how the blockquote container handles the vertical spacing between them.

Unordered List

• First item in the list
• Second item, which is longer to show how wrapping behaves when the text extends beyond a single line and needs to break naturally
• Third item
• Fourth item

Ordered List

1. First numbered item
2. Second numbered item
3. Third numbered item, again with enough text to demonstrate line wrapping within a list item context
4. Fourth numbered item

Nested Lists

• Outer item one
  • Inner item one
  • Inner item two
• Outer item two
  • Inner item one
    • Deeply nested item

1. First outer
   1. First inner
   2. Second inner
2. Second outer

Horizontal Rule

Text above the rule.

Text below the rule.

Code Block

function greet(name) {
  return `Hello, ${name}`;
}

const message = greet("world");
console.log(message);

Table

Definition-Style Content

Term one

Definition of the first term, explaining what it means in sufficient detail.

Term two

Definition of the second term.

Image

Mixed Content

Here is a paragraph that leads into a list:

• Item containing bold text and a link
• Item with inline code and emphasis
• A plain item for contrast

Followed by a blockquote:

A quoted passage that comes after a list, testing the vertical rhythm between different block-level elements in sequence.

And then back to a paragraph. This sequence — paragraph, list, blockquote, paragraph — is the most common content pattern on the site.

Small Text

The following uses the small element: This text is rendered smaller, used for fine print or secondary information.

Superscript and Subscript

This is a footnote reference¹ and this is a chemical formula: H₂O.

Abbreviation

The HTML specification defines the structure of web pages.

Keyboard Input

Press Ctrl + S to save.

Mark

You can highlight text to draw attention to it.