# Design Language for graphers.dev ## Aesthetics and Tone `graphers.dev` is a **holographic instrument panel for people who think in data** — imagine the cockpit of a craft that has been flying since 1982, retrofitted with iridescent prismatic film over every readout. The original hardware is CRT-era: amber numerals, phosphor-green sweeping arcs, segmented LED displays — but someone has layered holographic dichroic glass across the entire face. Now the amber bleeds into magenta, the green bleeds into gold, and every edge prismatically splits into a thin spectral fringe when the viewport tilts. The mood is **futuristic-cutting-edge but anchored in instrument heritage**. This is not a vaporwave nostalgia trip — it is the forward edge of serious tooling that respects where readout culture came from. The site should feel like the first time you held a scientific calculator that had a brushed-aluminum face instead of plastic: precision, warmth, and a quiet confidence that it will outlast every trend. **Color temperature:** Warm void. Deep near-black with orange-amber warmth (#120A02), not cold black. The holographic elements live on top of warmth, not cold blue-gray. **Emotional arc:** You arrive, and the page feels like a control room at dusk — every instrument glowing in sunset amber, the holographic overlay turning each readout into a small prism. You leave knowing this tool was built by engineers who love their craft. ## Layout Motifs and Structure The page is organized as a **fixed-left sidebar driving a wide main panel** — not a navigation drawer, but a live instrument rail. The sidebar is 260px wide, fixed to the viewport left edge, its surface a slightly warmer near-black (#1C1007) with a 1px right border that itself shifts color under a holographic-foil animation (it cycles through #FF6B35 → #FF9F1C → #FFBF69 → #C77DFF over 8 seconds, continuously). This border is the site's heartbeat. **Sidebar contents (top to bottom):** 1. **Wordmark rail** — `graphers.dev` in retro-display type, 18px, tracking 0.18em, vertically stacked in the top 80px block. Beneath it: a 1px hairline in #FF6B35 at 40% opacity. 2. **Navigation nodes** — five items, each a 44px-tall horizontal band. Active state: left border 3px #FF9F1C, background rgba(255,107,53,0.08). Hover state: pulse-attention animation fires — the text brightens to #FFBF69 and a soft radial glow (6px blur, #FF9F1C at 20% opacity) pulses once over 400ms. 3. **Live status module** — bottom of sidebar, a 3-line instrument readout showing simulated live metrics (graphs rendered, datasets active, render latency). The values use segmented LED-style glyphs. **Main panel:** The remaining viewport width. It does NOT center a column — it uses the full space as a **graph canvas territory**, meaning content is laid out on an invisible grid with 32px gutters. Sections are not cards; they are **instrument zones** — rectangular regions with thin hairline borders (1px, #FF6B35 at 15% opacity) and no background fill. The space between zones is 32px. **Hero zone:** Full-width within the main panel, 480px tall. Contains the primary holographic abstract shape (a large prismatic polyhedron rendered as SVG, slowly rotating on a single axis, casting spectral fringe shadows in sunset colors). The wordmark appears large here too — 72px, same retro-display font. **Scroll behavior:** The sidebar never scrolls. The main panel scrolls normally. On scroll, instrument zones enter the viewport with a pulse-attention animation: their hairline borders briefly intensify (opacity 15% → 70% over 300ms then fade back), as if the instrument is warming up. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Display & hero — `Share Tech Mono`**: Used for the large hero wordmark (72px, tracking 0.06em), section titles (32px, tracking 0.10em), and all numerical readouts. `Share Tech Mono` has the right DNA — it reads as a technical monospaced typeface with a slight retro-CRT feeling without being cartoonish. Weight is regular (400); the boldness comes from size and color, not weight. - **Navigation & UI labels — `Rajdhani`**: A condensed humanist sans-serif with a slightly technical, angular quality that complements the retro-display heading font. Used at 14px, weight 500, tracking 0.08em for sidebar navigation items and zone labels. Rajdhani has a modular quality that reads as "instrument panel UI" without being mono. - **Body & prose — `IBM Plex Sans`**: Used for all descriptive text, documentation prose, and secondary content within zones. 16px, weight 400, line-height 1.65. Provides clean readability against the dark warm background with no retro affectation — the reader's comfort layer. - **Code & data values — `JetBrains Mono`**: Variable weight 100–800. Used for code snippets, API references, and live metric values in the status module. 14px, weight 350 (lighter than conventional code weight, which reduces the "code dump" heaviness). **Palette — sunset-warm on void:** - `#120A02` — Primary background (warm near-black, slightly amber-tinted void) - `#1C1007` — Sidebar surface (slightly lighter warm near-black) - `#FF6B35` — Primary accent, orange-flame (holographic fringe color 1, also hairlines and active borders) - `#FF9F1C` — Secondary accent, amber-gold (holographic fringe color 2, hover states, hero glow) - `#FFBF69` — Tertiary accent, warm light-amber (bright highlights, pulse-attention brightening target) - `#C77DFF` — Spectral fringe violet (holographic prismatic edge accent — appears only on the rotating polyhedron fringe and the border heartbeat cycle, never as a background) - `#F5E6D3` — Primary text (warm off-white, not pure white — reduces harshness against warm dark) - `#8B7355` — Secondary text, muted warm taupe (nav items inactive, zone labels) **Holographic treatment:** The dichroic effect is achieved through a CSS `background: linear-gradient(135deg, #FF6B35, #FF9F1C, #FFBF69, #C77DFF, #FF6B35)` at `background-size: 300% 300%` animated with `background-position` cycling — applied to specific SVG stroke elements and the sidebar's right border, not to backgrounds. This keeps the holographic effect as an accent material, not wallpaper. ## Imagery and Motifs **No photography. No stock imagery.** All visual elements are constructed from abstract geometric shapes in SVG — specifically prismatic polyhedra, angular crystal facets, and data-graph-inspired abstract forms. **Hero polyhedron:** A large SVG icosahedron-derived shape (not a literal icosahedron — more like a slightly irregular 12-faced crystal) rendered with flat faces in slightly varied warm-dark tones (#1C1007 to #2A1A08). Its edges are stroked in the holographic gradient animation. It rotates 360° on a tilted axis over 24 seconds using CSS `transform: rotateY()` combined with a subtle `rotateX(15deg)` tilt. At each vertex, a tiny spectral fringe flare (3px white circle with a 12px radial gradient in sunset colors) suggests the prismatic splitting of a holographic surface. **Graph topology motifs:** Behind the main panel content, a very subtle `position: fixed` SVG layer shows faint abstract graph edges — nodes as 4px circles in #FF6B35 at 4% opacity, edges as 1px lines at 3% opacity. The graph topology is a Voronoi-derived irregular structure, not a grid. It never moves. It is the substrate. **Pulse-attention animation (core pattern):** When an element needs to draw attention (nav hover, zone enter-viewport, CTA), a radial pulse emanates from its center: a circle expands from 0 to 160% of the element's width, opacity 30% → 0%, over 500ms, in #FF9F1C. This is the site's single interactive language — clean, warm, unhurried. It is used nowhere else (no other hover animations, no lift shadows, no color-change transitions except the pulse target brightening). **Segmented LED display motif:** The live status module and any numerical callouts use SVG-rendered 7-segment display characters built from thin rectangular segments in #FF9F1C at varying opacity (active segment: 90%, inactive segment: 12%). These are not a font — they are constructed SVG elements. They give the sidebar its instrument-panel character without requiring a custom font. **Abstract-tech texture:** A very fine `noise` SVG filter (baseFrequency 0.65, numOctaves 3, stitchTiles "stitch") applied at 3% opacity over the primary background creates a subtle grain that prevents the flat dark feel and adds the material quality of a slightly textured instrument face. ## Prompts for Implementation Build `graphers.dev` as **a holographic instrument cockpit for the data visualization practitioner**, rendered as a fixed-sidebar single-page application shell. **Implementation priorities:** **1. The sidebar is the site's spine — build it first.** Fixed-left, 260px, `position: fixed`, `top: 0`, `left: 0`, `height: 100vh`, background `#1C1007`. The right border must be implemented as a `::after` pseudo-element with a `background: linear-gradient(...)` that animates position — this is the heartbeat border. The sidebar should feel warm and alive even when nothing is being hovered. **2. Pulse-attention is the ONLY interaction language.** Do not add hover lifts, color swaps, or box-shadow transitions anywhere except within the pulse-attention system. When a nav item is hovered: (a) the text moves to `#FFBF69`, (b) a `::after` radial overlay pulses out and fades. When a zone enters the viewport: its hairline border pulse fires once. Implement all pulses as a single shared CSS keyframe animation — `@keyframes pulse-radial` — so they are visually consistent across all contexts. **3. The hero polyhedron is generated, not image-based.** Construct the hero SVG as a `` arrangement representing the 20 visible faces of a tilted crystal form. Each face gets a `fill` value between `#1C1007` and `#2A1A08` based on its simulated normal-vector angle to a virtual light source at top-left. The edges (`` or ``) receive a `stroke` using the holographic gradient `linearGradient` defined in the SVG ``. The rotation is CSS-only via `animation: spin 24s linear infinite` on the SVG's wrapper `` with `transform-origin: center center`. **4. Instrument zones replace cards.** Never use `border-radius` on zone containers. Zones are rectilinear — `border: 1px solid rgba(255,107,53,0.15)`. There are no drop shadows, no background-color fills on zones (they are transparent), no rounded corners anywhere in the UI. The aesthetic discipline is aerospace instrument panel: everything is a rectangle, everything is a readout, nothing is decorative. **5. Story arc for the scrolling main panel:** - **Zone 0 (Hero):** Crystal polyhedron + large wordmark + one-line manifesto: "Data is the instrument. Graphers.dev is the panel." - **Zone 1 (What it does):** Three horizontal instrument bands, each with a `Share Tech Mono` label and `IBM Plex Sans` description. No icons — just type and thin hairlines. - **Zone 2 (Graph examples):** Actual SVG graph renderings (line chart, network graph, histogram) in the sunset palette, no background fills on the charts themselves — they float on the warm void. - **Zone 3 (API reference fragment):** A `JetBrains Mono` code block in a zone with the hairline border and a header label in `Rajdhani`. - **Zone 4 (Status/live):** A full-width zone showing animated 7-segment metric displays, as if the dashboard is live. Values tick up slowly via JavaScript `setInterval` at 2-second intervals. - **Zone 5 (Footer):** Minimal — just `graphers.dev` in `Share Tech Mono` 14px and three links in `Rajdhani`. **6. The Voronoi substrate layer must be non-interactive.** Set `pointer-events: none` and `user-select: none` on the fixed SVG background layer. Opacity must not exceed 5% on any element — it is subliminal texture, not decoration. **Avoid:** - Card-style rounded containers - Pricing blocks or stat-grids with icons - Any photography or external image URLs - Blue-tinted dark backgrounds (keep all dark values warm: #120A02, #1C1007) - Multiple competing animation types — only pulse-attention fires - Pure white text (#FFFFFF) — always use the warm off-white #F5E6D3 ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **holographic**, layout = **sidebar**, typography = **retro-display**, palette = **sunset-warm**, patterns = **pulse-attention**, imagery = **abstract-shapes**, motifs = **abstract-tech**, tone = **futuristic-cutting-edge**. **Differentiators from the existing 142-design corpus:** 1. **Pulse-attention as the sole interaction language (0% frequency in corpus).** Every other design in the registry uses multiple hover/interaction patterns (lift, fade, color-swap, parallax). graphers.dev commits to a single radial pulse as its entire interaction vocabulary — this enforces aesthetic discipline and creates a highly recognizable, coherent interface personality. 2. **Holographic-on-warm-void instead of holographic-on-cold-dark.** The corpus's holographic/iridescent designs default to cool blue-black backgrounds. graphers.dev inverts this: the void is warm amber-black (#120A02), making the prismatic color fringe appear as sunset light hitting crystal rather than laser light on chrome. This is an unrealized combination in the registry. 3. **Retro-display typography built from instrument heritage, not nostalgia.** `Share Tech Mono` is chosen not for CRT camp value but because it reads authentically as an instrument-panel typeface — the kind of type used on scientific readouts before display fonts existed. Combined with SVG 7-segment LED display characters for numerical values, the type system earns the retro-display category through functional lineage rather than decorative pastiche. 4. **Instrument zones replacing cards everywhere (no border-radius).** The corpus shows 84%+ of designs using some form of card or rounded container. graphers.dev enforces a strict rectilinear constraint — every container is an instrument zone with a 1px hairline border and zero border-radius — aligning with aerospace HUD discipline. This is paired with no fill on zone backgrounds, making content appear to float directly on the warm void. 5. **Graph substrate as structural decoration.** The faint Voronoi graph topology fixed behind all content is simultaneously decorative and semantically appropriate for a graphing tool — the site's visual substrate is literally a graph. This is not random generative art; it is a deliberate echo of the product's purpose rendered at near-invisibility.