# Design Language for haskeller.net ## Aesthetics and Tone A community hub for Haskell practitioners -- haskeller.net is the digital gathering place where functional programmers share knowledge, discuss ideas, and build connections. The aesthetic is forum-refined: structured like a classic web forum or mailing list archive, but redesigned with modern typographic standards and a clean, professional palette. Think Hacker News meets academic journal -- information-dense but beautifully organized. The design prioritizes scannability and information hierarchy over visual spectacle. The tone is community-technical -- collegial, knowledgeable, and peer-oriented, like the best technical mailing lists where experts discuss ideas with mutual respect. ## Layout Motifs and Structure The layout uses a **thread-list** architecture -- content is organized as a list of discussion threads/topics, mimicking a refined forum or mailing list index. **Thread System:** - Single column, max-width 860px, centered - Each thread entry is a horizontal row with: category tag, title, author, date, reply count - Rows separated by 1px borders (#e8e4ef) - Category tags are small colored pills (border-radius: 4px) in the Haskell purple family - The list is grouped by category with sticky category headers **Section Flow:** 1. **Header Bar:** A clean 56px bar with "haskeller.net" in sans-serif, a search input (styled simply), and a "Haskell" lambda icon (λ) in purple. 2. **Category Navigation:** A horizontal row of category pills: Types, IO, Libraries, GHC, Theory, Community, Events, Jobs. 3. **Thread Index:** The main content area -- rows of discussion threads sorted by recency, with clear typographic hierarchy (title bold, metadata lighter). 4. **Sidebar Panel (optional, 240px):** On wider screens, a right sidebar shows: "Active Users" count, "Popular Tags" cloud, and "Recent Packages" list. 5. **Footer:** Links and community guidelines in compact text, with the lambda symbol as a visual anchor. ## Typography and Palette **Typography:** - **Headlines/Titles:** "Inter" (Google Fonts) -- the workhorse of technical UI typography, with excellent rendering at all sizes. Used at 1rem-1.5rem, weight 600, for thread titles and section headers. - **Body:** "Inter" at 0.9rem, weight 400, line-height 1.6 for thread metadata, descriptions, and body text. - **Code Inline:** "JetBrains Mono" (Google Fonts) at 0.85rem for inline code mentions within thread titles. - **Category Tags:** "Inter" at 0.7rem, weight 600, letter-spacing: 0.03em, text-transform: uppercase. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background | Clean white | #fafafa | Page background | | Surface | Slight gray | #f5f3f8 | Header bar, sidebar | | Haskell Purple | Brand purple | #5e5086 | Primary accent, category tags, links | | Purple Light | Soft purple | #e8e0f5 | Tag backgrounds, hover states | | Text Primary | Dark gray | #1f1f2e | Thread titles | | Text Secondary | Medium gray | #5a5870 | Metadata, descriptions | | Text Muted | Light gray | #9090a0 | Timestamps, counts | | Border | Light border | #e8e4ef | Row dividers | | Success Green | Muted green | #3a8a5a | Online indicators, resolved threads | ## Imagery and Motifs **Thread Row Hover:** Rows gain a subtle background tint (#f5f3f8) on hover, with a 1px left border appearing in Haskell purple (#5e5086). Transition: 150ms ease. **Category Tag Pills:** Small rounded rectangles (border-radius: 4px, padding: 2px 8px) with #e8e0f5 background and #5e5086 text, used to label thread categories. **Lambda Symbol (λ):** A small λ in Haskell purple appears in the header and footer as the community's visual identity mark. It is 24px in the header, 16px in the footer. **Reply Count Badges:** Thread reply counts displayed in small circular badges (24px, border-radius: 50%) with purple background and white text. **Information Density:** The design embraces density -- thread rows are compact (48px height) with all metadata visible at a glance. No cards, no excessive padding, no decorative elements that waste vertical space. ## Prompts for Implementation Build the page as a refined technical community index. The thread list should feel immediately scannable -- a developer should be able to find a relevant discussion in seconds by scanning titles and category tags. The Inter font family ensures clean rendering at the small sizes used for metadata. The Haskell purple accent is used consistently but sparingly: category tags, links, hover borders, and the lambda mark. The overall impression should be of a well-organized knowledge base where information is the decoration. Keep load times fast and interactions snappy -- 150ms max for all hover transitions. The optional sidebar adds utility without cluttering the main thread list. AVOID: hero sections, large images, animations, dark themes, marketing language, card layouts with shadows, decorative illustrations. ## Uniqueness Notes 1. **Refined forum/thread-list layout:** The mailing-list-archive pattern modernized with clean typography is rare in web design portfolios. 2. **Information-density as aesthetic:** Embracing compact, scannable rows rather than spacious cards creates a distinctive utility-first design. 3. **Category tag pill system:** The consistent purple-family tag system creates visual categorization without sacrificing density. 4. **Community-technical tone:** The collegial, peer-oriented voice is distinct from both corporate marketing and casual social media. Document chosen seed/style: aesthetic: forum-refined, layout: thread-list, typography: ui-sans, palette: haskell-minimal, patterns: row-hover, imagery: text-only, motifs: lambda-mark, tone: community-technical Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)