# Design Language for tanso.markets ## Aesthetics and Tone tanso.markets (炭素 = Carbon, markets) merges the friendly, glossy optimism of frutiger aero with the electric energy of dopamine-neon accents -- a carbon trading platform that feels like using a beautifully-designed app from 2008, but with occasional bursts of neon that remind you this is cutting-edge technology. The visual identity draws from the translucent panels and soft shadows of Vista/Aqua-era interfaces, the dopamine-hit brightness of neon signage, vintage market trading floor photography, and the playful effervescence of water bubbles in carbonated drinks (carbon connection). The tone is calm-serene -- despite the neon accents, the overall experience is peaceful and controlled. ## Layout Motifs and Structure **Editorial-flow** layout with varied column widths creating a polished magazine-style reading experience for carbon market analysis. **Primary structure:** - **Opening viewport (100vh):** A soft gray-blue gradient (#d0dce8 to #e0e8f0) with glossy, aero-style card containing "TANSO.MARKETS" in refined serif. Neon accent line (#00e8b8) running horizontally through the title. Subtle water-bubble SVG circles rising behind. - **Editorial content flow:** Alternating full-width features, side-by-side columns, and narrow text sections. Vintage-toned market data (sepia-tinted) alongside contemporary analysis. - **Glitch accent moments:** Brief, controlled CSS glitch effects (color-shift, 100ms duration) on certain data elements when they update or enter view, suggesting real-time market data transmission. - **Water-bubble decorations:** Small CSS circles (10-40px) in neon teal at low opacity (0.06-0.12) rising slowly through sections, referencing CO2 bubbles. ## Typography and Palette **Fonts:** - **Headlines:** "Libre Baskerville" (Google Fonts) -- refined serif, weight 700, size: clamp(28px, 4.5vw, 52px). - **Body:** "Source Sans 3" (Google Fonts) -- clean sans, weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.8. - **Data:** "Fira Code" (Google Fonts) -- monospace for market figures and trading data. **Palette:** - **Aero Gray:** #d0dce8 -- primary background - **Aero Light:** #e0e8f0 -- secondary surface - **Neon Teal:** #00e8b8 -- dopamine accent - **Neon Pink:** #e800a8 -- secondary dopamine accent - **Steel Text:** #2a3440 -- primary text - **Card White:** #f4f8fc -- card backgrounds with aero gloss - **Vintage Sepia:** #8a7a6a -- vintage market data tone ## Imagery and Motifs - **Water-bubble SVG animations:** Small circles with radial gradients (neon teal center, transparent edge) rising slowly (CSS animation translateY, 15-30s). Reference to CO2 carbonation. - **Frutiger-aero glossy cards:** Cards with top-edge white highlight (1px gradient), soft drop-shadow (0 2px 8px rgba(0,0,0,0.06)), slight border-radius (8px). Classic aero surface treatment. - **Glitch data accents:** Brief CSS glitch (transform: translateX(2px), filter: hue-rotate(90deg), duration: 100ms) on data elements entering view. - **Vintage market photography treatment:** Background texture areas with sepia-tinted, desaturated market imagery at very low opacity. ## Prompts for Implementation Calm carbon trading editorial with frutiger aero polish and neon energy bursts. Water bubbles reference carbonation. Glitch moments suggest live data. Editorial flow provides analytical depth. **Opening:** Aero gradient fades in, glossy card scales up, title appears, neon line draws through it, bubbles begin rising. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No dark mode. No brutalist rawness. No heavy decoration. ## Uniqueness Notes 1. **Frutiger aero + dopamine-neon combination:** The optimistic gloss of early 2000s UI paired with contemporary neon accents creates a unique temporal hybrid. 2. **CO2 bubble animation as carbon motif:** Water-bubble decorations directly reference carbon dioxide carbonation, connecting visual design to domain content. 3. **Controlled glitch as live data indicator:** Using brief, intentional glitch effects to suggest real-time data updates turns aesthetic choice into functional design. 4. **Calm serenity with neon accents:** The peaceful overall tone contrasted with electric neon creates unusual emotional texture. **Seed/style:** frutiger-aero aesthetic, editorial-flow layout, baskerville-refined typography, dopamine-neon palette, glitch patterns, water-bubbles imagery, vintage motifs, calm-serene tone **Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no warm palette (87%), no mono typography (86%), no photography (78%), no mysterious-moody tone (67%)