Type scale

Display — 40px/700

Heading 1 — 32px/600

Heading 2 — 24px/600

Heading 3 — 20px/600

Heading 4 — 18px/500

Body — 16px/400 — The quick brown fox jumps over the lazy dog. This is what most content looks like at reading length.

Small — 14px — Secondary text, metadata, timestamps, captions

Overline — 12px/600 — LABELS, CATEGORIES, TAGS

Mono — 16px — Code, terminal output, file paths

Mono small — 14px — Inline code references

Callouts

📝 Note

This is a general informational callout. Use it to draw attention to supplementary details the reader might find useful. It should catch the eye without alarming.

💡 Tip

Tips highlight best practices or shortcuts. For example, you can press Ctrl+K to open the command palette in most editors. These should feel helpful and encouraging.

⚠️ Warning

Warnings flag potential pitfalls. Double-check your filing deadlines — missing them can reset the entire process. These should create a pause without panic.

🔴 Danger

Danger callouts signal breaking changes or irreversible actions. Running this command will permanently delete all local data. These should stop the reader in their tracks.

Dense data table

Model	Params	MMLU	HumanEval	GSM8K	Format	License	Apple Silicon
Qwen2.5-7B-Instruct	7.6B	74.2	84.1	83.8	MLX 4-bit	Apache 2.0	M1+
Llama-3.1-8B-Instruct	8.0B	73.0	72.6	84.4	MLX 4-bit	Llama 3.1	M1+
Gemma-2-9B-IT	9.2B	71.3	54.3	76.7	MLX 4-bit	Gemma	M2+
Phi-3.5-mini-instruct	3.8B	69.0	62.8	86.2	MLX 4-bit	MIT	M1+
Mistral-7B-Instruct-v0.3	7.2B	62.5	38.4	52.2	MLX 4-bit	Apache 2.0	M1+
Yi-1.5-9B-Chat	8.8B	69.5	46.3	68.2	MLX 4-bit	Apache 2.0	M2+

Data-dense cards

UITag v0.4.2

1.2s

Avg detection time per screen

94.3% accuracy

MIT license

vLLM-MLX

Models validated on M-series

6 VLMs

3 chip gens

Interagent

Agent entities coordinated

44 projects

3 runtimes

Bento grid (3x1)

🔍

Detect

Apple Vision identifies text regions. VLM handles icons and non-text elements selectively.

🏷️

Label

Every element gets a bounding box, semantic label, and pixel coordinates. Machine-readable in under a second.

🤖

Act

Downstream agents use structured output to click, type, and navigate — no pixel guessing, no prompt hacking.

Accessible form

Subscribe to updates

Headings

📝 Note

Use h2 tags instead of h1 tags in the post. Too many h1 tags on a single page can impact SEO. The post title serves as the h1.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs and inline styles

I love building tools. My favourite part is when something actually works in the field — not just in tests.

Here’s a footnote, ¹ and here’s another one. ²

Documentation exists to transfer understanding, not to signal effort. Every formatting choice — a bullet, a bold phrase, a header — costs reader attention. Spend that attention on content, not structure.

Code blocks

// siteConfig.ts
export const SITE = {
  website: "https://swaylenhayes.com/",
  author: "Swaylen Hayes",
  desc: "AI tooling, Apple ecosystem, automation.",
  title: "~/swaylen",
  lightAndDarkMode: true,
  postsPerPage: 8,
};

# inference.py
def run_detection(image_path: str, model: str = "qwen2-vl-7b") -> dict:
    """Run hybrid UI detection on a screenshot."""
    text_regions = apple_vision.detect_text(image_path)
    icon_regions = vlm.detect_icons(image_path, model=model)
    return merge_regions(text_regions, icon_regions)

Inline code looks like this: npm run build or python -m pytest.

Tables

Item	Count
X-Wing	1
Y-Wing	2
A-Wing	3

Lists

Item 1
Item 2
- Sub item 1
- Sub item 2
Item 3

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

Build a lightsaber
Pass the Jedi Trials
Train a padawan

Images

X-Wing Starfighter

Keyboard shortcuts

CTRL + ALT + Delete

Do or do not. There is no try.

H₂O and E=mc²

This is the first footnote. ↩
This is the second footnote. ↩

Site Launch