# Design Language for tanso.tech ## Aesthetics and Tone tanso.tech channels a bauhaus aesthetic — the geometric clarity, primary-form confidence, and functional beauty of Bauhaus design principles applied to a carbon (炭素/tanso) technology platform. The site constructs — with the structural honesty of Walter Gropius's Dessau Bauhaus building, the geometric precision of Josef Albers's color studies, and the systematic beauty of a carbon technology platform built on principles of form following function. Inspiration draws from the graphic design of Herbert Bayer's universal alphabet, the furniture geometry of Marcel Breuer's Wassily chair, the pedagogical clarity of the Bauhaus Vorkurs, and the technology-meets-craft ethos of contemporary carbon tech startups that combine engineering precision with environmental purpose. The tone is friendly — approachable, clear language that makes carbon technology feel accessible and inviting. The Bauhaus treatment transforms carbon technology from complex engineering documentation into visually elegant, structurally clear presentations — technology architectures are diagrammed using fundamental geometric shapes (circle, triangle, square), carbon capture processes are illustrated through Bauhaus-inspired sequential diagrams, and technical specifications are organized with the systematic clarity of Bauhaus teaching materials. The tech suffix positions the platform as a technology-first approach to carbon solutions. Each component embodies Bauhaus functional beauty — buttons as precise geometric forms, cards as proportioned rectangles following golden-ratio relationships, and decorative elements limited to circles, triangles, and straight lines. The friendly tone keeps advanced carbon technology approachable. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — content arranged like a Bauhaus-influenced technical magazine creating the editorial quality of a well-designed technology publication. **Magazine Spread System:** - Editorial spreads: 50/50 balanced split for text/visual parity - Technical sections: full-width with inner 3-column grids (equal width) - Feature articles: 60/40 split favoring text for detailed technical content - Container: max-width: 1080px centered with 48px gap - The magazine spread creates the publication quality of a premium carbon technology journal **Section Sequence:** 1. **Title Page:** Hero with display-bold typography on Bauhaus primary-color ground, flowing-curves geometric Bauhaus decorative forms, abstract-shapes elemental technology illustrations 2. **Technology Spread:** Carbon tech solutions in magazine layout — elastic interactive Bauhaus-elastic geometric feedback with abstract-shapes technical diagrams 3. **Engineering Section:** Technical details in 3-column equal grid with flowing-curves simplified construction motifs 4. **Innovation Feature:** Breakthrough carbon tech in editorial spread with flowing-curves dynamic geometric accents 5. **Imprint:** Footer as magazine imprint — friendly closing with flowing-curves minimal Bauhaus farewell **Spatial Philosophy:** - Magazine spreads create authority for carbon technology content - Equal-width columns in technical sections reflect Bauhaus commitment to democratic design - Bauhaus geometric language makes technical content visually coherent ## Typography and Palette **Typography:** - **Headlines:** "Archivo Black" (Google Fonts) — display-bold at 2.0rem-3.0rem, weight 400. Its bold geometric forms create the Bauhaus-poster quality of confident modernist technology headlines. - **Body Text:** "Work Sans" (Google Fonts) — geometric sans at 0.9rem, weight 400, line height 1.75. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.85rem for technical specifications and carbon metrics. - **Labels:** "Archivo Black" at 0.65rem, weight 400, uppercase, letter-spacing 0.15em. **Color Palette:** - **Bauhaus White:** #f5f3ef — warm off-white for primary background - **Workshop Gray:** #e8e4dc — subtle gray for card surfaces - **Bauhaus Red:** #c0392b — bold red for primary accent - **Tech Blue:** #2e6da4 — medium blue for technology accent - **Bauhaus Yellow:** #d4a017 — warm yellow for highlight accent - **High Contrast Black:** #121212 — near-black for text - **Graphite:** #5a5a5a — medium gray for secondary text - **Construction Line:** rgba(192,57,43,0.06) — faint red for structural lines ## Imagery and Motifs **Abstract-Shapes Technology Illustrations:** Carbon technology concepts illustrated through fundamental Bauhaus shapes — SVG circles (carbon capture), triangles (energy conversion), squares (data storage) combined into technical diagrams. Shapes in Bauhaus Red, Tech Blue, and Bauhaus Yellow at varying opacities (0.1-0.3). The abstract-shapes create the Bauhaus-diagram quality of complex technology reduced to geometric fundamentals. **Elastic Bauhaus Feedback:** Interactive elements respond with elastic spring animation — hover triggers scale(1.02) with spring-physics easing (cubic-bezier(0.68, -0.55, 0.265, 1.55)) creating slight overshoot before settling. The elastic quality creates the mechanical-spring feeling of Bauhaus furniture joints and industrial mechanisms. **Flowing-Curves Geometric Construction:** Decorative elements combining Bauhaus geometry with flowing curves — SVG parabolic arcs connecting geometric shapes (1.5px stroke, Tech Blue at 0.08 opacity), creating the dynamic quality of Bauhaus-influenced technical diagrams showing energy and carbon flows. **Primary Color Organization:** Content sections color-coded using Bauhaus primaries — carbon capture topics: red accent border, renewable tech: blue accent border, data/monitoring: yellow accent border. Each category immediately identifiable through color alone. **Grid Construction Lines:** Visible underlying grid structure — repeating-linear-gradient showing column edges at 0.03 opacity, creating the structural-drawing quality of Bauhaus architectural plans. ## Prompts for Implementation Build the page as a Bauhaus carbon technology magazine. Magazine spread: .tech-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1080px; margin: 0 auto; } .tech-3col { grid-template-columns: repeat(3, 1fr); } Elastic hover: .bauhaus-element { transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .bauhaus-element:hover { transform: scale(1.02); } Primary color card: .card-capture { border-left: 4px solid #c0392b; } .card-renewable { border-left: 4px solid #2e6da4; } .card-data { border-left: 4px solid #d4a017; } AVOID: Generic technology startup pages, corporate carbon-tech dashboards, and minimal documentation sites. Let Bauhaus geometric clarity and friendly accessibility create a carbon technology magazine where engineering innovation is presented with the visual elegance and democratic clarity of modernism's most influential design school. ## Uniqueness Notes 1. **Bauhaus for carbon tech:** Modernist geometric clarity makes complex carbon technology visually coherent and structurally honest. 2. **Magazine-spread as technology journal:** Editorial layout positions carbon tech content with the authority of a premium technology publication. 3. **Primary color organization as Bauhaus categorization:** Red/blue/yellow color coding creates intuitive technology topic navigation using Bauhaus's own vocabulary. 4. **Elastic feedback as mechanical spring:** Spring-physics interactions create the industrial-mechanism quality of Bauhaus-era engineering. 5. **Friendly tone as democratic access:** Approachable language embodies Bauhaus's commitment to democratizing good design and technology. **Seed/Style:** aesthetic: bauhaus, layout: magazine-spread, typography: display-bold, palette: high-contrast, patterns: elastic, imagery: abstract-shapes, motifs: flowing-curves, tone: friendly **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, minimal imagery. This design uses bauhaus aesthetic, magazine-spread layout, display-bold typography, high-contrast palette, elastic patterns, abstract-shapes imagery, and friendly tone.