constantx

π-shaped tech innovator

Styleguide
6/1/2025

Styleguide

This is a comprehensive styleguide demonstrating all supported Markdown elements and their visual styling in articles. Each section explains the purpose, appearance, and appropriate usage of different content types.

Colors (WIP)

Main
Brand
AI
Status
Success
Warning
Error
Semantic
Hot
Cool
Bright
Core
Background
Primary
Secondary
Muted
Accent
Border

Headings

Headings create a clear content hierarchy and improve readability. They’re styled with consistent typography scaling and spacing, with larger sizes on desktop devices.

Purpose & Styling

H1 - Main Title

H2 - Major Section

H3 - Subsection

H4 - Sub-subsection

H5 - Minor Heading
H6 - Small Label

Text Formatting

Purpose & Styling

Text formatting provides semantic meaning and visual emphasis. All text uses responsive sizing (larger on desktop) with carefully chosen line heights for readability.

Regular paragraph text flows naturally with generous line spacing (1.7) and uses the full column width with responsive breakpoints. Paragraphs are styled with text-lg on medium screens and above for enhanced readability.

Bold text (**bold**) uses semibold font weight to create strong emphasis without being too heavy. Use for important terms, warnings, or key concepts.

Italic text (_italic_) provides subtle emphasis for book titles, foreign words, or gentle highlighting.

Links are styled with brand color underlines positioned below the text (underline-offset-4) for a clean, modern appearance. They include hover states for better interaction feedback.

Images

Purpose & Styling

Images are automatically responsive and styled with rounded corners, subtle shadows, and border styling. They center themselves within their grid column and include proper alt text for accessibility.

![Alt text](./path/image.jpg)

example image

Features:

Blockquotes

Purpose & Styling

Blockquotes highlight important excerpts, testimonials, or referenced content. They feature a branded left border, muted background, and italic styling to distinguish them from regular text.

This is a basic blockquote with italic styling and a branded left border. The background uses a muted color to create visual separation while maintaining readability.

Note: You can use Markdown syntax within blockquotes for additional formatting.

Advanced Blockquotes with Citations

For quotes with attribution, use the <cite> tag and footnote references:

To see the world, things dangerous to come to, to see behind walls, draw closer, to find each other, and to feel. That is the purpose of life.

— The Secret Life of Walter Mitty1

Code Elements

Inline Code

Use inline code for short code snippets, variable names, or technical terms. Styled with monospace font, muted background, and rounded corners.

Code Blocks

Code blocks support syntax highlighting and are styled with consistent spacing and borders. They span wider columns for better readability of longer lines.

// JavaScript example with syntax highlighting
function greetUser(name) {
  return `Hello, ${name}! Welcome to the site.`;
}

const message = greetUser("Developer");
console.log(message);

<!-- HTML example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Clean, Semantic HTML</title>
  </head>
  <body>
    <main>
      <h1>Well-structured content</h1>
      <p>Accessible and semantic markup.</p>
    </main>
  </body>
</html>

Features:

Lists

Purpose & Styling

Lists organize information hierarchically with proper indentation and spacing. Both ordered and unordered lists support nesting and maintain consistent typography.

Unordered Lists

Use for items without specific order or priority:

Ordered Lists

Use for sequential steps, rankings, or prioritized content:

  1. First step - Initial action or highest priority
  2. Second step - Follow-up action or next priority
  3. Third step - Final action or lowest priority

Nested Lists

Combine different list types for complex information hierarchy:

Tables

Purpose & Styling

Tables present structured data with clear headers, alternating row colors, and responsive design. They feature rounded corners and proper border styling.

Element TypePurposeStyling Features
HeadingsContent hierarchyResponsive typography, consistent spacing
ParagraphsBody contentOptimized line height, responsive text size
CodeTechnical contentMonospace font, syntax highlighting
ImagesVisual contentResponsive, rounded corners, shadows

Features:

Special Text Elements

Purpose & Styling

Special text elements provide semantic meaning and enhanced functionality:

Keyboard Input Styling

Keyboard elements (<kbd>) are styled to look like actual keyboard keys with:

Grid Layout System

Purpose & Styling

The layout uses a 6-column CSS Grid system that provides flexible content positioning while maintaining readability and visual hierarchy.

Default Content Positioning

Regular text content (paragraphs, headings, lists) automatically positions itself in the optimal reading columns:

Special Layout Classes

col-full: Spans all 6 columns. Perfect for full-width content like banners, hero images, or important announcements that need maximum visual impact.

col-wide: Spans columns 2-6. Ideal for content that needs more space than regular text but should maintain some margin, such as large code blocks, data tables, or featured images.

col-left-sidebar: Narrow left column (columns 1-2). Perfect for metadata, author information, publication dates, or supplementary notes that complement the main content.

col-right-sidebar: Narrow right column (columns 5-6). Excellent for pull quotes, call-out boxes, related links, or highlighted information that supports the main narrative.

Usage Guidelines

Interactive Elements

Footnotes

Footnotes provide additional context without interrupting the main flow. They’re positioned in a dedicated area with clear references and return links2.

All links include:

Responsive Design Features

Typography Scaling

Grid Responsiveness

Content Adaptation

Accessibility Features

Semantic HTML

Color and Contrast

Typography

Usage Notes

This styleguide serves as both a visual reference and a comprehensive guide for creating accessible, well-designed content that works beautifully across all devices and user preferences.

Footnotes

  1. https://en.wikipedia.org/wiki/The_Secret_Life_of_Walter_Mitty_(2013_film) ↩

  2. Footnotes appear at the bottom with smaller text and muted styling, maintaining readability while providing supplementary information. ↩