# Design Language for tanso.biz ## Aesthetics and Tone tanso.biz draws its visual identity from the intersection of algorithmic art and deep-sea aquarium opulence -- imagine a generative art installation projected onto the glass walls of a private collector's marine sanctuary, where bioluminescent fish drift through computationally derived current patterns. The word "tanso" evokes carbon (탄소 in Korean), and the design treats this duality -- elemental science meets living luxury -- as its conceptual backbone. Every visual element feels simultaneously calculated and alive, as though an algorithm dreamed of tropical reefs and rendered them in muted, precious-metal tones. The tone is opulent-grand without being garish: think the restrained extravagance of a James Turrell light installation inside a Tokyo members-only aquarium bar. There is weight and ceremony in every transition, every reveal. Text does not simply appear -- it materializes with the deliberate choreography of a ballet. Scrolling feels like descending through atmospheric layers of water, each zone denser and richer than the last. The generative aesthetic means no two visits feel identical: subtle algorithmic variations in background patterns, color shifts, and fish-path animations ensure the experience has organic unpredictability layered atop a meticulously controlled compositional framework. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture organized as a vertical descent through five oceanic depth zones, each occupying a full viewport height minimum. Rather than a traditional grid, the composition uses a **staggered-column river system**: content flows in two offset columns (60/40 split) that alternate dominance as the user scrolls, creating a sinuous reading path that mimics the undulating movement of fish through water. **Structural Zones:** - **Zone 1 (Surface / 0-100vh):** Full-bleed generative canvas fills the viewport. A single oversized headline animates letter-by-letter using kinetic typography. No navigation is visible initially -- it fades in after the first scroll interaction, anchored as a thin translucent bar along the left edge (vertical text, rotated 90 degrees). - **Zone 2 (Thermocline / 100-200vh):** The 60/40 column split begins. The wider left column holds the primary narrative text block, set in large editorial serif. The narrower right column contains a generative SVG pattern of slowly morphing tropical fish silhouettes that react to scroll position. A horizontal rule made of animated dots (each dot a tiny circle that pulses in sequence) separates header from body. - **Zone 3 (Mesopelagic / 200-350vh):** The columns swap -- the right becomes 60% and carries a full-height generative gradient panel with embedded kinetic type that scales and rotates as the user scrolls through. The left 40% holds smaller body text with pull-quotes styled as gold-leafed editorial callouts. Fish motif SVGs drift across the column boundary, ignoring the grid entirely. - **Zone 4 (Bathyal / 350-450vh):** A single centered column (max-width 680px) for a focused reading experience. The background transitions to the deepest palette tone. Generative particle systems of tiny luminous dots (representing deep-sea bioluminescence) float behind the text layer. Typography here is at its most intimate -- smaller size, generous line-height, contemplative rhythm. - **Zone 5 (Abyssal / 450-550vh):** A final full-bleed section with a large morphing SVG that transitions between abstract fish forms and geometric crystalline structures. A closing statement uses the largest kinetic typography on the page, each word appearing on scroll with a spring-physics bounce. The vertical navigation shifts to show the user has reached the bottom through a filled progress indicator. **Navigation:** A fixed left-edge vertical bar displays depth-zone names rotated 90 degrees in condensed caps. The current zone is highlighted with a gold accent line that slides smoothly between labels. On mobile, this collapses to a minimal dot-indicator along the right edge. ## Typography and Palette **Typography:** - **Headlines / Kinetic Display:** "Playfair Display" (Google Fonts) -- a transitional serif with high contrast between thick and thin strokes, used at weights 700-900 and sizes from 3.5rem to 8rem with fluid scaling via `clamp(3rem, 6vw + 1rem, 8rem)`. Headlines are the primary vehicle for kinetic animation: individual characters are wrapped in spans and animated with staggered transforms (translateY, rotateX, opacity) triggered on scroll-intersection. The high stroke contrast of Playfair Display makes these animations visually striking as thin strokes appear to shimmer during rotation. - **Body / Editorial Prose:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with moderate contrast, optimized for screen reading. Weight 400 for body, 600 for emphasis. Size: `clamp(1.05rem, 1.2vw + 0.5rem, 1.35rem)`. Line-height: 1.75 for generous, luxurious reading rhythm. Letter-spacing: +0.01em. Color: Pale Nacre (#e8e0d4) on dark backgrounds. - **Accents / Navigation / Labels:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant vintage character, used for navigation labels, zone indicators, and small caps callouts. Weight 300-600. Size: 0.75rem-1rem. Letter-spacing: +0.2em. Text-transform: uppercase. Its tall x-height and clean geometry contrast beautifully with Playfair Display's ornate serifs. **Palette:** The palette draws from the muted iridescence of deep-water fish scales and aged metallic patinas -- nothing is fully saturated, every color carries a veil of atmospheric haze as though viewed through several meters of seawater. | Name | Hex | Usage | |------|-----|-------| | Abyssal Ink | #0f1219 | Primary background, deepest zones | | Twilight Slate | #1e2533 | Secondary background, panels, cards | | Tarnished Gold | #b8975a | Accent, highlights, navigation active states, pull-quote borders | | Pale Nacre | #e8e0d4 | Primary text on dark backgrounds | | Oxidized Copper | #5e8a7a | Secondary accent, SVG fish fills, generative pattern strokes | | Muted Coral | #c4796e | Tertiary accent, hover states, kinetic type emphasis | | Deep Prussian | #1a3148 | Gradient midpoint, Zone 3 background transition | | Pearl Mist | #d4cfc6 | Subtle highlight overlays, navigation inactive text | **Gradient System:** Backgrounds transition through `Abyssal Ink -> Deep Prussian -> Twilight Slate` as the user descends through zones, controlled by scroll position via CSS custom properties updated in JavaScript. Zone 3's generative panel uses a radial gradient from Oxidized Copper (15% opacity) to transparent, creating a bioluminescent glow effect. ## Imagery and Motifs **Generative Tropical Fish SVG System:** The signature visual element is a set of 5 algorithmically morphing SVG fish silhouettes, each constructed from bezier curves that interpolate between 3-4 keyframe shapes over 15-25 second cycles. The fish are rendered as outlined strokes (no fill, 1.5px stroke width) in Oxidized Copper and Tarnished Gold, giving them the quality of delicate wire sculptures or engraved illustrations from a Victorian naturalist's journal. Each fish follows a unique CSS-animated path across its containing zone using `offset-path` with custom SVG paths that create gentle S-curve swimming motions. **Fish Species Silhouettes (Reference Shapes):** 1. Angelfish -- tall diamond profile with trailing dorsal filament, morphs between spread-fin and tucked-fin states 2. Moorish Idol -- distinctive curved dorsal banner, body morphs between narrow profile and slightly flared 3. Lionfish -- elaborate radiating fin spines rendered as individual animated strokes that splay and contract 4. Discus -- nearly circular body that subtly oscillates between oval and round 5. Betta -- flowing tail rendered as 8-12 individual curve strokes that ripple with staggered sine-wave animations **Generative Background Patterns:** Behind the content layer, a canvas element renders a continuously evolving Perlin-noise flow field. The field is visualized as thousands of tiny particles (1px dots in Pale Nacre at 8-15% opacity) that drift along the noise vectors, creating the impression of ocean currents. The flow field parameters shift slowly over time (field seed changes every 30 seconds with a smooth 5-second crossfade), ensuring no two viewing moments are identical. Particle speed increases slightly in response to scroll velocity, creating a subtle sense of the user's movement disturbing the water. **Decorative Motifs:** - **Dot-pulse dividers:** Horizontal rules are replaced by rows of 20-30 small circles (4px diameter) in Tarnished Gold that pulse in sequence (left to right, 50ms stagger), creating a ripple effect reminiscent of bubbles rising along a surface. - **Corner filigree:** Each zone's boundaries are marked by small generative SVG ornaments in the top-right and bottom-left corners -- abstract patterns generated from Lindenmayer system rules that produce coral-branch-like fractal structures in Oxidized Copper at 30% opacity. - **Pull-quote markers:** Large editorial pull-quotes are bracketed by thin vertical lines in Tarnished Gold with small diamond terminals, evoking the look of gilded page edges in a luxury book. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single continuous descent through oceanic depth zones. The opening state is a full-viewport generative canvas: the Perlin-noise particle field fills the screen in Abyssal Ink, with particles barely visible. After a 0.8-second pause, the headline text begins its kinetic entrance -- each letter of "TANSO" appears sequentially with a 120ms stagger, each letter translating from 40px below its final position and rotating from -15deg on the X axis, with a spring-physics easing curve (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Simultaneously, the first fish SVG (Angelfish) begins its morph cycle and swims into view from the right edge. The vertical navigation fades in at 40% opacity after the headline animation completes. **Kinetic Typography System:** Every headline in the site uses scroll-triggered kinetic animation. Implementation uses IntersectionObserver to detect when headline elements enter the viewport, then applies per-character staggered animations via JavaScript-injected spans. Each character receives: - `transform: translateY(30px) rotateX(-12deg)` as initial state - Transition to `translateY(0) rotateX(0)` with 400ms duration per character, 60ms stagger - Easing: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for smooth deceleration - Characters in Zone 3's scaling section additionally animate `font-size` from 2rem to 5rem based on scroll progress using CSS custom properties bound to scroll position. **Morph Animation Pipeline:** The SVG fish morphing system uses `` elements with `values` attributes containing semicolon-separated path data for each keyframe state. Each fish has 3-4 morph targets. The `dur` attribute ranges from 15s to 25s with `repeatCount="indefinite"`. For browsers that support it, `` handles path-following, with a fallback to CSS `offset-path` + `offset-distance` animation. The morph transitions use `calcMode="spline"` with `keySplines="0.42 0 0.58 1"` for organic ease-in-out timing. **Scroll-Driven Zone Transitions:** A scroll listener updates a CSS custom property `--scroll-depth` (0 to 1) on the document root. This property drives: - Background color interpolation between zone palettes via `color-mix()` in CSS - Particle field density (more particles in deeper zones) - Fish opacity and scale (fish grow slightly more visible in their home zones) - Navigation highlight position **Generative Background Implementation:** The Perlin noise flow field runs on a `` element positioned fixed behind all content (`z-index: -1`). Use a 2D simplex noise implementation. Spawn 2000 particles at random positions. Each frame: sample noise at particle position, derive angle, move particle 0.5-1.5px in that direction, draw a 1px dot at new position in `rgba(232, 224, 212, 0.1)`. Reset particles that exit the viewport to a random edge position. Run at 30fps via `requestAnimationFrame` with frame-skipping to maintain performance. On mobile, reduce particle count to 800. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, newsletter popups, hamburger menus with full-screen overlays, generic hero images, stock photography, testimonial carousels, footer link forests. **Storytelling Bias:** Every section should feel like turning a page in a luxurious art book about deep-sea life. The editorial-flow layout means text and visuals hand off attention to each other rhythmically. No section should feel like a "landing page block" -- instead, each zone is a chapter in a visual narrative about descent, discovery, and the beauty of algorithmic nature. ## Uniqueness Notes **Differentiators from other designs:** 1. **Perlin-Noise Particle Ocean as Living Background:** While other designs use static gradients or simple parallax backgrounds, tanso.biz renders a continuous, algorithmically-driven flow field of thousands of particles that respond to scroll velocity. This creates a background that is literally never the same twice -- a genuine generative art piece that serves as the environmental substrate for all content. No other design in the portfolio uses real-time noise-field particle simulation as its primary background texture. 2. **Five-Zone Oceanic Depth Descent as Narrative Architecture:** Rather than arbitrary section breaks, the entire page is structured as a literal descent through oceanographic depth zones (Surface, Thermocline, Mesopelagic, Bathyal, Abyssal), with palette, typography scale, particle density, and fish species all shifting to match the environmental character of each depth. This is not metaphorical theming applied to a standard layout -- it is a complete environmental storytelling system where every design parameter changes based on vertical position. 3. **Morphing SVG Wire-Sculpture Fish as Motif System:** The five fish species are rendered not as illustrations or icons but as continuously morphing outlined SVG paths -- wireframe sculptures that breathe and swim through the layout, crossing column boundaries and ignoring the grid. The combination of `` morph targets with `` path-following creates autonomous animated entities that give the page a sense of inhabited life. The Victorian-naturalist engraving aesthetic (thin strokes, no fill) distinguishes these from any cartoon or photographic fish treatment in other designs. 4. **Kinetic Typography as Primary Visual Event:** With the kinetic-animated typography seed, every headline is a choreographed entrance -- per-character spring-physics animation, scroll-driven scaling in Zone 3, and staggered reveal timing. Typography is not static dressing; it is the primary motion-design element of each zone, making text itself the spectacle rather than merely the carrier of information. 5. **Vertical Depth-Zone Navigation with Gold Accent Slider:** The fixed left-edge navigation with rotated zone labels and a sliding gold indicator line is a distinctive UI element that reinforces the descent metaphor. It functions both as wayfinding and as an abstract representation of oceanic stratification -- a design element that is simultaneously functional and decorative. **Chosen Seed:** aesthetic: generative, layout: editorial-flow, typography: kinetic-animated, palette: muted, patterns: morph, imagery: minimal, motifs: tropical-fish, tone: opulent-grand **Frequency-Informed Decisions:** - **PREFERRED (underused):** generative aesthetic (10%), editorial-flow layout (5%), kinetic-animated typography (1%), tropical-fish motifs (3%), opulent-grand tone (3%) -- all are rare in the existing portfolio, ensuring strong differentiation - **ACCEPTED (assigned but common):** muted palette (66%), minimal imagery (95%) -- these are overrepresented but were specified in the seed; the design compensates by using the muted palette in an unusual oceanic-depth context rather than the typical warm-neutral application, and the minimal imagery approach is offset by the richness of the generative and SVG systems - **AVOIDED (overused):** playful aesthetic (96%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), friendly tone (99%), vintage motifs (89%) -- none of these dominant patterns appear in this design