# Design Language for pmt.moe

## Aesthetics and Tone

pmt.moe is an underwater command center -- a deep-sea research station broadcasting from the abyssal plain of an alien ocean. The aesthetic is **seapunk authoritarianism**: the aquatic gradients, translucent surfaces, and oceanic mythology of seapunk culture collide with the rigid certainty and institutional weight of a sovereign maritime authority. This is not the playful, pastel seapunk of Tumblr circa 2012 with its dolphins and trident emojis. This is seapunk after it grew up and became the Department of Abyssal Affairs -- cold, beautiful, and absolute in its proclamations.

The mood channels the moment you descend past the thermocline in a submersible: the light shifts from turquoise to indigo, the pressure becomes palpable, and the world outside the porthole resolves into bioluminescent geometry. Every surface on pmt.moe carries the faint translucency of deep water -- content appears to float behind layers of tinted glass, as if viewed through the reinforced viewport of a bathyscaphe. The authority comes not from shouting (no bold reds, no exclamation marks, no urgency gradients) but from the quiet, undeniable mass of the ocean itself. The site speaks as the ocean speaks: with gravity, with depth, with the certainty of something that has existed for four billion years and will outlast every civilization that tries to name it.

Inspiration references: the control panels of the DSV Alvin submersible, the bioluminescent photography of Edith Widder, the architectural renderings of Jacques Rougerie's underwater habitats, Zaha Hadid's fluid parametric surfaces rendered in deep indigo, and the typographic authority of 1970s NATO maritime signal manuals.

## Layout Motifs and Structure

The layout is a **masonry cascade** -- content blocks of varying heights and widths fall into place like tectonic plates settling on the ocean floor, each piece finding its gravitational equilibrium without the tyranny of equal-height rows. The masonry grid operates on a 3-column system at desktop (collapsing to 2 at tablet, 1 at mobile), but the columns are not equal: the ratio is 1.2 : 1 : 0.8, creating a subtle leftward bias that mirrors the asymmetric pressure distribution of deep-ocean currents.

**Masonry Column Architecture:**

- **Column A (Left, 1.2x):** The dominant content channel. This column holds the primary narrative blocks -- the longest text passages, the most complex glassmorphic cards, the deepest visual compositions. Its extra width (approximately 35% of the viewport) gives it gravitational authority. Content in this column is always flush-top with the previous block, creating a continuous vertical flow like sediment layers in a geological core sample.

- **Column B (Center, 1x):** The rhythmic channel. This column holds medium-density content -- secondary narratives, supporting imagery, data visualizations rendered as sonar-style readouts. Its standard width (approximately 30%) makes it the metronome of the layout. Blocks in this column are offset by 60px from the top of their Column A neighbors, creating a cascading waterfall effect.

- **Column C (Right, 0.8x):** The annotation channel. Narrower and more intimate (approximately 25%), this column holds supplementary content -- pull quotes rendered as sonar pings, small glassmorphic cards with metadata, navigational depth indicators. Its reduced width forces text to reflow into tighter measures, creating a denser, more technical reading rhythm that contrasts with Column A's expansive narrative voice.

**Gutter Treatment:** The gutters between columns are not empty whitespace. They are filled with a 1px vertical line rendered in `rgba(0, 212, 255, 0.08)` -- barely visible, like the faintest bioluminescent thread connecting the columns. On scroll, these gutter lines pulse with a slow sinusoidal opacity animation (0.05 to 0.12 opacity over 8 seconds), creating the impression that the entire grid is breathing.

**Vertical Rhythm:** Every content block adheres to a baseline grid of 28px (matching the body line-height). The masonry algorithm snaps block heights to multiples of this baseline, ensuring that even as blocks cascade at different heights, the underlying textual rhythm remains coherent -- like the regular pulse of a sonar ping beneath the chaotic surface of ocean waves.

