# Design Language for concepts.news ## Aesthetics and Tone A retro concept gazette -- imagine a 1970s counterculture newspaper dedicated to tracking emerging ideas, printed on recycled paper with forest-green ink and assembled with the care of a zine editor. The visual identity channels the analog warmth of underground press: hexagonal grid layouts suggest beehive collaboration, marble-textured mastheads evoke classical foundations, and the retro typography carries the authority of a publication that has been chronicling concepts since before the internet. Grid-line backgrounds reference graph paper where new ideas are first sketched. The tone is whimsical-creative: serious about ideas but playful in presentation. ## Layout Motifs and Structure The layout uses a hexagonal-honeycomb grid for the concept archive: news items are displayed in tessellating hexagons (160px wide, CSS clip-path) arranged in offset rows within a centered container (max-width 1000px). The masthead/hero section uses a traditional newspaper-style full-width banner with centered title and date, set against a marble-textured background. Below the hero, a "featured concept" section uses a single full-width card before the hexagonal grid begins. Each hexagonal news tile has a 2px border in #2d5a3d and contains a concept title, date, and category tag. Navigation resembles newspaper section tabs: horizontal, serif-styled text with pipe separators. A sidebar "Concept Index" panel appears on desktop (right side, 240px wide) with an alphabetical list of recent concepts. ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) -- a versatile variable serif with formal authority that shifts between display and text weights. Used at 2rem-4.5rem, weight 500-800, FLAR axis varied for display vs text, line-height 1.15. - **Body:** "Merriweather" (Google Fonts) -- a serif designed for screen reading with generous x-height and open counters. Used at 1rem, weight 400, line-height 1.75. - **Meta/Labels:** "Commissioner" at lighter weight -- used at 0.8rem, weight 300, letter-spacing: 0.03em, for dates and categories. **Palette:** - Forest: #2d5a3d (deep forest green) -- headings, borders, primary accents - Sage: #6b8f71 (sage green) -- secondary text, hover states - Cream: #f5f0e0 (aged newsprint) -- primary background - Marble: #d5cfc0 (warm marble) -- masthead background, featured sections - Dark: #1a2e1f (dark forest) -- body text - Accent: #8b6834 (aged gold) -- links, highlights - Grid: #c8c0b0 (faded tan) -- grid-line backgrounds ## Imagery and Motifs Marble textures appear in the masthead: CSS-generated veining using layered gradients in #d5cfc0 and #c8c0b0 at varying opacities. Grid-line backgrounds use a repeating SVG pattern of thin perpendicular lines (#c8c0b0 at 30% opacity, 24px intervals) creating graph-paper underpinning. Hexagonal news tiles have a subtle paper-grain texture (CSS noise at 3% opacity). Fade-reveal animations bring content into view as the user scrolls. Decorative elements include small botanical line-art icons (leaf, acorn, branch) in #2d5a3d used as category indicators and section dividers. The newspaper aesthetic is reinforced with thin horizontal rules (1px, #6b8f71) between content sections and small typographic ornaments (asterisks, daggers) as section markers. ## Prompts for Implementation Build the page as a digital concept newspaper. The masthead loads immediately -- no animation, establishing authority from the first frame. The featured concept card fades in over 500ms with a subtle scale(0.99) to scale(1) transition. Hexagonal archive tiles fade-reveal on scroll with a 60ms stagger, entering from opacity 0 to 1 with no movement (letting the hex shape itself provide visual interest). Hovering a hex tile changes its background from #f5f0e0 to #d5cfc0 with a 200ms transition, and the border brightens from #2d5a3d to #6b8f71. The sidebar concept index on desktop uses a smooth scroll-to-section behavior when items are clicked. The graph-paper background creates a subtle scholarly underpinning to the entire page. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. This is a concept chronicle, not a content feed. ## Uniqueness Notes 1. **Retro concept gazette:** No other design presents news content through a 1970s counterculture newspaper lens with hexagonal archive tiles, creating a unique publication identity. 2. **Hexagonal news tessellation:** Using honeycomb layout for news items creates a distinctive archive visualization not found in traditional news layouts. 3. **Marble masthead with graph-paper body:** The contrast between classical marble header and scholarly graph-paper background creates a unique layered academic-journalistic aesthetic. 4. **Commissioner variable font newspaper styling:** Using Commissioner's FLAR axis to shift between display and text creates nuanced typographic hierarchy within a single font family. Document chosen seed/style: aesthetic: retro, layout: hexagonal-honeycomb, typography: commissioner-versatile, palette: forest-green, patterns: fade-reveal, imagery: marble-texture, motifs: grid-lines, tone: whimsical-creative Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)