# Design Language for graphers.dev ## Aesthetics and Tone A node-graph visualization IDE where developers build and explore data structures -- graphers.dev renders as a graph-theory workbench: nodes, edges, and adjacency matrices displayed on a dark canvas with neon-highlighted connections. The graph-theory aesthetic makes the abstract structure of code visible: every relationship is an edge, every entity is a node, and the developer sees the shape of their data. The tone is graph-theorist-developer: technical, visual-first, and fascinated by structure. "Every system is a graph. Let's see yours." ## Layout Motifs and Structure **Canvas System:** A central dark canvas area displaying node-and-edge graphs, with tool panels on the sides. **Section Flow:** 1. **The Canvas:** Hero with an animated node-graph visualization and the domain name. 2. **The Toolbox:** Side panels with graph-operation tools and examples. 3. **The Gallery:** Pre-built graph visualizations demonstrating different algorithms. 4. **The API:** Documentation section in code-block format. ## Typography and Palette - **Headlines:** "Space Grotesk" at 2rem-3.5rem, weight 700. - **Body/Code:** "Fira Code" at 0.9rem, weight 400, line-height 1.7. **Palette:** Canvas Dark (#0c0e18), Node Blue (#4080ff), Edge Cyan (#00d0ff), Selected Gold (#ffd040), Text (#c0d0e0), Panel (#161824). ## Imagery and Motifs **Node Circles:** CSS circles (24-48px) with colored borders and glowing box-shadows representing graph nodes. **Edge Lines:** SVG lines connecting nodes with subtle gradients (cyan to blue), animated with flowing dash patterns. **Adjacency Grid:** A matrix-style display showing connections in a grid of small squares. **Animated Graph:** The hero graph has nodes that slowly drift and edges that maintain connections, creating a living visualization. ## Prompts for Implementation Build as a graph-theory workspace. The hero graph animates continuously: nodes drift slowly, edges flex to follow. Hovering a node highlights all connected edges and adjacent nodes. The toolbox panels provide context. The gallery shows static graph examples with different visual treatments. Documentation uses code blocks with syntax highlighting. Everything is about structure made visible. ## Uniqueness Notes 1. **Graph theory as design system:** Using node-edge visual language for the entire interface creates structural coherence. 2. **Animated living graph as hero:** A continuously moving node-graph is a distinctive dynamic hero. 3. **Adjacency matrix as data display:** Using mathematical matrix format for showing relationships is technically specific. 4. **Connected-highlight interaction:** Hover-revealing graph connections creates a satisfying exploration mechanic. Document chosen seed/style: aesthetic: graph-theory, layout: canvas-panels, typography: code-grotesk, palette: dark-neon-graph, patterns: edge-animation, imagery: node-circles, motifs: adjacency-grid, tone: graph-theorist-developer