**No hero section.** The site begins immediately with the masonry cascade. The domain name "pmt.moe" is embedded within the first block of Column A, not as a separate header but as an integral part of the content flow -- a sonar station identifier printed on the first page of a logbook, not a billboard.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a distinctive monospaced DNA. Its squared terminals and uniform stroke weight give it the mechanical precision of instrument panel lettering, while its proportional spacing keeps it readable at large sizes. Used at 2.5rem-5rem for section headers and major labels. Set in uppercase with `letter-spacing: 0.12em` and `font-weight: 700`. The wide letter-spacing is deliberate: it evokes the stenciled lettering on submarine hull plates and NATO equipment markings. At display sizes, individual characters should feel like they were laser-cut from titanium and mounted on a bulkhead.

- **Body Text:** "Inter" (Google Fonts) -- a typeface specifically designed for screen readability, with tall x-height, open apertures, and carefully tuned letter-spacing at small sizes. Used at 1rem (16px) with `line-height: 1.75` and `font-weight: 400`. The generous line-height creates breathing room between lines that echoes the spaciousness of the deep ocean. For emphasis within body text, `font-weight: 500` (medium) is used rather than italic -- the grotesque-neo tradition favors weight variation over slant. Body text is set in `#C8D6E5` (pale steel blue) against dark backgrounds, ensuring high readability without the harshness of pure white.

- **Monospace / Data:** "JetBrains Mono" (Google Fonts) -- used exclusively for numerical data, coordinates, timestamps, and code-like annotations. Set at 0.875rem with `letter-spacing: 0.02em`. Color: `#00D4FF` (bioluminescent cyan). This font appears in the annotation channel (Column C), in metadata strips at the bottom of glassmorphic cards, and in the depth indicators that track scroll position. Its ligature support is enabled, reinforcing the technical-instrument aesthetic.

**Color Palette (Midnight Blue):**

| Swatch | Hex | Name | Usage |
|--------|-----|------|-------|
| Primary Background | `#0A0E27` | Abyssal Ink | The dominant background -- the color of the ocean at 4000 meters depth. Used for the body background and the interior of the deepest content blocks. |
| Secondary Background | `#111B3A` | Hadal Indigo | A slightly lifted blue-black used for content block backgrounds within the masonry grid. Differentiated from Abyssal Ink just enough to create depth layering without harsh borders. |
| Tertiary Surface | `#1A2744` | Bathyal Slate | Used for glassmorphic card backgrounds with `rgba(26, 39, 68, 0.65)` and a `backdrop-filter: blur(16px)`. This is the glass layer -- the porthole through which content is viewed. |
| Accent Primary | `#00D4FF` | Bioluminescent Cyan | The primary accent color. Used for interactive elements, links, the monospace data font, gutter line animations, and the sonar-ping motifs. This is the color of deep-sea bioluminescence -- cold, electric, alien. |
| Accent Secondary | `#0077B6` | Mesopelagic Teal | A deeper, more saturated teal used for secondary interactive states (hover backgrounds, active indicators, progress fills). It sits between the cyan accent and the dark backgrounds, serving as a chromatic bridge. |
| Highlight | `#48CAE4` | Photic Aqua | A lighter, more luminous blue used sparingly for emphasis states -- selected text backgrounds, notification badges, and the brief flash of active sonar pings. |
| Text Primary | `#C8D6E5` | Steel Mist | The primary text color. A desaturated blue-gray that reads as silver-white against the midnight backgrounds without the eye strain of pure `#FFFFFF`. |
| Text Secondary | `#7B8FA3` | Twilight Gray | Used for secondary text, captions, timestamps, and muted annotations. Sufficient contrast against Hadal Indigo while remaining clearly subordinate to Steel Mist. |
| Alert / Rare Accent | `#FF6B6B` | Thermal Vent Red | Used extremely sparingly -- only for error states, critical alerts, or a single punctuation mark in the hero block. Its warmth is shocking against the cold palette, like the glow of a hydrothermal vent in the absolute darkness of the abyssal plain. |

