# Design Language for tanso.bar ## Aesthetics and Tone tanso.bar channels a neomorphism aesthetic — the soft extruded surfaces, pillow-like depth, and tactile shadow play of neumorphic interface design applied to a carbon (炭素/tanso) tracking bar and social hub. The site cushions — with the gentle relief of embossed control panels on premium audio equipment, the satisfying tactile depth of physical buttons pressed into soft surfaces, and the quiet confidence of a carbon monitoring dashboard that feels like touching carefully molded clay. Inspiration draws from the neumorphic explorations of Alexander Plyuto's Skeuomorph Mobile Banking, the tactile interfaces of Bang & Olufsen's hardware controls, the soft materiality of Dieter Rams' later Braun designs, and the carbon-neutral monitoring dashboards of cutting-edge sustainability platforms. The tone is raw-authentic — honest, unvarnished language that presents carbon data without corporate greenwashing or performative environmentalism. The neomorphic treatment transforms carbon tracking from flat data displays into touchable, physical-feeling interfaces — carbon counters appear embossed from soft surfaces, reduction targets feel like adjustable dials you could turn, and emissions data sits in gently depressed troughs suggesting the geological depth of carbon sequestration. The bar metaphor adds social warmth — a place where carbon conversations happen over drinks, casual yet meaningful. Each component carries the soft-shadow depth of neomorphism — cards that appear to push outward from the background, input fields that sink inward like pressed impressions, and toggle switches with satisfying raised-and-recessed states. The raw-authentic tone ensures carbon data is presented with unflinching honesty — no softening of hard truths behind glossy interfaces. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — content arranged in editorial spreads creating the quality of a premium carbon-awareness publication presented at a sophisticated social bar. **Magazine Spread System:** - Feature spreads: 60% / 40% split with flexible swap between text-dominant and visual-dominant sides - Data sections: full-width with neumorphic card grids (3 columns at 280px min-width) - Pull statistics: oversized carbon numbers breaking column boundaries - Container: max-width: 1060px centered with 48px column gap - Responsive: stacked single column on mobile with maintained neumorphic depth **Section Sequence:** 1. **Bar Entrance:** Hero with playful-rounded typography on soft neumorphic surface, mountain-landscape distant carbon-footprint terrain imagery, photography documentary-style carbon source imagery 2. **Carbon Counter:** Key metrics in neumorphic raised cards — blur-focus interactive soft-depth emphasis with photography environmental documentation style 3. **Reduction Menu:** Carbon reduction strategies in magazine spread format — mountain-landscape simplified terrain icons and photography action-oriented imagery 4. **Data Tap:** Detailed emissions data in neumorphic depressed data troughs with mountain-landscape minimal topographic accents 5. **Last Call:** Footer as bar closing — raw-authentic farewell with mountain-landscape horizon line and neumorphic gentle closing surface **Spatial Philosophy:** - Magazine spreads create editorial authority for carbon content - Neumorphic depth gives data physical weight appropriate to the gravity of carbon tracking - The bar metaphor keeps the layout social and accessible despite serious subject matter ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — playful-rounded at 2.0rem-2.8rem, weight 800. Its rounded letterforms create the soft, approachable quality that matches neumorphic surface aesthetics while keeping carbon topics accessible. - **Body Text:** "Nunito" (Google Fonts) — at 0.9rem, weight 400, line height 1.75. Consistent typeface family creates cohesive neumorphic unity. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for carbon measurements, emissions data, and reduction targets. - **Labels:** "Nunito" at 0.65rem, weight 700, uppercase, letter-spacing 0.1em. **Color Palette:** - **Soft Stone:** #e0dcd4 — warm stone gray for primary neumorphic background - **Light Relief:** #eae6de — lighter warm for raised neumorphic surfaces - **Carbon Teal:** #2d9a8c — muted teal for primary carbon-positive accent - **Alert Ember:** #c7623a — warm ember orange for secondary carbon-warning accent - **Deep Earth:** #5a4e3c — warm deep brown for tertiary grounding accent - **Text Dark:** #2a2520 — warm near-black for primary text - **Muted Bark:** #8a7e6e — warm medium for secondary text - **Neumorph Shadow Dark:** rgba(42,37,32,0.15) — warm dark shadow for neumorphic depth - **Neumorph Shadow Light:** rgba(255,255,250,0.7) — warm light shadow for neumorphic highlight ## Imagery and Motifs **Photography Documentary Carbon Sources:** Carbon-related imagery presented in honest documentary style — CSS filter: saturate(0.85) contrast(1.02) with warm overlay. The documentary quality creates the raw-authentic visual treatment of carbon sources and environmental impact presented without aesthetic softening. **Blur-Focus Soft Depth Emphasis:** Interactive elements trigger neumorphic depth changes — transition from raised state (box-shadow: 8px 8px 16px rgba(42,37,32,0.15), -8px -8px 16px rgba(255,255,250,0.7)) to pressed state (box-shadow: inset 4px 4px 8px rgba(42,37,32,0.12), inset -4px -4px 8px rgba(255,255,250,0.5)) over 200ms. The depth change creates the physical-button quality of pressing into soft neumorphic surfaces. **Mountain-Landscape Carbon Terrain:** Decorative mountain silhouettes rendered as simplified SVG landscape forms — gentle curves suggesting mountain ridges (2px stroke, Carbon Teal at 0.06 opacity) at section boundaries. The mountains create the geological quality connecting carbon topics to the Earth's terrain and natural carbon sequestration landscapes. **Neumorphic Surface Consistency:** All interactive elements share consistent neumorphic treatment — background: #e0dcd4; border-radius: 16px; box-shadow: 8px 8px 16px rgba(42,37,32,0.15), -8px -8px 16px rgba(255,255,250,0.7). The consistency creates the hardware-interface quality of a premium carbon monitoring device. **Carbon Data Troughs:** Data display areas use depressed neumorphic treatment — box-shadow: inset 3px 3px 6px rgba(42,37,32,0.1), inset -3px -3px 6px rgba(255,255,250,0.5); background: #ddd8d0; border-radius: 12px. The troughs create the readout quality of instrument gauges sunk into a control panel surface. ## Prompts for Implementation Build the page as a neumorphic carbon bar. Raised card: .neu-raised { background: #e0dcd4; border-radius: 16px; padding: 32px; box-shadow: 8px 8px 16px rgba(42,37,32,0.15), -8px -8px 16px rgba(255,255,250,0.7); } Pressed state: .neu-pressed { box-shadow: inset 4px 4px 8px rgba(42,37,32,0.12), inset -4px -4px 8px rgba(255,255,250,0.5); } Data trough: .data-trough { box-shadow: inset 3px 3px 6px rgba(42,37,32,0.1), inset -3px -3px 6px rgba(255,255,250,0.5); background: #ddd8d0; border-radius: 12px; padding: 20px; } Magazine spread: .spread { display: grid; grid-template-columns: 60% 40%; gap: 48px; max-width: 1060px; margin: 0 auto; } AVOID: Flat corporate sustainability dashboards, green-gradient eco platforms, and standard carbon calculator interfaces. Let neumorphic tactile depth and raw-authentic honesty create a carbon bar where emissions data feels physically present and carbon conversations happen with unflinching truthfulness. ## Uniqueness Notes 1. **Neomorphism for carbon tracking:** Soft extruded surfaces give carbon data physical weight and tactile presence absent from typical flat sustainability interfaces. 2. **Magazine-spread as editorial authority:** Editorial layout positions carbon content as premium journalism rather than corporate reporting. 3. **Neumorphic depth states as data interaction:** Raised-to-pressed transitions create satisfying physical feedback when engaging with carbon metrics. 4. **Mountain-landscape as geological connection:** Terrain silhouettes connect carbon topics to Earth's natural systems and sequestration landscapes. 5. **Raw-authentic tone as anti-greenwash:** Honest language presents carbon data without corporate softening, building trust through unflinching transparency. **Seed/Style:** aesthetic: neomorphism, layout: magazine-spread, typography: playful-rounded, palette: triadic, patterns: blur-focus, imagery: photography, motifs: mountain-landscape, tone: raw-authentic **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses neomorphism aesthetic, magazine-spread layout, playful-rounded typography, triadic palette, blur-focus patterns, photography imagery, and raw-authentic tone.