# Design Language for tanso.news ## Aesthetics and Tone tanso.news channels a graffiti aesthetic — the spray-painted urgency, street-level authenticity, and subversive visual language of graffiti art applied to a carbon (炭素/tanso) news platform. The site shouts — with the aerosol energy of Banksy's political commentary, the typographic rebellion of hand-painted protest signs, and the raw credibility of news delivered from the street level where carbon emissions are actually felt. Inspiration draws from the graffiti typography of RETNA's cryptic scripts, the street-art journalism of JR's large-format paste-ups, the political graffiti traditions of Berlin's East Side Gallery, and the punk zine aesthetics of independent environmental journalism that refuses corporate polish. The tone is scholarly-intellectual — surprisingly erudite language that creates compelling tension with the raw graffiti visuals. The graffiti treatment transforms carbon news from sterile newsroom reporting into visceral street-level journalism — headlines spray-painted across digital walls, breaking news tagged with the urgency of freshly painted protest slogans, and investigative pieces presented with the raw authenticity of wheat-pasted manifestos. The news metaphor positions carbon information as urgent, timely, and demanding immediate attention. Each component carries graffiti's raw energy — drip effects on borders, spray-painted texture overlays, bold stencil-style typography, and the deliberate imperfection of hand-made visual elements. The scholarly-intellectual tone creates productive tension — rigorously researched carbon journalism presented through the visual language of street protest. ## Layout Motifs and Structure The layout uses a **card-grid** architecture — news stories arranged in modular card tiles creating the bulletin-board quality of community news walls where carbon stories are posted, layered, and constantly updated. **Card Grid News Wall:** - Cards: 340px min-width in auto-fill grid, 16px gap - Feature stories: span 2 columns for breaking news - Cards with visible rough edges (border-radius: 2px — deliberately not rounded) - Container: max-width: 1100px centered - The card grid creates the wheatpaste-wall quality of layered news posters on urban surfaces **Section Sequence:** 1. **Street Front:** Hero with sans-grotesk typography over graffiti-texture ground, floral-botanical organic spray-paint motifs, gradient-mesh atmospheric street-art imagery 2. **Breaking Wall:** Lead stories in featured card grid — shake-error interactive spray-can-rattle engagement with gradient-mesh atmospheric news imagery 3. **Tag Board:** Story categories in card grid with floral-botanical simplified organic spray motifs and gradient-mesh color-atmosphere accents 4. **Deep Read Alley:** Long-form carbon journalism in expanded card format with floral-botanical detailed organic decorations 5. **End Tag:** Footer as artist's signature — scholarly sign-off with floral-botanical final organic flourish and graffiti tag mark **Spatial Philosophy:** - Card grid creates the chaotic energy of a living news wall constantly being updated with fresh carbon stories - Feature cards breaking the grid create the visual hierarchy of important stories pasted larger and bolder - Rough edges and tight spacing create authentic street-poster density ## Typography and Palette **Typography:** - **Headlines:** "Pathway Gothic One" (Google Fonts) — sans-grotesk condensed at 2.2rem-3.6rem, weight 400. Its tall, narrow letterforms create the stencil-spray quality of political graffiti typography. - **Body Text:** "Libre Franklin" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.7. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.8rem for emissions data and carbon statistics. - **Labels:** "Pathway Gothic One" at 0.7rem, weight 400, uppercase, letter-spacing 0.1em. **Color Palette:** - **Concrete:** #e8e4dc — warm concrete gray for primary background - **Wall White:** #f4f0e8 — warmer white for card surfaces - **Spray Red:** #d42c2c — bold red for primary graffiti accent - **Translucent Frost:** rgba(200,215,230,0.3) — frosty translucent for glass-overlay effects - **Stencil Black:** #1a1a1a — bold black for stencil typography - **Carbon Teal:** #1a8a7a — dark teal for environmental indicators - **Rust:** #8a4a2a — warm rust for secondary accents - **Drip Border:** rgba(212,44,44,0.12) — red-tinted border suggesting spray paint drips ## Imagery and Motifs **Gradient-Mesh Atmospheric Street Art:** Background atmospheres using multi-point gradient meshes — radial-gradient(at 20% 30%, rgba(212,44,44,0.03) 0%, transparent 40%), radial-gradient(at 80% 60%, rgba(26,138,122,0.02) 0%, transparent 35%). The gradient mesh creates the atmospheric quality of spray-painted surfaces where colors blend in aerosol clouds. **Shake-Error Spray Rattle:** Interactive elements trigger brief shake animation on engagement — transform: translateX(2px) alternating to translateX(-2px) over 200ms (3 oscillations) simulating the rattle of a spray can being shaken before use. **Floral-Botanical Organic Spray Motifs:** Decorative elements combining graffiti energy with botanical forms — SVG stylized leaves and vine patterns rendered as if spray-painted (2px stroke with slight drip effects at terminals, Carbon Teal at 0.06 opacity). The botanical spray-paint creates the eco-graffiti quality of environmental art activism. **Spray-Texture Overlay:** Subtle aerosol texture on card surfaces — background-image with fine speckle pattern (0.5px dots at random positions, 0.015 opacity) suggesting the fine overspray of aerosol applications. **Drip Effect Borders:** Card borders with deliberate drip irregularities — border-bottom: 3px solid rgba(212,44,44,0.15) with pseudo-element drip marks (small 3px x 8px extensions at irregular intervals). The drips create the authentic quality of fresh graffiti paint running before it dries. ## Prompts for Implementation Build the page as a graffiti carbon news wall. Card grid: .news-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; } .breaking { grid-column: span 2; } Spray rattle: .rattle:hover { animation: shake 200ms ease-out 3; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(2px); } 75% { transform: translateX(-2px); } } Graffiti card: .news-card { background: #f4f0e8; border: 1px solid rgba(212,44,44,0.08); border-radius: 2px; padding: 24px; border-bottom: 3px solid rgba(212,44,44,0.15); } AVOID: Clean newsroom interfaces, corporate news aggregators, and polished journalism platforms. Let graffiti urgency and scholarly-intellectual rigor create a carbon news wall where environmental journalism hits with the raw authenticity of street art and the intellectual depth of peer-reviewed research. ## Uniqueness Notes 1. **Graffiti for carbon news:** Street-art urgency makes environmental journalism feel immediate and authentic rather than corporate and sanitized. 2. **Card-grid as news wall:** Layered card layout creates the living-wall quality of urban news surfaces constantly being updated. 3. **Scholarly tone vs. graffiti visuals:** Intellectual rigor within raw visual chaos creates productive tension between authority and rebellion. 4. **Floral-botanical as eco-graffiti:** Spray-painted botanical motifs merge environmental themes with street-art aesthetics. 5. **Shake-error as spray-can ritual:** The spray-can-rattle interaction connects every user engagement to the physical ritual of aerosol art creation. **Seed/Style:** aesthetic: graffiti, layout: card-grid, typography: sans-grotesk, palette: translucent-frost, patterns: shake-error, imagery: gradient-mesh, motifs: floral-botanical, tone: scholarly-intellectual **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses graffiti aesthetic, card-grid layout, sans-grotesk typography, translucent-frost palette, shake-error patterns, gradient-mesh imagery, and scholarly-intellectual tone.