## Imagery and Motifs

**Glassmorphic Cards as Submarine Viewports:**

The primary imagery mode is **glassmorphic-cards** -- translucent content containers that simulate the frosted, pressure-resistant glass of deep-sea observation ports. Every content block in the masonry grid is a glassmorphic card, but they are not the generic blurred-background cards of typical glassmorphism. These are engineered with multiple layers of depth:

1. **Outer Rim:** A 1px border of `rgba(0, 212, 255, 0.15)` -- the faintest cyan edge, like bioluminescent plankton caught in the seal of a porthole. On hover, this border brightens to `rgba(0, 212, 255, 0.35)` over 400ms.

2. **Glass Layer:** The card background uses `rgba(26, 39, 68, 0.55)` with `backdrop-filter: blur(20px) saturate(1.4)`. The saturation boost is critical -- it intensifies the midnight-blue tones visible through the glass, creating the impression of looking through tinted deep-sea viewport glass rather than generic frosted glass.

3. **Interior Gradient:** A subtle top-to-bottom gradient from `rgba(72, 202, 228, 0.04)` to `transparent` simulates the faint refraction of bioluminescent light hitting the top edge of each viewport. This gradient is only 30% of the card height, concentrated at the top like light filtering down from a distant surface.

4. **Depth Shadow:** Instead of a conventional box-shadow, each card casts a `0 8px 32px rgba(0, 0, 0, 0.45)` shadow downward and a `0 0 60px rgba(0, 212, 255, 0.03)` glow outward. The combination creates the impression that each card is both floating above the background (shadow) and emitting faint bioluminescence (glow).

**Cultural Motifs -- Maritime Cartographic Symbols:**

The cultural motif vocabulary draws from global maritime traditions:

- **Japanese Wave Patterns (Seigaiha):** Concentric arc patterns rendered in `rgba(0, 212, 255, 0.06)` as subtle background textures within certain masonry blocks. These are not decorative illustrations but structural textures -- the arcs are clipped to the card boundaries and tile seamlessly, creating a subliminal sense of oceanic rhythm. The seigaiha pattern is generated via CSS using repeating radial gradients, requiring no image assets.

- **Polynesian Navigation Lines (Rebbelib):** The stick-chart navigation systems of the Marshall Islands inspire the decorative line work between major content sections. Thin lines (`1px`, `rgba(0, 212, 255, 0.12)`) connect nodes (small 4px circles) in angular, asymmetric patterns that map the conceptual relationships between content blocks -- a visual echo of the way Pacific Islanders mapped ocean swells and island positions using bent palm fronds.

- **Norse Knotwork Borders:** Select glassmorphic cards (no more than 2-3 per page) feature an interlocking knot pattern along their left edge, rendered as an SVG path in Bioluminescent Cyan at 8% opacity. These knots are simplified to their geometric essence -- no ornate medieval flourishes, just the continuous interlocking line that symbolizes the interconnectedness of maritime knowledge across cultures.

- **Compass Rose Ornaments:** At the intersection points of the masonry gutter lines, small (16px) compass rose icons appear at 6% opacity. These are purely decorative anchors that give the layout a cartographic feel without overwhelming the content. They rotate slowly (360 degrees over 120 seconds) via CSS animation.

**Sonar Ping Animations:**

Throughout the site, small circular sonar-ping animations appear at irregular intervals. These are concentric rings expanding from a center point, rendered as a `border` animation on a pseudo-element: the ring starts at 0px diameter with 0.3 opacity in Bioluminescent Cyan, expands to 80px diameter while fading to 0 opacity over 3 seconds. These pings are triggered by scroll position -- each time the user scrolls past a masonry row boundary, a ping emanates from the nearest compass rose ornament. Maximum 1 ping visible at any time to avoid visual clutter.

## Prompts for Implementation

**Full-Screen Narrative Descent:**

