# Design Language for tanso.market ## Aesthetics and Tone tanso.market channels a skeuomorphic aesthetic — the rich material textures, physical-world metaphors, and tactile realism of skeuomorphic design applied to a carbon (炭素/tanso) credits marketplace. The site materializes — with the leather-bound gravitas of a commodities trading desk, the brass-instrument precision of vintage market tickers, and the wooden-panel warmth of a traditional exchange floor where carbon credits are traded with the reverent seriousness of precious commodities. Inspiration draws from the original iOS skeuomorphic calendar and notepad apps, the material richness of Bloomberg Terminal's early incarnations, the trading-floor aesthetics of the Chicago Mercantile Exchange, and the commodity-market visual language of precious metals exchanges. The tone is grounded-earthy — language rooted in material reality that treats carbon credits as tangible commodities with real-world weight. The skeuomorphic treatment transforms carbon credit trading from abstract digital transactions into physical-feeling marketplace experiences — credit listings sit on textured parchment surfaces, trade confirmations stamp with satisfying ink-press effects, and market charts are rendered on graph-paper backgrounds suggesting hand-plotted price histories. The market metaphor positions carbon credits as valuable commodities deserving the material reverence of gold or rare earth minerals. Each component carries rich material texture — leather backgrounds for navigation, linen textures for content areas, wood-grain for sidebars, and metal accents for interactive elements. The grounded-earthy tone keeps carbon trading connected to the physical earth whose health the credits represent. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content blocks arranged in irregular masonry-like stacking creating the marketplace quality of a bazaar where carbon credit listings are displayed at various sizes like goods stacked in a busy trading post. **Masonry Market Grid:** - Columns: 3 at 320px min-width with 20px gap - Items: variable height based on content, creating natural masonry stacking - Feature listings: span 2 columns for premium carbon credit offerings - Container: max-width: 1080px centered - The masonry creates the active-marketplace quality of a trading floor with listings of varying importance and size **Section Sequence:** 1. **Exchange Floor:** Hero with display-bold typography on leather-texture ground, marble-classical exchange-building decorative elements, water-bubbles shimmering market-value imagery 2. **Trading Pit:** Carbon credit listings in masonry marketplace grid — hover-lift interactive raised-surface trading with water-bubbles floating value indicators 3. **Price Board:** Market data in skeuomorphic instrument panels with marble-classical simplified exchange motifs and textured chart surfaces 4. **Vault:** Featured premium credits in large masonry blocks with marble-classical polished stone accents and water-bubbles value-shimmer effects 5. **Closing Bell:** Footer as market close — grounded-earthy farewell with marble-classical final exchange column and leather-texture closing surface **Spatial Philosophy:** - Masonry creates the busy-marketplace quality of a thriving carbon credit exchange - Variable-height items reflect the real diversity of carbon credit offerings - Skeuomorphic textures ground abstract digital trading in physical marketplace metaphors ## Typography and Palette **Typography:** - **Headlines:** "Archivo Black" (Google Fonts) — display-bold at 2.0rem-3.0rem, weight 400. Its bold, authoritative forms create the stock-ticker quality of market exchange typography. - **Body Text:** "Merriweather" (Google Fonts) — serif at 0.9rem, weight 400, line height 1.75. Its readable serifs create the commodity-report quality of financial documentation. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.85rem for prices, volumes, and trading metrics. - **Labels:** "Archivo Black" at 0.6rem, weight 400, uppercase, letter-spacing 0.12em. **Color Palette:** - **Parchment:** #f0e8d8 — warm parchment for primary background - **Linen:** #e8dcc8 — linen texture for card surfaces - **Dopamine Gold:** #c4960c — rich gold for primary market accent - **Ink Green:** #1a6b3c — deep green for positive market indicators - **Seal Red:** #a8321a — deep red for negative market indicators - **Ledger Black:** #1c1810 — warm near-black for text - **Brass:** #8a7a50 — warm brass for secondary text and decorative elements - **Leather Border:** rgba(196,150,12,0.15) — gold-tinted border for panels ## Imagery and Motifs **Water-Bubbles Market Value Shimmer:** Carbon credit values displayed with subtle shimmer effects — circular bubble shapes (8-16px, Dopamine Gold at 0.06 opacity) floating gently upward behind price displays, suggesting the fluid, dynamic nature of carbon market values. **Hover-Lift Raised Trading Surface:** Interactive market listings rise on hover — transform: translateY(-3px) with enhanced box-shadow (0 6px 20px rgba(28,24,16,0.12)) creating the physical quality of picking up a trading card from a textured surface to examine it more closely. **Marble-Classical Exchange Architecture:** Decorative elements drawn from classical exchange building architecture — SVG column capitals, pediment fragments, and cornice moldings (1px stroke at 0.05 opacity) suggesting the institutional gravitas of traditional commodity exchanges. **Leather-Texture Navigation Surface:** Top navigation with leather-grain texture — background: #3a3020 with subtle grain pattern (repeating-radial-gradient with micro-variation), creating the trading-desk quality of a leather-topped commodities workstation. **Graph-Paper Chart Background:** Market charts rendered on graph-paper-style backgrounds — repeating-linear-gradient creating 1px grid lines every 40px in Brass at 0.04 opacity. The graph paper creates the hand-plotted quality of commodity price histories from the era before digital screens. ## Prompts for Implementation Build the page as a skeuomorphic carbon credit marketplace. Masonry: .market-grid { columns: 3; column-gap: 20px; max-width: 1080px; margin: 0 auto; } .listing { break-inside: avoid; margin-bottom: 20px; background: #e8dcc8; border-radius: 8px; padding: 24px; } Hover lift: .listing:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(28,24,16,0.12); transition: all 200ms ease-out; } Leather nav: .exchange-nav { background: #3a3020; padding: 16px 32px; color: #f0e8d8; } Graph paper: .chart-bg { background: repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(138,122,80,0.04) 39px, rgba(138,122,80,0.04) 40px), repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(138,122,80,0.04) 39px, rgba(138,122,80,0.04) 40px); } AVOID: Modern flat trading interfaces, crypto-exchange neon dashboards, and minimal marketplace layouts. Let skeuomorphic material richness and grounded-earthy language create a carbon market where credits are traded with the tangible reverence of precious commodities on a leather-topped exchange floor. ## Uniqueness Notes 1. **Skeuomorphic for carbon marketplace:** Rich material textures make abstract carbon credits feel like tangible commodities with physical weight. 2. **Masonry as busy trading floor:** Variable-height stacking creates the active-marketplace quality of a thriving exchange with diverse offerings. 3. **Marble-classical as institutional gravitas:** Classical architecture motifs lend the carbon market the institutional credibility of established commodity exchanges. 4. **Graph-paper charts as heritage:** Hand-plotted chart backgrounds connect digital carbon trading to the physical history of commodity markets. 5. **Grounded-earthy tone as material connection:** Language rooted in physical reality keeps carbon trading connected to the actual earth it represents. **Seed/Style:** aesthetic: skeuomorphic, layout: masonry, typography: display-bold, palette: dopamine-neon, patterns: hover-lift, imagery: water-bubbles, motifs: marble-classical, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses skeuomorphic aesthetic, masonry layout, display-bold typography, dopamine-neon palette, hover-lift patterns, water-bubbles imagery, and grounded-earthy tone.