0shot
Dec 1, 2025 4 min read Documentation

Style Guide & Components

This post demonstrates all the UI components and styling available in the 0shot theme.

Typography

Headings

Headings use Courier Prime with optional markers. The H2 heading above has a bottom border. H3 and below are simpler.

Text Formatting

Regular paragraph text uses the Ukiyo warm color palette. Here’s some bold text for emphasis and italic text for subtle emphasis. You can also use ==highlighted text== for important callouts and strikethrough for deleted content.

Here’s an external link and an [[internal-link]] in wiki-style format.

Inline code uses JetBrains Mono with a subtle background.

Callouts

Callouts support Obsidian-style syntax with collapsible headers.

Note Callout

This is a note callout. Use it for general information or side notes that supplement the main content.

Tip Callout

This is a tip callout. Use it for helpful suggestions, best practices, or pro tips.

Warning Callout

This is a warning callout. Use it for important caveats, potential pitfalls, or things to watch out for.

Danger Callout

This is a danger callout. Use it for critical warnings, breaking changes, or serious issues.

Quote Callout

“The best way to predict the future is to invent it.”

This is a quote callout. Use it for testimonials, citations, or memorable quotes.

Info Callout

This is an info callout. Similar to note, but with a blue accent for informational content.

Code Blocks

Inline code looks like const foo = "bar" within text.

Block code with syntax highlighting:

// JavaScript example
function calculateReadTime(content) {
  const words = content.split(/\s+/).length;
  const minutes = Math.ceil(words / 200);
  return `${minutes} min read`;
}
# Python example
def optimal_build(modifiers: list[str]) -> dict:
    """Given constraints, return the optimal system configuration."""
    return {
        "voice_input": "slurred_speech" in modifiers,
        "terminal_first": "limited_mobility" in modifiers,
        "ai_agents": True  # Always useful
    }
# Terminal commands
npm run dev
git push origin main

Lists

Unordered Lists

  • First level item
  • Another first level item
    • Second level with square bullet
    • Another second level
      • Third level with circle bullet
      • More nesting

Ordered Lists

  1. First step
  2. Second step
    1. Sub-step A
    2. Sub-step B
  3. Third step

Task Lists

  • Completed task
  • Pending task
  • Another pending task

Tables

ComponentDescriptionStatus
CalloutsObsidian-style collapsible✅ Done
Code blocksSyntax highlighting✅ Done
Dark modeTheme toggle✅ Done
TOCSticky table of contents✅ Done
Mobile menuHamburger navigation✅ Done

Blockquotes

Standard blockquotes for inline quotes:

This is a standard blockquote. It has a left border accent and subtle background. Good for short quotes or emphasis.

Multi-paragraph blockquotes work too.

Just keep adding content with the > prefix.

Buttons & Tags

Tags appear at the bottom of posts with the # prefix and link to tag pages.

Images

Images would go here with standard markdown syntax:

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

Horizontal Rules

Use --- for section breaks (like the ones throughout this post).

Post Meta

Posts display:

  • 📅 Date
  • ⏱️ Read time (auto-calculated)
  • 📁 Category (optional)
  • 🏷️ Tags

Theme Features

Dark Mode (Default)

  • Warm, cozy typewriter aesthetic
  • Ukiyo color palette
  • Easy on the eyes for long reading sessions

Light Mode

  • Toggle via sidebar settings
  • Maintains warmth with parchment tones
  • Same readability, different vibe

Heading Markers

  • Toggle via sidebar settings
  • Shows H1/H2/### prefixes when enabled
  • Obsidian-style visual hierarchy

Reading Progress

  • Top bar shows scroll progress
  • Helps readers track position in long posts

Table of Contents

  • Desktop: sticky right sidebar
  • Auto-generated from headings
  • Active state tracking on scroll

This is the style guide. Replace with real content when ready.

designcomponentsstyle-guide