# Design Language for miris.monster

## Aesthetics and Tone

miris.monster is a drowned library at the bottom of a tropical lagoon -- a place where leather-bound volumes of forbidden knowledge lie open on reading desks made of coral, where angelfish drift between the shelves and bioluminescent algae has colonized the gilded spines, where the entire scene is lit from above by fractured sunlight filtering through thirty feet of warm turquoise water. The aesthetic is **dark-academia submerged in tropical marine biology**: the scholarly gravitas of wood-paneled reading rooms, the candlelit intensity of late-night study sessions, and the ink-stained romance of marginalia -- all re-imagined as if the university sank into the Pacific centuries ago and the ocean slowly, beautifully reclaimed it.

The mood is **mysterious-moody** with an undercurrent of wonder. Nothing about this site feels bright or cheerful -- it feels like discovering something ancient, half-legible, partially consumed by saltwater, yet still pulsing with meaning. The darkness is not technological (no neon, no terminals, no glitch) but organic: the darkness of deep reading by inadequate light, the darkness of ocean water at depth, the darkness of secrets written in cipher. The wonder comes from the tropical fish -- darting splashes of impossible color against the muted, scholarly earth tones. They are the visual punctuation, the marginalia of the sea, the annotations the ocean has added to the text.

Every surface carries the patina of submersion: slightly warped, slightly faded, slightly alive with marine growth. Text blocks appear as if printed on waterlogged vellum. Navigation elements have the quiet authority of brass library placards gone green with verdigris. The entire experience feels like an archaeological discovery -- a place that should not exist but undeniably does.

## Layout Motifs and Structure

The layout follows a **card-grid** system that functions as a cabinet of curiosities -- not the uniform, Pinterest-style grid of e-commerce sites, but a deliberate arrangement of specimen cards, each one a different size and proportion, arranged with the asymmetric precision of a naturalist's field notebook. The grid is based on a 12-column system but uses only irregular subdivisions: 5/7, 3/4/5, 2/3/7 -- never symmetrical halves or thirds. This irregularity creates the feeling of hand-arranged artifacts rather than machine-generated layouts.

**Primary Grid Logic:**
The viewport is divided into a 12-column grid with 24px gutters. Cards occupy irregular column spans: some are tall and narrow (3 columns, aspect ratio 2:3) like specimen slides under a microscope; others are wide and shallow (7 columns, aspect ratio 16:9) like panoramic views through a submarine porthole. The vertical rhythm is governed by a baseline grid of 8px but cards are deliberately offset by 4-12px from their neighbors, creating a gentle misalignment that suggests they were placed by hand on a desk, not snapped to a digital grid.

