# Design Language for ppss.ee ## Aesthetics and Tone ppss.ee is the web presence of a boutique financial futures studio that operates at the exact boundary where algorithmic precision meets aspirational reverie. The name — four consonants, two vowels, an Estonian ccTLD — suggests something encrypted, classified, deliberately opaque. This is a place where money behaves like weather: invisible, systemic, occasionally catastrophic, occasionally transcendent. The site's aesthetic is **corporate-crystalline** — the visual language of a hedge fund that has hired a dream-architect instead of a branding agency. The mood is **dreamy-ethereal inside a corporate shell**. Think: a Bloomberg terminal redesigned by someone who has been reading Borges in a sensory-deprivation tank. The surfaces are navy and steel, the typography is authoritative rounded-sans, the structure is full-bleed and cinematic — but every hard edge fractures into ice-crystal refraction, every data point dissolves at the periphery into mist, every section transition ripples like a surface disturbed by something large moving underneath. **Inspiration:** Deep-sea research station interiors. The interior of a nautical periscope. Frost forming on aircraft glass at cruising altitude. The way Bloomberg terminals glow in a dark trading floor at 4 AM. Finnish modernist architecture in winter — Alvar Aalto's Finlandia Hall under a January snowfall, all white marble going blue in the dusk. The tone is never anxious, never urgent. It is **the confidence of capital that has nowhere it needs to be**. No countdown timers. No flash sales. No urgency-manufacturing. Instead: slow authority, crystalline stillness, the certainty of something that has been here before the user arrived and will remain long after they leave. ## Layout Motifs and Structure The layout is **full-bleed cinematic** — every section occupies exactly 100vw × 100vh (or 100vw × auto for content that overflows intentionally), with no visible page margins at the viewport level. The page is a sequence of five full-bleed *panels*, each one a distinct world that slides into the next via a slow cross-dissolve controlled by an Intersection Observer, not a click. **The card-flip is the signature micro-interaction.** Twelve crystalline cards are arranged in a 4×3 grid within the third panel, each card a frosted-glass slab (backdrop-filter: blur(20px) saturate(180%)) set against the deep navy ground. On hover, each card flips on its Y-axis (rotateY 180deg, perspective 800px, transition 0.6s cubic-bezier(0.23, 1, 0.32, 1)) to reveal a back face with a single data-metaphor written in light italics: an interest rate, a wind-speed reading, a coordinate pair, a musical note. The flip is not a UI trick — it is the page's primary thesis: **every surface conceals a different kind of number**. **Panel sequence:** 1. **Aperture** — Full-bleed navy ground with a single crystalline wordmark centered on the vertical axis. No navigation. No subheading. The wordmark is backlit by a very slow (45-second loop) radial gradient pulse, like bioluminescence. 2. **Meridian** — A 60/40 split: left side is a full-bleed mixed-media photograph (architectural abstraction, frosted glass, refracted light), right side is a tight column of rounded-sans text describing the studio's operating philosophy. The split is not a hard line — it is a gradient bleed from image to navy, the photograph dissolving into the background color at a 15-degree diagonal. 3. **Lattice** — The card-flip grid. 4×3 frosted cards on a navy ground with a subtle crystalline tessellation pattern (SVG-generated) visible in the background as a very low-opacity watermark. 4. **Signal** — A single full-width typography moment: one long sentence in 8vw rounded-sans, displayed word by word with a 120ms stagger, building into a complete statement about the studio's thesis. The text color transitions from `#B8C8E8` to `#E8F0FF` as each word resolves. 5. **Coda** — A minimal footer panel: navy ground, centered contact line in small-caps rounded-sans, and a single crystalline geometric SVG that rotates at 0.3rpm, forever. **Spatial philosophy:** Every panel has exactly 96px of internal breathing room on desktop (padding: 96px on all sides for text content). Nothing touches the viewport edge except photographs and background gradients. The grid within the Lattice panel uses a 24px gap between cards. No content ever appears in the bottom 10% of a viewport — that space is always reserved for the transition gradient into the next panel. ## Typography and Palette **Typography — Rounded-Sans System:** - **Display / Wordmark:** [Nunito](https://fonts.google.com/specimen/Nunito), weight 800 ExtraBold, set at `clamp(4rem, 10vw, 9rem)`. Letter-spacing `-0.03em`. The wordmark "ppss.ee" is set entirely in lowercase, treating the repeated letters as a deliberate visual rhythm — pp is a pair of eyes, ss is a wave, ee is an Estonian suffix meaning "from," "of origin." The wordmark is white `#F0F4FF` on navy. - **Section Headings:** [Nunito](https://fonts.google.com/specimen/Nunito), weight 600 SemiBold, `clamp(1.5rem, 3.5vw, 3rem)`. Color: `#B8C8E8` (steel-light). - **Body / Philosophy Text:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 400 Regular, size `clamp(1rem, 1.4vw, 1.2rem)`, line-height `1.72`. Color: `#C8D8F0` on dark panels, `#1A2744` on light panels. Maximum measure: 54ch. - **Card back labels:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 300 Light, italic, `0.875rem`. Color: `#A0B8D8`. - **Small-caps / Footer:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 600, `font-variant: small-caps`, `letter-spacing: 0.14em`, size `0.75rem`. Color: `#6888A8`. **Palette — Navy-Metallic:** - `#0A1628` — Abyss Navy. The primary background of Panels 1, 3, 4, 5. A navy so deep it is almost black, with a faint blue undertone that prevents it from reading as corporate-charcoal. - `#142240` — Pressure Navy. Used for card face backgrounds, secondary panel backgrounds, the crystalline grid watermark. - `#2A4070` — Stratosphere. The mid-navy used for hover states on cards, gradient midpoints, and SVG stroke fills. - `#6888A8` — Steel Mist. The functional mid-tone: small text, caption labels, footer text, subtle UI chrome. - `#B8C8E8` — Frost Light. Section headings, secondary text on dark panels, the light edge of the crystalline SVG geometry. - `#E8F0FF` — Polar White. The wordmark, primary display text, card hover highlight, the final word in the Signal panel's word-by-word reveal. - `#C0C8D8` — Brushed Platinum. The metallic accent: card border on hover (1px solid), the SVG geometry strokes in the Coda, and the frosted-card edge glow (box-shadow: 0 0 0 1px `#C0C8D8`40). - `#2A6080` — Ice Teal. A single accent hue used sparingly: the radial pulse highlight in the Aperture panel's bioluminescent wordmark backlight, and the hover glow on crystalline cards (box-shadow additive layer). **CSS custom properties naming:** `--abyss`, `--pressure`, `--stratosphere`, `--steel-mist`, `--frost-light`, `--polar-white`, `--brushed-platinum`, `--ice-teal`. ## Imagery and Motifs **Mixed-media imagery strategy:** The site uses exactly two full-bleed photographic moments (Panels 2 and, optionally, at 30% opacity behind the Signal panel text). Both are sourced from architectural/material photography — not people, not products, not abstract digital art. The photographic subjects are: 1. **Meridian panel image:** A photograph of ice-crystal formations on glass, shot close enough that the crystal lattice structure fills the entire frame. Lit with cold backlight (5500K). Color-graded with a CSS filter chain: `brightness(0.7) contrast(1.1) saturate(0.4) hue-rotate(200deg)` — this pulls the natural warm tones of ice refraction into the blue-steel register of the navy palette. 2. **Signal panel ghost image (optional):** A photograph of a dark ocean surface at night, shot from elevation. Desaturated to 8%. Used purely as a texture layer beneath the word-by-word text reveal, giving the typography the feeling of words emerging from water. **Crystalline motif system — the site's signature visual language:** The crystalline geometry is generated entirely in SVG, not rasterized. Three forms repeat across the site in different scales and opacities: - **Hexagonal mesh:** A honeycomb of regular hexagons with `stroke-width: 0.5px`, `stroke: #C0C8D8`, `fill: none`, rendered at 4% global opacity in the Lattice panel background. The hexagons are `40px × 46px` (flat-top orientation). This is the "depth grid" that gives the Lattice panel its corporate-crystalline floor. - **Fracture lines:** Irregular Voronoi-style edge fragments, rendered as SVG `` elements with very thin strokes (`stroke-width: 0.3px`, `stroke: #B8C8E8`), used as decorative corner ornaments in card faces (front side only). Each card has a unique fracture fragment occupying the upper-right corner, scaled to 48px × 48px. - **Rotating crystal:** The Coda panel's centerpiece — an SVG dodecahedron projection (regular 12-sided polygon with internal lines suggesting depth), `200px × 200px`, stroke `#C0C8D8`, fill none, rotating at `transform: rotate(var(--angle))` driven by `requestAnimationFrame` at 0.3rpm. The rotation pauses when the tab loses focus (`document.visibilityState`). **No icons.** No emoji. No photography of humans. No stock imagery of meetings, handshakes, or charts. ## Prompts for Implementation This is a **single five-panel cinematic scroll**, not a multi-page site. There is one HTML file, one CSS file, one JS file. No build step, no framework, no CMS. The experience is the content. **Panel 1 — Aperture:** Implement as a `position: fixed` layer that becomes `position: relative` (or simply scrolls away) as Panel 2 enters. The wordmark "ppss.ee" is a single `

