# Design Language for graphers.net ## Aesthetics and Tone A data-visualization community network where graphers share their craft -- graphers.net renders as a gallery/portfolio platform for data visualization practitioners, using the warm tones and clean grids of a design community site. The community-gallery aesthetic prioritizes showing work: clean card grids, generous image areas, and minimal UI chrome let the visualizations speak. The tone is community-collegial: "Welcome to the network. Show us what you see in the data." ## Layout Motifs and Structure **Gallery System:** A masonry-style grid of visualization showcases with profile cards. **Section Flow:** 1. **The Network:** Hero with the domain name and a stylized network-graph connecting member nodes. 2. **The Gallery:** Masonry grid of visualization showcase cards. 3. **The Members:** Profile cards in a regular grid showing community members. 4. **The About:** Closing section with community mission and join information. ## Typography and Palette - **Headlines:** "DM Sans" at 2rem-3.5rem, weight 700. - **Body:** "DM Sans" at 0.95rem, weight 400, line-height 1.7. - **Metadata:** "DM Mono" at 0.8rem, weight 400. **Palette:** Warm White (#faf8f4), Card White (#ffffff), Coral (#e06050), Teal (#20a0a0), Charcoal (#2a2a2a), Muted (#808080), Border (#e0dcd4). ## Imagery and Motifs **Showcase Cards:** White cards with 1px border, image area (16:9), title, author, and category tag. **Network Illustration:** Hero SVG showing interconnected circles (members) with curved connection lines. **Category Tags:** Small pill-shaped labels (border-radius: 999px) in coral or teal for categorization. **Member Profile Cards:** Square cards with avatar placeholder (initials in colored circle), name, and specialization. ## Prompts for Implementation Build as a design community gallery. Clean, warm, and welcoming. Cards load in a staggered masonry grid. The network illustration in the hero conveys community connection. Category tags provide visual filtering cues. Profile cards create a sense of real people behind the work. Hover on showcase cards lifts them slightly with increased shadow. The warm white background and coral/teal accents create a friendly professional atmosphere. ## Uniqueness Notes 1. **Visualization community gallery:** A portfolio platform specifically for data-viz practitioners is a distinctive niche. 2. **Network graph as community illustration:** Using a node-graph to represent the member network is thematically perfect. 3. **Warm professional palette:** Coral and teal on warm white creates a distinctive friendly-professional atmosphere. 4. **Masonry showcase grid:** The variable-height card grid suits visualization showcases that come in different aspect ratios. Document chosen seed/style: aesthetic: community-gallery, layout: masonry-grid, typography: geometric-sans, palette: warm-coral-teal, patterns: showcase-cards, imagery: network-illustration, motifs: category-tags, tone: community-collegial