# Nomadic Tribe — Design DNA Design profile extracted from [2019.makemepulse.com](https://2019.makemepulse.com/), an immersive WebGL interactive story by makemepulse. ## Overview A whimsical, illustrated 3D world where a tribal character embarks on a journey through fantastical landscapes. Combines low-poly stylized 3D art, multi-stem audio design, and cinematic scene transitions into a cohesive narrative experience. **Key characteristics:** - Warm parchment + forest green + golden amber palette - Gotham geometric sans-serif typography - Low-poly 3D characters with hand-painted textures - WebGL 1.0 rendering with GLTF/GLB models - Multi-stem adaptive audio system - Cinematic 3D wipe scene transitions - Noise/hatching overlays for organic texture --- ## Dimension 1: Design System (Measurable Tokens) ### Color | Role | Hex | Usage | |------|-----|-------| | Primary | `#f8f4ec` | Warm parchment background — dominant surface | | Secondary | `#2d4a3e` | Deep forest green — environment, vegetation, depth | | Accent | `#c8a87c` | Golden sand/amber — highlights, warm light, interactive emphasis | **Neutral scale** (warm parchment derived): ``` #f8f4ec → #e8e0d0 → #c8bfb0 → #8a7e6e → #4a4238 → #1a1612 ``` **Semantic colors:** - Success: `#6a9b7a` - Warning: `#d4a843` - Error: `#c45c4a` - Info: `#7a9bb5` **Surface colors:** - Background: `#f8f4ec` - Card: `rgba(255, 255, 255, 0.08)` - Elevated: `rgba(255, 255, 255, 0.12)` **Palette type:** Analogous **Contrast strategy:** High contrast between warm cream and dark 3D scenes. Vignette framing creates natural contrast isolation. ### Typography **Font families:** - Heading: `Gotham` - Body: `Gotham Book` - Fallback: `Noto Sans SC` **Type scale:** | Level | Size | Weight | Line Height | Tracking | |-------|------|--------|-------------|----------| | Display | 64px | 700 | 1.1 | -0.02em | | H1 | 36px | 700 | 1.2 | -0.01em | | H2 | 24px | 500 | 1.3 | 0 | | H3 | 18px | 500 | 1.4 | 0.01em | | Body | 12.8px | 400 | 1.6 | 0 | | Body Small | 12px | 400 | 1.5 | 0.02em | | Caption | 10px | 400 | 1.4 | 0.03em | | Overline | 12px | 700 | 1.2 | 0.15em | **Style notes:** Gotham is geometric sans-serif with clean, modern, slightly friendly character. Uppercase on buttons adds authority. Bridges professional and approachable. ### Spacing - **Base unit:** `8px` - **Scale:** `0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 120` - **Content density:** Spacious - **Section rhythm:** Full-screen canvas dominates. UI floats at edges with 40px padding. Very low content density on landing — the 3D scene IS the content. ### Layout - **Grid:** None — full-viewport canvas with absolutely-positioned UI overlays - **Max width:** `100vw` - **Columns:** 1 - **Gutter:** `40px` - **Breakpoints:** mobile-portrait, mobile-landscape, tablet, desktop - **Alignment:** Centered ### Shape - **Border radius:** small `4px`, medium `8px`, large `16px`, pill `999px` - **Border usage:** Subtle 1px semi-transparent white on UI panels (glass-like) - **Dividers:** None — separation via spatial positioning and opacity ### Elevation - **Shadow style:** Soft diffused - **Low:** `0 2px 8px rgba(0,0,0,0.15)` - **Medium:** `0 4px 20px rgba(0,0,0,0.25)` - **High:** `0 8px 40px rgba(0,0,0,0.4)` - **Depth cues:** 3D perspective + lighting + atmospheric fog. Vignette overlay. UI uses translucency over shadows. ### Motion - **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)` - **Duration scale:** micro `150ms`, normal `500ms`, macro `1000ms` - **Entrance:** Fade-in with subtle scale. Scene transitions use 3D wipe models. - **Exit:** Fade-out opacity (0.5s). Elements dissolve. - **Philosophy:** Cinematic — motion serves narrative. Camera gently sways, creating a living scene. ### Components - **Buttons:** Pill-shaped (175×58px), three-part image composition (left cap, center fill, right cap). scaleX transform on hover. Uppercase Gotham Bold, cream text `#f8f4ec`. - **Navigation:** Sequential: Start → Next → Next → Next → End. Forward-only. Cinematic 3D wipe transitions. - **Audio UI:** 32×32 toggle at bottom-right. Waveform bars from CSS spans (2px wide, scaleY animated). - **No forms, cards, modals, or lists** — this is an experience, not a traditional UI. --- ## Dimension 2: Design Style (Qualitative Perception) ### Aesthetic - **Mood:** whimsical, warm, magical, immersive, storybook - **Visual metaphor:** A living pop-up storybook — illustrated characters in a handcrafted world you can step into - **Era influence:** Modern fairy tale — contemporary 3D rendering applied to classic storybook aesthetics - **Genre:** Interactive storytelling / creative agency showcase - **Personality:** imaginative, playful, inviting, meticulous, cinematic - **Adjectives:** whimsical, handcrafted, atmospheric, warm, enchanted, low-poly, painterly ### Visual Language - **Complexity:** Rich - **Ornamentation:** Subtle accents — 3D world provides richness; UI chrome is minimal - **Whitespace:** Replaced by atmospheric depth — fog, vignette, gradients create breathing room - **Visual weight:** Character-centric — the 3D character is focal, environment supports through depth - **Focal strategy:** Single hero element — character/model is always the visual anchor - **Contrast level:** High — warm cream vs rich saturated 3D scenes - **Texture usage:** Heavy — noise, hatching, hand-painted DDS textures, SVG noise overlays ### Composition - **Hierarchy:** Spatial isolation — character at center, environment surrounds, UI at edges - **Balance:** Asymmetric — character off-center, environment fills naturally - **Flow:** Center-outward — eye drawn to character, explores environment, notices peripheral UI - **Grouping:** Scene-based — each scene self-contained. UI grouped by function at edges. - **Negative space:** Atmospheric — filled with fog, gradient, texture. Vignette creates natural frame. ### Imagery - **Photo treatment:** None — all imagery is 3D-rendered with hand-painted textures - **Illustration style:** Low-poly stylized with painterly textures. Papercraft/origami quality characters. - **Graphic elements:** Noise overlays, hatching patterns, texture atlases (grass, clouds, mountains) - **Patterns:** Subtle noise/hatching on UI layer. Hand-painted atlases in 3D environments. - **Image shape:** Full-viewport rectangular ### Interaction Feel - **Feedback:** Audio-visual — every interaction has visual response + sound effect - **Hover:** Subtle scale/transform on buttons. 3D camera responds to mouse with parallax. - **Transitions:** Cinematic — dedicated 3D wipe models for scene changes - **Loading:** Asset preloading with progress. Heavy assets load upfront. - **Microinteractions:** Moderate — rich audio, minimal but purposeful visual interactions ### Brand Voice - **Tone:** Warm and inviting — friendly guide into a magical world - **Formality:** Casual-professional - **CTA style:** Friendly invitation — "Start", "Next", "Enter" — simple, direct, welcoming - **Empty states:** N/A — linear narrative - **Error tone:** Not observable — carefully crafted to avoid errors --- ## Dimension 3: Visual Effects (Special Rendering) ### Overview - **Effect intensity:** Heavy-immersive - **Performance tier:** Heavy (WebGL, custom shaders, GLTF models) - **Fallback:** Progressive enhancement — WebGL required. Reduces texture quality on low-end. - **Primary technology:** WebGL 1.0 + GLSL ES 1.0 + GLTF/GLB + DDS textures + multi-stem audio ### Background Effects - **Type:** Noise-field - **Description:** Layered noise textures (noise.png, noiseSwirl.jpg, noiseTexture.png, noiseHD.jpg) composited over 3D scene. Vignette darkens edges. bg-tile.png for subtle repeating texture. - **Technology:** CSS background-image with mix-blend-mode (multiply, overlay) - **Opacity:** 0.1–0.3 noise layers, 0.6–0.8 vignette ### 3D Elements - **Type:** Full scene environments with stylized characters - **Scenes:** eclosion (garden), adieu (waterfall), voyage (sky), premiere (mountain), ending (forest) - **Renderer:** WebGL 1.0 (OpenGL ES 2.0) - **Lighting:** Directional + ambient. Rim lighting on characters. Warm golden key. Atmospheric fog. - **Camera:** Orbital with mouse parallax. Gentle idle sway. Smooth scene transitions. - **Materials:** Hand-painted diffuse textures (DDS compressed). Stylized/toon shading. - **Geometry:** Low-poly with visible faceting. Characters ~500–2000 polys. - **Post-processing:** vignette, color-grading, noise-overlay, atmospheric-fog - **Interaction:** Mouse camera parallax. Click-to-advance. No direct manipulation. ### Particle Systems - **Enabled:** Yes - **Type:** Floating dots (dust motes, pollen, magical sparkles) - **Count:** 50–200 per scene - **Shape:** Circular soft dot (particle.png) - **Size:** 2–8px - **Movement:** Gentle float with upward drift and wind - **Color:** Matches scene palette - **Interaction:** None — ambient only ### Shader Effects - **Enabled:** Yes - **Type:** Noise distortion - **Description:** Custom GLSL for noise-based texture blending, atmospheric fog, water effects. Animated noise for waterfall. Transition shaders for scene morphing. - **Language:** GLSL ES 1.0 - **Noise type:** Perlin - **Distortion:** Subtle — water ripples, vegetation sway, atmospheric haze ### Scroll Effects - **Parallax:** Enabled, 5 depth layers (near-ground → sky), linear depth-based speed - **Scroll animations:** Disabled — navigation is click-based - **Scroll morphing:** Disabled — uses 3D wipe models instead ### Text Effects - **Type:** None — standard HTML overlays with opacity fade - **No split-letter, typewriter, or glitch effects** ### Cursor Effects - **Enabled:** Yes - **Type:** Custom cursor rendered in WebGL canvas - **Default cursor hidden:** `html.no-cursor` ### Canvas Drawings - **Enabled:** Yes — main WebGL canvas (2074×1750 at 1560×1040 viewport) - **Animation:** Continuous 60fps requestAnimationFrame loop - **Responsiveness:** Full viewport with devicePixelRatio scaling ### Audio System (Unique Feature) - **Multi-stem music:** 4 stems (UI_MUSIC_STEM-1 through 4) that layer dynamically - **Per-scene ambient loops:** BG-Loop.mp3 for each scene - **Interaction sounds:** UI-Hover.mp3, UI-Clic.mp3 - **Nature sounds:** Bird, grass, leaves, liana, waterfall, wave variants - **Voiceover:** 5 scenes with .srt subtitle files - **Audio visualizer:** CSS span bars with scaleY transforms ### Scene Transitions - **4 dedicated GLB transition models** (transition_1 through 4) - **Transition textures:** bush, clouds, sand variants - **Transition sound:** scene_transition.mp3 - **Style:** Full-scene 3D morphing wipes, not simple fades --- ## Composite Notes This is a fully immersive WebGL storytelling experience — one of the most technically ambitious interactive websites of its era (2019). The design DNA is fundamentally different from standard web design: the 3D canvas IS the interface, and HTML/CSS elements are minimal overlays. **Technical highlights:** 1. Multi-stem audio with 4 music stems, per-scene ambient loops, interaction SFX, and voiceover with SRT subtitles 2. 5 narrative scenes as separate GLB models with DDS-compressed textures 3. 4 dedicated transition models for cinematic scene wipes 4. Noise/hatching overlays create organic, printed-paper quality over 3D renders 5. Low-poly art style bridges "game" and "illustration" — handcrafted despite being fully 3D 6. Vignette effect creates spotlight/fisheye framing that draws the eye inward **Performance:** DDS textures, WebGL 1.0 compatibility, asset preloading, likely LOD management for mobile. --- ## CSS Custom Properties (for implementation) ```css :root { /* Color */ --color-primary: #f8f4ec; --color-secondary: #2d4a3e; --color-accent: #c8a87c; --color-neutral-100: #f8f4ec; --color-neutral-200: #e8e0d0; --color-neutral-300: #c8bfb0; --color-neutral-400: #8a7e6e; --color-neutral-500: #4a4238; --color-neutral-600: #1a1612; --color-success: #6a9b7a; --color-warning: #d4a843; --color-error: #c45c4a; --color-info: #7a9bb5; --color-surface-bg: #f8f4ec; --color-surface-card: rgba(255, 255, 255, 0.08); --color-surface-elevated: rgba(255, 255, 255, 0.12); /* Typography */ --font-heading: 'Gotham', sans-serif; --font-body: 'Gotham Book', 'Gotham', sans-serif; --font-size-display: 64px; --font-size-h1: 36px; --font-size-h2: 24px; --font-size-h3: 18px; --font-size-body: 12.8px; --font-size-body-sm: 12px; --font-size-caption: 10px; /* Spacing */ --space-unit: 8px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 120px; --gutter: 40px; /* Shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* Elevation */ --shadow-low: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.25); --shadow-high: 0 8px 40px rgba(0, 0, 0, 0.4); /* Motion */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0); --duration-micro: 150ms; --duration-normal: 500ms; --duration-macro: 1000ms; } ```