` in Nunito 800, centered with CSS Grid (`place-items: center`, 100vw × 100vh). The bioluminescent backlight is a `
` — a `radial-gradient(ellipse 60% 40% at center, #2A6080 0%, transparent 70%)` that animates `opacity` between 0.15 and 0.45 over 45 seconds with `animation: breathe 45s ease-in-out infinite alternate`. No other content in this panel. **Panel 2 — Meridian:** The 60/40 split is a CSS Grid: `grid-template-columns: 60fr 40fr` on desktop, `1fr` on mobile (image stacks above text). The image occupies its grid cell as `object-fit: cover`, 100% height. The text column uses `padding: 96px 64px 96px 48px`. The dissolve at the boundary is a pseudo-element on the image cell: `::after { content:''; position:absolute; right:0; top:0; height:100%; width:40%; background: linear-gradient(to right, transparent, #0A1628); }` with a 15-degree skew applied via `transform: skewX(-8deg); transform-origin: left center;`. **Panel 3 — Lattice (card-flip grid):** Use CSS 3D transforms exclusively — no JS for the flip. `transform-style: preserve-3d` on the card container, `.card-front` and `.card-back` absolutely positioned within it, `.card-back { transform: rotateY(180deg); }`, `.card:hover .card-inner { transform: rotateY(180deg); }`. The frosted-glass face uses `backdrop-filter: blur(20px) saturate(180%)` with `background: rgba(20, 34, 64, 0.6)` and `border: 1px solid rgba(192, 200, 216, 0.2)`. The grid is `display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 96px;` on desktop, `repeat(2, 1fr)` on tablet. **Panel 4 — Signal:** The word-by-word reveal requires JS. Split the target sentence into `` elements, each starting `opacity: 0; transform: translateY(8px)`. An IntersectionObserver fires when the panel is 30% visible, triggering a staggered `setTimeout` loop that sets each word to `opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease` with `120ms` between words. The sentence should be something like: *"Capital, like light, bends where the medium changes — we operate at the boundary."* **Panel 5 — Coda:** The rotating SVG crystal: use `requestAnimationFrame` with a delta-time accumulator to drive smooth rotation at exactly 0.3rpm = `0.3 × 360 / 60 = 1.8°/s`. Store the current angle in a CSS custom property via `element.style.setProperty('--angle', angle + 'deg')` and apply it via `transform: rotate(var(--angle))` in CSS. The SVG itself is a `` with 12 points (regular dodecagon) plus 6 diameter lines through the center at 30° increments, all `stroke="#C0C8D8" stroke-width="0.8" fill="none"`. **Storytelling principle:** Every scroll transition is a cross-dissolve managed by Intersection Observer. As a panel enters the viewport, it fades from `opacity: 0` to `opacity: 1` over `600ms`. No slide-in, no parallax displacement — only the ethereal opacity transition, as if each world materializes out of the navy void. **AVOID:** No hero CTAs. No pricing blocks. No testimonial carousels. No stat-grids. No sticky header navigation. No newsletter capture. No modal overlays. No accordion FAQs. No social proof rails. No countdown timers. No "book a call" buttons. No hamburger menus. The only interactive elements on the page are the 12 card flips and the scrolling itself. **Mobile:** On screens narrower than 768px, the 4×3 card grid collapses to 2×6. The Meridian split stacks vertically (image: 50vh, text: auto). All other panels remain full-viewport. The wordmark scales down to `clamp(3rem, 12vw, 5rem)`. ## Uniqueness Notes 1. **Card-flip as epistemological argument, not UI widget.** The frequency report shows `card-flip` as an uncommon pattern. Here the flip is not a "reveal more info" mechanic — it is the page's central philosophical gesture: every surface that appears solid (a rate, a coordinate, a measurement) flips to reveal that it is also something else (a note, a weather reading, a poem fragment). The card-flip is the site's thesis statement rendered as interaction. 2. **Navy-metallic palette with zero warm tones anywhere in the system.** The frequency report shows `warm` at 88% and `gradient` at 77% of all designs in the corpus — this design uses neither. Every color in the palette is a blue-shifted steel or navy. There is no amber, no cream, no terracotta, no sand. The coldness is not stylistic restraint — it is meteorological: capital moves through cold systems, through pressure gradients, through fronts. The palette is the weather. 3. **Crystalline motifs as the connective tissue across all panels.** Rather than using a different decorative system in each section, the crystalline SVG vocabulary (hexagonal mesh, fracture-line ornaments, rotating dodecagon) appears in every panel at different scales and opacities, creating a visual through-line that makes the five-panel page feel like one continuous material — like looking through a single pane of ice from five different distances. 4. **Dreamy-ethereal tone delivered entirely through pacing, not color.** The `dreamy-ethereal` seed typically manifests as pastels, blur effects, and soft hues. Here the dream is constructed through temporal means: a 45-second animation loop, a 120ms word-reveal stagger, a 0.3rpm crystal rotation. The palette is cold and corporate; the dreaminess lives in the slowness, in the refusal to rush, in the bioluminescent patience of the Aperture panel's breathing backlight. 5. **Rounded-sans typography in a corporate context, treated as authority rather than friendliness.** Nunito at weight 800, set tight at `-0.03em` tracking, at 10vw display size, reads as monumental — not approachable. The rounded terminals, which conventionally signal warmth and accessibility, here are re-coded as the softness of a pressure wave in water: round because force distributes spherically, not because anyone is trying to seem approachable. Typography that subverts its own connotation. **Chosen seed:** aesthetic: corporate, layout: full-bleed, typography: rounded-sans, palette: navy-metallic, patterns: card-flip, imagery: mixed-media, motifs: crystalline, tone: dreamy-ethereal **Avoided patterns from frequency analysis:** warm palette (88% — avoided entirely), gradient (77% — no gradient-based color transitions; only opacity-based fades), centered layout (84% — used only for the Aperture wordmark; all other panels are asymmetric or grid-structured), vintage motifs (37% — zero vintage references), tech motifs (24% — crystalline is chosen over tech-circuit as the structural metaphor).