# Design Language for ppss.ee

## Aesthetics and Tone

ppss.ee embodies the Muji philosophy of "emptiness" as a generative force -- the deliberate absence that makes presence meaningful. The domain name itself, with its repeated consonants and Estonian top-level domain, evokes something between a whisper and a pulse, like sonar pings dissolving into deep water. The aesthetic is **oceanic muji**: the radical restraint of Japanese functional design submerged in the chromatic depth of abyssal ocean, where every element floats in deliberate negative space like bioluminescent organisms suspended in a midnight current.

The tone is dreamy-ethereal -- not the gauzy dreaminess of fairy lights and soft focus, but the deep-ocean dreaminess of pressure and silence and slow-moving forms. Think of the way a jellyfish moves through darkness: purposeful, unhurried, luminous against void. Every interaction on the site should feel like watching something beautiful drift past a bathyscaphe porthole. There is no urgency here, no persuasion. The site breathes with the rhythm of deep tides -- 6-second inhale, 6-second exhale -- and this biological cadence governs all animation timing.

The visual inspiration draws from three specific sources: Naoto Fukasawa's product design for Muji (the beauty of obvious, inevitable form), James Turrell's light installations at Roden Crater (color as spatial experience), and the bioluminescence photography of Alexander Semenov (organic light in absolute darkness). These three tributaries converge into a design language where functional clarity meets oceanic mystery.

## Layout Motifs and Structure

The layout system is built on the Japanese concept of "ma" (negative space as active compositional element). Content does not fill the page; it punctuates it. The grid is not a container but an ocean -- vast, dark, and permissive -- in which content elements are positioned like islands in an archipelago, separated by meaningful distances that the eye must traverse deliberately.

**Primary Grid:**
A 12-column grid where only 4-5 columns are ever occupied at once, leaving 60-70% of the horizontal plane as intentional void. The grid uses `gap: clamp(2rem, 5vw, 6rem)` to create breathing room that scales with the viewport. Content blocks are never centered in the conventional sense; they drift toward the left third or right third of the viewport, creating an asymmetric balance like a single stone in a karesansui (dry landscape) garden.

**Vertical Rhythm:**
Sections are separated by viewport-height gaps -- not dividers, not gradient fades, but literal empty space. Each section begins at a minimum of `margin-top: 40vh`, creating a cadence where the user scrolls through silence before encountering the next element. This is the digital equivalent of the pause between movements in a symphony.

**Spatial Zones:**
The page is organized into 5 contemplative zones:

1. **The Surface** (0-100vh): A full-viewport field of deep ocean color with only the domain name visible, set small (1.2rem) in the upper-left corner. The rest is pure negative space with a single, slow-moving wave-form SVG animation undulating across the bottom 15% of the viewport.
2. **The Thermocline** (100vh-250vh): A transitional zone where a single sentence of text appears, left-aligned at column 2, with a subtle color temperature shift in the background gradient from surface blue to deep indigo.
3. **The Mesopelagic** (250vh-450vh): The core content zone. Two to three content blocks appear as floating cards with generous internal padding (3rem-5rem), positioned at different horizontal offsets to create a staggered descent pattern.
4. **The Bathyal** (450vh-600vh): A single large typographic statement spanning 3 columns, surrounded by absolute emptiness. Below it, small secondary text in a lighter opacity provides context.
5. **The Abyss** (600vh-700vh+): The footer zone, where content fades to near-invisibility against the deepest background color, as if sinking beyond the reach of light.

**Navigation:**
There is no traditional navigation bar. A single small mark (the domain "ppss.ee") remains fixed in the upper-left corner at all times, set in 0.75rem slab-serif, opacity 0.4, increasing to opacity 1.0 on hover. This is the only persistent UI element. All other wayfinding is handled through scroll position and the natural vertical flow.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Roboto Slab" (Google Fonts) -- a geometric slab-serif with strong horizontal stress and open apertures. Its mechanical precision pairs with the Muji aesthetic while the slab serifs provide anchoring weight that prevents the oceanic emptiness from feeling unmoored. Used at sizes from 2.5rem to 5rem with `font-weight: 300` (light weight) to maintain airiness. Letter-spacing is set to `0.02em` for breathing room between characters. Line-height at `1.15` keeps multi-line headings architecturally tight.

