Nomadic Tribe — Design DNA

Design profile extracted from 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

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:

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)

: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;
}