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.
- Step One: Establish the visual hierarchy.
- 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;
}