# Design Language for p9r.dev

## Aesthetics and Tone

p9r.dev is the digital altar of someone who treats code the way a pyromaniac treats a darkened room — with deliberate reverence and a lit match. The name itself is a numeronym: **p**ersona**9**r, or simply the way a system compresses identity into a short burst of signal. This is a developer portfolio that refuses to be polite.

The aesthetic is **holographic-edged minimalism** — surfaces that look like they were pressed from a diffraction-grating film and then left out in candlelight. The mood is not the Silicon Valley startup confidence blast; it is closer to the aesthetic of an underground Berlin art space that also happens to run production Kubernetes clusters. Crisp geometric letterforms float above frosted glass panes that shift color as the viewport scrolls — holographic prismatic light bleeding through translucent panels like oil on water under a single flame.

The tone is **edgy-rebellious** but disciplined: not chaos, but the deliberate refusal to comply with the visual conventions of every SaaS landing page ever built. No hero section. No testimonials. No pricing grid. Instead, a long editorial essay in five acts — each act a single full-width composition where geometry, type, and a single candle-derived color event are the only ingredients. The attitude is that the work speaks and the page is its lecturn, not its advertisement.

Specific mood references: Virgil Abloh's Off-White typographic interventions, the tactile surface of a holographic album sleeve from 1994, the ISO 216 discipline of a Swiss print job, the cold light of a laptop screen reflected in a glass of water at 2 AM.

## Layout Motifs and Structure

The structure is **editorial-flow** — a single vertical essay that does not pretend to be a web page. It reads like a journal spread from a risograph-printed art zine that someone scanned at 300 dpi and then built in CSS.

**Five acts, one scroll.** Desktop: `max-width: 1400px`, centered, with a fixed 24px grid at `1.5rem` intervals. Each act occupies `100vh` minimum. Acts do not have the same structure — that is intentional. The layout _shifts_ between acts, expressing a different compositional stance in each.

- **Act I — Signal:** Full viewport, type-only. A single enormous numeral (the numeronym index, `09`) in `clamp(22vw, 28vw, 38rem)` locks the upper-left quadrant. The domain `p9r.dev` sits in the lower-right at `1.4rem`, tracked to `0.38em`, both elements floating above a frosted-glass panel that is `92vw × 88vh`, centered with a `4vw` offset to the right.
- **Act II — Fragment:** Two-column asymmetric split: `67%` / `33%`. Left column is a dense block of work items set in `1rem / 1.6` body type; right column is a single **tilt-3d** panel — a `360px × 480px` card that responds to `pointer: mousemove` by rotating `±12deg` on both axes with a `perspective: 900px`. The card shows a frosted holographic swatch that shifts through the prismatic spectrum on tilt.
- **Act III — Void:** Entirely negative space except for a single `2px` horizontal rule at the mathematical golden-ratio point (`61.8%` from the top of the act) and a micro-caption to its right in `0.75rem` caps. This act is the breath.
- **Act IV — Candle:** A full-bleed composition. A single **candle-atmospheric** element — not a photograph, but a CSS-only animated candle flame rendered with `conic-gradient` + `radial-gradient` layering — sits at center. Its warm amber glow (`#E8A84C`) halos outward, softening the prismatic ice palette. Around it, three short project fragments appear as if lit by the flame, fading at the edges.
- **Act V — Contact:** Bottom of the essay. A single centered email address in `3.6rem` display type, tracked to `0.12em`. No form. No fields. Just the address, the way a painter signs a canvas. Below it, a thin `1px` rule and the site's version stamp.

**Mobile:** Single column, `padding: 0 1.25rem`. Acts collapse to their essential typographic core. The tilt-3d panel in Act II becomes a static frosted-glass card. The candle animation persists — it is CSS-only and performant. No hamburger menu. No navigation at all: this is a single page, read top to bottom.

## Typography and Palette

