# Design Language for holos.works ## Aesthetics and Tone Holos.works inhabits the space where sci-fi hardware aesthetics collide with weathered, grounded reality — think the interior of a decommissioned space station repurposed as an earthen archive. The visual mood is that of analog instruments in a digital cosmos: warm-toned, slightly oxidized, and full of tactile depth. Every surface feels like it has been worn smooth by thousands of hands before yours. The tone is grounded-earthy: not cold sci-fi chrome but a lived-in future where rust meets circuit, where mission patches age on fabric under fluorescent light. Inspiration draws from Soviet-era space program photography, geological survey documents, and the aesthetic of field manuals printed on recycled stock. There is a reverent seriousness here — this is a site that does not shout but instead speaks in low frequencies. Mood keywords: tectonic, archival, mission-critical, worn-in, purposeful weight, sedimentary layers. ## Layout Motifs and Structure The layout uses a magazine-spread composition that evokes double-page spreads from scientific expedition journals. Pages are organized into weighted columns with deliberate asymmetry — a wide primary column (65%) and a narrow annotation column (35%) that carries marginalia, captions, and secondary information in a smaller weight. Sharp-angle motifs define section dividers: diagonal cuts at 12-degree slants slice horizontally between sections, recalling the angular geometry of instrument panels and spacecraft hull panels. These angled separators are filled with texture overlays rather than flat color. The parallax system operates on three depth planes: a slow-moving grain texture background (factor 0.15), a mid-ground layer of vintage photographic stills (factor 0.45), and foreground typographic elements that scroll at full speed. This creates a convincing depth-of-field simulation without JavaScript physics libraries. Navigation is minimal: a horizontal strip pinned at the top with low-opacity frosted-earth glass, using only four items. No hamburger menus. The header dissolves into the background as the user scrolls — the site is meant to be consumed in sequence, like turning pages. Section rhythm: full-bleed hero with diagonal lower edge → two-column annotation spread → full-bleed vintage photograph with parallax → single-column centered manifesto text → split-screen angular feature pair → closing full-bleed earth imagery. ## Typography and Palette **Primary Typeface — Display:** "Bebas Neue" (Google Fonts) — used for section labels, large pull quotes, and navigation items. Set at optical sizes 72–120px for heroes, 28–36px for section labels. Tracked loosely at 0.08em. All caps. **Secondary Typeface — Body:** "IBM Plex Serif" (Google Fonts) — used for body copy, long-form descriptions, and captions. Set at 16–18px with generous line-height of 1.75. The slightly technical character of this serif marries the earthy and the mechanical. **Accent Typeface — Mono:** "IBM Plex Mono" (Google Fonts) — used for data annotations, timestamps, coordinates, and marginalia text. Small caps variant at 11–12px, muted color. **Color Palette:** - `#2B2016` — Deep Tar Brown: primary background, the darkest tone, a near-black with warm undertone - `#4A3728` — Worn Leather: secondary background for alternating sections - `#7A5C3E` — Oxidized Copper: mid-tone for borders, rule lines, and secondary containers - `#C8A97A` — Desert Sand: primary text color for body copy - `#E8D5B0` — Bleached Parchment: headline text, maximum contrast on dark backgrounds - `#D4824A` — Burnt Sienna: accent color for CTAs, hover states, active indicators — the one warm-fire tone that draws the eye - `#8FA68E` — Sage Field: complementary color (the complement to the burnt sienna-red family), used for secondary accents, success states, and botanical motif fills - `#1C1510` — Carbon Black: deepest shadow tone for layered depth effects The palette is a complementary pairing of warm earths (red-orange family) against muted sage-green, anchored by deep browns. No pure whites. No pure blacks. ## Imagery and Motifs **Vintage Photography Treatment:** All photographs receive a multi-layer processing treatment in CSS: sepia filter at 40%, followed by a grain overlay using an SVG noise filter, then a slight vignette via radial gradient. The result looks like a photograph scanned from a 1970s expedition report. Images are never used raw. **Sharp-Angle Geometric Overlays:** Diagonal parallelogram shapes (12-degree skew) cut across the top-right and bottom-left corners of featured images, filled with `#2B2016` at 85% opacity. These create a natural framing device that feels like instrument panel bezels. **Marginalia Annotations:** Thin hairline rules (0.5px) extend horizontally from body text to the annotation column, connecting descriptions to their visual callouts. These rules are drawn in `#7A5C3E` and feel like technical diagram callout lines. **Texture Layers:** A repeating SVG grain texture (fine noise at 180×180px tile) overlays the entire page at 8% opacity and `mix-blend-mode: overlay`. A second coarser texture (simulated film grain at 60×60px) appears on photograph containers at 12% opacity with `mix-blend-mode: soft-light`. **Coordinate Stamps:** Decorative elements include faux-geographic coordinate strings ("42.3601° N, 71.0589° W — SITE ALPHA") rendered in IBM Plex Mono at 10px, `#7A5C3E`, positioned at the corners of major sections as if marking map survey points. **Sci-Fi HUD Micro-Elements:** Thin rectangular brackets `[ ]` wrap section labels. A subtle animated scanline pulse (3px height, 0.3 opacity, 4-second loop) travels slowly up full-bleed sections to evoke CRT monitor aesthetics without overwhelming the earthy tone. ## Prompts for Implementation **Hero Section:** Full-bleed vintage-treated photograph (desaturated, sepia, grain) spanning 100vh. Bebas Neue headline in `#E8D5B0` at 96px, two lines maximum, positioned lower-left with left margin 8vw. Below the headline, IBM Plex Mono coordinate string in `#7A5C3E`. The lower edge of the hero is cut at a 12-degree diagonal using `clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)`. Parallax: the background image moves at 0.4× scroll speed via CSS `transform: translateY()` updated by a lightweight IntersectionObserver/requestAnimationFrame loop. **Parallax Implementation:** Three CSS layers using `position: sticky` combined with `transform: translateY(calc(var(--scroll-y) * -0.15))` for background, `* -0.45` for mid-layer, and foreground at full speed. Use a single `scroll` event listener with `requestAnimationFrame` throttling. No libraries. **Magazine Spread Sections:** CSS Grid with `grid-template-columns: 65fr 35fr` for the main content area. The annotation column uses `position: sticky; top: 2rem` for its content, so annotations float beside the scrolling main column. On mobile, collapse to single column with annotations appearing below their associated paragraphs. **Sharp-Angle Dividers:** Each section-to-section transition uses a `
` with `height: 80px`, `background: #2B2016`, and `clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%)`. The divider color alternates between `#2B2016` and `#4A3728` to match the incoming section's background. **Vintage Photo Treatment CSS:** ```css .vintage-photo { filter: sepia(0.4) contrast(1.1) brightness(0.9); position: relative; } .vintage-photo::after { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,...grain-noise...') repeat; opacity: 0.12; mix-blend-mode: soft-light; pointer-events: none; } ``` **Scanline Animation:** A `::before` pseudo-element on full-bleed sections with `background: linear-gradient(transparent 50%, rgba(200,169,122,0.03) 50%)`, `background-size: 100% 4px`, animated with `@keyframes scanline { from { background-position: 0 0 } to { background-position: 0 100% } }` at 8s linear infinite. **Typography Scale:** Define CSS custom properties: `--type-hero: clamp(56px, 8vw, 120px)`, `--type-section: clamp(28px, 4vw, 48px)`, `--type-body: clamp(15px, 1.5vw, 18px)`, `--type-mono: clamp(10px, 1vw, 13px)`. **HUD Bracket Animation:** Section labels wrapped in `` receive `::before: "[ "` and `::after: " ]"` pseudo-elements in `#7A5C3E`. On scroll-entry (IntersectionObserver), the brackets animate from `opacity: 0; letter-spacing: 0.5em` to `opacity: 1; letter-spacing: 0.08em` over 600ms cubic-bezier(0.16, 1, 0.3, 1). **Scroll-Triggered Reveals:** Body paragraphs in the annotation column use staggered fade-up: `opacity: 0; transform: translateY(20px)` initially, transitioning to `opacity: 1; transform: translateY(0)` when entering viewport. Each sibling delayed by 80ms. **Color Application Strategy:** Backgrounds alternate `#2B2016` and `#4A3728`. All ruled borders use `#7A5C3E`. Interactive elements (links, buttons) default to `#D4824A` with `#8FA68E` on hover — the complementary pair creates a satisfying tension. Body text in `#C8A97A`, headlines in `#E8D5B0`. **AVOID:** Floating card grids, hero-with-bullet-points layouts, stat counters, testimonial carousels, pricing tables, white backgrounds, pure-blue link colors, sans-serif body text, clean geometric icons. **BIAS TOWARD:** Full-bleed narrative scroll, immersive parallax depth, typographic storytelling in Bebas Neue + IBM Plex Serif pairing, the feeling of reading a field journal while standing inside a machine. ## Uniqueness Notes 1. **Complementary-tension color strategy:** The burnt sienna (`#D4824A`) and sage (`#8FA68E`) complementary pair is used as an interactive state duality (default/hover) rather than decoration — this is unusual and creates immediate visual feedback that feels earthy, not digital. 2. **Tri-typeface technical personality:** The combination of Bebas Neue (monumental display), IBM Plex Serif (technical body), and IBM Plex Mono (annotation data) creates a voice that sounds like a space agency field manual — authoritative but worn, technical but human. 3. **Parallax on three explicit depth planes:** Most parallax implementations use two planes (background + foreground). This design uses three calibrated planes with specific scroll factors (0.15 / 0.45 / 1.0), creating genuine perceived depth without WebGL. 4. **Vintage photo treatment as CSS-only pipeline:** No Photoshop preprocessing — all image degradation (sepia, grain, vignette, contrast) is applied at render time via CSS filter chains and SVG noise overlays. Images load fast and clean; the aged aesthetic is synthesized by the browser. 5. **Coordinate stamp micro-copy:** Decorative geographic coordinate strings appear at section corners, repurposing real-world location data as ornamental typography. This adds narrative specificity (a sense of place) without being literally geographic content. 6. **Diagonal section geometry at consistent 12-degree angle:** All sharp-angle transitions use exactly 12 degrees — not varied angles — creating a systematic visual grammar that feels intentional, like hull plating or instrument bezels rather than random decoration. **Chosen seed from assignment:** aesthetic: sci-fi, layout: magazine-spread, typography: rounded-sans, palette: complementary, patterns: parallax, imagery: vintage-photography, motifs: sharp-angles, tone: grounded-earthy **Avoided overused patterns from frequency analysis:** sci-fi aesthetic (5% frequency — acknowledged as seed-required, differentiated by grounded-earthy tone to avoid cold chrome sci-fi cliché), holographic (5%), bauhaus (5%), vaporwave (5%). The rounded-sans typography seed was reinterpreted as IBM Plex family (technical sans/serif/mono) rather than literal rounded letterforms, to avoid overlap with playful-rounded (4%) and display-bold (4%) overused clusters.