The site experience is structured as a vertical descent through ocean depth zones, but this framing is purely atmospheric -- there are no literal ocean illustrations or fish graphics. The depth metaphor is conveyed entirely through color temperature and opacity shifts:

- **Zone 1 (0-100vh): Epipelagic.** Background: `#0A0E27`. Glassmorphic cards at maximum translucency (0.55 alpha). Accent elements at full brightness. Text in Steel Mist. The masonry grid begins here with its widest gutter spacing (24px). This is the "surface" -- the lightest, most open part of the experience.

- **Zone 2 (100vh-250vh): Mesopelagic.** Background transitions to `#070B1F` (darker). Card translucency drops to 0.45 alpha. Accent cyan dims to 85% brightness. Gutter spacing tightens to 18px. The content becomes denser, more technical. The rebbelib navigation lines become more complex.

- **Zone 3 (250vh-400vh): Bathypelagic.** Background reaches `#050815` (near-black). Card translucency at 0.35 alpha. Cyan accents pulse more slowly. Gutter lines become barely visible (0.04 opacity). The compass roses stop rotating. This is the deep zone -- quiet, heavy, authoritative. Content here should be the most substantive, the most important. The site saves its most significant statements for the depths.

- **Zone 4 (400vh+): Abyssopelagic.** Background is pure `#020408`. The only light comes from the glassmorphic card interiors and the occasional sonar ping. Text shifts from Steel Mist to `#A0B4C8` (slightly warmer, like the glow of deep-sea instrument panels). This is the terminus -- the domain name "pmt.moe" reappears here in JetBrains Mono, small (0.75rem), as a sonar station sign-off. The final content block has no glassmorphic treatment -- it sits directly on the abyss, naked, authoritative, alone.

**Parallax Depth Layering:**

The parallax effect is not the typical background-scrolls-slower-than-foreground trick. Instead, the three masonry columns scroll at fractionally different rates: Column A at 1.0x (normal), Column B at 0.97x, Column C at 0.94x. This creates a subtle dimensional separation between the columns -- as if they exist on different planes of depth within the underwater viewport. The effect is barely perceptible at normal scroll speeds but becomes pronounced during fast scrolling, where the columns visibly stagger apart before settling back into alignment.

Additionally, the glassmorphic card borders respond to scroll velocity: faster scrolling increases the cyan border opacity (simulating increased bioluminescent agitation from water turbulence), while slow, deliberate scrolling dims the borders to their resting state.

**Interaction States:**

- **Hover on glassmorphic cards:** Border brightens from 0.15 to 0.35 cyan opacity. A sonar ping originates from the cursor position. The card's interior gradient intensifies from 0.04 to 0.08 alpha. Transition: 400ms ease-out.
- **Active/click states:** The card's backdrop-filter blur increases from 20px to 28px, and the depth shadow doubles in spread. The card appears to "press into" the viewport glass. Transition: 200ms ease-in.
- **Link hover:** Text color transitions from Bioluminescent Cyan to Photic Aqua. An underline draws from left to right over 300ms (underline-draw pattern), but the underline is rendered as a 1px line with a `linear-gradient` from Bioluminescent Cyan to transparent, creating a sonar-sweep effect.

**CSS Custom Properties for Depth Zones:**

```css
:root {
  --depth-bg: #0A0E27;
  --depth-card-alpha: 0.55;
  --depth-accent-brightness: 1.0;
  --depth-gutter: 24px;
  --depth-gutter-opacity: 0.08;
  --bioluminescent: #00D4FF;
  --mesopelagic-teal: #0077B6;
  --photic-aqua: #48CAE4;
  --steel-mist: #C8D6E5;
  --twilight-gray: #7B8FA3;
  --thermal-vent: #FF6B6B;
}
```

These custom properties are updated via JavaScript `IntersectionObserver` as the user scrolls through depth zones, enabling smooth atmospheric transitions without expensive scroll-event listeners.

