00 Principles

This page is the living reference for misterburton.com: the tokens, components, and patterns the site actually ships. When extending the site, reuse an existing pattern before inventing a new one, then document anything new here.

Four principles shape every decision.

• Accessibility first. Semantic HTML, keyboard support, reduced-motion fallbacks, and AA contrast are requirements, not enhancements.
• Terminal aesthetic. Black background, monospaced metadata, CRT artifacts. The site looks like the tools that built it.
• Unintentionally Moody. High-contrast black and white photography sets the palette; the interface stays out of its way.
• Eleven languages, one system. Every component survives translation, RTL layouts, non-Latin scripts, text expansion, and audio narration.

01 Foundations

The foundations of this design system are my photographs, a style I've long referred to as Unintentionally Moody.

function initDesignSystem() {
    console.log("Clean & Moody initialized");
}

Content sits in a single centered column with a maximum width of 38rem, padded by --container-padding (2rem, or 1.5rem below 768px). Full-bleed media breaks out of the column with negative margins equal to that padding, reaching the viewport edge. Vertical rhythm uses rem steps; sections, labels, and demos space themselves at 1rem to 4rem intervals rather than a fixed scale.

Layout is desktop-first with three breakpoints. 768px is the primary one: container padding tightens, type scales down, and multi-column grids collapse. 640px stacks the demo button grids on this page, and 480px compresses table padding and type for small phones.

02 Navigation & Global UI

Navigation stays persistent yet unobtrusive: breadcrumbs for deep linking and a hamburger menu for quick section jumps.

The hamburger menu in the top-right corner of this page demonstrates section navigation. Click it to see the overlay menu with smooth scroll-to-section behavior.

Tooltips use the native title attribute: they appear after the browser's standard hover delay, and assistive technology reads them as accessible descriptions.

[demo]

Interactive narration controls for article playback. Includes a primary trigger button (top) and fixed viewport controls (bottom) that appear automatically as the user scrolls through the content.

03 Media & Layout

Images and videos are responsive and lazy-loaded. Captions add context without cluttering the visual field.

Full-width, responsive containers that host varied content, from Three.js canvases and video to SVG animations and third-party embeds, while keeping visual consistency and fast loading.

Fig 1.0: A sample image caption with muted typography.

04 Interactive Components

Interactive components stay intuitive and accessible. Animations and feedback keep the experience smooth.

npm install gsap three

Visualization containers handle both SVG and Three.js canvas elements, with a consistent framework for interactive data displays across the project.

05 Localization

Localization is implemented using Claude Opus 4.5 to provide dynamic translation of site content. Translations are cached server-side via Vercel KV, so language switching is instant on later visits without extra API calls. A persistent flag toggle in the primary navigation opens a menu of 11 languages that cover over 75% of the world's population.

The language selector is injected into the navigation bar. Tap it and a searchable dropdown appears for picking a target language. Languages with audio narration display a speaker icon (🔊). Transitions between languages use a fade so the layout doesn't jump. For non-Latin scripts, the matching IBM Plex cuts load automatically (e.g. IBM Plex Sans Arabic, Devanagari, Japanese, and Korean), so every language stays within one consistent type family.

06 Callouts & Notifications

Specialized containers that call out information or take contextual input.

Non-blocking feedback messages that appear at the bottom-right of the viewport. Use toastManager.show(message, options) to trigger them programmatically.

07 Mathematical Equations

For complex, multi-line, or centered mathematical expressions, use the .equation-block container. It handles spacing, centering, and overflow for KaTeX-rendered content.

08 Accessibility

Accessibility is a first-class citizen of this design system. Semantic HTML, ARIA landmarks, and dynamic announcers give everyone a solid experience.

Interactive audio narration runs on all content pages so visitors can listen to articles instead of reading. The narration system uses ElevenLabs' voice synthesis and includes keyboard shortcuts (Option + P) for quick access. Narration is available in eleven languages serving over three-quarters of the world's population: English, Spanish, Chinese, Hindi, Arabic, French, Portuguese, Russian, Indonesian, Japanese, and Korean. It helps people with visual impairments, reading difficulties, cognitive disabilities, or anyone who prefers learning by ear.

A hidden-by-default link at the top of every page allows keyboard users to bypass global navigation and jump directly to the primary content.

Semantic landmarks give screen readers a clear map of the page structure.

Off-screen live regions provide real-time feedback for dynamic actions like carousel transitions or audio narration progress.

<div id="live-announcer" class="sr-only" aria-live="polite" role="status"></div>

