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");
}

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.

[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, and secondary text (#888888) achieves 5.93:1. The muted text token (#767676) maintains the minimum 4.5:1 ratio for normal text.

All interactive elements are fully keyboard accessible. Focus indicators use a consistent double-ring pattern (2px black inner, 2px white outer) that provides excellent visibility against both dark and light elements. 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 logo in the header above demonstrates the glitch animation. Below is the actual site footer, which demonstrates the branding in its terminal state.