**Primary typeface: [Jost](https://fonts.google.com/specimen/Jost)** — a variable geometric sans, 100–900, the closest open-source analog to the Futura-geometric archetype. Used for all display, heading, and body text. The discipline is strict: **two weights only in practice** — `300` (light, for body text and captions) and `700` (bold, for display numerals and section anchors). No italic. No oblique. Geometry only.

**Secondary typeface: [Space Mono](https://fonts.google.com/specimen/Space+Mono)** — monospaced, used exclusively for code fragments, the domain stamp, and the version identifier in Act V. Weight `400` only. This is the machine voice; Jost is the human voice.

**No decorative typeface.** The display moment is achieved through scale and tracking, not through a third family.

**Scale (fluid, via clamp):**
- Numeral display: `clamp(18vw, 24vw, 34rem)`, tracking `−0.02em`
- Section anchor: `clamp(2rem, 4vw, 5rem)`, tracking `0.04em`, uppercase
- Body: `clamp(0.95rem, 1.1vw, 1.15rem)`, line-height `1.72`
- Caption/micro: `0.72rem`, tracking `0.3em`, uppercase

**Palette — translucent-frost with holographic prismatic bleeds:**

| Role | Token | Hex |
|---|---|---|
| Background (deep night) | `--void` | `#0a0b10` |
| Frost surface | `--frost` | `rgba(255,255,255,0.06)` |
| Frost border | `--frost-edge` | `rgba(255,255,255,0.13)` |
| Primary text | `--ice` | `#dce8f0` |
| Subdued text | `--mist` | `rgba(220,232,240,0.52)` |
| Candle amber | `--flame` | `#E8A84C` |
| Prismatic teal | `--prism-teal` | `#4ECDC4` |
| Prismatic violet | `--prism-violet` | `#9b5de5` |
| Prismatic rose | `--prism-rose` | `#ff6b9d` |
| Rule / hairline | `--wire` | `rgba(220,232,240,0.18)` |

The prismatic trio (`--prism-teal`, `--prism-violet`, `--prism-rose`) appears exclusively as thin **edge glows** on the tilt-3d panel in Act II, as the candle halo bleed in Act IV, and as a `1px` spectrum border that traces the perimeter of the frost panel in Act I. They are accent-by-exception, never fills.

The holographic surface effect is achieved by stacking:
1. A base `#0a0b10` background
2. A `backdrop-filter: blur(28px) saturate(140%)` frost layer at `rgba(255,255,255,0.06)`
3. A `linear-gradient(135deg, rgba(78,205,196,0.08), rgba(155,93,229,0.08), rgba(255,107,157,0.08))` shimmer layer keyed to a CSS custom property `--tilt-x` / `--tilt-y` that the JS tilt handler updates on `mousemove`

## Imagery and Motifs

**No photography.** Not a single pixel of a stock image, a rendered scene, or an AI-generated photograph. The only visual elements are:

1. **The candle flame (Act IV).** A CSS-only flame constructed from three overlapping `radial-gradient` + `conic-gradient` layers animated with `@keyframes flicker` — a `2.4s` infinite loop that nudges `scale`, `opacity`, and `filter: hue-rotate` within a ±7 deg range. The flame is `48px × 72px` at its base; the glow halo extends `200px` outward via `box-shadow` stacked six layers deep, graduating from `#E8A84C` at `0%` opacity `0.55` to transparent. No candle body is drawn — just the pure flame event hovering in void space.

2. **The tilt-3d holographic card (Act II).** A `360px × 480px` card with `border-radius: 2px`, `border: 1px solid var(--frost-edge)`, and the three-layer holographic surface described above. It has no image inside it — the surface _is_ the content. On `mousemove` within a `600px` proximity radius, `perspective: 900px` and `rotateX` / `rotateY` values are computed from the cursor offset and applied via `transform`. The prismatic edge glow intensifies as tilt increases, using a CSS `filter: drop-shadow` chain. On touch devices it cycles through a gentle `@keyframes breathe-tilt` — ±4 deg, 4s, `ease-in-out infinite`.

3. **The numerals.** The large `09` display numeral in Act I is the primary visual anchor. It is set in Jost 700, filled with a `background-clip: text` gradient that maps the prismatic trio horizontally — teal at left, violet at center, rose at right. This is the one moment the prismatic colors appear as a fill rather than an edge.

4. **Hairlines and rules.** All section divisions are `1px` horizontal rules in `var(--wire)`. The single golden-ratio rule in Act III is `var(--wire)` at `40%` opacity — barely there, the visual equivalent of a held breath.

5. **No icons.** Not a single icon library is loaded. The one navigational gesture (back-to-top) is expressed as a `↑` Unicode arrow in Space Mono, `0.8rem`, `var(--mist)`.

## Prompts for Implementation

Build p9r.dev as a **single `index.html`** with embedded `<style>` and a `<script>` block of under `120 lines`. No build tool. No framework. No bundler. The entire site must be openable by double-clicking the HTML file in Finder and working perfectly.

**Act-by-act directives:**

- **Act I:** The `09` numeral is positioned `absolute` within a `relative` container that is `100vw × 100vh`. The numeral sits at `top: 6vh; left: 5vw`. The frost panel behind it is a `div` with `position: absolute; width: 92vw; height: 88vh; top: 50%; left: 54%; transform: translate(-50%,-50%); backdrop-filter: blur(28px) saturate(140%); background: rgba(255,255,255,0.042); border: 1px solid rgba(255,255,255,0.10); border-radius: 2px`. The domain stamp sits `bottom: 5vh; right: 6vw; font-family: 'Space Mono'; letter-spacing: 0.38em; font-size: 1.4rem; color: var(--mist)`.

- **Act II:** Use `CSS Grid: grid-template-columns: 2fr 1fr; gap: 4rem`. The tilt card is the right cell. The JavaScript tilt handler listens on `document.addEventListener('mousemove', e => { ... })`, computes `rx = (e.clientY / window.innerHeight - 0.5) * 24` and `ry = (e.clientX / window.innerWidth - 0.5) * -24`, sets `card.style.transform = \`perspective(900px) rotateX(\${rx}deg) rotateY(\${ry}deg)\``. The shimmer gradient inside the card reads `--tx` and `--ty` CSS vars updated in the same handler to shift the prismatic shimmer angle. Use `transition: transform 0.12s ease-out` for the card.

- **Act III:** Just a `<section>` with `height: 100vh; position: relative`. The rule is `position: absolute; top: 61.8%; left: 0; right: 0; height: 1px; background: var(--wire); opacity: 0.4`. The caption is `position: absolute; top: calc(61.8% + 6px); right: 6vw; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist)`.

- **Act IV:** The candle uses three absolutely-positioned divs stacked inside a `relative` wrapper centered in the viewport. The outermost is the glow (pure `box-shadow` stacked six times), the middle is the flame body (`conic-gradient` animating), the inner is the tip highlight (`radial-gradient`, white-to-transparent). The `@keyframes flicker` nudges `transform: scaleX(0.96) scaleY(1.02)` to `transform: scaleX(1.04) scaleY(0.98)` over `2.4s`. The three project fragments are `<p>` tags with `position: absolute`, each at a distinct angle from the flame center, fading out via `mask-image: radial-gradient(circle at center, black 30%, transparent 80%)` applied to the `<section>`.

- **Act V:** `text-align: center; padding: 20vh 0`. Email address as a `<a>` with `color: var(--ice); text-decoration: none; font-size: clamp(1.8rem, 3.5vw, 3.6rem); letter-spacing: 0.12em`. On `hover`: `color: var(--flame); transition: color 0.22s ease`.

**AVOID:** No scroll-triggered reveal animations (overused at 35%). No parallax (overused at 77%). No stagger entrance animations (overused at 53%). No sticky header. No navigation bar. No mobile hamburger menu. No CTA buttons. No testimonials, pricing, stats, feature grids, or social proof. Do not load more than two Google Fonts families. Do not use JavaScript for anything other than the tilt handler and cursor proximity detection.

**Story:** This page is a page in a notebook that belongs to someone who solves hard problems in the dark and lights a candle when they're done.

## Uniqueness Notes

1. **Holographic at 0% prior use, paired with translucent-frost at 3%.** The frequency analysis shows holographic is not in the aesthetic corpus for this registry — it is a first. Translucent-frost appears in only 3% of designs. The combination of holographic prismatic bleeds _expressed only as edge glows and gradient fills on a single card_ — never as a background treatment — is a specific discipline that makes this distinct from vaporwave and glassmorphism entries that use similar vocabulary but apply it indiscriminately.

2. **Candle-atmospheric (3%) used as the sole light source metaphor in a tech-portfolio context.** Candle motifs in the registry appear in lifestyle, cafe, and wellness sites. Using it here — as the literal illumination event around which work samples orbit — inverts the expected context and makes the warmth feel earned rather than decorative. The candle is CSS-only, requiring no image asset.

3. **Tilt-3d (underused) executed on a content-void panel.** Every other tilt-3d usage in the wild applies the effect to product images or cards with text. Here the tilt card contains nothing except the holographic surface itself — the interaction is the content. The prism-shift as the user moves their mouse _is_ the experience, not a garnish on top of it.

4. **Editorial-flow at 6% usage combined with edgy-rebellious at 3%.** The frequency analysis shows editorial-flow is usually paired with scholarly-intellectual or elegant-sophisticated tones. Pairing it with edgy-rebellious creates a tension the design sustains deliberately: the structure is Swiss-rigorous but the attitude is anti-compliance. The five-act essay layout with a void act (Act III) is a direct argument against the prevailing single-page convention of filling every viewport.

5. **Zero imagery, zero icons, zero JavaScript framework.** The entire visual experience is typographic, geometric, and CSS-gradient-based. The design produces a holographic surface effect without a single image file, without WebGL, and without a build step. This is a direct rejection of the trend toward heavy interactive WebGL experiences in developer portfolios — and a demonstration that the same level of visual sophistication is achievable with constrained tools.

**Chosen seed:** aesthetic: holographic, layout: editorial-flow, typography: futura-geometric, palette: translucent-frost, patterns: tilt-3d, imagery: minimal, motifs: candle-atmospheric, tone: edgy-rebellious

**Avoided patterns (per frequency analysis):** parallax (77% — most overused), stagger (53%), scroll-triggered (35%), spring (32%), mono typography as primary (76% — used only as secondary here), dashboard layout (18%), hand-drawn aesthetic (58%)
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:53:38
  domain: p9r.dev
  seed: seed:
  aesthetic: p9r.dev is the digital altar of someone who treats code the way a pyromaniac tre...
  content_hash: 8f0b07ca7d94
-->