# Design Language for hil.st ## Aesthetics and Tone **hil.st** — the word *hil* is an archaic English word for a slight rise in ground, a gentle hill barely worth naming, the kind cartographers left blank. Paired with **.st** (São Tomé), it becomes a whisper of topography: a place you pass through, slow, in soft afternoon light. This site is a **time capsule wrapped in frosted glass**, as though someone pressed antique photographs between the pages of a book, and years later the sepia has bled into the paper and become inseparable from it. The aesthetic is **ethereal-nostalgic** — warm amber light filtered through old windowglass, forms softened by chemical aging, the texture of Kodachrome film grain and the visual weight of a hand-labeled slide box. But running beneath the vintage warmth is a precise, structural **tech-mono** skeleton: coordinates stamped in fixed-width type, metadata annotations in courier-adjacent fonts, altitude markers printed in digital-negative as though a developer's toolkit had been gently colonized by memory. The tension is deliberate. *Vintage* surfaces, *precise* bones. The site looks like a beautifully aged artifact that was, in fact, engineered. Every bubble of bokeh, every amber grain, every softly rounded frame exists because a very precise system placed it there. The tone is **nostalgic-retro** — not fake-vintage, not ironic retro, but the genuine emotional weight of *found footage*, of photographs discovered in a flea market, of voices heard on reel-to-reel tape. The warmth is melancholy, not cheerful. The presence of exact coordinates and technical metadata reminds the viewer that even the most personal memory is also a data point. Mood references: a Leica M6 travel journal; the color temperature of afternoon sun through a frosted train window; the font on the cartridge label of a cassette tape from 1983; the satisfying click of a slide projector advancing. --- ## Layout Motifs and Structure The site is built as a **layered-depth scroll** — six full-viewport scenes, each constructed as three to five overlapping planes that travel at different parallax rates when scrolling. This is not the standard hero-section parallax; it is *genuine depth*, with photographic subjects at different focal planes, bokeh halos sitting in the midground, and coordinate-grid annotations floating in the far-background plane. **Structural grammar:** - Each scene has a **background plane** (the aged photographic ground, slow parallax), a **subject plane** (the primary vintage image or motif, medium parallax), a **foreground plane** (bubble elements and mono text annotations, fast parallax), and an occasional **glass plane** (a frosted-glass overlay div that creates the ethereal softening layer between subject and viewer). - The six scenes are: 1. **Scene I — The Hilltop** — hero. A single vintage landscape photograph, heavily grain-treated. Coordinates printed in `JetBrains Mono` top-left. A large bokeh bubble (CSS `border-radius: 50%`, `backdrop-filter: blur(32px)`, `mix-blend-mode: soft-light`) floats dead center, half-obscuring the horizon line. 2. **Scene II — The Cartographer's Desk** — technical. Grid paper texture underlay. Coordinate annotations in mono type. Several layered hand-annotated vintage maps rendered as SVG traces. 3. **Scene III — The Slide Archive** — gallery feel. A diagonal strip of 8 vintage-photography slide frames, staggered in entrance, each a rounded `border-radius: 6px` card with a 1 px amber border. Depth: slides feel suspended at different z-depths via CSS `translateZ` and `perspective`. 4. **Scene IV — The Atmospheric** — pure mood. Grainy amber gradient background. Large overlapping bubble halos, no photography, only texture and type. Mono metadata floats in from the right like film roll metadata. 5. **Scene V — The Signal** — contrast scene. Near-black ground. Single warm light source (radial gradient, `#D4722A` to transparent) illuminating just the center. A vintage radio dial illustration (inline SVG, hand-drawn stroke style) with frequency marker at a fictional `88.7 FM HIL.ST`. 6. **Scene VI — Coordinates** — closing. Back to warmth. The site's "purpose" or "about" text printed in large mono type, like a field journal entry, latitude/longitude metadata wrapping around it. **Spatial logic:** - All content is right-heavy (subject mass sits 60% toward right); left margin holds mono coordinates, timestamps, and metadata. - No centered hero text. No centered CTAs. - The `stagger` animation pattern governs all text and element reveals: staggered fade-up with a `0.08s` delay increment per element, `cubic-bezier(0.23, 1, 0.32, 1)` easing. - Layered planes create the depth without JavaScript complexity: pure CSS `transform: translateZ` + `perspective: 1200px` on a container, with `will-change: transform` on the moving layers. --- ## Typography and Palette **Typography (Google Fonts only):** - **Primary display — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)**, Regular and Italic 400–700. Used for large headline statements, pull quotes, scene titles. Set between 8vw–18vw for hero moments, 2.8rem for section headers. Tracking at `-0.01em`. The italic variant is the *emotional* register; upright is the *observational* register. - **Secondary body — [Lora](https://fonts.google.com/specimen/Lora)**, Regular 400. Used for paragraph text and field-journal-style descriptions. Set at 1.1rem / 1.8 line-height. Lora's slightly wedge-serifs read as a typewriter descendant without being a novelty font. - **Mono technical — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, Regular 400. Used exclusively for coordinate stamps, altitude markers, timestamps, metadata annotations, and any text that should read as *system* or *data*. Set at 0.78rem–0.9rem, tracked at `0.06em`, color `#C4954A` (amber-gold on dark grounds) or `#8B6233` (dark amber on light grounds). This is the structural skeleton that holds the ethereal warmth together. **Palette — warm-earthy ethereal:** | Role | Hex | Description | |---|---|---| | Ground dark | `#1C1409` | Near-black aged paper, the deepest dark ground | | Ground warm | `#2E1F0E` | Warm brown for panel backgrounds | | Amber primary | `#C4954A` | The signature warm: coordinate type, accent borders | | Amber light | `#E8B97A` | Highlight: subject warmth, hover glows | | Cream vellum | `#F2E8D5` | Light ground, faded paper tone | | Sepia mid | `#8B6233` | Body text on light grounds, secondary elements | | Grain mist | `#D4C4A8` | Texture overlay color, fade layers | | Ethereal haze | `rgba(242,232,213,0.18)` | Frosted glass overlay tint | | Cool ghost | `#9BA8A0` | The one cool accent: shadows, vintage slide borders | CSS custom properties: ``` --ground-dark: #1C1409; --ground-warm: #2E1F0E; --amber: #C4954A; --amber-light: #E8B97A; --vellum: #F2E8D5; --sepia: #8B6233; --grain: #D4C4A8; --haze: rgba(242,232,213,0.18); --ghost: #9BA8A0; ``` Film grain is applied globally: a `noise` SVG filter (`feTurbulence baseFrequency="0.65"` + `feColorMatrix`) composited as a `::before` pseudo-element fixed-position overlay at `opacity: 0.045` and `mix-blend-mode: overlay`. This is the single most important detail — it ties every element into a unified photographic vocabulary. --- ## Imagery and Motifs **Photography treatment:** - All imagery is styled as **vintage-photography** — sepia-duotoned, film-grain overlaid, slight vignette (CSS `box-shadow: inset 0 0 80px rgba(28,20,9,0.6)`), and a subtle `filter: sepia(0.45) contrast(1.05) brightness(0.95)` applied to every ``. - Image subjects are *landscapes and topographic scenes*: a hillside at dusk, a ridge seen from below, a valley mist, an aerial survey photograph, a mountain trail sign. No people. No interiors. - Photographs are placed inside CSS `clip-path: polygon()` silhouettes rather than rectangular crops, giving them the feel of darkroom-cut paper — irregular, alive. **Bubble motifs:** - Bubbles are the primary decorative element, fulfilling the `bubble-playful` brief *within* the nostalgic register by reading not as candy-bubbles but as **film-grain bokeh circles** — the foreground out-of-focus highlights you see in a Leica or Rolleiflex photograph. - Each bubble is a `
` with `border-radius: 50%`, `backdrop-filter: blur(28px)`, `background: rgba(196, 149, 74, 0.08)`, a 1px `border: 1px solid rgba(196,149,74,0.22)`, and a subtle `box-shadow: 0 0 40px rgba(196,149,74,0.12) inset`. - Bubbles range from `80px` to `320px` diameter. They are placed at 8–12 positions per scene, with `z-index` values distributing them across all depth planes. They do NOT orbit or bounce — they *breathe* (CSS `@keyframes breathe`, `transform: scale(1)` → `scale(1.018)`, 6–9s ease-in-out infinite, each bubble on a different duration). - Bubble density is highest in Scenes I and IV. Scene V (The Signal) has exactly one large bubble (280px) centered behind the radio dial, at `opacity: 0.4`. **Mono-text annotations:** - Coordinate and metadata text (`JetBrains Mono`) appears as a visual motif itself, not just functional type. It is placed as large-format ghost text in the background of some scenes: `fontSize: 6vw`, `opacity: 0.04`, `color: var(--vellum)`, acting as textural wallpaper. - In the foreground layer, the same metadata appears crisp and legible at small scale, framing the photographic subjects like catalog labels. **Slide frames:** - Scene III uses `
` elements styled as physical slide mount frames: `border: 3px solid #C4954A`, `border-radius: 4px`, `padding: 8px`, `background: #1C1409`, with a thin inner `outline: 1px solid #8B6233`. The photograph inside gets the sepia filter. The `alt` text caption appears below in `JetBrains Mono` at 0.72rem, `color: #C4954A`. --- ## Prompts for Implementation Treat hil.st as a **six-scene atmospheric journal** — a field researcher's visual notebook that you scroll through not to find information but to feel the experience of the site's unnamed place. Every implementation decision should serve that feeling: grain, warmth, depth, precision, stillness. **Implementation priorities in order:** 1. **Film grain overlay first.** Before any other CSS. The `noise` SVG filter pseudo-element is the scene-setter. If it does not render correctly (Safari bug: `backdrop-filter + filter` interaction), fall back to a PNG noise texture (256×256 tileable) at `opacity: 0.06`. 2. **Depth planes via CSS only.** Use `perspective: 1400px` on the scene container, `transform-style: preserve-3d` on each scene, and `transform: translateZ(-Xpx) scale(Y)` on each plane where `Y = (1400+X)/1400` to maintain apparent size. The `scale` correction is critical — without it, background planes look shrunken. 3. **Stagger reveals.** Each scene's elements enter with the stagger pattern: build a `data-stagger` index on each element (0 through N), apply `animation-delay: calc(var(--stagger-index) * 0.08s)` via CSS custom property, use `IntersectionObserver` to trigger the animation when the scene enters the viewport. The animation: `@keyframes stagger-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }`, duration `0.6s`, easing `cubic-bezier(0.23,1,0.32,1)`. 4. **Bubbles: breathe, not bounce.** The `breathe` keyframe is the only animation on bubbles. Varying the duration (6s, 7.2s, 8.4s, 9s across bubbles) creates organic asynchrony. Do NOT add translate/float animations — stillness is the point. 5. **JetBrains Mono metadata layer.** A fixed-position overlay (`position: fixed`, `pointer-events: none`, `z-index: 0`) that displays the current scene's coordinate set in the bottom-left at small size (`0.78rem`). The coordinate value changes per scene using a `dataset` attribute on each scene section, read by a small `IntersectionObserver` snippet that updates the fixed metadata display. 6. **Color mode.** The site is dark-first. Do not implement a light mode. The one "light" scene (Scene VI — Coordinates) uses `--vellum` as the background, still part of the warm palette, not a bright-white mode shift. 7. **No JavaScript frameworks.** Vanilla JS only. The entire behavior can be accomplished with two `IntersectionObserver` instances (one for stagger, one for the metadata display), a CSS `perspective` stack, and `@keyframes`. Total JS should be under 80 lines. 8. **Typography hierarchy in practice:** - Scene hero label: `Playfair Display` italic, `clamp(3.2rem, 10vw, 9rem)`, `color: var(--vellum)` - Section description: `Lora` regular, `1.1rem`, `color: var(--grain)`, `max-width: 52ch` - Coordinate metadata: `JetBrains Mono` regular, `0.78rem`, `color: var(--amber)`, `letter-spacing: 0.06em` - Ghost background type: `JetBrains Mono` regular, `6vw`, `opacity: 0.04`, `color: var(--vellum)` 9. **Scroll behavior:** `scroll-behavior: smooth`, `scroll-snap-type: y proximity` on the root. Each scene is `scroll-snap-align: start`. The `proximity` (not `mandatory`) snap allows partial reveals at scene edges, which reinforces the layered-depth feeling. 10. **No CTA sections. No pricing. No feature grids. No testimonials. No hero buttons.** The site is a visual experience with a contact coordinate (an email in mono type, Scene VI), nothing else. --- ## Uniqueness Notes Three differentiators grounded in the frequency analysis: 1. **vintage-photography imagery at 1% combined with ethereal aesthetic at under 2%.** The frequency report shows `vintage-photography` appearing in only 1% of the corpus, and the `ethereal` aesthetic sub-category is similarly rare. Nearly every design that uses vintage imagery pairs it with `editorial` (47%) or `hand-drawn` (66%) aesthetics. hil.st is the first design to pair vintage photography with an ethereal, frosted-glass, depth-layered structure — the photographs become atmospheric building material rather than documentary evidence. 2. **bubble-playful motif deployed as bokeh physics, not candy.** The `bubble-playful` motif appears at 4% and in every prior instance resolves as bright, bouncy, cheery circular elements (candy stores, children's apps, social platforms). hil.st repurposes bubbles as film bokeh — muted amber, frosted glass, breathing-not-bouncing, distributing across CSS `translateZ` depth planes. The motif serves the aesthetic rather than contradicting it. This is a first in the corpus. 3. **tech-mono typography (6%) fused with nostalgic-retro tone (5%) rather than futuristic or terminal tone.** The frequency analysis shows `tech-mono` typography always appears paired with `terminal`, `futuristic-cutting-edge`, or `cyberpunk` aesthetics. hil.st breaks this rule: JetBrains Mono is the cartographer's annotation font, the field researcher's ledger type, the developer's ghost in the photographic memory machine. The mono type reads as *historical precision* rather than future-tech. 4. **layered-depth layout (8%) with no JavaScript-driven parallax library.** Most sites using `layered-depth` rely on `gsap` ScrollTrigger or similar. hil.st achieves it with native CSS `perspective` + `transform-style: preserve-3d`, which is simultaneously more performant and more architecturally unusual. Seed: aesthetic: ethereal, layout: layered-depth, typography: tech-mono, palette: warm-earthy, patterns: stagger, imagery: vintage-photography, motifs: bubble-playful, tone: nostalgic-retro Avoided overused patterns (per frequency analysis): hand-drawn (66%), editorial (47%), centered layout (90%), full-bleed (76%), parallax-js pattern (90%), mono-only typography (84%), warm+gradient palette (93%+82% — addressed by keeping warm but grounding it in earthy-muted rather than gradient-chromatic), vintage motif (53% — addressed by using vintage *photography* specifically rather than the generic `vintage` motif tag that dominates the corpus).