# Design Language for prototype.report ## Aesthetics and Tone The visual identity of prototype.report channels the atmosphere of a late-night hardware lab where laser-cut stencils meet oscilloscope readouts. Everything feels like it was photographed through a film camera loaded with Kodak Tri-X 400 -- grainy, slightly overexposed, with luminous gold highlights bleeding through heavy black fields. The aesthetic is **grainy-textured** in the truest analog sense: not a subtle CSS noise filter, but a pervasive photographic grain that makes every surface feel like a high-contrast darkroom print of an engineering prototype. The tone is **minimal** -- not decorative minimalism, but the purposeful restraint of a technical specification document that has been elevated to art. Every element earns its place. Silence dominates. The gold accents arrive sparingly, like the warm glow of solder points on a matte black PCB. There is no friendliness, no warmth in the traditional sense -- only the cold precision of a prototype and the quiet confidence of something that does not need to explain itself. Inspiration: Dieter Rams' sketchbooks photographed under tungsten light. A gold-leafed circuit diagram on black cardstock. The Voyager Golden Record's etchings. Military spec sheets printed on thermal paper. ## Layout Motifs and Structure The layout is built on **diagonal-sections** -- the viewport is sliced at sharp 8-12 degree angles, creating wedge-shaped content regions that stack vertically but feel like they are sliding past each other tectonically. Each diagonal cut is defined by a CSS `clip-path: polygon()` that carves the section boundary at an angle, with alternating black and near-black (#0A0A0A vs #050505) fields separated by razor-thin gold (#C9A52C) hairlines that trace the diagonal. **Structural Grid:** The content within each diagonal section sits on a tight 8-column grid (not 12 -- tighter means more intentional), with generous 48px gutters. Text blocks are narrow -- maximum 480px wide -- and float within the diagonal wedge at positions that create deliberate asymmetry. No element is ever perfectly centered. Everything is offset 8-16% from center, creating visual tension. **Section Flow (top to bottom):** 1. **The Aperture (Hero):** A full-viewport black field with a single gold wireframe vector glyph -- an abstract prototype schematic -- rendered as thin SVG strokes. The domain name appears in tech-mono type at 12vw, clipped by a diagonal mask that reveals it character-by-character on scroll. Below the title, a single line of body text: the domain's purpose, in muted gold (#8B7D3C). 2. **The Specification Strip:** A narrow diagonal band (roughly 30vh tall) angled at 10 degrees, containing a horizontal sequence of 3-4 floating vector-art cards. Each card is a black rectangle with a gold hairline border and a single vector illustration inside -- a schematic cross-section, a waveform, a component diagram. Cards float at slightly different vertical offsets (8-24px variation) to feel hand-placed. 3. **The Manifesto Wedge:** A wide diagonal section (60vh) where a single paragraph of body text, set in the monospace body font, unfolds against a deep charcoal (#0D0D0D) field with heavy film grain. The text is left-aligned, narrow-measure (38ch), positioned in the upper-left third of the wedge. A subtle gold vertical rule (1px, 60% opacity) runs along the left edge of the text block. 4. **The Blueprint Zone:** The final diagonal section inverts -- gold background (#C9A52C) with black type and black vector illustrations. This inversion is the site's climactic moment, a sudden flood of warmth after all the darkness. Content here is sparse: a single headline, a vector art diagram, and a monospaced caption. 5. **The Colophon:** A thin horizontal strip (no diagonal) at the very bottom -- matte black, 10vh tall, containing the domain name repeated in 9px uppercase tracking at +0.4em, fading to 20% opacity at the edges. **No navigation bar.** The site is a single continuous scroll with no menu, no hamburger, no links. The diagonal sections ARE the navigation -- each one is a destination. ## Typography and Palette **Typography:** - **Headlines / Display:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface with a slightly industrial character, square terminals, and even stroke width that reads like a digital readout or oscilloscope label. Used at extreme sizes: 10vw-14vw for the hero, 4vw-6vw for section headers. Weight: 400. Letter-spacing: -0.02em at display sizes for tighter tracking that makes it feel engineered rather than decorative. All headlines uppercase. Line-height: 0.92 for stacked display lines. - **Body / Technical Prose:** "IBM Plex Mono" (Google Fonts) -- a monospaced typeface with a humanist skeleton under its fixed-width grid, giving body text readability without losing the technical feel. Used at 15px-17px for body copy, 12px-13px for captions and metadata. Weight: 300 for body (light, to feel like thermal printer output), 500 for emphasis. Letter-spacing: +0.01em. Line-height: 1.65 for comfortable reading at narrow measure. - **Accent / Labels:** "Space Mono" (Google Fonts) -- used exclusively for tiny labels, annotations, and the colophon. Size: 9px-11px. Weight: 400. Letter-spacing: +0.12em (very wide tracking). All uppercase. This creates a distinct register from the two primary typefaces -- like the fine print on a technical drawing border. **Palette:** | Role | Color | Hex | |------|-------|-----| | Primary Black | Void | #050505 | | Secondary Black | Charcoal | #0D0D0D | | Tertiary Black | Soot | #1A1A1A | | Primary Gold | Solder | #C9A52C | | Muted Gold | Patina | #8B7D3C | | Faded Gold | Whisper | #5C532A | | Accent White | Filament | #E8E0CC | | Inversion Gold | Blueprint | #D4B84A | The palette is dominated by black-to-near-black gradients with gold as the sole chromatic element. The gold ranges from full-brightness solder (#C9A52C) down through patina (#8B7D3C) to a barely-there whisper (#5C532A) used for ghost text and disabled states. The accent white (#E8E0CC) is warm-tinted -- not pure white, but the color of aged technical paper under incandescent light. ## Imagery and Motifs **Vector Art System:** All imagery is **vector-art** -- no photographs, no raster images, no gradients within illustrations. Every visual is constructed from thin strokes (1-2px), geometric primitives, and technical drawing conventions. The vector style references engineering blueprints, patent drawings, and exploded-view diagrams: - **Prototype Schematics:** Abstract technical drawings of imagined devices -- cross-sections, wiring diagrams, component layouts -- rendered in gold strokes on black fields. These are not real products; they are beautiful fictions, prototypes of things that could exist. - **Waveform Signatures:** SVG-rendered oscilloscope waveforms (sine, sawtooth, pulse) that serve as decorative dividers between content blocks. Generated with `` elements using cubic bezier curves, animated with a slow horizontal scroll (`stroke-dashoffset` animation over 12s, infinite loop). - **Grid Overlays:** A faint engineering grid (0.5px lines at 32px intervals, 4% opacity gold) underlays certain sections, visible only on close inspection, creating the impression of drafting paper beneath the content. **Floating Elements:** The **floating-elements** motif manifests as small vector glyphs -- circles with crosshairs, corner brackets, dimension arrows, registration marks -- scattered across the viewport at fixed positions (CSS `position: fixed`, `pointer-events: none`). There are exactly 7 of these glyphs, each 12-20px in size, placed at seemingly random but carefully composed positions. They do not move on scroll -- they are pinned to the viewport like registration marks on a film frame, reinforcing the "prototype proof" feeling. Each glyph is rendered in faded gold (#5C532A) at 30% opacity. **Film Grain Texture:** The grainy-textured aesthetic is achieved through a full-viewport pseudo-element (`::after` on `body`) carrying an SVG `feTurbulence` filter (type: "fractalNoise", baseFrequency: 0.9, numOctaves: 6) composited with `mix-blend-mode: overlay` and `opacity: 0.12`. The grain is coarse and visible -- not the subtle 3% noise of glassmorphism, but the aggressive 12% grain of pushed film stock. On the gold-inverted Blueprint Zone section, the grain opacity increases to 0.18 and the blend mode shifts to `multiply`, creating darker speckles on the gold surface. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be implemented as a single continuous scroll with no navigation, no links, and no interactive elements beyond scrolling. The entire experience is a vertical descent through diagonal-sliced sections, each revealing content through **fade-reveal** animations tied to scroll position. **Diagonal Section Construction:** Each section is a `
` element with `clip-path: polygon()` defining its diagonal boundaries. Example for a 10-degree downward-right cut: ``` clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); ``` Sections overlap by 6-8vh to prevent gaps at the diagonal seams. Each section has `position: relative` and `z-index` values that increase going down the page, so lower sections visually "slide over" upper ones. **Fade-Reveal Animation System:** Content within each section starts invisible (`opacity: 0; transform: translateY(24px)`) and fades in when the section enters the viewport. Use `IntersectionObserver` with `threshold: 0.15` to trigger. The transition is slow and deliberate: `opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1)`. Elements within a section stagger by 180ms each. No spring physics, no bounce -- just a smooth, mechanical fade like a darkroom print developing. **Waveform Animation:** The SVG waveform dividers animate using `stroke-dasharray` and `stroke-dashoffset`. Set `stroke-dasharray` to the total path length, then animate `stroke-dashoffset` from the full length to 0 over 8 seconds with `linear` easing and `infinite` iteration. This creates the effect of the waveform being continuously drawn, like an oscilloscope trace. **Floating Registration Marks:** Implement as a `
` with `position: fixed; inset: 0; pointer-events: none; z-index: 9999` containing 7 small SVG elements at hardcoded viewport-percentage positions. These never move, never animate, never respond to interaction. They are static proof marks. **Gold Inversion Section:** The Blueprint Zone section inverts the palette -- `background: #C9A52C` with all text in `#050505`. The transition between the dark Manifesto Wedge and the bright Blueprint Zone should be abrupt (no gradient, no transition -- a hard diagonal cut). This sudden inversion is the site's most dramatic moment and should feel like turning a page in a darkroom to find a sheet soaked in gold toner. **Performance Notes:** The film grain SVG filter is GPU-intensive. Apply it to a `position: fixed` element that covers the viewport, so it only renders once (not per-section). Use `will-change: transform` on the grain layer. On mobile (below 768px), reduce grain `baseFrequency` to 0.7 and `opacity` to 0.08 for performance. **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signup forms, social media icons, cookie banners, hamburger menus. This site has no calls to action. It is a prototype report -- it presents, it does not sell. ## Uniqueness Notes **Differentiators from other designs:** 1. **Diagonal-section layout as primary structural device:** Only 1% of existing designs use diagonal-sections. prototype.report builds its entire spatial logic on angled clip-path cuts, creating a tectonic, shifting feeling that no centered or asymmetric layout can achieve. The diagonal is not decorative -- it IS the grid. 2. **Pure gold-on-black palette with zero chromatic variation:** While other designs use gold as an accent within broader palettes, prototype.report restricts itself to exactly one hue (gold) across 5 luminance stops against 3 grades of black. This extreme chromatic discipline -- gold-black-luxury at its most austere -- is unique in the portfolio. The single moment of palette inversion (the Blueprint Zone) gains enormous impact from the restraint that precedes it. 3. **Fixed-position registration marks as spatial anchors:** The 7 floating vector glyphs pinned to the viewport are a motif found in no other design. They reference the registration marks on film negatives and proof prints, reinforcing the "prototype" concept at a system level. They transform the browser window itself into a proof sheet. 4. **Triple-monospace type system with distinct registers:** Using three different monospace fonts (Share Tech Mono, IBM Plex Mono, Space Mono) at three distinct size/spacing registers creates typographic hierarchy within a single style family. Most designs pair a display face with a body face across different genres; prototype.report stays entirely within monospace territory but finds variation through weight, tracking, and scale. 5. **Coarse film grain at 12% opacity:** Where other grainy-textured designs apply subtle 3-5% noise, prototype.report pushes the grain to 12-18% -- visible, textural, and physically present. The grain is not a polish pass; it is a primary material. **Seed:** aesthetic: grainy-textured, layout: diagonal-sections, typography: tech-mono, palette: gold-black-luxury, patterns: fade-reveal, imagery: vector-art, motifs: floating-elements, tone: minimal **Avoided overused patterns:** centered layout (99%), playful aesthetic (95%), friendly tone (98%), warm palette (100%), scroll-triggered patterns (96%), photography imagery (72%), vintage motifs (87%). Instead chose underused alternatives across all categories -- grainy-textured (1%), diagonal-sections (1%), gold-black-luxury (1%), floating-elements (1%), vector-art (2%).