# Design Language for scriptgrapher.com ## Aesthetics and Tone scriptgrapher.com channels the visual energy of a neon-soaked tattoo parlor at 2 AM in a tropical coastal city -- the kind of place where hand-lettered flash sheets hang on walls of cracked leather upholstery, where an angelfish tank glows electric pink in the corner, and where the buzzing needle is the only sound competing with the hum of fluorescent tubes. The aesthetic is **minimalist** but not in the Scandinavian-clean sense -- this is the minimalism of someone who has stripped everything away except what truly matters: one perfect line, one blazing color, one unforgettable image. Think of it as dopamine-minimalism: every element that exists DEMANDS attention, but there are very few elements. The tone is **raw-authentic** -- no polish, no corporate veneer, no gentle onboarding language. The site speaks the way a master calligrapher speaks about ink: directly, with earned authority, without apology. Text is sparse. When words appear, they carry weight. The overall mood sits at the intersection of a Japanese fish market's neon signage, the worn leather cover of a well-used sketchbook, and the iridescent shimmer of a discus fish turning in aquarium light. ## Layout Motifs and Structure The layout follows a **minimal-navigation** philosophy: there is no traditional nav bar, no hamburger menu, no breadcrumb trail. The entire site is a single continuous vertical experience with exactly three navigational affordances: the scroll itself, a small pulsing dot indicator on the right edge showing progress, and a domain name wordmark at the top-left that acts as the sole anchor point. **Structural Grid:** The page is divided into full-viewport sections that use a deliberately off-center single axis. Content blocks occupy a 40% width column positioned at the left 15% margin mark, leaving a vast 45% empty field on the right where decorative tropical fish silhouettes drift slowly in CSS animation loops. This asymmetry is not broken-grid chaos -- it is purposeful restraint, like the negative space in a sumi-e painting, but electrified with neon color. **Section Transitions:** Each full-viewport section uses a **slide-reveal** pattern: as the user scrolls, the current section slides leftward and off-screen while the next section slides in from the right, creating a horizontal page-turn sensation within a vertical scroll context. The slide animation uses a cubic-bezier timing of (0.16, 1, 0.3, 1) for a sharp initial snap followed by a smooth deceleration -- the motion equivalent of cracking a leather-bound book open to a specific page. **Viewport Zones:** - Zone 1 (0-100vh): Title + single statement, leather-textured background - Zone 2 (100-200vh): Core concept, tropical fish animation field - Zone 3 (200-300vh): Gallery/showcase with horizontal slide-reveal panels - Zone 4 (300-400vh): Statement piece, full-bleed neon gradient - Zone 5 (400-500vh): Closing mark, return to leather texture ## Typography and Palette **Typography:** - **Display / Headlines:** "Varela Round" (Google Fonts) -- a rounded sans-serif with geometric foundations and soft terminal endings that feel approachable without being childish. Its perfectly circular counters echo the round body shapes of tropical fish, creating a subtle visual rhyme between text and imagery. Used at 4rem-7rem for section headers, always lowercase (uppercase would be too aggressive for a minimalist approach). Weight 400 only -- the typeface has one weight, and that constraint IS the point. - **Body / Supporting Text:** "Nunito" (Google Fonts) -- another rounded sans-serif but with more conventional proportions and multiple weights available. Used at 1rem-1.25rem, weight 300 for body text and 600 for emphasis. The light weight creates a whisper-like quality against the bold neon palette, as if the text is gently glowing rather than shouting. Line-height 1.75 for generous vertical breathing. - **Accent / Monospace Detail:** "DM Mono" (Google Fonts) at weight 300 for small technical annotations, coordinates, or decorative label text. Used sparingly at 0.75rem, always in the secondary neon color, positioned as small floating labels near fish motifs or section markers. **Palette:** | Role | Hex | Description | |------|-----|-------------| | Primary Neon | #FF2D78 | Hot magenta-pink -- the dominant neon, used for headlines, the progress dot, and fish silhouette accents | | Secondary Neon | #00F5D4 | Electric cyan-teal -- used for body text highlights, hover states, and the secondary fish color | | Tertiary Neon | #FFE156 | Warm neon yellow -- used sparingly for emphasis pops, small decorative elements, the "hot spot" color | | Leather Dark | #1A1008 | Near-black brown -- the primary background, simulating dark aged leather | | Leather Mid | #2E1E0F | Medium brown -- used for subtle texture variation in background gradients | | Leather Light | #4A3520 | Warm brown -- used for borders, dividers, and the leather grain texture overlay | | Text Primary | #F5EDE0 | Warm off-white -- primary text color, the color of a page inside a leather journal | | Depth Black | #0A0604 | True dark -- used for shadows and depth layers behind slide-reveal panels | The palette creates a deliberate tension: the leather tones are ancient, organic, and tactile, while the neon triad is synthetic, electric, and retinal. This collision is the visual identity of scriptgrapher.com -- old craft tools meeting new energy. ## Imagery and Motifs **Leather Texture as Environmental Foundation:** The background throughout the site uses a CSS-generated leather texture built from layered noise. Implementation: three overlapping `radial-gradient` layers at different scales (2px, 8px, 20px) using variations of the leather dark/mid/light palette, combined with a subtle CSS `filter: contrast(1.1) brightness(0.95)` to deepen the grain. The texture is NOT a raster image -- it is entirely generated, ensuring crisp rendering at any viewport size. The leather should feel like the cover of a hand-bound portfolio: slightly worn, warm to the imagined touch, with visible grain running diagonally at approximately 15 degrees. **Tropical Fish as Animated Motifs:** The primary decorative element is a system of tropical fish silhouettes rendered as pure CSS shapes (no SVG, no images). Each fish is built from overlapping `border-radius` shapes and CSS `clip-path` polygons: 1. **Angelfish Profile:** A tall, triangular silhouette with extended dorsal and ventral fins. Rendered in #FF2D78 at 60% opacity, drifting slowly rightward across the empty right-margin space with a sinusoidal vertical oscillation (CSS `@keyframes` using translateX and translateY with different durations creating a Lissajous-like path). Size: approximately 80px tall. 2. **Discus Fish:** A nearly circular body with small trailing fins. Rendered in #00F5D4 at 40% opacity, moving leftward at half the speed of the angelfish, creating a parallax-like depth effect. Size: approximately 50px diameter. 3. **Betta Tail Fragment:** Not a full fish but just the flowing tail element -- a series of overlapping curved shapes in #FFE156 at 25% opacity, undulating with a CSS animation that modifies `border-radius` values over a 12-second loop. These float as abstract decorative fragments, like torn pieces of a betta's tail drifting in current. Fish appear only in the right-margin negative space and never overlap with text content. Their movement is perpetual but extremely slow (30-60 second full traversal), creating ambient life rather than distraction. **Neon Line Accents:** Thin horizontal lines (1px) in the primary neon color appear between sections, but they are not static rules -- they draw on from left to right as the section slides into view, with a `box-shadow: 0 0 8px #FF2D78, 0 0 20px #FF2D78` creating the characteristic neon glow effect. These lines feel like the light leaking from the edge of a neon tube sign. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site must be built as a full-screen, section-by-section narrative. There is no traditional page structure. Each viewport-height section is a self-contained visual moment that slides away to reveal the next. The experience should feel like flipping through a leather portfolio of neon-lit photographs -- each page is complete, each transition is physical. **Slide-Reveal Animation System:** The core animation pattern is **slide-reveal**. Implementation approach: - Use CSS `scroll-snap-type: y mandatory` on the main container to lock each section to the viewport. - Each section has `position: sticky` behavior with a `transform: translateX()` driven by a lightweight scroll listener (vanilla JS, no libraries). - As scroll progress within a section reaches 80%, the current section begins translating leftward (to -100vw over 400ms) while the next section translates in from 100vw to 0. - The cubic-bezier curve (0.16, 1, 0.3, 1) is critical -- it creates the "snap-then-glide" feel of a heavy leather page turning. - During transition, the leather texture background remains fixed (it belongs to the body, not the sections), creating a sense that panels slide OVER a leather surface. **Neon Glow Text Effect:** Headlines use a layered `text-shadow` to simulate neon tube glow: ``` text-shadow: 0 0 7px #FF2D78, 0 0 10px #FF2D78, 0 0 21px #FF2D78, 0 0 42px #FF2D78, 0 0 82px #FF2D78; ``` This should pulse subtly using a CSS animation that varies the outer shadow spread between 82px and 60px over a 3-second cycle, creating the flicker of a real neon sign without being distracting. **Fish Animation Performance:** All fish animations must use `transform` and `opacity` only (GPU-composited properties). No layout-triggering properties. Fish elements have `will-change: transform` and `pointer-events: none`. The total number of animated fish on screen at any time should not exceed 6 to maintain 60fps. **Leather Texture Implementation:** ```css background: radial-gradient(ellipse at 30% 50%, #2E1E0F 0%, transparent 70%), repeating-linear-gradient( 105deg, #1A1008 0px, #1A1008 1px, #2E1E0F 1px, #2E1E0F 3px ), linear-gradient(180deg, #1A1008, #0A0604); ``` **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hero-image-with-overlay patterns, stock photography, hamburger menus, footer link columns, cookie banners. This is a pure visual experience, not a conversion funnel. **Bias toward:** Full-screen immersion, slow ambient animation, dramatic negative space, tactile texture simulation, and the collision of organic materials (leather) with synthetic light (neon). Every interaction should feel like touching something real. ## Uniqueness Notes **Differentiators from other designs:** 1. **Leather-as-Canvas with Neon-as-Ink:** No other design in the portfolio uses leather texture as the foundational surface upon which neon color is applied. The combination creates a unique sensory tension -- the warm, tactile, organic feel of leather against the cold, electric, retinal punch of dopamine neon. This is not a dark-mode design (which uses flat blacks) nor a warm-earthy design (which avoids neon) -- it occupies a category of its own. 2. **CSS-Only Tropical Fish Animation System:** While other designs use SVG illustrations or static imagery for decorative elements, scriptgrapher.com builds its tropical fish motifs entirely from CSS shapes and animations. The fish are not images to be loaded -- they are living CSS constructs that drift through negative space as ambient environmental elements. No other design uses aquatic life as its primary motif vocabulary, and the pure-CSS implementation means they are resolution-independent and infinitely customizable. 3. **Slide-Reveal as Primary Navigation Paradigm:** The slide-reveal pattern (4% frequency) replaces traditional scrolling with a horizontal page-turn metaphor within a vertical scroll container. Where most designs use fade-in or parallax for section transitions, scriptgrapher.com makes the transition itself into a primary visual event -- the leather surface remains fixed while content panels slide across it like pages in a portfolio. This creates a fundamentally different spatial experience from any scroll-triggered or parallax design. 4. **Rounded Typography as Ichthyological Echo:** The choice of rounded sans-serif fonts (Varela Round, Nunito) at only 2% frequency in the portfolio is not arbitrary -- the circular counters and soft terminals of these typefaces visually rhyme with the round body shapes of discus and angelfish, creating a subliminal coherence between text and motif that no other design achieves. 5. **Zero-Navigation Minimalism:** At only 3% frequency, minimal-navigation layouts are rare in the portfolio. scriptgrapher.com takes this further by providing exactly zero traditional navigation elements -- no menu, no links, no buttons. The only affordance is the scroll itself and a single pulsing progress dot. This forces a linear, cinematic reading experience that treats the website as a finite, authored sequence rather than a navigable space. **Chosen seed/style:** aesthetic: minimalist, layout: minimal-navigation, typography: rounded-sans, palette: dopamine-neon, patterns: slide-reveal, imagery: leather-texture, motifs: tropical-fish, tone: raw-authentic **Avoided overused patterns:** playful aesthetic (96%), centered layout (99%), warm palette (100%), scroll-triggered patterns (97%), mono typography (99%), minimal imagery (95%), vintage motifs (88%), friendly tone (99%). None of these appear as primary choices in this design.