Colors

Brand Base

Brand

Main

Primary Brand Color

Brand

Alt

Alternative and Support

Brand

Alt Dark

Darker elements and backgrounds

Brand

Alt Light

Backgrounds, text over dark bgs.

Brand

Highlight

Buttons, info, highlight text.

Brand

Highlight Alt

Alternative for Highlights

Heading Level 1 (H1)

The H1 is your page title. In design, it should be the most prominent element, establishing the primary topic of the page.

Heading Level 2 (H2)

H2s represent major sections. They help break up long-form content into digestible chapters for the reader.

Heading Level 3 (H3)

A level three heading provides sub-structure. It’s perfect for listing features or specific details within an H2 section.

Heading Level 4 (H4)

The H4 is a bridge between sub-sections and lists. It is often used for minor points or "Quick Tip" boxes.

Heading Level 5 (H5)

Heading 5 is a utility label. It is frequently used for metadata, sidebars, or resource lists.

Heading Level 6 (H6)

The H6 is the final tier. Use this for fine print, legal disclaimers, or figure captions that require a clear hierarchy but minimal visual weight. Paragraph text is the foundation of any design. Bold text is used for emphasis, while italicized text often denotes nuance. For technical writing, you may need to mention inline code within a sentence.

  • Unordered List Item One: Great for quick factss. 32323 2323
  • Unordered List Item Two: Keeps things organized.
  1. Step One: Establish the visual hierarchy.
  2. Step Two: Define consistent vertical rhythm.

And theres a quote:

"Design is not just what it looks like and feels like. Design is how it works. It should be intuitive, accessible, and above all, serve the user's intent." — Steve Jobs

And some code!

pre {
background-color: #1e1e1e; /* Dark theme for blocks */
color: #d4d4d4;
padding: 1.5em;
border-radius: 8px;
overflow-x: auto; /* Adds a scrollbar if code is too wide */
line-height: 1.5;
margin: 1.5em 0;
border: 1px solid #333;
}