**AVOID:** CTA-heavy layouts (no "Sign Up Now" buttons, no pricing tables), stat-grids (no "10,000+ users" counters), hero banners with stock photography, playful/friendly tone elements, warm color temperatures, and generic card-grid layouts with equal-height rows.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Seapunk Authoritarianism Fusion:** The seapunk aesthetic appears at only 1% frequency in existing designs, and it has never been combined with an authoritative tone. Typical seapunk deployments lean heavily into playful, pastel, ironic internet-culture references. pmt.moe inverts this entirely: the aquatic visual vocabulary is retained (translucent surfaces, cyan bioluminescence, oceanic depth gradients) but the tone is stripped of all irony and playfulness. The result is seapunk as institutional design language -- as if NOAA's deep-sea research division hired a seapunk art director. This specific combination exists nowhere else in the portfolio.

2. **Depth-Zone Atmospheric Progression:** No other design implements a scroll-driven atmospheric system where the background color, card translucency, accent brightness, gutter spacing, and animation speed all shift in concert to simulate descent through oceanic depth zones. Most parallax implementations move layers at different speeds; pmt.moe transforms the entire visual environment based on scroll position, creating a narrative arc from light to dark, open to dense, luminous to abyssal, without any explicit storytelling -- the medium is the message.

3. **Asymmetric Masonry with Column-Differential Parallax:** The masonry layout at 6% frequency is already uncommon, but pmt.moe's implementation is unique in its asymmetric column ratios (1.2:1:0.8) and the per-column parallax differential (1.0x, 0.97x, 0.94x). This creates a layout that is simultaneously a masonry grid and a parallax depth composition -- the columns are both a typographic structure and a spatial metaphor for water layers at different depths.

4. **Cultural Maritime Motifs as Structural Texture:** The cultural motif category at 7% frequency is moderately uncommon, but pmt.moe's specific selection of cross-cultural maritime traditions (Japanese seigaiha, Polynesian rebbelib, Norse knotwork) as purely geometric, low-opacity structural textures is entirely unprecedented. These motifs are not illustrative or decorative in the conventional sense -- they are embedded into the CSS as repeating patterns and SVG paths, functioning as the "grain" of the design surface rather than as content.

5. **Midnight-Blue Palette with Bioluminescent Accent System:** The midnight-blue palette appears at only 1% frequency. pmt.moe's implementation pushes it further with a 9-color system that maps precisely to ocean depth zones and functional roles, anchored by the `#00D4FF` bioluminescent cyan that serves as the sole warm-temperature element in an otherwise cold palette. The inclusion of Thermal Vent Red (`#FF6B6B`) as an extreme rarity accent -- appearing perhaps once per page -- creates a chromatic shock effect that no warm-palette or gradient-palette design can achieve.

**Documented Seed/Style:**
- aesthetic: seapunk
- layout: masonry
- typography: grotesque-neo
- palette: midnight-blue
- patterns: parallax
- imagery: glassmorphic-cards
- motifs: cultural
- tone: authoritative

**Avoided Overused Patterns (from frequency analysis):**
- playful aesthetic (95%) -- replaced with authoritative gravitas
- centered layout (99%) -- replaced with asymmetric masonry cascade
- warm palette (100%) -- replaced with cold midnight-blue depth system
- scroll-triggered pattern (96%) -- parallax is present but implemented as column-differential scroll rates and atmospheric zone transitions rather than generic entrance animations
- friendly tone (98%) -- replaced with authoritative institutional voice
- mono typography (99%) -- primary fonts are proportional (Space Grotesk, Inter); JetBrains Mono appears only in data annotations
- minimal imagery (94%) -- replaced with richly layered glassmorphic card compositions with cultural texture overlays
- vintage motifs (86%) -- replaced with cross-cultural maritime motifs drawn from living cartographic traditions
<!-- DESIGN STAMP
  timestamp: 2026-03-10T17:12:43
  seed: unspecified
  aesthetic: pmt.moe is an underwater command center -- a deep-sea research station broadcast...
  content_hash: 8098ee63b5d0
-->