A living style guide for misterburton.com.
01 Foundations
The foundations of this design system are my photographs, a style I've long referred to as Unintentionally Moody.
Color PaletteThe Quick Brown Fox (h2)
The Quick Brown Fox (h3)
The Quick Brown Fox Jumps Over the Lazy Dog (paragraph). Burton is an artist and designer living in San Francisco, California.
Note: Axis Std Light is used for English and languages requiring only standard Latin-1 characters. For non-Latin scripts (e.g., Arabic, Hindi, Japanese), the system automatically substitutes IBM Plex Sans, a globally comprehensive typeface, to ensure proper character rendering while preserving visual harmony with the primary brand aesthetic.
Home /
Note: Andale Mono is used for breadcrumbs and metadata in English. For non-Latin scripts, IBM Plex Mono is automatically substituted to ensure proper character rendering across all writing systems while preserving the high-end technical aesthetic.
function initDesignSystem() {
console.log("Clean & Moody initialized");
}Here is an example link showing the animated underline effect. Try selecting this text to see the custom selection highlight.
03 Media & Layout
Media is handled with care, ensuring that images and videos are responsive and lazy-loaded. Captions are used to provide context without cluttering the visual field.
Media ContainersFull-width, responsive containers designed to host diverse contentโfrom Three.js canvases and video to SVG animations and third-party embedsโwhile maintaining visual consistency and optimized loading performance.
Fig 1.0 โ A sample image caption with muted typography.
| Component | Status | Coverage |
|---|---|---|
| Foundations | Stable | 100% |
| Navigation | Stable | 100% |
| Media | In Progress | 85% |
04 Interactive Components
Interactive components are designed to be intuitive and accessible. Animations and feedback are used to ensure a smooth user experience.
Code Blocks with Copynpm install gsap threeClick to see the modal with form validation and success animation.
Visualization containers support both SVG and Three.js canvas elements, providing a consistent framework for interactive data displays across the project.
05 Localization
Localization is implemented using Gemini Flash 3 to provide dynamic translation of site content. Translations are cached server-side via Vercel KV, enabling instant language switching on subsequent visits without additional API calls. A persistent flag toggle in the primary navigation provides access to a searchable menu of over 100 languages.
Language Selector & DropdownThe language selector is injected into the navigation bar. Upon interaction, a searchable dropdown is presented, allowing for the selection of target languages. Languages with audio narration support display a speaker icon (๐) to indicate availability. Transitions between languages are handled with a fade effect to maintain visual continuity. For non-Latin scripts, both primary typefaces are automatically substituted: Axis Std Light is replaced with IBM Plex Sans, and Andale Mono is replaced with IBM Plex Mono. This ensures proper character rendering across all writing systems while preserving the design language.
06 Callouts & Notifications
Callout WrappersSpecialized containers for highlighting information or providing contextual input.
Common excludes to consider: drafts, archive, vendor, dist, build.
Pro tip
This aesthetic uses semi-transparent gradients and high-contrast accent borders to draw attention without breaking the moody design language.
Non-blocking feedback messages that appear at the bottom-right of the viewport. Use toastManager.show(message, options) to trigger them programmatically.
Success
Success
Information
Warning
Error
07 Mathematical Equations
Equation BlocksFor complex, multi-line, or centered mathematical expressions, the .equation-block container is used. This class ensures proper spacing, centering, and overflow handling for KaTeX-rendered content.
Mathematical expressions can also be used inline, such as the sigmoid function \(\tanh(z)\), or specific variables like \(x\), \(y\), and \(z\). The .katex-inline class handles the necessary vertical alignment and scaling for these elements.
08 Accessibility
Accessibility is a first-class citizen of this design system. A combination of semantic HTML, ARIA landmarks, and dynamic announcers is used to ensure a robust experience for all users.
Audio NarrationInteractive audio narration is provided for all content pages, enabling users to listen to articles. The narration system uses ElevenLabs' voice synthesis and includes keyboard shortcuts (Option + P) for quick access. Narration is available in six languages serving over half of the world's population: English, Spanish, Chinese, Hindi, Arabic, and French. This feature benefits users with visual impairments, reading difficulties, cognitive disabilities, or those who prefer auditory learning.
Skip LinksA hidden-by-default link at the top of every page allows keyboard users to bypass global navigation and jump directly to the primary content.
Landmarks & RolesSemantic landmarks are used to provide a clear map of the page structure for screen readers.
| Element/Role | Purpose |
|---|---|
<main> |
Identifies the primary content of the document. |
<nav> |
Groups navigation links (Global, Section, and Breadcrumbs). |
role="region" |
Identifies distinct sections of content, like carousels or galleries. |
role="status" |
Used with aria-live="polite" for non-interruptive updates. |
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>09 Brand Identity
Logo & FooterThe logo in the header above demonstrates the glitch animation. Below is the actual site footer, which demonstrates the branding in its terminal state.