- **Body Text:** "Josefin Slab" (Google Fonts) -- a vintage-inflected slab-serif with geometric construction and distinctive character. Its slightly elevated x-height and clean terminals make it readable at body sizes (1rem-1.125rem) while maintaining the slab-serif family cohesion with the display face. Used at `font-weight: 400` with `line-height: 1.75` for generous leading that reinforces the ma spacing philosophy. Paragraph `max-width: 38ch` to create narrow, contemplative text columns.

- **Accent / Metadata:** "IBM Plex Mono" (Google Fonts) -- used exclusively for timestamps, coordinates, measurements, and navigational micro-text at 0.75rem-0.875rem, `font-weight: 400`, `letter-spacing: 0.06em`. The monospace rhythm provides a technical counterpoint to the organic slab-serifs, like instrument readings inside a submarine. Color set to the mid-opacity teal (#4A8B8C at 60% opacity).

**Palette:**

The palette is drawn from ocean bathymetric charts -- the gradient of color that occurs as sunlight is progressively absorbed with depth.

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Abyss | Midnight Trench | #0A1628 | Primary background, deepest sections |
| Deep | Hadal Blue | #0F2847 | Secondary background, card surfaces |
| Current | Bathyal Teal | #1A4A5C | Tertiary surfaces, hover states |
| Bioluminescence | Abyssal Glow | #4A8B8C | Primary accent, interactive elements |
| Phosphor | Deep Phosphor | #6BBFAB | Secondary accent, highlights |
| Foam | Surface Foam | #D4E8E0 | Primary text on dark backgrounds |
| Spray | Salt Spray | #E8F0EC | Secondary text, lighter emphasis |
| Signal | Sonar Pulse | #7EC8C8 | Active states, focus rings, links |

Background gradient for the full page: `linear-gradient(180deg, #0F2847 0%, #0A1628 30%, #091220 60%, #060D18 100%)` -- a continuous darkening from deep blue to near-black, simulating descent into the ocean.

All text on dark backgrounds meets WCAG contrast thresholds naturally due to the light-on-dark scheme. The palette deliberately avoids warm tones entirely; there is no orange, no red, no yellow. The emotional temperature is exclusively cool, reinforcing the subaqueous atmosphere.

## Imagery and Motifs

**Wave-Form SVG Animations:**
The primary visual motif is procedurally generated wave forms rendered as SVG paths. These are not decorative illustrations but living organisms within the design -- sinusoidal curves that breathe and shift with slow, biological timing.

Three distinct wave-form systems operate simultaneously:

1. **Surface Waves:** A single SVG path with 5 control points, animated via `requestAnimationFrame` with a period of 8 seconds. The path oscillates between two states with cubic bezier easing (`cubic-bezier(0.37, 0, 0.63, 1)`) to simulate the smooth undulation of ocean surface swells. Stroke: #4A8B8C at 20% opacity, stroke-width: 1px, no fill. Positioned at the bottom of the first viewport section.

2. **Pressure Waves:** Concentric elliptical rings that pulse outward from content blocks on scroll-into-view, like sonar emanations. Each ring expands from 0 to 200% scale over 3 seconds with exponential decay opacity (`opacity: 1 / (ring_index + 1)`). Rendered as SVG circles with stroke: #6BBFAB at 8% opacity. Maximum 4 simultaneous rings per source point.

3. **Current Lines:** Long, thin horizontal SVG lines that drift slowly across sections at varying speeds (20-60 seconds per full viewport width), with slight vertical oscillation (amplitude: 3px, period: 12s). These create a sense of deep current movement. Stroke: #7EC8C8 at 5% opacity, stroke-width: 0.5px. 6-8 lines per section, each at a different vertical position and speed.

**Minimal Imagery Approach:**
True to the "minimal" imagery directive, there are no photographs, no illustrations, no icons. Every visual element is generated from pure geometry -- lines, circles, curves. The site's visual richness comes entirely from the interplay of typography, color, space, and animated SVG wave forms. This is radical reduction: the image is the absence of image.

**Bioluminescent Dot Field:**
A canvas-rendered particle system of 40-60 tiny dots (radius: 1-2px) in #6BBFAB at 10-30% opacity, drifting with Brownian motion across the background. When the cursor moves near a dot (within 100px), it brightens to 80% opacity and drifts gently away, simulating disturbed bioluminescent plankton. On mobile (no cursor), dots occasionally pulse brighter at random intervals (every 4-8 seconds) to maintain the living quality.

**Depth Gradient Overlays:**
Each section has a subtle radial gradient overlay centered on the primary content block: `radial-gradient(ellipse at center, transparent 0%, rgba(10, 22, 40, 0.4) 100%)`. This creates a vignette effect that focuses attention on the content while the edges dissolve into oceanic darkness, like the cone of light from a deep-sea submersible's lamp.

## Prompts for Implementation

**Full-Screen Narrative Descent:**
The entire site must be experienced as a single, continuous vertical descent from ocean surface to abyss. There is no hero section in the traditional sense -- the first viewport is nothing but the deepest blue (#0F2847) with the domain name "ppss.ee" in Roboto Slab Light at 1.2rem, positioned 2rem from the top-left corner, colored #D4E8E0 at 60% opacity. The surface wave SVG animation moves slowly at the bottom 15% of the viewport. The user sees almost nothing. This emptiness is the design. The negative space is not a mistake; it is the message.

**Scroll-Activated Stagger Choreography:**
As the user scrolls, content elements enter the viewport with a staggered animation sequence. Each element uses `transform: translateY(40px)` and `opacity: 0` as its initial state, transitioning to final position over 1.2 seconds with `cubic-bezier(0.16, 1, 0.3, 1)` easing (an overshoot-free smooth ease-out). When multiple elements share a section, they stagger their entry by 200ms intervals. The Intersection Observer API triggers animations at `threshold: 0.15` (element 15% visible). Elements animate in ONCE and never reset -- no scroll-direction reversal animations, no replay. Each moment of revelation is singular, like encountering a creature in the deep.

**Breathing Animation System:**
A global CSS custom property `--breath` oscillates between 0 and 1 on a 12-second cycle (6s in, 6s out) using a sinusoidal JavaScript animation: `Math.sin(Date.now() / 6000 * Math.PI) * 0.5 + 0.5`. This value drives subtle pulsing on the bioluminescent accent color, gentle scale shifts on wave forms (scale range: 0.98 to 1.02), and opacity modulation on the particle field. The effect is subliminal -- the user should not consciously notice the breathing but should feel that the site is alive.

**CSS Architecture:**
All spacing uses a modular scale based on `--space-unit: clamp(1rem, 2.5vw, 2rem)`. Multipliers: `--space-xs: calc(var(--space-unit) * 0.25)`, `--space-sm: calc(var(--space-unit) * 0.5)`, `--space-md: var(--space-unit)`, `--space-lg: calc(var(--space-unit) * 2)`, `--space-xl: calc(var(--space-unit) * 4)`, `--space-2xl: calc(var(--space-unit) * 8)`. Section gaps use `--space-2xl` minimum. Card padding uses `--space-lg` to `--space-xl`.

**Interaction Model:**
- **Hover:** Elements brighten by 20% and shift upward by 2px over 600ms with `cubic-bezier(0.33, 1, 0.68, 1)`. No aggressive scale changes, no color shifts. The ocean does not flinch.
- **Focus:** A double-ring focus indicator using `box-shadow: 0 0 0 2px #0A1628, 0 0 0 4px #7EC8C8` (sonar pulse color) with a slow pulse animation.
- **Scrollbar:** Custom styled to be nearly invisible: 4px wide, track color #0A1628, thumb color #1A4A5C at 40% opacity, no border-radius (square, precise, functional).
- **Selection:** Text selection color #4A8B8C at 30% opacity on text, maintaining readability.

**Performance Constraints:**
All SVG animations use `will-change: transform` and are driven by `requestAnimationFrame` with frame-skip logic to maintain 30fps minimum. The particle canvas uses `OffscreenCanvas` where supported. No animation runs when `prefers-reduced-motion: reduce` is active -- the site becomes perfectly still, and the wave-form SVGs display as static paths.

**Storytelling Emphasis:**
The site tells the story of descent -- from the familiar surface of the web (where everything is loud, bright, and demanding attention) into a quieter, deeper space where content exists for its own sake. This is anti-commercial design. There are no calls to action, no pricing tables, no testimonial carousels, no stat counters. There is only the slow revelation of carefully placed words in a vast, dark, breathing space.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, multi-column feature comparisons, testimonial sliders, newsletter signup modals, cookie banners designed to attract attention. Every element that does not serve the contemplative descent is excluded.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Bathymetric Zone Architecture:** No other design in the portfolio structures its page as a literal ocean depth chart with named zones (Surface, Thermocline, Mesopelagic, Bathyal, Abyss). The progressive darkening background gradient and the systematic increase in negative space as the user scrolls deeper create a spatial narrative that is physically felt through scroll distance. This is not a metaphor applied to a conventional layout -- it is the layout itself organized by depth pressure.

2. **Biological Breathing System:** The `--breath` CSS custom property driven by a 12-second sinusoidal cycle is unique in the portfolio. While other designs use scroll-triggered animations and hover effects, no other design implements a global autonomous rhythm that makes the entire page feel like a living organism. The breathing is independent of user interaction -- the site pulses whether or not anyone is watching, like a deep-sea creature in darkness.

3. **Radical Negative Space Ratio (60-70% void):** While other designs may use generous whitespace, ppss.ee pushes the ma (negative space) concept to its logical extreme. Content occupies less than a third of the available viewport in any given section. Sections are separated by 40vh+ of pure empty space. The domain name in the hero is 1.2rem -- deliberately undersized for a hero element. This level of restraint goes beyond minimalism into a compositional philosophy where the empty space IS the primary design element.

4. **Bioluminescent Interaction Model:** The particle field that responds to cursor proximity with brightening and drift is a unique interaction paradigm. It does not mimic common cursor-follow or magnetic effects; instead, it inverts the typical pattern -- elements move AWAY from the cursor rather than toward it, creating a sense of disturbing a delicate ecosystem rather than attracting attention. This reversal of expected behavior reinforces the oceanic metaphor.

5. **Zero-Image Visual Identity:** While "minimal" imagery at 94% frequency is common, ppss.ee takes this to its absolute conclusion: zero raster images, zero vector illustrations, zero icons. Every visual element is pure CSS or procedural SVG animation. The visual richness comes entirely from animated geometry, color depth, and typographic presence. This is the Muji principle applied to web imagery -- the most beautiful image is no image at all.

**Chosen Seed/Style:**
`aesthetic: muji, layout: ma-negative-space, typography: slab-serif, palette: ocean-deep, patterns: stagger, imagery: minimal, motifs: wave-forms, tone: dreamy-ethereal`

**Avoided Overused Patterns:**
- Avoided "playful" aesthetic (95% frequency) -- used "muji" (2%) instead
- Avoided "centered" layout (99% frequency) -- used "ma-negative-space" (1%) instead
- Avoided "mono" typography (99% frequency) -- used "slab-serif" (3%) instead
- Avoided "warm" palette (100% frequency) -- used "ocean-deep" (1%) instead
- Avoided "friendly" tone (98% frequency) -- used "dreamy-ethereal" (3%) instead
- Avoided "vintage" motifs (87% frequency) -- used "wave-forms" (2%) instead
- While "stagger" patterns (60%) and "minimal" imagery (94%) are more common, they are essential to the seed and are deployed in non-standard ways: stagger is used for depth-descent choreography rather than typical grid reveals, and minimal imagery is pushed to its absolute zero-image extreme
<!-- DESIGN STAMP
  timestamp: 2026-03-10T21:18:56
  seed: and are deployed in non-standard ways: stagger is used for depth-descent choreography rather than typical grid reveals, and minimal imagery is pushed to its absolute zero-image extreme
  aesthetic: ppss.ee embodies the Muji philosophy of "emptiness" as a generative force -- the...
  content_hash: 3751e4a979ac
-->