# Design Language for plotgrapher.com ## Aesthetics and Tone plotgrapher.com channels a frutiger-aero aesthetic — the glossy, nature-infused digital optimism of the mid-2000s UI era applied to a plot graphing and data visualization platform. The site radiates clarity — glass-like surfaces reflecting clean data, organic curves softening mathematical precision, and the confident optimism of technology that makes complex data beautiful and accessible. Inspiration draws from the glossy interfaces of Windows Vista/7 era, the nature-integrated renders of Frutiger Aero wallpapers, the data elegance of Edward Tufte's information design, and the organic UI curves of early iPhone weather apps. The tone is zen-contemplative — calm, meditative language that treats data visualization as a practice of finding clarity and truth in complexity. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — content organized in varied-size compartments that mirror the multiple chart panels of a data visualization dashboard, each cell containing a different aspect of the graphing toolkit. **Bento Box Architecture:** - CSS Grid with mixed cell sizes: 1x1, 2x1, 1x2 for chart variety - Desktop: 3-column grid with varied heights - Gap: 14px between cells - Each cell: glossy surface treatment (Frutiger Aero glass) - Container: max-width: 1040px centered - Cells feel like individual chart panels in a visualization dashboard **Section Sequence:** 1. **Origin:** Hero as oversized bento cell with expressive-variable title on terracotta-warm aero gradient, nature-elements organic data curve illustrations, crystalline faceted data point markers 2. **Plot:** Core graphing features in bento grid — typewriter-effect interactive feature specification reveals with nature-elements organic curve demonstrations 3. **Graph:** Visualization types in expanded bento cells with crystalline geometric data markers and nature-elements flowing axis illustrations 4. **Render:** Export and sharing in bento compartments with nature-elements leaf-form export icons 5. **Zero:** Footer as origin return — zen-contemplative closing with crystalline settled axis point and meditative sign-off ## Typography and Palette **Typography:** - **Headlines:** "Recursive" (Google Fonts) — expressive variable sans at 2rem-2.8rem, weight 700, using casual axis. Its variable nature allows headlines to shift between precise and organic, matching data visualization's blend of math and beauty. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for data notation and code examples. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Terra Dark:** #1c1210 — deep terracotta dark for backgrounds - **Clay Surface:** #2c1c18 — warm clay surface for panels - **Terracotta Warm:** #c87048 — warm terracotta for primary accent - **Sage Data:** #68a060 — sage green for secondary accent (positive data) - **Sky Clear:** #5898c8 — clear sky blue for tertiary accent (info data) - **Sand Light:** #f0e4d0 — warm sand for text on dark - **Shadow Clay:** #684838 — clay shadow for secondary text - **Border Terra:** rgba(200,112,72,0.1) — terracotta border ## Imagery and Motifs **Nature-Elements Organic Data Curves:** Data visualization concepts illustrated through organic, nature-inspired curve forms — SVG paths with smooth bezier curves mimicking leaf veins, river flows, and plant growth patterns. Rendered in Sage Data and Sky Clear at 0.06-0.1 opacity. The organic curves transform mathematical plots into living, growing forms. **Typewriter-Effect Feature Specification:** Graphing features type out as technical specifications — monospace text appearing character by character at 25ms intervals, with a blinking cursor. The typewriter effect transforms feature lists into methodical documentation being actively composed. **Crystalline Data Point Markers:** Data points and feature highlights rendered as faceted geometric markers — SVG diamonds (12-20px) with gradient fills creating crystalline appearance. In Terracotta Warm and Sky Clear. The crystalline quality gives data points the precious, valued quality of carefully plotted measurements. **Terracotta-Warm Aero Glow:** Backgrounds use warm terracotta atmospherics with Frutiger Aero glossiness — radial-gradient(at 50% 40%, rgba(200,112,72,0.04), transparent 50%) with subtle glass-like panel surfaces (background: rgba(44,28,24,0.8); backdrop-filter: blur(8px)). The warm glow creates the comfortable, inviting quality of a well-lit data studio. **Bento as Chart Dashboard:** Each cell styled as an individual chart panel — thin borders (1px, Border Terra), subtle inner glow (box-shadow: inset 0 1px 0 rgba(240,228,208,0.05)), and axis-line decorations (1px rules at bottom and left edges at 0.06 opacity). The panel treatment transforms bento cells into mini data visualizations. ## Prompts for Implementation Build the page as a Frutiger Aero data studio. Bento: display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; .cell-2x1 { grid-column: span 2; } .cell-1x2 { grid-row: span 2; } Container: max-width: 1040px; margin: 0 auto; padding: 60px 24px. Typewriter: .typewriter-spec { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; overflow: hidden; white-space: nowrap; border-right: 2px solid #c87048; animation: typing 2s steps(40) forwards, blink 0.7s step-end infinite alternate; } Aero glass: .aero-panel { background: rgba(44,28,24,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(200,112,72,0.1); border-radius: 10px; padding: 24px; } Crystalline markers: .data-point { width: 16px; height: 16px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: linear-gradient(135deg, #c87048, #5898c8); } Chart panel axes: .chart-cell { position: relative; } .chart-cell::before { content: ''; position: absolute; bottom: 12px; left: 12px; right: 12px; border-bottom: 1px solid rgba(200,112,72,0.06); } .chart-cell::after { content: ''; position: absolute; top: 12px; bottom: 12px; left: 12px; border-left: 1px solid rgba(200,112,72,0.06); } AVOID: Standard data visualization documentation, corporate analytics dashboards, and minimal chart-library marketing pages. Let Frutiger Aero glossiness and zen-contemplative calm create a graphing platform where data visualization feels like a meditative practice of finding organic beauty in mathematical precision. ## Uniqueness Notes 1. **Frutiger-aero for data visualization:** Glossy, nature-infused aesthetics make mathematical graphing feel organic and inviting. 2. **Bento-box as chart dashboard:** Varied compartments mirror the multi-panel layout of professional data visualization environments. 3. **Typewriter-effect as active documentation:** Feature specifications typing out create the quality of methodical documentation being composed in real-time. 4. **Crystalline as precious data points:** Faceted geometric markers give data points the valued quality of carefully measured specimens. 5. **Nature-elements as organic curves:** Natural growth patterns reimagine mathematical plot lines as living, growing forms. **Seed/Style:** aesthetic: frutiger-aero, layout: bento-box, typography: expressive-variable, palette: terracotta-warm, patterns: typewriter-effect, imagery: nature-elements, motifs: crystalline, tone: zen-contemplative **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses frutiger-aero aesthetic, bento-box layout, terracotta-warm palette, nature-elements imagery, and zen-contemplative tone.