# Design Language for tanso.in ## Aesthetics and Tone tanso.in (炭素 = Carbon, India/.in) presents carbon science through glassmorphism with an Indian cultural lens -- frosted glass panels float over duotone landscapes, arranged in a hexagonal honeycomb that references both carbon's molecular geometry and traditional Indian jali (lattice) screens. The visual identity draws from the geometric precision of Mughal architectural latticework, the duotone photography of Indian documentary filmmaking, vintage Bollywood poster aesthetics, and the molecular hexagons of graphene/benzene. The tone is pastoral-romantic -- finding beauty in carbon's ubiquity across Indian landscapes and culture. ## Layout Motifs and Structure **Hexagonal-honeycomb** layout where content panels are arranged in a tessellated hexagonal grid, each hexagon being a glassmorphic window into carbon-related content. **Primary structure:** - **Opening viewport (100vh):** A duotone background (deep teal #0a3a3e and warm gold #c4a040 as the two tones) with a central hexagonal glass panel containing "TANSO" and ".in" in eclectic type pairing. - **Honeycomb content grid:** Hexagonal panels tessellated across the page, each housing different carbon topics. Panels are glassmorphic with backdrop-filter blur. The honeycomb references both graphene and jali screens. - **Zoom-focus hexagon interaction:** Hovering a hexagonal panel causes it to scale slightly (1.05x) with enhanced backdrop blur and brightness, focusing attention. - **Vintage Indian cultural accents:** Decorative elements inspired by Indian textile patterns and architectural motifs at low opacity. ## Typography and Palette **Fonts:** - **Headlines:** "Playfair Display" (Google Fonts) combined with "DM Sans" (Google Fonts, weight 700) -- eclectic serif/sans pairing. Playfair for English at clamp(28px, 4.5vw, 52px), DM Sans for Hindi transliterations. - **Body:** "Inter" (Google Fonts) -- weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.75. - **Labels:** "Fira Mono" (Google Fonts) -- for molecular formulas and data. **Palette:** - **Deep Teal:** #0a3a3e -- duotone dark - **Warm Gold:** #c4a040 -- duotone warm - **Saffron:** #e88a30 -- cultural accent - **Glass White:** rgba(255,255,255,0.15) -- hexagonal panel fills - **Ivory Text:** #f0e8d4 -- text on dark - **Midnight:** #0a1e20 -- deepest shadows - **Jade Green:** #3a8a6a -- secondary accent ## Imagery and Motifs - **Glassmorphic hexagonal panels:** CSS clip-path hexagons with backdrop-filter: blur(16px), rgba(255,255,255,0.15) fill, 1px white border at 0.2 opacity. - **Duotone photography treatment:** Background images processed through duotone filter (CSS filter: grayscale(100%) sepia(100%) hue-rotate() saturate()) in teal-gold palette. - **Vintage Indian patterns:** Jali-inspired geometric lattice patterns at 0.04 opacity as background textures. - **Zoom-focus interaction:** `transform: scale(1.05); filter: brightness(1.1); backdrop-filter: blur(20px)` on hexagonal panel hover. - **Molecular hexagon geometry:** The hexagonal layout itself IS the carbon motif -- each panel represents a carbon atom in a graphene sheet. ## Prompts for Implementation Indian-cultural glassmorphic carbon experience. Hexagonal honeycomb references both graphene and jali screens. Duotone treatment creates cinematic unity. Vintage cultural accents add regional specificity. **Opening:** Duotone background fades in, central hexagonal panel draws itself (CSS border animation), title appears within glass panel. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No corporate Western aesthetic. No bright white backgrounds. No flat design. ## Uniqueness Notes 1. **Hexagonal honeycomb as both molecular model and cultural lattice:** The layout simultaneously references carbon's graphene structure and Indian jali architectural screens. 2. **Glassmorphic hexagons with duotone photography:** Frosted hexagonal panels over duotone-treated landscapes create a unique cultural-scientific visual system. 3. **Indian cultural aesthetic for chemistry content:** No other design applies Indian architectural and textile traditions to molecular science. 4. **Duotone teal-gold as carbon palette:** The specific teal-gold combination references both scientific and cultural Indian visual traditions. **Seed/style:** glassmorphism aesthetic, hexagonal-honeycomb layout, eclectic-hybrid typography, duotone palette, zoom-focus patterns, photography imagery, vintage motifs, pastoral-romantic tone **Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no warm palette (87%), no mono typography (86%), no mysterious-moody tone (67%)