# Design Language for tanso.center ## Aesthetics and Tone tanso.center inhabits the visual world of a Scandinavian deep-sea research station -- the kind of place where white-oak instrument panels glow under cold LED strips, where bioluminescent specimens drift in cylindrical tanks behind frosted acrylic, and where the clean geometry of Nordic functionalism collides with the alien extravagance of deep-ocean life. The aesthetic is **scandinavian** but subverted: instead of the expected muted pastels and birch-wood warmth, the palette runs dark and electric, as if someone transplanted a Copenhagen design studio to the hadal zone of the Mariana Trench. Every surface communicates precision and restraint, but what fills those surfaces -- iridescent fish, pulsing neon contours, bioluminescent data streams -- is wild, organic, and unapologetically tropical. The tone is **bold-confident**: declarative statements rather than tentative suggestions, generous whitespace that reads as authority rather than emptiness, and typography that commands attention without shouting. Think of a marine biologist who also studied at the Royal Danish Academy -- someone who can name every species of angelfish in Latin and also explain why the kerning on that label is wrong. The site does not ask for your attention; it assumes it. The mood oscillates between two poles: the serene discipline of Scandinavian interior design (flat planes, clean joints, functional honesty) and the psychedelic intensity of a coral reef at night under ultraviolet light. This tension is the engine of the entire visual identity. Nothing here is cozy. Nothing here is safe. But everything here is meticulously organized. ## Layout Motifs and Structure The layout follows a **modular-blocks** system inspired by the organizational logic of specimen display cases in a natural history museum. The viewport is divided into discrete rectangular modules -- each one a self-contained unit with its own internal logic, but all snapping to a shared 12-column grid with 24px gutters. Modules vary in size: some occupy 4 columns and 400px of height; others span the full 12 columns and stretch to 80vh. The effect is a Mondrian-like composition if Mondrian had been obsessed with marine biology. **Structural Principles:** - **Module Taxonomy:** There are exactly four module types, each with distinct proportions and internal layouts: 1. **Specimen Modules** (4-col, square aspect): Dark background (#0B0B1A), centered 3D-rendered fish or organism, subtle neon border glow. These are the jewels of the layout -- small, precious, self-contained. 2. **Data Modules** (6-8 col, landscape): Contains typographic content -- text blocks, statistics, or narrative passages. Background is near-black (#0D0D1F) with a single accent-colored left border (3px, one of the neon palette colors). Text is left-aligned, ragged-right. 3. **Panorama Modules** (12-col, 60-80vh): Full-width immersive sections. These contain either a large 3D render that fills the module edge-to-edge, or a gradient field with overlaid typography. Used sparingly -- maximum 2-3 per page. 4. **Void Modules** (variable, 120-200px height): Empty dark space modules that function as visual breathing room. They contain nothing except possibly a thin horizontal neon line (1px, #00FFD4 at 30% opacity) that spans their full width. - **Module Spacing:** Modules are separated by a consistent 2px gap filled with absolute black (#000000). This micro-gap creates the impression that modules are backlit panels in a dark instrument rack -- the black gap is the chassis, the modules are the displays. - **No Scroll Hijacking:** The page scrolls naturally. Modules enter and exit the viewport through standard scroll behavior, with elastic animation applied only to internal content (not the modules themselves). - **Asymmetric Balance:** No two adjacent rows have the same column distribution. If row N has [4, 4, 4], row N+1 must be [6, 6] or [8, 4] or [12]. This enforced variation prevents monotony and keeps the modular grid feeling dynamic rather than mechanical. - **Navigation:** A single thin horizontal bar fixed at the top of the viewport, 48px tall, background #0B0B1A with 85% opacity and backdrop-filter blur(12px). The domain name "tanso.center" sits left-aligned in the bar in Cormorant Garamond at 1.1rem, weight 500. No hamburger menu. Navigation links (if any) are small, right-aligned, set in DM Sans at 0.75rem, uppercase, letter-spacing +0.15em, color #6B6B8A. On hover, link color transitions to #00FFD4 over 300ms. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif with sharp terminals and dramatic thick-thin stroke modulation. It carries the authority of classical engraving but with enough eccentricity in its italics to feel alive rather than stiff. Used at 3rem-6rem for primary headings, 2rem-2.5rem for section titles. Weight: 600 (SemiBold) for headings, 300 (Light) for pull quotes. Letter-spacing: -0.01em for display sizes, +0.02em below 2rem. Line-height: 1.1 for display, 1.25 for section titles. Color: #E8E8F0 (primary) or one of the neon accents for emphasis. - **Body / Narrative:** "DM Sans" (Google Fonts) -- a geometric sans-serif with optically balanced letterforms and excellent legibility at small sizes. Its clean, unadorned shapes embody the Scandinavian design principle of functional beauty: every curve is there because it needs to be, nothing more. Used at 1rem-1.125rem for body text, 0.875rem for captions and metadata. Weight: 400 (Regular) for body, 500 (Medium) for emphasis. Line-height: 1.65 for body text. Color: #A0A0B8 (body), #6B6B8A (secondary/captions). - **Accents / Labels:** "DM Mono" (Google Fonts) -- the monospaced sibling of DM Sans, used for specimen labels, data readouts, coordinates, and any text that should read as "scientific annotation." Used at 0.75rem-0.875rem. Weight: 400. Letter-spacing: +0.05em. Color: #00FFD4 or #FF3366 depending on context. Always uppercase. **Palette:** The palette is **dark-neon**: an abyssal dark foundation punctuated by electric tropical accents that reference bioluminescent organisms. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Abyss | Near-black blue | #0B0B1A | Primary background, module base | | Deep | Dark indigo | #0D0D1F | Secondary background, data modules | | Void | Pure black | #000000 | Module gaps, deepest shadows | | Bone | Cool off-white | #E8E8F0 | Primary text, headlines | | Fog | Muted lavender | #A0A0B8 | Body text | | Ghost | Dark slate | #6B6B8A | Secondary text, captions | | Reef Cyan | Electric teal | #00FFD4 | Primary accent, neon borders, interactive states | | Coral Pink | Hot magenta-pink | #FF3366 | Secondary accent, alert states, emphasis | | Parrotfish Blue | Vivid cerulean | #00A3FF | Tertiary accent, links, data highlights | | Bioluminescent | Acid chartreuse | #AAFF00 | Rare accent, hover glow on specimen modules | | Tang Orange | Neon tangerine | #FF8C00 | Quaternary accent, used only in data visualizations | **Neon Glow System:** Accent colors are never used as flat fills on large surfaces. They appear as: (1) thin borders (1-3px), (2) text color on dark backgrounds, (3) box-shadow glows using the color at low opacity (e.g., `box-shadow: 0 0 20px rgba(0, 255, 212, 0.15)`), or (4) subtle gradient overlays (5-10% opacity). This restraint prevents the neon palette from overwhelming the Scandinavian minimalism -- the glows are specimens in a dark vitrine, not a Las Vegas marquee. ## Imagery and Motifs **3D-Rendered Tropical Fish as Primary Visual Language:** The dominant imagery mode is **3d-render** -- specifically, photorealistic or stylized 3D renders of tropical fish and marine organisms displayed as if they are scientific specimens floating in dark water. These are not clip-art fish or cartoon illustrations; they are rendered with subsurface scattering on translucent fins, caustic light patterns on iridescent scales, and volumetric light rays cutting through dark blue-black water. Each fish is isolated against near-black backgrounds, creating the effect of a specimen photograph from a deep-sea research publication. **Specific Fish/Organism Subjects (motif: tropical-fish):** 1. **Mandarin Dragonet** (Synchiropus splendidus) -- psychedelic blue-and-orange swirl patterns. Used as the hero specimen, appearing in the first panorama module. 2. **Regal Angelfish** (Pygoplites diacanthus) -- bold yellow-and-blue vertical stripes. Used in specimen modules as recurring visual punctuation. 3. **Leafy Seadragon** (Phycodurus eques) -- elaborate frond-like appendages in amber and olive. Used in the largest panorama module, its tendrils extending beyond the module boundaries via CSS overflow. 4. **Juvenile Emperor Angelfish** (Pomacanthus imperator) -- concentric white-and-blue spiral patterns. Used as a background watermark at 3% opacity in data modules. 5. **Deep-sea Anglerfish** (Melanocetus johnsonii) -- bioluminescent lure glowing #00FFD4 against absolute darkness. Used as a loading state or transition element. **CSS-Generated Motif Elements:** - **Bioluminescent Dots:** Small circles (4-8px diameter) scattered across void modules and module margins using CSS radial-gradient positioned pseudo-elements. Colors cycle through the neon palette at very low opacity (8-15%). They do not animate -- they are static, like distant plankton frozen in a photograph. - **Depth Lines:** Thin horizontal rules (1px) that span the full width of panorama modules, colored in #00FFD4 at 15% opacity, positioned at regular vertical intervals (every 80px). These evoke depth markers on a sonar display or the grid lines of a bathymetric chart. - **Scanline Overlay:** A very subtle scanline texture applied to specimen modules via a repeating CSS linear-gradient: `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)`. This creates a barely-perceptible CRT-monitor effect that reinforces the "research station display" narrative. - **Neon Border Pulse:** Specimen module borders use a CSS animation that slowly oscillates the box-shadow glow intensity from 0.08 to 0.2 opacity over a 6-second ease-in-out cycle. The color of the glow matches the dominant hue of the fish inside the module. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a panorama module that fills the entire viewport. The background is #0B0B1A, fading to #000000 at the edges via a radial gradient centered at 50% 60%. In the center of this darkness, a single 3D-rendered mandarin dragonet materializes -- not with a fade-in, but with an elastic scale animation: the fish starts at scale(0.85) and opacity(0.7), then bounces to scale(1.02) before settling at scale(1.0) and opacity(1.0) over 1200ms using a CSS cubic-bezier(0.175, 0.885, 0.32, 1.275) timing function. This is the elastic pattern in action -- every entrance animation uses this same spring-like overshoot curve. Below the fish, the text "tanso.center" appears in Cormorant Garamond Light (300) at 4.5rem, color #E8E8F0, letter-spacing +0.03em, with a 400ms delay after the fish animation begins. The text itself uses the same elastic scale curve but at a gentler amplitude: scale(0.95) to scale(1.005) to scale(1.0). Below the domain name, a single line in DM Sans at 0.875rem, color #6B6B8A: a subtitle or tagline, appearing with a 700ms delay and a simple opacity transition (0 to 1 over 600ms, no scale). **Elastic Animation System (pattern: elastic):** All entrance animations -- elements appearing on scroll, modules loading, hover state transitions -- use the elastic easing curve. The specific implementation: - **Scroll Entrance:** Elements within modules begin at `transform: translateY(30px) scale(0.97); opacity: 0` and animate to `transform: translateY(0) scale(1); opacity: 1` using `transition: all 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275)`. The IntersectionObserver triggers at threshold 0.15. - **Hover States:** Interactive elements (links, specimen modules, navigation items) use `transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275)` for hover-in and `transition: all 250ms ease-out` for hover-out. The asymmetry (elastic in, smooth out) creates a satisfying tactile quality. - **Module Stagger:** When multiple modules enter the viewport simultaneously, they stagger by 100ms each (using CSS custom property `--stagger-delay` set via JavaScript). Combined with the elastic curve, this creates a cascading bounce effect -- like specimens settling into display cases one by one. **Storytelling Scroll Sequence:** The page reads as a descent into the deep ocean. The first panorama module is the surface -- bright (relatively) with the mandarin dragonet in vivid color. As the user scrolls, the ambient neon glow colors shift: early sections favor #00A3FF (Parrotfish Blue) and #FF8C00 (Tang Orange) for warmer, shallow-water tones. Mid-page transitions to #00FFD4 (Reef Cyan) and #FF3366 (Coral Pink). The final sections use #AAFF00 (Bioluminescent) against deepening blacks, culminating in the anglerfish -- alone in absolute darkness, its lure the only light source. This color journey is implemented through CSS custom properties (--accent-primary, --accent-secondary) that are updated via JavaScript IntersectionObserver as sections enter the viewport. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero sections with stock photography, gradient backgrounds that feel like SaaS landing pages, any layout that reads as a conversion funnel. This is an exhibition, not a sales floor. **Technical Notes:** - All 3D fish renders should be delivered as optimized WebP or AVIF images with transparent backgrounds, not actual WebGL scenes (keep it performant). - The elastic easing cubic-bezier(0.175, 0.885, 0.32, 1.275) is the canonical curve for all spring animations. Do not vary it. - Module backgrounds should use CSS `backdrop-filter: blur(0px)` as a baseline to enable GPU compositing without visual effect. - The scanline overlay and bioluminescent dots are pure CSS -- no images, no canvas, no SVG for these decorative elements. ## Uniqueness Notes **Differentiators from other designs:** 1. **Scandinavian-Abyssal Fusion:** No other design in the portfolio combines Scandinavian design principles (functional minimalism, clean geometry, restrained material palette) with deep-sea bioluminescent imagery. The scandinavian aesthetic appears at only 5% frequency and is never paired with dark-neon palette (2%) or tropical-fish motifs (3%). This three-way collision -- Nordic restraint, abyssal darkness, and tropical marine excess -- creates a visual language that has no precedent in the existing corpus. 2. **Modular-Block Specimen Display:** While centered layouts dominate at 99% and modular-blocks appear at only 6%, this design uses modular blocks as a narrative device: each module is a display case in a dark exhibition hall, with 2px black gaps serving as the physical chassis between illuminated panels. The four-type module taxonomy (Specimen, Data, Panorama, Void) gives the layout a systematic rigor that distinguishes it from generic grid or card-based approaches. 3. **3D-Rendered Ichthyological Imagery:** The 3d-render imagery type is essentially absent from the existing design corpus. Combined with the tropical-fish motif (3% frequency), this creates a visual identity built on photorealistic marine specimens -- specific named species (Synchiropus splendidus, Pygoplites diacanthus, Phycodurus eques) treated with the reverence of scientific illustration but rendered with the dramatic lighting of a fashion photograph. No other design treats fish as its primary visual subject. 4. **Elastic-Only Animation Philosophy:** Rather than mixing multiple animation patterns (scroll-triggered at 97%, parallax at 72%, stagger at 60%), this design commits to a single animation curve -- the elastic cubic-bezier(0.175, 0.885, 0.32, 1.275) -- applied universally to all motion. This constraint creates a distinctive kinetic identity: everything bounces slightly, settles gently, like objects in water finding their equilibrium. The elastic pattern sits at only 13% frequency. 5. **Chromatic Depth Narrative:** The color journey from warm shallow-water hues to cold bioluminescent greens as the user scrolls creates a storytelling dimension that no other design employs. The palette is not static -- it evolves with scroll position, transforming the act of scrolling into a literal descent through ocean depth zones. **Documented Seed/Style:** - aesthetic: scandinavian - layout: modular-blocks - typography: elegant-serif - palette: dark-neon - patterns: elastic - imagery: 3d-render - motifs: tropical-fish - tone: bold-confident **Avoided Overused Patterns:** - playful aesthetic (96%) -- replaced with scandinavian (5%) - centered layout (99%) -- replaced with modular-blocks (6%) - mono typography (99%) -- replaced with elegant-serif (2%) - warm palette (100%) -- replaced with dark-neon (2%) - scroll-triggered patterns (97%) -- elastic (13%) used as primary, scroll-triggered used only as trigger mechanism, not as animation style - minimal imagery (95%) -- replaced with 3d-render - vintage motifs (89%) -- replaced with tropical-fish (3%) - friendly tone (99%) -- replaced with bold-confident (4%)