# Design Language for tanso.news

## Aesthetics and Tone
tanso.news (炭素 = Carbon, news) presents carbon news through an editorial aesthetic -- a polished, information-rich news platform with the clean authority of a premium science publication. Ethereal-blue tones create a sky-like atmosphere connecting carbon to its atmospheric context. The tone is warm-inviting -- accessible science journalism that welcomes all readers.

## Layout Motifs and Structure
**Masonry** grid with news articles and features arranged in Pinterest-style columns of varying heights, creating a dense, browsable news feed.

**Primary structure:**
- **Opening viewport (100vh):** Ethereal-blue background (#d8e4f0 to #e4ecf4) with "TANSO NEWS" in tech-mono type. Icon-based category navigation bar below.
- **Masonry news grid:** 3-column (desktop) masonry with article cards of varying heights. Each card features an icon-heavy category marker, headline, summary, and sharp-angle decorative accents.
- **Morph transitions:** Category filter changes morph the grid layout (cards smoothly resize and reposition using CSS transitions).
- **Sharp-angle section dividers:** Angular CSS clip-path cuts between major sections.

## Typography and Palette
**Fonts:**
- **Headlines:** "Share Tech Mono" (Google Fonts) -- tech monospace, weight 400, size: clamp(20px, 3vw, 36px).
- **Body:** "Source Sans 3" (Google Fonts) -- clean sans, weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.75.
- **Data:** "IBM Plex Mono" (Google Fonts) -- for dates, metrics, data.

**Palette:**
- **Ethereal Sky:** #d8e4f0 -- primary background
- **Sky Deep:** #4a7aaa -- primary accent
- **Warm Coral:** #d47a60 -- secondary accent for highlights
- **Cloud White:** #f4f8fc -- card backgrounds
- **Ink Blue:** #1a2a3a -- primary text
- **Steel Gray:** #6a7a8a -- secondary text
- **Accent Light:** #e8f0f8 -- hover states

## Imagery and Motifs
- **Icon-heavy navigation:** Custom SVG icons (24px) for carbon news categories: atmosphere, industry, policy, research, markets. Monoline style in #4a7aaa.
- **Sharp-angle card accents:** Small angular CSS clip-path details at card corners and section breaks.
- **Morph grid transitions:** CSS `transition: all 400ms ease` on grid items for smooth layout changes on filter.
- **Ethereal-blue atmospheric backdrop:** Soft blue gradients creating sky-like atmosphere throughout.

## Prompts for Implementation
Editorial carbon news platform. Masonry grid enables dense browsing. Icons provide quick category recognition. Morph transitions keep filter changes smooth. Sharp angles add editorial energy.

**Opening:** Blue gradient fades in, icon navigation bar appears with stagger, "TANSO NEWS" in tech-mono, masonry grid loads with card stagger.

AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No dark mode. No playful whimsy. No heavy decoration.

## Uniqueness Notes
1. **Editorial masonry for carbon news:** Masonry grid specifically optimized for news article browsing with icon-based category navigation.
2. **Ethereal-blue atmospheric palette for science journalism:** The sky-connected blue palette creates atmospheric context for carbon/atmospheric science news.
3. **Morph grid on category filter:** Smooth morphing transitions when filtering news categories creates fluid browsing experience.
4. **Tech-mono headlines in editorial context:** Monospace headlines in a news context create unique journalistic-technical visual identity.

**Seed/style:** editorial aesthetic, masonry layout, tech-mono typography, ethereal-blue palette, morph patterns, icon-heavy imagery, sharp-angles motifs, warm-inviting tone
**Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no warm palette (87%), no photography (78%), no mysterious-moody tone (67%)