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
- Ordered list item
- Another item
- Nested item
- 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 |