# Design Language for holos.dev ## Aesthetics and Tone holos.dev embodies the visual language of a precision measurement laboratory at the boundary of the observable -- the kind of facility where interferometers split photons and holographic plates capture wavefronts invisible to the naked eye. The aesthetic is **minimalist** in the truest sense: not merely sparse, but deliberately reduced to essential information, the way a holographic reconstruction strips away noise to reveal pure phase relationships. Imagine a cleanroom where every surface is anti-reflective matte gray, every readout is a thin sans-serif glyph rendered in cool phosphor light, and the only ornament is the subtle interference pattern that appears when two reference beams intersect on a glass plate. The mood is **quiet authority** -- the confidence of a system that does not need to announce itself because every element is precisely calibrated. There is no visual excess. Color is used the way a laser uses light: narrowly, purposefully, with coherence. The entire experience feels like standing inside a holographic reconstruction chamber where three-dimensional structure emerges from what initially appears to be a flat, monochrome surface. Depth reveals itself through patient observation, not through spectacle. Inspiration sources: the matte-gray control panels of LIGO gravitational wave observatories, the typographic precision of Dieter Rams' Braun product manuals, the sparse grid overlays on engineering blueprints, and the ghostly depth of transmission holograms viewed under monochromatic light. ## Layout Motifs and Structure The layout follows a **centered** composition with a rigid vertical axis of symmetry -- but this symmetry is not decorative; it is structural, like the optical axis of a holographic reconstruction system. All content flows along a single central column (max-width: 680px) flanked by generous negative space. The negative space is not empty -- it contains faint grid-line overlays (1px lines at 0.04 opacity in #8a9bae) that extend to the viewport edges, establishing the content column as a focused region within an infinite coordinate plane. **Structural Principles:** - **Optical Axis:** A single vertical centerline (invisible but implied) governs all content placement. Text blocks, section dividers, and visual elements are centered on this axis. The centerline is occasionally made visible as a 1px dashed line (#4a5568 at 0.12 opacity) running through section transitions, evoking a laser alignment beam. - **Grid Substrate:** The full viewport background carries a faint engineering grid -- horizontal and vertical lines every 64px, rendered at 0.03 opacity in #7a8a9a. This grid is purely atmospheric; content does not snap to it, but its presence establishes the environment as a measurement space rather than a page. - **Section Cadence:** Sections are separated by 120px of vertical space (7.5rem) with a single horizontal rule (1px solid #3a4a5a at 0.2 opacity, width: 200px, centered). Each section fades into view as the user scrolls, transitioning from 0 to 1 opacity over 600ms with a simultaneous 12px upward translation -- the only animation in the entire site. - **Viewport Framing:** The first screen is a full-viewport frame containing only the site identifier and a single-sentence descriptor. No navigation, no scroll indicator, no visual noise. The frame establishes the holographic chamber metaphor: the viewer is inside the apparatus, and the content is the reconstruction. - **Content Density:** Text blocks are set with generous line-height (1.85) and paragraph spacing (1.5em). The reading experience should feel like examining a technical specification sheet where every word carries weight. No content block exceeds 4 paragraphs. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "IBM Plex Mono" (Google Fonts) -- a monospaced typeface with clean geometry, humanist proportions, and excellent legibility at display sizes. Used at 1.75rem-2.5rem for section headings, 1.125rem for sub-headings. Weight: 400 (Regular) for a restrained, instrument-readout quality. Letter-spacing: +0.04em. Text-transform: none (no uppercase shouting; the quiet case reinforces the understated tone). Line-height: 1.3. - **Body / Narrative:** "Space Mono" (Google Fonts) -- a monospaced type designed for editorial contexts, with slightly condensed proportions and a subtle geometric character that evokes CRT terminal displays. Used at 0.9375rem (15px) for body text. Weight: 400. Letter-spacing: +0.01em. Line-height: 1.85 (exceptionally generous for readability in monospace). Maximum measure: 65 characters per line. - **Accent / Metadata:** "Inter" (Google Fonts) -- a proportional sans-serif used sparingly for timestamps, labels, and navigational micro-text. Used at 0.75rem (12px) for metadata and 0.6875rem (11px) for fine print. Weight: 400. Letter-spacing: +0.08em. Text-transform: uppercase. This proportional face provides visual contrast against the monospace-dominant environment, signaling that these elements are metadata rather than primary content. **Palette:** The palette is built on a cool-gray spectrum with a single accent wavelength, mirroring how a holographic system uses monochromatic coherent light against neutral surfaces. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void | Near-black cool gray | #0e1117 | Primary background, deepest layer | | Substrate | Dark cool gray | #1a1f2e | Card backgrounds, elevated surfaces | | Grid | Medium-cool gray | #2d3548 | Grid lines, dividers, structural elements | | Fog | Muted silver-gray | #6b7b8d | Secondary text, metadata, captions | | Signal | Light cool gray | #b8c4d0 | Primary body text | | Reference | Near-white gray | #e2e8f0 | Headlines, emphasis text | | Coherent | Pale cyan-gray | #94b8d4 | Accent -- links, active states, focus rings | | Reconstruction | Faint teal | #5a8fa8 | Hover states, interactive feedback | The accent colors (#94b8d4 and #5a8fa8) are deliberately desaturated -- they read as cool highlights rather than vivid colors, as though seen through the silvered emulsion of a holographic plate. No warm tones appear anywhere in the design. ## Imagery and Motifs **Grid-Line System:** The primary visual motif is an **engineering grid** -- a network of precisely spaced horizontal and vertical lines that pervades the entire viewport as a background layer. This grid is constructed using a CSS `repeating-linear-gradient` stack: one layer of vertical lines (1px wide, #2d3548 at 0.04 opacity, repeating every 64px) overlaid with one layer of horizontal lines (same parameters). Every 4th grid line (every 256px) is rendered at double opacity (0.08) to create a major/minor grid hierarchy, exactly as seen on engineering graph paper or oscilloscope displays. **Phase-Interference Texture:** At certain scroll positions (specifically, section boundaries), a subtle moiré-like pattern appears behind the content. This is achieved through two overlapping grid layers with a 0.5-degree rotation offset between them, creating a faint interference pattern that emerges and dissolves as the layers shift during scroll. The effect is barely perceptible -- a visual whisper that rewards patient observation and references the wave-interference principles of holography. **Section Dividers as Waveforms:** Between major sections, a thin SVG waveform line replaces the conventional horizontal rule. Each waveform is a dampened sinusoid (amplitude: 4px, wavelength: 80px, decay: exponential from center outward) rendered as a 1px stroke in #2d3548 at 0.3 opacity. The waveform is static, not animated -- it reads as a frozen interference pattern or an oscilloscope trace captured at a single moment. Each section uses a slightly different frequency/decay combination, creating subtle variety without breaking visual consistency. **Coordinate Markers:** Small cross-hair markers (+) appear at the four corners of key content blocks (section headings, primary text containers). These are rendered in #6b7b8d at 0.2 opacity, 8px in size, using thin 1px lines. They reference the alignment marks on holographic plates and engineering proofs, reinforcing the measurement-space metaphor without becoming decorative clutter. **No Photography, No Illustration:** The site contains zero photographic images and zero illustrations. All visual interest comes from typographic composition, spatial relationships, and the grid/interference motifs described above. This is a site about structure, not surface -- about the architecture of information rather than its decoration. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens as a holographic reconstruction chamber initializing. The first frame is the full viewport filled with Void (#0e1117). After a 0.8-second pause, the engineering grid fades in over 1.5 seconds (opacity 0 to 0.04), spreading from the center outward using a radial CSS mask that expands from 0% to 100% radius. The grid's appearance should feel like an instrument powering on -- a coordinate system establishing itself before any content is placed within it. Once the grid is visible, the site identifier appears at exact viewport center. It is set in IBM Plex Mono at 2.5rem, weight 400, color #e2e8f0, letter-spacing +0.06em. It fades in over 800ms with a simultaneous 8px upward translation (CSS `transform: translateY(8px)` to `translateY(0)` with `ease-out` timing). Below the identifier, separated by 2rem, a single-line descriptor appears 400ms later using the same fade-reveal animation -- set in Space Mono at 0.9375rem, color #6b7b8d. **Scroll Progression:** As the user scrolls past the first viewport, content sections fade-reveal one at a time. Each section uses the same animation: opacity 0 to 1 over 600ms, translateY(12px) to translateY(0), triggered when the section enters the bottom 20% of the viewport. There is no parallax, no elastic bounce, no stagger between child elements. Every element in a section appears together as a single unit. The restraint is deliberate -- this site does not perform for the viewer; it simply becomes present. **Section Structure:** Each content section follows a rigid template: 1. Section title in IBM Plex Mono at 1.75rem, color #e2e8f0, flush left within the centered column 2. 1rem gap 3. Body text in Space Mono at 0.9375rem, color #b8c4d0, with 1.85 line-height 4. Optional metadata line in Inter at 0.75rem, uppercase, color #6b7b8d, letter-spacing +0.08em 5. 7.5rem bottom margin before the next section divider **Interactive States:** Links are rendered in #94b8d4 with no underline in their default state. On hover, a 1px bottom border in #5a8fa8 draws in from the center outward over 300ms (using `background-size` animation on a centered `linear-gradient` pseudo-element). Focus states use a 2px outline in #94b8d4 with 4px offset. All transitions use `ease-out` timing functions, never `ease-in-out` -- arrivals are smooth, departures are instant, mirroring how a holographic image snaps into visibility when the viewing angle is correct. **Scrollbar Styling:** The custom scrollbar track is #1a1f2e, the thumb is #2d3548, and the thumb on hover is #3a4a5a. Width: 6px. The scrollbar should feel like a precision instrument slider, not a decorative element. **Performance Note:** The grid background, interference patterns, and all animations are CSS-only. No JavaScript animation libraries. The only JavaScript is a lightweight Intersection Observer for triggering fade-reveal on scroll (vanilla JS, no dependencies). Total JavaScript should be under 40 lines. **AVOID:** CTA buttons, pricing tables, feature comparison grids, testimonial carousels, hero images, gradient backgrounds, card hover effects with shadows, stat-counters, progress bars, hamburger menus, footer link columns. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-Imagery Commitment:** While 95% of existing designs use "minimal" imagery (and 70% incorporate photography), holos.dev uses literally no images whatsoever -- no photos, no illustrations, no icons, no SVGs beyond the waveform dividers. All visual interest derives exclusively from typographic spacing, grid overlays, and interference patterns. This is a fundamentally typographic site in a portfolio dominated by imagery-dependent designs. 2. **Engineering Grid as Environment:** Rather than using grid lines as a decorative motif layered onto content (as the 7% of designs with grid-lines motifs do), this design uses the grid as the foundational environment -- a coordinate measurement space that exists before, behind, and around all content. The grid is not an accent; it is the world the content inhabits. The moiré interference effect at section boundaries further transforms the grid from decoration into physics. 3. **Monospace-Only Content Typography:** While 99% of designs use monospace typefaces, they typically pair them with proportional fonts for body text. holos.dev uses monospace (IBM Plex Mono + Space Mono) for ALL content typography -- headlines, body, and code. The only proportional face (Inter) is relegated to metadata and labels. This creates a uniformly technical reading texture that no other design in the portfolio achieves, where every line of content has the same character rhythm. 4. **Single Animation Pattern:** In a portfolio where 96% of designs use scroll-triggered animations and 80% use parallax, holos.dev uses exactly one animation: the fade-reveal (opacity + translateY). No parallax, no stagger, no elastic effects, no morph transitions. Every element uses the identical 600ms fade-reveal. This radical consistency turns restraint itself into a design statement -- the absence of animation variety is as distinctive as the most elaborate animation system. 5. **Holographic Reconstruction Metaphor:** The conceptual framework -- a holographic reconstruction chamber where structure emerges from interference patterns on a neutral substrate -- provides a coherent rationale for every design choice (the monochromatic cool-gray palette, the engineering grid, the phase-interference textures, the centered optical axis layout). No other design in the portfolio uses optical physics as its organizing metaphor. **Chosen seed/style:** aesthetic: minimalist, layout: centered, typography: tech-mono, palette: cool-grays, patterns: fade-reveal, imagery: minimal, motifs: grid-lines, tone: professional **Avoided overused patterns:** playful aesthetic (95% frequency -- replaced with minimalist at 6%), warm palette (100% -- replaced with cool-grays at 6%), friendly tone (97% -- replaced with professional at 12%), parallax patterns (80% -- replaced with fade-reveal at 9%), scroll-triggered (96% -- used only a simple Intersection Observer, not elaborate scroll-triggered sequences), vintage motifs (79% -- replaced with grid-lines at 7%).