**Card Anatomy:**
Each card has a visible "frame" -- a 2px border in Verdigris Brass (#5B7553) with slightly rounded corners (border-radius: 6px). Cards cast no traditional box-shadow; instead, they have a subtle inner shadow (inset 0 0 20px rgba(26, 21, 15, 0.3)) that creates a vignette effect, as if each card is a window into a dimly lit display case. On hover, the inner shadow deepens and shifts color toward Abyssal Teal (#1B4332), suggesting the water above has darkened.

**Scroll Architecture:**
The page scrolls vertically as a single continuous narrative, but is organized into four distinct "chambers" (sections), each separated by a full-viewport transition zone. These transition zones are not empty whitespace but contain a slowly animated CSS gradient that shifts from the previous chamber's dominant earth tone to the next chamber's, overlaid with a subtle SVG pattern of tropical fish silhouettes (opacity: 0.04) swimming in a continuous rightward loop. Each chamber contains 4-8 cards arranged in its own grid variation. The first chamber uses a 3/4/5 split; the second uses a staggered 2-column with alternating offsets; the third returns to a wider 5/7 split; the fourth collapses to a single centered column for the closing statement.

**Navigation:**
A thin horizontal bar at the top (height: 48px, background: Drowned Mahogany #3B2316 at 92% opacity with backdrop-filter: blur(8px)) contains the domain logotype on the left and four chamber labels on the right, styled as library catalog entries with period separators. The active chamber label has a slow-pulsing underline animation in Lagoon Ember (#C4793A). No hamburger menu, no mobile drawer -- on narrow viewports the chamber labels stack into a vertical list that slides down from the logotype on tap, styled like a card catalog dropdown.

## Typography and Palette

**Typography:**

- **Headlines / Display:** "Nunito" (Google Fonts) -- a well-balanced rounded-terminal sans-serif that embodies the rounded-sans category. Its soft, approachable letterforms carry none of the sharpness of grotesque faces, instead offering the gentle curvature of water-worn stone. Used at 2.5rem-5rem for section headers and card titles. Headlines are set in weight 700 with `letter-spacing: 0.02em` and `line-height: 1.1`. The rounded terminals give headlines an organic warmth that counterbalances the dark, scholarly atmosphere -- they feel like letters carved by erosion rather than by chisel.

- **Body / Reading Text:** "Quicksand" (Google Fonts) -- a geometric sans-serif with rounded terminals and a light, open construction. At weight 400-500 and 1rem-1.125rem, it provides excellent readability while maintaining the rounded-sans family coherence with Nunito. Its slightly wider letterforms and generous x-height make it comfortable for extended reading, like text that has been gently softened by decades of moisture. Line-height is set to 1.7 for body paragraphs, with `letter-spacing: 0.01em`.

- **Accent / Labels / Metadata:** "Varela Round" (Google Fonts) -- a single-weight rounded sans that serves as the system font for navigation labels, card categories, timestamps, and metadata. Used at 0.75rem-0.875rem in weight 400, always uppercase with `letter-spacing: 0.12em`. Its perfectly circular bowls and consistent stroke width give it the precision of catalog labels -- the kind of meticulous lettering you would find on specimen jars in a natural history museum.

**Color Palette:**

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Primary Background | Sunken Parchment | #1A150F | Page background, card interiors -- the color of ancient paper saturated with tannin-dark water |
| Secondary Background | Drowned Mahogany | #3B2316 | Navigation bar, footer, card frames -- deep reddish-brown of waterlogged hardwood |
| Primary Text | Bleached Vellum | #E8DCC8 | Body text, headlines -- the warm off-white of pages preserved in airless water |
| Accent Primary | Lagoon Ember | #C4793A | Links, active states, highlight borders -- the color of candlelight reflected on amber resin |
| Accent Secondary | Verdigris Brass | #5B7553 | Card borders, secondary accents, navigation highlights -- oxidized brass green |
| Motif Highlight | Angelfish Gold | #D4A934 | Fish motif accents, hover states, decorative flourishes -- the vivid gold of a juvenile emperor angelfish |
| Deep Accent | Abyssal Teal | #1B4332 | Section transition gradients, deep shadow tones -- the color of ocean water at depth |
| Motif Contrast | Coral Vermillion | #C44B3A | Shake-error animation color, warning states, rare emphasis -- the living red of brain coral |

**Palette Logic:** The palette is rooted in earth-tones -- the browns, ambers, and muted greens of organic materials in various states of age and submersion. The two motif colors (Angelfish Gold and Coral Vermillion) are the only saturated hues, used sparingly to create the effect of tropical fish darting through an otherwise somber environment. The ratio is approximately 85% earth-tones to 15% vivid accents, ensuring the mystery is never overwhelmed by color.

## Imagery and Motifs

**Tropical Fish as Living Marginalia:**
The central visual motif is **tropical fish** -- rendered not as photographic images or cartoon clip-art but as custom-illustration-style SVG compositions. Each fish is a hand-illustrated silhouette with minimal internal detail: one or two color fills, a suggestion of fins and tail, rendered in the flat-but-organic style of naturalist field sketches from the 18th century (think Ernst Haeckel's "Kunstformen der Natur" but simplified to 2-3 color fills per form). Species referenced include: emperor angelfish (Angelfish Gold #D4A934), Mandarin dragonet (Abyssal Teal #1B4332 with Lagoon Ember #C4793A spots), lionfish (Bleached Vellum #E8DCC8 with Coral Vermillion #C44B3A spines), and clownfish (Lagoon Ember #C4793A with Sunken Parchment #1A150F bands).

Fish appear in four distinct contexts:
1. **Background drift:** 6-10 small fish silhouettes (16px-32px) float slowly across the viewport background at near-invisible opacity (0.03-0.06), moving rightward at 0.5px/second. They are layered behind all content and serve as ambient texture.
2. **Section dividers:** Between chambers, a horizontal band of 3-5 larger fish silhouettes (48px-80px) at 0.08-0.12 opacity swim in a staggered formation, creating a visual "school" that separates content areas.
3. **Card decoration:** Certain cards feature a single fish silhouette positioned at the bottom-right corner, partially clipped by the card edge, at 0.15 opacity -- as if the fish is passing behind a window.
4. **Hover revelation:** On card hover, a hidden fish silhouette fades in from 0 to 0.25 opacity over 0.6 seconds, positioned at a random edge of the card. This is the discovery moment -- the monster revealing its inhabitants.

**Scholarly Textures:**
Beneath the fish layer, the site uses CSS-generated textures to evoke waterlogged academia:
- A paper grain texture created with SVG `<feTurbulence>` (baseFrequency: 0.9, numOctaves: 5, type: "fractalNoise") applied as a full-viewport overlay at 3% opacity, giving every surface the tactile quality of aged vellum.
- A water caustics effect in the section transition zones, created with layered radial gradients that slowly shift position (CSS animation, 12-second cycle), simulating the rippling light patterns cast on the floor of a shallow lagoon.
- Card backgrounds use a second, coarser grain texture (baseFrequency: 0.4, numOctaves: 3) at 5% opacity, differentiated from the page background to create depth between surface levels.

**Decorative Elements:**
- Verdigris Brass (#5B7553) horizontal rules styled as corroded brass bars, with irregular edge profiles created via CSS clip-path with jagged polygon coordinates.
- Section headers preceded by a small SVG "bookplate" ornament: an open book with a fish tail emerging from between the pages, rendered in a single color (Lagoon Ember #C4793A) at 24px height.
- The footer contains a full-width illustration band: a silhouette panorama of a library interior (bookshelves, reading desks, arched windows) with fish swimming between the furniture, rendered in Drowned Mahogany (#3B2316) against Sunken Parchment (#1A150F) at 0.1 opacity.

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site opens with a full-viewport "submersion" sequence. For 1.5 seconds, the screen shows only Sunken Parchment (#1A150F) with the paper grain texture slowly increasing in opacity from 0% to 3%. Then, a single line of text fades in at the center: the domain name "miris.monster" in Nunito at 4rem, weight 700, color Bleached Vellum (#E8DCC8), letter-spacing 0.08em. The text holds for 1 second, then the navigation bar slides down from above (translateY from -48px to 0, ease-out over 0.6s) and the first chamber of cards begins to fade in, staggered from top-left to bottom-right with 120ms delays between each card.

**Shake-Error as Discovery Mechanic:**
The shake-error animation pattern is repurposed from its typical "validation failure" context into a narrative device: when a user clicks or taps a card, instead of a smooth open/expand transition, the card performs a brief horizontal shake (translateX oscillating between -3px and 3px, 4 cycles over 0.3 seconds) before the content within subtly intensifies -- the inner vignette deepens, the fish silhouette (if present) increases to 0.35 opacity, and the card border briefly flashes Coral Vermillion (#C44B3A) before settling back to Verdigris Brass. This creates the sensation of disturbing something that has been still for a long time -- a book trembling as it is pulled from a waterlogged shelf, a creature startled by sudden attention.

The shake animation keyframes:
```
@keyframes scholar-shake {
  0%, 100% { transform: translateX(0); }
  12.5% { transform: translateX(-3px) rotate(-0.3deg); }
  37.5% { transform: translateX(3px) rotate(0.3deg); }
  62.5% { transform: translateX(-2px) rotate(-0.2deg); }
  87.5% { transform: translateX(1px) rotate(0.1deg); }
}
```

**Card Grid Animation Choreography:**
Cards enter the viewport via scroll-triggered animations. Each card fades in from 0 opacity and translates upward by 30px (transform: translateY(30px) to translateY(0)), with a stagger delay based on its grid position. The stagger uses a 2D pattern: cards in the first column animate first, second column 100ms later, and so on -- creating a wave that sweeps left to right across the grid, like a current passing through the scene.

On scroll-out (when cards leave the top of the viewport), they do not simply disappear. Instead, they slowly fade to 0.3 opacity and shift downward by 8px, as if sinking deeper into the water. Cards that have been scrolled past remain partially visible, creating a layered archaeological depth when the user scrolls back up.

**Typography Animation:**
Section headlines use a letter-by-letter fade-in with 40ms stagger per character when the section enters the viewport. Each letter begins at 0 opacity and translateY(8px), rising into place with an ease-out curve over 0.4 seconds. This creates the effect of text surfacing from below the waterline, letter by letter, as if being slowly revealed by a receding tide.

**Ambient Fish Animation:**
The background fish use CSS animations with `animation-duration` values between 40s and 80s (randomized per fish via inline styles or CSS custom properties), ensuring no two fish move at the same speed. Each fish has a subtle vertical oscillation layered on top of its horizontal drift (translateY oscillating +/-6px over a 3-5 second cycle), creating a natural swimming motion. Fish that reach the right edge of the viewport loop back to the left edge after a 2-second pause at 0 opacity.

**Responsive Behavior:**
On viewports below 768px, the card-grid collapses to a single column with cards stacked vertically, but the irregular sizing is preserved through varying card heights and alternating padding. The fish background layer is simplified to 3 fish (from 6-10) to reduce animation load. The submersion sequence is shortened to 0.8 seconds. Card shake animations are reduced to 2 cycles over 0.2 seconds for touch-friendly responsiveness.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, newsletter signup forms, testimonial carousels, gradient hero sections with stock photography, hamburger menus with full-screen overlays.

## Uniqueness Notes

**Differentiators from other designs in the portfolio:**

1. **Submerged Dark-Academia Fusion:** No other design in the portfolio combines the dark-academia aesthetic (scholarly textures, candlelit warmth, literary gravitas) with an underwater/marine biology context. The closest relatives are the botanical designs (19% frequency) and the few nature-motif designs (31%), but none re-imagine academia as an ocean-floor archaeology site. The dark-academia aesthetic itself appears at only 2% frequency, making this approach doubly rare.

2. **Rounded-Sans Typography in a Dark/Moody Context:** The rounded-sans typography category appears at 0% frequency in the current portfolio. Every other design that uses a moody or scholarly tone defaults to serif faces, mono stacks, or sharp grotesques. Using Nunito, Quicksand, and Varela Round -- all soft, rounded typefaces -- within a dark, mysterious environment creates a deliberate tension: the gentleness of the letterforms against the severity of the atmosphere, like finding a children's book in a haunted library. This contrast is the typographic signature of the design.

3. **Shake-Error as Narrative Discovery:** The shake-error pattern appears at only 2% frequency and is universally used for form validation feedback. This design repurposes it as a primary interaction mechanic -- a card-tap response that communicates disturbance, discovery, and the physical weight of underwater objects. No other design in the portfolio uses shake as a narrative or atmospheric device.

4. **Multi-Layered Fish Ecosystem:** While the tropical-fish motif exists in the vocabulary (1% frequency), no design has implemented fish as a four-context system (background drift, section dividers, card decoration, hover revelation). The fish function simultaneously as ambient texture, structural punctuation, decorative detail, and interactive reward -- four distinct roles for a single motif family. This depth of motif integration exceeds any other design's use of its primary visual element.

5. **Earth-Tones with Surgical Saturation Accents:** The earth-tones palette (1% frequency) is used here with a strict 85/15 ratio between muted tones and vivid accents. The two saturated colors (Angelfish Gold and Coral Vermillion) appear only in fish motifs and interaction states, never in backgrounds or body text. This discipline -- where color saturation is earned through interaction rather than given freely -- is architecturally distinct from the gradient-heavy (90%) and warm (100%) palettes that dominate the portfolio.

**Documented Seed/Style:**
`aesthetic: dark-academia, layout: card-grid, typography: rounded-sans, palette: earth-tones, patterns: shake-error, imagery: custom-illustration, motifs: tropical-fish, tone: mysterious-moody`

**Patterns Avoided (Overused):**
- playful aesthetic (94%) -- replaced with mysterious-moody
- centered layout (99%) -- using asymmetric card-grid instead
- mono typography (99%) -- using rounded-sans family
- warm palette as primary identity (100%) -- earth-tones with controlled saturation
- scroll-triggered as sole animation pattern (97%) -- supplemented with shake-error as primary interaction
- friendly tone (98%) -- replaced with mysterious-moody
- vintage motifs (82%) -- replaced with tropical-fish
- photography imagery (72%) -- replaced with custom-illustration SVGs
- parallax pattern (78%) -- not used; scroll behavior is fade/sink rather than parallax depth
<!-- DESIGN STAMP
  timestamp: 2026-03-10T15:39:56
  domain: miris.monster
  seed: unspecified
  aesthetic: miris.monster is a drowned library at the bottom of a tropical lagoon -- a place...
  content_hash: 25db2bb6a716
-->