Style Guide

This is a style guide page.

Images

Headings

Heading 1 — Display type

Heading 2 — Section header

Heading 3 — Subsection

Heading 4 — Minor header

Paragraph

This is body text. It should be readable, calm, and consistent in both light and dark mode.

Here’s a second line to check rhythm and spacing.

Inline links

A normal inline link looks like this: Curabitur blandit.

An external inline link looks like this: Go to Google.

Lists

  • Unordered list item
  • Another item
    • Nested item
    • Nested item
  1. Ordered list item
  2. Another item
    1. Nested item
    2. Nested item

Divider


Quote (Block Quote)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Curabitur blandit tempus porttitor.

 

Pull Quote (Pullquote block)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor.

—Pull quote cite

Code (inline)

Use docker compose exec for quick checks.

Bash
docker compose exec app php -v
docker compose exec app php occ -V
Code language: Bash (bash)
PHP
<?php
/**
 * Fetch and cache user profile data.
 */
function get_user_profile( int $user_id ): array {
    $cache_key = "user_profile_{$user_id}";
    $cached    = wp_cache_get( $cache_key, 'myapp' );

    if ( $cached !== false ) {
        return $cached;
    }

    $user = get_userdata( $user_id );

    if ( ! $user ) {
        return [];
    }

    $profile = [
        'id'    => $user->ID,
        'name'  => $user->display_name,
        'email' => $user->user_email,
        'roles' => $user->roles,
    ];

    wp_cache_set( $cache_key, $profile, 'myapp', 3600 );

    return $profile;
}
Code language: PHP (php)
JavaScript
/**
 * Debounce a function call by a given delay.
 */
function debounce( fn, delay = 300 ) {
    let timer;

    return function ( ...args ) {
        clearTimeout( timer );
        timer = setTimeout( () => fn.apply( this, args ), delay );
    };
}

const handleSearch = debounce( async ( query ) => {
    if ( query.length < 3 ) return;

    const res  = await fetch( `/api/search?q=${encodeURIComponent( query )}` );
    const data = await res.json();

    console.log( `Found ${data.results.length} results` );
}, 400 );
Code language: JavaScript (javascript)
Python
import json
from pathlib import Path
from datetime import datetime


def load_config(filepath: str) -> dict:
    """Load and validate a JSON config file."""
    path = Path(filepath)

    if not path.exists():
        raise FileNotFoundError(f"Config not found: {filepath}")

    with path.open("r", encoding="utf-8") as f:
        config = json.load(f)

    config.setdefault("version", "1.0")
    config["loaded_at"] = datetime.utcnow().isoformat()

    return config


if __name__ == "__main__":
    cfg = load_config("settings.json")
    print(f"Loaded config v{cfg['version']}")
Code language: Python (python)

Table

Column Value
Font Inter
Accent 3896C6