# Design Language for plotgrapher.com ## Aesthetics and Tone plotgrapher.com embodies the visual philosophy of a zen stone garden where every pebble is a data point and every raked line is an axis. The aesthetic draws from the contemplative discipline of Japanese ink-wash painting (sumi-e) applied to the language of mathematical graphing -- imagine Sesshuu Touyou's brushwork reinterpreted as coordinate geometry, where the negative space between plotted curves carries as much meaning as the curves themselves. The tone is scholarly-intellectual: it speaks to the reader as a fellow thinker who finds beauty in the irreducible clarity of a well-drawn function. There is no sales pitch, no urgency, no gamification. The site breathes. It pauses. It invites the visitor to trace the arc of a parabola with their eyes the way a calligrapher traces a stroke with their brush -- slowly, with attention to the weight and direction of every inflection point. The mood references the stillness of a university mathematics library at 2 AM: warm lamplight on graph paper, the faint graphite dust of pencil on vellum, the quiet satisfaction of a proof that resolves into elegance. But this is not nostalgia -- the execution is sharply contemporary. Clean edges, precise spacing, digital crispness. The zen quality emerges not from rusticity but from ruthless restraint: only what is necessary survives. Every pixel of whitespace is deliberate. Every typographic decision is load-bearing. Color is used the way a sumi-e painter uses ink concentration -- sparingly, with profound intention. The dominant experience is vast fields of warm off-white interrupted by precise strokes of deep indigo and occasional accents of burnt amber that feel like the moment a theorem clicks into place. This is a site that rewards patience, that unfolds its content like the sequential panels of a hand-scroll painting, each section a new vista of the same continuous landscape. ## Layout Motifs and Structure The layout follows a strict f-pattern reading hierarchy -- the primary scanning path that eye-tracking studies reveal for information-dense content. This is not the lazy "everything centered" approach that dominates the portfolio (99% frequency). Instead, content is deliberately weighted to the left and top of each viewport section, with secondary information anchored along a strong left-margin vertical axis, and tertiary elements positioned in the right third as supporting annotations. **The Primary Structure -- The Scroll Manuscript:** The page is organized as a single continuous vertical scroll divided into discrete "frames" (viewport-height sections) that each present one conceptual unit. Each frame follows the same internal f-pattern grid: - **Left column (60% width):** Primary content -- headlines, body text, main graph visualizations. This column is flush-left with a generous `120px` left margin that creates a breathing corridor between the viewport edge and the content edge. The left margin is not empty; it carries a faint vertical axis line rendered as a `1px` stroke in `#C4B5A0` (Sandstone) that runs the entire height of the page, serving as both a decorative motif and a literal y-axis reference. - **Right column (30% width):** Annotation space -- marginalia, secondary explanations, small companion charts. This column is set in smaller type and a lighter color, creating a visual hierarchy that mirrors the scholarly tradition of marginal glosses in medieval manuscripts and modern textbook sidebars. - **Gutter (10% width):** The space between the two columns is not simply empty. It contains intermittent geometric markers -- small circles, triangles, and squares in `#2C3E6B` (Deep Indigo) -- that serve as section waypoints. These geometric shapes are the visual motif of the site, appearing at consistent intervals like mile markers along the vertical scroll. **Frame Transitions:** Between viewport-height sections, a horizontal ruled line spans the full width of the content area (not the viewport), drawn as a `2px` stroke in `#C4B5A0`. At the center of each ruled line sits a small geometric shape (rotating through circle, triangle, square, hexagon) rendered as an outline in `#2C3E6B`. This creates a rhythm of punctuation that replaces the typical scroll-triggered animation with something more meditative -- the reader encounters these markers as natural resting points, like breathing pauses in a musical score. **Negative Space as Structure:** At least 35% of every viewport section is deliberately empty. This is the zen principle of ma (negative space as positive presence) applied to web layout. Content never crowds the edges. The right 10% of the viewport is always empty -- a visual margin that prevents the f-pattern from feeling cramped. The bottom 15% of each section is intentionally clear, creating an anticipatory gap before the next section scrolls into view. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- the canonical condensed sans-serif that carries the geometric severity of architectural lettering. Used at `4rem`-`7rem` for section titles, weight 400 (Bebas Neue's single weight), always UPPERCASE with `letter-spacing: 0.08em`. Color: `#2C3E6B` (Deep Indigo). Line-height: 1.0 (tight, to emphasize the vertical compression of the condensed letterform). Headlines are set flush-left, never centered, reinforcing the f-pattern's left-axis dominance. The condensed geometry of Bebas Neue echoes the vertical axis lines of a graph -- the letters themselves look like they could be coordinate labels. - **Body Text:** "Source Serif 4" (Google Fonts) -- a transitional serif designed for extended reading on screen, with generous x-height and open counters that prevent fatigue across long scholarly passages. Weight 400 for body text, weight 600 for emphasis. Set at `1.125rem` (18px) with `line-height: 1.75` and `letter-spacing: 0.01em`. Color: `#3A3A42` (Graphite) on the warm off-white background. Maximum line length: `38em` (approximately 70 characters per line -- the optimal readability range for serif text). - **Annotations / Marginalia:** "Inter" (Google Fonts) -- weight 400, set at `0.8125rem` (13px) in `#8A7E6E` (Faded Umber). Used exclusively in the right annotation column and for axis labels on graph visualizations. The sans-serif clarity of Inter contrasts with the serif warmth of Source Serif 4, creating a clear hierarchy between primary and secondary text. - **Graph Labels / Technical Notation:** "JetBrains Mono" (Google Fonts) -- weight 400, set at `0.75rem` (12px) in `#2C3E6B`. Used only for mathematical notation, coordinate values, and data labels within chart visualizations. The monospaced precision signals "this is exact data" while the surrounding serif text signals "this is interpretation." **Palette:** The palette is built on a complementary relationship between deep indigo and burnt amber -- two colors on opposite sides of the color wheel that create visual tension when juxtaposed but resolve into harmony when mediated by neutral warm tones. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background | Warm Parchment | `#F5F0E8` | Primary surface, 70% of visible area | | Primary Text | Graphite | `#3A3A42` | Body copy, readable without being harsh black | | Headlines / Accent Primary | Deep Indigo | `#2C3E6B` | All display type, geometric motifs, axis lines | | Accent Secondary | Burnt Amber | `#C47D2E` | Hover states, active graph points, emphasis markers | | Supporting Neutral | Sandstone | `#C4B5A0` | Rule lines, borders, subtle dividers | | Annotation Text | Faded Umber | `#8A7E6E` | Marginalia, secondary labels, de-emphasized elements | | Deep Background | Ink Wash | `#1E1E2A` | Footer, modal overlays, inverted sections | | Highlight Surface | Rice Paper | `#FAF7F0` | Card backgrounds, elevated content surfaces | The complementary tension between `#2C3E6B` and `#C47D2E` is the chromatic engine of the entire design. Indigo is used for static, structural elements (headlines, axes, grid lines). Amber is reserved exclusively for interactive and dynamic elements (hover states, active data points, the current position on a graph trace). This creates an intuitive visual language: indigo = permanent structure, amber = user agency and live data. ## Imagery and Motifs **Geometric Shapes as Visual Language:** The primary decorative system is built entirely from simple geometric primitives -- circles, triangles, squares, hexagons, and pentagons -- rendered as outlines (never filled) in `#2C3E6B` with a consistent `1.5px` stroke weight. These shapes appear throughout the site in four distinct roles: 1. **Section Markers:** At the midpoint of each horizontal rule between content sections, a single geometric shape serves as a chapter marker. The shapes cycle in a fixed sequence (circle, triangle, square, hexagon, pentagon) so that returning visitors develop an unconscious spatial memory of the page structure. 2. **Background Constellation:** Behind the main content layer, at `z-index: 0`, a sparse field of tiny geometric shapes (8px-14px diameter) floats at ~4% opacity in `#2C3E6B`. These shapes are positioned using a deterministic algorithm (not random) so they form subtle alignment patterns -- like stars that almost-but-not-quite form constellations. This creates a sense of underlying mathematical order without competing with foreground content. 3. **Graph Point Markers:** In all data visualizations, plotted points are rendered as geometric shapes rather than simple dots. Different data series use different shapes (circles for Series A, triangles for Series B, squares for Series C), following the academic convention that predates color printing -- shapes were the original data encoding before color was available. 4. **Interactive Hover Glyphs:** When the user hovers over interactive elements, a small geometric shape animates into existence beside the cursor -- scaling from 0 to 1 over 300ms with a spring easing curve. The shape corresponds to the section the user is in (circle in section 1, triangle in section 2, etc.), creating a subtle spatial awareness system. **Graph Visualizations as Hero Imagery:** Instead of photographs or illustrations, the site uses mathematical graphs and data visualizations as its primary imagery. These are not decorative -- they are the content itself. Each graph is rendered as a clean SVG with the following styling: - Axis lines: `1.5px` stroke in `#C4B5A0` (Sandstone) - Grid lines: `0.5px` stroke in `#E8E0D4` (a 50% blend between background and Sandstone) - Data curves: `2px` stroke in `#2C3E6B` with rounded line caps and joins - Active/hovered data points: filled circles in `#C47D2E` (Burnt Amber) with a `4px` radius - Inactive data points: outlined circles in `#2C3E6B` with a `3px` radius and `1px` stroke **The Raked Garden Pattern:** The hero section features a background pattern inspired by the raked sand of a Japanese karesansui (dry landscape garden). This is implemented as a series of closely spaced, perfectly parallel horizontal lines (`0.5px` stroke, `#E8E0D4`, 6px apart) that flow across the viewport. At strategic points, the lines curve gently around circular "stones" (solid circles of `#C4B5A0` at `40px`-`80px` diameter), creating the visual impression of water flowing around rocks -- or, in the context of this site, of a function's contour lines deflecting around critical points. This pattern is rendered as a single static SVG to avoid performance overhead. ## Prompts for Implementation **Full-Screen Narrative Experience -- The Axis Emergence:** The site opens to a full-viewport expanse of `#F5F0E8` (Warm Parchment). The screen is empty for 600ms -- this deliberate pause establishes the zen rhythm. Then, from the exact vertical center, a single horizontal line draws itself from left to right across the viewport width over 1.2 seconds, rendered as a `1.5px` stroke in `#2C3E6B`. At 80% of the line's journey, a vertical line begins drawing itself from the horizontal midpoint upward and downward simultaneously over 0.8 seconds. The result is a perfect coordinate axis cross. Once the axes are in place (total elapsed: ~2.2 seconds), small tick marks appear along both axes in a staggered animation (30ms delay per tick, starting from the origin outward). The tick marks are `8px` tall, `1px` wide, in `#C4B5A0`. As the ticks complete their entrance, the word "PLOTGRAPHER" fades in above the horizontal axis, positioned at the top-left of the coordinate space (quadrant II), set in Bebas Neue at `5rem`, color `#2C3E6B`, with each letter animating from `opacity: 0; transform: translateY(-12px)` to `opacity: 1; transform: translateY(0)` over 400ms, staggered at 60ms per character. Below the horizontal axis (quadrant III), a subtitle appears: "The geometry of insight" -- set in Source Serif 4 italic, `1.25rem`, color `#8A7E6E`, fading in over 800ms. **Magnetic Scroll Interactions:** As the user scrolls past the hero section, elements in subsequent frames exhibit magnetic behavior -- the primary interaction pattern for this design. Magnetic interactions mean that interactive elements (graph points, geometric markers, navigation items) subtly attract or repel the cursor within a `120px` radius, using a spring physics model with `stiffness: 0.08` and `damping: 0.4`. This creates a tactile, slightly viscous feeling -- as if the cursor is moving through a field of gentle gravitational wells. Specific magnetic behaviors: - **Graph data points:** When the cursor enters a `120px` radius around a plotted point, the point scales from `3px` to `6px` radius and transitions from outline to filled (`#C47D2E`), while the cursor experiences a gentle pull toward the point center. A tooltip appears with the coordinate values in JetBrains Mono. - **Section markers (geometric shapes):** When the cursor passes near a section divider, the geometric shape rotates `45deg` over 400ms with a spring easing and its stroke color transitions from `#2C3E6B` to `#C47D2E`. - **Navigation links:** Text links in the annotation column draw the cursor slightly toward them within a `60px` radius, and an underline draws itself from left to right in `#C47D2E` over 300ms. **Section-by-Section Narrative Flow:** Each content section enters the viewport as a cohesive unit using a coordinated entrance choreography: 1. The left-margin vertical axis line extends downward into the new section (200ms, linear) 2. The headline in the left column fades in from `opacity: 0` to `opacity: 1` with a subtle `translateX(-20px)` to `translateX(0)` motion (400ms, ease-out) 3. The body text appears line-by-line with 60ms stagger per line, each from `opacity: 0` to `opacity: 1` (300ms per line) 4. The right-column annotation slides in from `translateX(30px)` to `translateX(0)` with 200ms delay after the body text begins (400ms, ease-out) 5. Any graph visualization in the section draws its axes first, then its data curves trace themselves from left to right over 1.5 seconds, then data points pop in sequentially (50ms stagger) This choreography never repeats in reverse -- once a section has entered, it remains static. Scrolling back up does not trigger exit animations. The site only moves forward, like time itself, like the rightward march of an x-axis. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero-image sliders, hamburger menus with flyout panels, gradient backgrounds, card-hover shadow effects, centered headline stacks, newsletter signup modals. **PREFER:** Full-viewport breathing sections, mathematical precision in spacing (use Fibonacci ratios: 1:1.618 for column proportions), hand-drawn SVG curves for graph data, spring-physics for all animations (no linear or ease-in-out), monochromatic data visualizations with single-accent highlighting, persistent left-axis navigation that tracks the user's scroll position. ## Uniqueness Notes **Differentiators from other designs:** 1. **F-Pattern Layout (1% frequency):** This design deliberately breaks from the near-universal centered layout (99%) by committing fully to an f-pattern reading hierarchy with a dominant left column, annotation right column, and geometric gutter markers. The asymmetry is not decorative -- it is structurally motivated by eye-tracking research and scholarly typesetting conventions. No other design in the portfolio uses this layout paradigm as its primary organizing principle. 2. **Coordinate Axis as Structural Metaphor:** The entire site is built around the visual metaphor of a mathematical coordinate system. The hero animation literally constructs an x-y axis. The persistent left-margin line functions as a y-axis. Section transitions are marked by geometric shapes that reference graph-paper point markers. This is not a surface-level theme -- the metaphor is load-bearing and affects every layout decision. 3. **Magnetic Cursor Physics (9% frequency):** Instead of the portfolio's dominant scroll-triggered animations (96%) or parallax effects (76%), this design uses magnetic cursor interactions as its primary motion language. The spring-physics model creates a tactile quality that transforms passive scrolling into an active, exploratory experience -- the user is literally navigating a force field of data points. 4. **Bebas Neue + Source Serif 4 Pairing (bebas-bold at 2% frequency):** The condensed vertical geometry of Bebas Neue paired with the warm readability of Source Serif 4 creates a typographic contrast that is almost entirely absent from the portfolio. The pairing evokes the tension between precision (the condensed sans-serif of axis labels) and interpretation (the flowing serif of scholarly prose). 5. **Karesansui Background Pattern:** The raked-sand SVG pattern in the hero section is a direct zen motif that no other design employs. It connects the mathematical content (contour lines around critical points) to the aesthetic framework (dry landscape garden) in a way that is both visually distinctive and conceptually coherent. 6. **Complementary Indigo-Amber Palette (complementary at 6% frequency):** Rather than the ubiquitous warm palette (100%) or muted tones (69%), this design is driven by a true complementary color relationship where the two accent colors serve functionally distinct roles: indigo for structure, amber for interaction. This semantic color system is rare in the portfolio. **Seed / Style:** aesthetic: zen, layout: f-pattern, typography: bebas-bold, palette: complementary, patterns: magnetic, imagery: minimal, motifs: geometric-shapes, tone: scholarly-intellectual **Avoided overused patterns:** centered layout (99%), mono typography (99%), playful aesthetic (95%), scroll-triggered as sole animation (96%), warm-only palette (100%), vintage motifs (86%), friendly tone (98%). This design consciously avoids all portfolio-dominant patterns in favor of their underrepresented counterparts.