# Design Language for npc.quest ## Aesthetics and Tone npc.quest channels the visual world of a **light-academia private aquarium** -- a place where mahogany reading tables face floor-to-ceiling saltwater tanks, where the shimmer of angelfish scales catches the brass lamp light, and where leather-bound field journals lie open to hand-inked illustrations of reef ecosystems. The aesthetic is **light-academia** not in the Instagram sense of latte-colored cardigans and stacked novels, but in the deeper sense of the gentleman naturalist's study: a room where taxonomic obsession meets oceanic wonder, where the pursuit of knowledge is indistinguishable from the pursuit of beauty. The tone is **luxurious** -- not the cold luxury of a penthouse showroom, but the warm luxury of rare things handled with care. Think: the weight of a brass divider on a nautical chart, the soft click of a specimen drawer sliding open on dovetail joints, the way light refracts through a 200-gallon reef tank at 4 PM and throws caustic patterns across a plaster ceiling. Every element on the page should feel like it was acquired, curated, placed with deliberation. There is no haste. There is no sales pitch. There is only the quiet authority of someone who knows their subject deeply and presents it without apology. The site communicates through restraint and density simultaneously: large areas of breathing space punctuated by moments of intense visual complexity -- a grid of generative art pieces packed tight like specimens in a vitrine, surrounded on all sides by empty navy expanse. The experience should feel like walking through a museum after hours, when the crowds are gone and the exhibits speak only to you. ## Layout Motifs and Structure The layout uses a **portfolio-grid** system inspired by the specimen drawer -- a precise, rectilinear arrangement of content cells that evokes the organizational rigor of a natural history collection. This is not the airy, Pinterest-style masonry grid; it is a structured, intentional matrix where every cell occupies a defined position and size within a 12-column framework, and where the grid gaps are narrow (8px-12px) to create the sense of items placed closely together in a display case. **Grid Architecture:** The primary content area spans 10 of 12 columns, centered, with the outer columns serving as quiet margins that breathe like the matting around a framed print. Within this 10-column span, content tiles arrange in a 3-column x N-row configuration for the main portfolio section, with occasional 2:1 or 1:2 spanning cells that break the regularity just enough to maintain visual tension. The grid is rigid but not monotonous -- think of how a natural history museum arranges butterfly specimens: mostly uniform, but with the occasional oversized Morpho disrupting the pattern. **Vertical Rhythm:** The page unfolds in four distinct zones, each separated by 15vh of empty space: 1. **The Foyer** -- a full-viewport opening that establishes mood. The domain name, a single subtitle line, and a softly animated generative-art background of tropical fish silhouettes moving through deep navy water. No navigation. No menu. Just the name and the atmosphere. 2. **The Collection** -- the portfolio grid proper. Tiles appear as squared-off panels with 2px borders in metallic silver (#A8B4C0), each containing a generative artwork or content piece. On hover, each tile expands its border to 3px in polished brass (#C9A96E) and the content within subtly sharpens from a soft blur into crisp focus (the blur-focus pattern). 3. **The Index** -- a single-column typographic section below the grid, functioning like the index at the back of a reference book. Content here is set in tight leading, organized alphabetically or categorically, providing a second mode of navigation that feels scholarly rather than interactive. 4. **The Colophon** -- a minimal footer zone with provenance information, rendered in small caps with generous letter-spacing, feeling like the endpapers of a well-made book. **Navigation:** There is no persistent navigation bar. Instead, a small brass-colored dot fixed at the top-right corner of the viewport serves as a toggle: clicking it slides in a narrow right-hand panel (width: 280px) with section links set in slab-serif type. The panel background is #0B1929 (darker navy) and text is #D4C5A0 (aged parchment). The panel slides in with a 400ms ease-out and slides away with 300ms ease-in -- the asymmetry in timing creates a feeling of the panel being drawn open and released shut. ## Typography and Palette **Typography:** - **Display / Headlines:** "Alfa Slab One" (Google Fonts) -- a bold, high-impact slab-serif with thick, uniform serifs and commanding presence. Used at weights 400 (its only weight) at sizes 3rem-7vw for major headings. The letterforms have a poster-quality authority that suits the museum-display aesthetic. Headlines are set in sentence case, never full uppercase, to maintain the scholarly rather than shouting quality. Letter-spacing: -0.02em for tighter, more confident headlines. - **Body / Running Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy, providing comfortable readability at body sizes (1rem-1.15rem) while maintaining enough personality to feel curated rather than default. Weight 400 for body, 600 for emphasis. Line-height: 1.72 for generous leading that gives the text room to breathe against dark backgrounds. Color: #C8D6E5 on navy backgrounds, #1B2838 on light backgrounds. - **Captions / Labels / Index Text:** "IBM Plex Mono" (Google Fonts) -- a technical monospace with humanist proportions, used at 0.8rem-0.9rem for metadata, specimen labels, grid captions, and the index section. Weight 400, letter-spacing: 0.03em. This font provides the taxonomic, cataloguing quality -- every label feels like a museum placard. Color: #8A9BB0 (muted steel blue). - **Navigation / UI Elements:** "Roboto Slab" (Google Fonts) -- a geometric slab-serif used at 0.85rem, weight 300, for nav links and interactive elements. Its lighter weight contrasts with Alfa Slab One's heaviness, creating a typographic hierarchy that moves from bold authority (headlines) through literary warmth (body) to precise utility (captions/nav). **Palette:** The palette is **navy-metallic** -- a deep oceanic foundation shot through with metallic accents that catch light like fish scales under brass lamps. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Background | Deep Navy | #0D1B2A | The ocean floor -- the deepest layer of the page, felt everywhere | | Secondary Background | Midnight Ink | #1B2838 | Slightly lifted navy for card backgrounds and recessed panels | | Accent Metal | Antiqued Brass | #C9A96E | The metallic warmth -- used for borders, highlights, the nav dot, hover states | | Text Primary | Pale Cloud | #C8D6E5 | Primary body text on dark backgrounds -- high contrast without being pure white | | Text Secondary | Steel Mist | #8A9BB0 | Secondary text, captions, labels -- recedes gracefully | | Surface Light | Parchment | #D4C5A0 | Used sparingly for the index section background, nav panel text, and pull quotes | | Highlight | Coral Scale | #E07A5F | A warm coral drawn from tropical fish coloring -- used for active states, hover underlines, and the single accent that pops against the navy | | Border | Tarnished Silver | #A8B4C0 | Default tile borders, subtle dividers -- metallic but restrained | | Deep Accent | Abyssal Teal | #134B5F | An intermediate depth color for gradient transitions and secondary panels | **Color Usage Rules:** - The page is predominantly #0D1B2A with #1B2838 surfaces floating above it - Metallic accents (#C9A96E, #A8B4C0) are used structurally, for borders and lines, never as fills - The coral (#E07A5F) appears only in interactive moments -- it is the flash of a fish turning, not a constant presence - #D4C5A0 (parchment) is the bridge between the dark aquatic world and the light-academia scholarly world -- it appears in text-heavy zones - Gradients are subtle and always navy-to-navy: `linear-gradient(180deg, #0D1B2A 0%, #1B2838 100%)` for depth, never flashy multi-color gradients ## Imagery and Motifs **Generative Art as Primary Imagery:** The visual content of npc.quest is entirely **generative-art** -- algorithmically produced images that serve as the portfolio pieces within the grid. No photographs. No stock illustrations. Every visual is a procedurally generated composition that references marine biology, reef geometry, and tropical fish morphology through abstract means. The generative works use the site's palette exclusively, creating a cohesive visual field where every artwork feels native to its container. **Generative Techniques (CSS/Canvas):** 1. **Schooling Algorithms:** The hero background features 40-60 small triangular shapes (CSS clip-path polygons) that move in a flocking/schooling pattern using simple boid-like JavaScript rules. Each "fish" is a 12px-20px triangle in #C9A96E or #E07A5F at 0.15-0.4 opacity, drifting slowly across the #0D1B2A field. Their movement is unhurried, meditative -- average velocity 0.3px per frame, with gentle turning. The effect is ambient, not distracting. 2. **Reef Tile Generators:** Each portfolio tile contains a unique generative composition created with HTML5 Canvas at 400x400px, using recursive branching algorithms (L-systems) that produce coral-like structures. The branching forms use #134B5F, #C9A96E, and #A8B4C0 on #1B2838 backgrounds. Each tile's L-system uses a different axiom and rule set, producing visually distinct but family-related compositions -- like specimens from the same reef. 3. **Caustic Light Patterns:** Overlaid on certain sections (particularly the foyer and colophon), a CSS animation produces slowly shifting caustic-light patterns -- the rippling light effect seen on surfaces near water. This is achieved with multiple layered radial-gradients at low opacity (0.04-0.08) in #C9A96E, animated with `@keyframes` that shift `background-position` over 20-30 second cycles. The effect is subtle enough to be felt rather than noticed. **Tropical Fish Motifs:** The tropical-fish motif appears not as literal fish illustrations but as abstracted references: - **Scale Patterns:** CSS repeating-conic-gradient patterns that produce overlapping semicircles resembling fish scales, used as subtle backgrounds on hover states and the nav panel. Colors: #1B2838 and #0D1B2A at near-identical values, creating a texture that is almost invisible until you look closely. - **Fin Silhouettes:** SVG decorative elements at section dividers -- elongated, organic curves derived from the dorsal and caudal fin shapes of angelfish and bettas. These are single-path SVGs in #A8B4C0 at 0.3 opacity, placed horizontally to mark transitions between zones. - **Eye Spots:** Small circular motifs (8px-12px) that appear at the termination points of decorative lines and in the corners of tiles. These reference the ocelli (eye spots) found on butterfly fish -- concentric circles in #C9A96E and #E07A5F. They function like periods at the end of visual sentences. **Blur-Focus as Interaction Language:** The blur-focus pattern is the site's primary interaction metaphor. Content begins in a state of soft blur (filter: blur(2px)) and transitions to sharp focus (filter: blur(0)) upon interaction (hover, scroll-into-view, or click). This mimics the act of focusing a microscope or adjusting a camera lens on a specimen -- the scholarly act of bringing attention to bear. The transition uses a 500ms ease-out curve that feels like a lens racking into focus. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport foyer. On load, the background is solid #0D1B2A. Over 2 seconds, the caustic light pattern fades in at near-imperceptible opacity. Then the schooling fish triangles begin to appear, one by one, at 80ms intervals, each fading in from opacity 0 to their target opacity with a gentle translateY(-5px) upward drift. After the fish have populated (approximately 4 seconds total), the domain name "npc.quest" fades in -- set in Alfa Slab One at 6vw, color #C9A96E, centered horizontally but positioned at 38% from top (slightly above center, where the eye naturally rests). Below it, 1 second later, a subtitle in Lora Italic at 1.1rem, color #8A9BB0, appears with a blur-focus transition: it starts at blur(4px) and sharpens to blur(0) over 800ms. The whole sequence should take 6-7 seconds and feel like descending into an aquarium viewing gallery where the lights gradually come up. **Scroll-Triggered Portfolio Reveal:** As the user scrolls past the foyer, the portfolio grid section enters the viewport. Tiles do not appear all at once. Using IntersectionObserver, each tile enters with a staggered blur-focus animation: the tile starts at opacity 0.3 and blur(6px), and as it crosses the 20% visibility threshold, it transitions over 600ms to opacity 1 and blur(0). Tiles stagger by 120ms per item, reading left-to-right, top-to-bottom -- like specimens being illuminated one by one as display case lights switch on. The stagger creates a wave-like reveal pattern that echoes the movement of the schooling fish above. **Tile Hover Interaction:** On hovering a portfolio tile, three things happen simultaneously over 300ms: 1. The tile border transitions from #A8B4C0 to #C9A96E (silver to brass) 2. The generative artwork within the tile gains a subtle brightness increase (filter: brightness(1.12)) 3. A caption slides up from the bottom of the tile -- 24px tall, background rgba(13,27,42,0.85), containing the piece title in IBM Plex Mono at 0.75rem, color #D4C5A0 On mouse-out, these reverse over 400ms (slower exit than entry, creating the asymmetric timing that feels organic). **The Index Section:** Below the grid, after 15vh of empty space, the index section begins. Its background transitions from #0D1B2A to a subtle #D4C5A0 (parchment) via a 200px-tall gradient band -- the visual metaphor of rising from the dark ocean depths into the light of the reading room. Text in this section flips to dark: Lora at #1B2838, IBM Plex Mono captions at #4A5568. The index is organized in two columns on desktop (single on mobile), with entries separated by 1px #A8B4C0 horizontal rules. Each entry has a title (Roboto Slab, 0.95rem, #1B2838) and a brief descriptor (Lora, 0.85rem, #4A5568). This section feels like the appendix of a well-made book. **AVOID:** CTA buttons, pricing tables, stat-grids, testimonial carousels, newsletter signup forms, "hero" marketing copy, gradient text effects, floating action buttons, cookie banners. The site is a gallery and a reference, not a storefront. **Animation Performance Notes:** All blur transitions use `will-change: filter` applied on hover/scroll-trigger and removed 1 second after animation completes. The schooling fish use `requestAnimationFrame` with frame-skipping on low-power devices (check `navigator.hardwareConcurrency`). Canvas generative art is rendered once on load and cached as static images -- no continuous canvas rendering. All animations respect `prefers-reduced-motion` by defaulting to instant transitions with no blur. ## Uniqueness Notes **Differentiators from other designs:** 1. **Light-Academia Meets Marine Biology:** No other design in the portfolio combines the light-academia aesthetic with an aquatic/marine visual world. Light-academia typically manifests as libraries, coffee shops, and classical architecture. Here, it is recontextualized as the gentleman naturalist's aquarium study -- scholarly rigor applied to ocean life, producing a visual language that is simultaneously intellectual and deeply sensory. The tension between the ordered, taxonomic impulse and the fluid, unpredictable ocean world creates a unique dynamic. 2. **Generative Art as Content, Not Decoration:** While other sites use generative elements as background texture or ambient decoration, npc.quest makes generative art the primary content. Each portfolio tile contains a unique L-system coral composition -- the generative art is the specimen, the thing being presented and examined. This inverts the typical relationship where generative art serves the content; here, generative art IS the content, and the design serves IT. 3. **Blur-Focus as Core Interaction Paradigm:** The blur-focus pattern (at 2% frequency in the corpus) is elevated from a minor transition effect to the site's fundamental interaction language. Everything on the page begins slightly out of focus and sharpens upon engagement -- entering the viewport, hovering, clicking. This creates a unified interaction metaphor (the focusing microscope / the adjusting lens) that ties every element together. No other design in the portfolio uses blur-focus as a structural principle rather than a decorative effect. 4. **Navy-Metallic Palette Without Cyberpunk/Tech Context:** Navy and metallic combinations in the existing designs tend toward cyberpunk, fintech, or sci-fi aesthetics. npc.quest reclaims this palette for a naturalistic, scholarly context -- the navy is ocean depth, not outer space; the metallic is brass instrumentation, not chrome machinery. This recontextualization makes the palette feel entirely different despite using similar hue families. 5. **Tropical Fish as Abstracted Motif System:** The tropical-fish motif (2% frequency) appears nowhere as a literal fish illustration. Instead, it is decomposed into its visual components -- scale patterns, fin silhouettes, eye spots, schooling behavior, iridescent color shifts -- and these components are distributed throughout the design as independent decorative and structural elements. The fish is present everywhere and visible nowhere, like a theme in a piece of music that is constantly varied but never stated directly. **Chosen Seed/Style:** - aesthetic: light-academia - layout: portfolio-grid - typography: slab-serif - palette: navy-metallic - patterns: blur-focus - imagery: generative-art - motifs: tropical-fish - tone: luxurious **Avoided Overused Patterns (from frequency analysis):** - playful aesthetic (95%) -- replaced with luxurious/scholarly - centered layout (99%) -- uses portfolio-grid with intentional structure - mono typography (99%) -- IBM Plex Mono used only for captions, not as primary type - warm palette (100%) -- navy-metallic is cool-dominant - scroll-triggered patterns (97%) -- present but subordinate to blur-focus as primary - friendly tone (98%) -- replaced with luxurious authority - vintage motifs (85%) -- replaced with tropical-fish - minimal imagery (94%) -- replaced with generative-art **Preferred Underused Patterns (all at 0-3% frequency):** - light-academia (2%), portfolio-grid (2%), slab-serif (3%), navy-metallic (2%), blur-focus (2%), generative-art (1%), tropical-fish (2%), luxurious (3%)