Users who prefer reduced motion (due to vestibular disorders, motion sensitivity, or personal preference) are automatically accommodated. When prefers-reduced-motion: reduce is detected, all CSS animations and transitions are disabled or replaced with instant state changes. That covers page transitions, modal animations, hover effects, and the moving emphasis shown during narration.

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

All text colors meet WCAG AA contrast requirements against the black background (#000000). Primary text (#F2F2F2) achieves a 17.4:1 ratio, body text (#BEBEBE) achieves 11.5:1, secondary text (#888888) achieves 5.93:1, and muted text (#9A9A9A) achieves 7.4:1. The inactive token (#555555) is reserved for decorative and transient states, like paragraphs dimmed during narration, never for standalone text.

All interactive elements are fully keyboard accessible. Focus indicators use a consistent 2px solid ring in the primary text color, offset 2px from the element, visible against both dark and light surfaces. Tab order follows logical reading order, and skip links let people jump past repetitive navigation.

Modal dialogs implement proper focus trapping to prevent keyboard users from accidentally navigating outside the modal while it's open. When a modal opens, focus moves to the first interactive element. When closed, focus returns to the element that triggered the modal. It follows the WAI-ARIA dialog design pattern.

// Focus trap implementation
function handleTabKey(e) {
    if (e.key !== 'Tab') return;
    const focusable = modal.querySelectorAll('button, input, textarea');
    if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
    }
}

Primary interactive elements such as navigation buttons (menu toggle, flag toggle) and audio controls meet or exceed the recommended 44x44 pixel minimum touch target size. The design balances accessibility with visual aesthetics, giving each control enough tap area without disrupting the layout.

Full right-to-left (RTL) support is implemented for Arabic, Hebrew, Persian, Urdu, and other RTL languages. When an RTL language is selected, the dir="rtl" attribute is automatically applied to the document, and CSS handles layout mirroring including navigation positioning, text alignment, border directions, and icon flipping.

/* RTL layout adjustments */
[dir="rtl"] .breadcrumb-header h1 {
    flex-direction: row-reverse;
}

[dir="rtl"] .section-nav {
    right: auto;
    left: 2rem;
}

[dir="rtl"] blockquote {
    border-left: none;
    border-right: 3px solid rgba(255, 255, 255, 0.2);
}

Each page maintains a single <h1> element for the page title, with subsequent headings following a logical hierarchy (h2, h3, h4). This structure enables screen reader users to navigate efficiently using heading shortcuts and understand the document outline.

09 Brand Identity

The mark is a single-color SVG monogram drawn from the letters m and b. It renders in near-white on black at small sizes: 40px wide in page headers (32px on mobile) and 27×30px in the footer. Give it clear space of about half its width on every side. Don't recolor it, outline it, or set it on photography.

Favicons are SVGs with light and dark variants swapped by prefers-color-scheme, so the mark stays legible in any browser theme. This page ships its own pair; every other page shares the root set.

The home page hero runs video through WebGL shaders that imitate a CRT monitor: scanlines, static, RGB shift, and randomized glitches. That screen sets the terminal tone for the whole system. Subpages echo it with monospaced labels and the logo glitch rather than repeating the full effect.

Copy is plain, specific, and first person. State facts directly, skip puffery, and end sections with content rather than summaries. Headings use sentence case. The site follows its own anti-AI writing guide, which bans formulaic transitions, negative parallelisms, and decorative vocabulary; new copy on this page passes the same linter.

The logo in the header above demonstrates the glitch animation. Below is the actual site footer, which demonstrates the branding in its terminal state.

10 Motion

Motion is quick and quiet. The base token --transition-base (0.3s ease) drives most state changes; hovers and small reveals run at 0.2s, and entrances use ease-out curves so elements settle into place.

Three kinds of movement appear across the site: opacity and color fades for state changes (hover, focus, language switches), GSAP-driven smooth scrolling for section navigation, and the logo glitch shown in the header above, a GSAP timeline that displaces the logo with SVG turbulence and RGB-shift filters every five to seven seconds.

Under prefers-reduced-motion: reduce, every animation and transition collapses to a near-zero duration: language-switch fades become instant swaps, the home page never auto-scrolls, and narration's moving emphasis stays fixed in place.

11 Iconography

Icons are inline SVGs from Google's Material Symbols set, filled with currentColor or the fixed gray #888888 and sized 20 to 24 pixels. Inlining keeps them styleable from CSS and avoids extra network requests.

The working inventory: hamburger menu, back arrow, play, pause, close, copy, and send. Icon-only buttons always carry an aria-label; decorative icons inside labeled controls stay unlabeled so screen readers announce each control once.

Languages use flag emoji instead of SVG flags: they render natively on every platform and cost nothing to load. The speaker emoji (🔊) marks languages with audio narration.