Design
"Design is not just what it looks like and feels like. Design is how it works"
— Steve Jobs
Core Principles
The foundational design philosophy that guides every decision
Gallery Aesthetic
Inspired by museum and gallery design. Generous whitespace, minimal distractions, content as art.
Dramatic Typography
Massive display type with ultra-light weights (200-300). Negative letter-spacing for impact.
Restrained Color
Monochromatic base with a single accent color. Red used sparingly for maximum impact.
Smooth Animations
GSAP-powered animations with power easing curves. Damped, natural-feeling interactions.
Responsive Fluidity
Fluid typography using clamp(). Layouts that adapt gracefully from mobile to desktop.
Micro-interactions
Subtle hover states, color transitions, and movement that reward exploration.
Color Palette
Six carefully selected colors for a timeless, gallery-like aesthetic
Black
Primary background, text on light backgrounds
White
Primary text on dark backgrounds, clean accents
Cream
Secondary background, warm contrast sections
Red
Primary accent, interactive elements, emphasis
Gray
Muted text, labels, secondary information
Dark Gray
Body text on light backgrounds, subtle contrast
Typography
A single font throughout the entire website. Creating a uniform and cohesive look.
Outfit
A geometric sans-serif typeface with a modern, clean aesthetic. Used for all headings and body text.
Type Scale
Display XL
Size: clamp(6rem, 20vw, 20rem)Weight: 200Hero titles, massive display type
Display L
Size: clamp(4rem, 12vw, 10rem)Weight: 200Page headers, section titles
Display M
Size: clamp(3rem, 8vw, 6rem)Weight: 200Large headings
Heading XL
Size: 3remWeight: 200Major section headings
Heading L
Size: 2remWeight: 300Card titles, subsection headings
Heading M
Size: 1.5remWeight: 300Component headings
Body L
Size: 1.1remWeight: 300Subheadings, introductions
Body
Size: 1remWeight: 300Body text, descriptions
Body S
Size: 0.95remWeight: 300Secondary text
Label
Size: 0.7remWeight: 400Labels, eyebrows, uppercase text
Caption
Size: 0.65remWeight: 400Captions, metadata
Spacing System
Consistent spacing values for rhythm and hierarchy
Section Padding
6rem 3remMain section containers
Section Margin
6remBetween major sections
Card Padding
2.5remInside cards and panels
Element Gap
1.5rem - 2remBetween related elements
Tight Gap
0.5rem - 1remBetween closely related items
Mobile Padding
2rem - 4remReduced padding on mobile
Interaction & Animation
Smooth, natural-feeling interactions powered by GSAP
Easing Curves
Power easing (power2-power5) for smooth deceleration. Elastic easing for playful spring-back effects.
ease: 'power4.out', 'elastic.out(1, 0.5)'Hover States
Subtle color transitions (0.3s), background changes, and red accent reveals on interactive elements.
transition: color 0.3s easeScroll Animations
GSAP ScrollTrigger for entrance animations. Staggered reveals with opacity and Y-axis movement.
stagger: 0.1, y: 80, opacity: 0Damped Movement
Long durations (1.2s+) with strong easing for natural, physics-inspired interactions.
duration: 1.2, ease: 'power5.out'Tuner
Advanced audio processing and synthesis running directly in the browser
Web Audio API
Core engine for low-latency audio capture, analysis, and synthesis without external plugins.
AudioContext, AnalyserNode, OscillatorNodeAutocorrelation
Pitch detection algorithm that compares the signal with time-shifted versions of itself to find the fundamental frequency.
RMS Thresholding, Zero-crossing refinementFocus On Sustain
Smart filtering that ignores the initial transient attack and averages the stable sustain phase for a rock-steady readout.
Attack Lockout, Rolling Buffer Average3D Visualization
Three.js powered waveform reacting to frequency analysis data with custom shaders for the liquid motion effect.
Vertex Displacement, Fragment Shaders