# Design Language for postp.day ## Aesthetics and Tone **Concept: Bauhaus Camera Obscura at the Coastal Horizon** `postp.day` reads as *post-p-day* — a day of post-processing, of looking at what was captured and deciding what it means. The site occupies the quiet hour after a long shoot: the camera is set down, the light is still good, the coast is still. A photographer stands at the window of a Bauhaus studio built on a cliffside and watches the sea flatten into geometry. The aesthetic is **rigorous Bauhaus constructivism softened by coastal diffusion**. Where the Bauhaus school (Dessau, 1925) used primary geometry and functional type to organize space, this site layers a coastal atmosphere over that grid — the clean rules remain, but the light has traveled through salt air and camera glass, smearing edges into bokeh. Every element is placed with Bauhaus intentionality, then photographed through a slightly out-of-focus lens. **Mood:** The controlled silence of a darkroom. The distant sound of surf. A single overhead fluorescent. The specific calm of someone who has finished work and is not yet ready to leave. **Tone:** Calm-serene. No urgency. No sales pressure. The site exists as a deliberate pause in a day of making images. Visitors are expected to slow down. **Visual Inspiration:** - Herbert Bayer's universal typeface studies (1925): letterforms as pure geometry - The Zeiss optical laboratories at Jena: glass circles, spherical aberration as design language - Josef Albers' color field studies applied to coastal light: the way haze desaturates and blurs warm palette values at the horizon - A long-exposure photograph of a lighthouse at twilight: stars bloom into soft circles of light --- ## Layout Motifs and Structure **The Single Horizon Band** Where the corpus uses centered at 84% to mean "hero text centered above a CTA button," this site uses centered to mean something architecturally different: **a single horizontal band divides the viewport exactly in half, the way a coastal horizon bisects a photograph**. Everything above the band is sky; everything below is sea. The content lives at the band — the horizon — like a ship that has not yet decided to arrive or depart. **Macro structure:** - **Full-viewport hero**: The band runs at exactly 50vh. Above it: a field of CSS-rendered bokeh circles (SVG `` with `filter: blur()`) drifting at different depths, simulating stars or distant lights. Below it: a flat Bauhaus grid of small geometric tiles in coastal palette — the sea abstracted into Mondrian blocks. - **The Band itself**: A precise 1px rule in `Horizon` (`#9BB5C3`), the weight of a hairline in photographic paper. The wordmark `postp.day` sits centered on this rule, baseline aligned to it, using Jost at display scale (`clamp(5rem, 12vw, 11rem)`), weight 300, letter-spacing `0.18em`, all lowercase. The type floats between bokeh sky and grid sea. - **Scroll below the fold**: The layout transitions from full-bleed geometry to a Bauhaus grid of three equal columns — the proportions of a film strip contact sheet. Each column is a "frame": one section per column, alternating content and void. - **Grid unit**: 8px base, Bauhaus modular. All spacing is multiples of 8. Column gutters: 24px. Section padding: 64px vertical. - **No navigation bar at top**: Navigation appears only as five lowercase letterforms below the wordmark on the horizon band — `about · work · contact · journal · index` — spaced at exactly 40px intervals, in Jost weight 300, size `0.85rem`, all in `Sand` (`#D8DCDF`). **Motion Logic:** - The bokeh circles in the sky zone drift imperceptibly slowly — a 120-second CSS animation loop with staggered delays. Each circle moves less than 3% of viewport width before looping. The effect is subliminal: the sky breathes but does not animate. - The horizon band `blur-focus` interaction: on page load, the wordmark arrives already legible (0% blur), but the bokeh field above appears at full blur and sharpens to its resting state over 2.5 seconds. The inverse: the grid below defocuses from sharp tiles to their resting slight-blur over the same 2.5 seconds. The effect centers attention exactly at the wordmark. - Scroll-triggered: as the user scrolls down, the hero section compresses (sticky), the bokeh field collapses upward, and the wordmark remains pinned at top-of-viewport at a smaller scale (`clamp(1.5rem, 3vw, 2.5rem)`). --- ## Typography and Palette **Typography (all Google Fonts, verified):** - **Wordmark / Hero Display**: [`Jost`](https://fonts.google.com/specimen/Jost), weight 100–300, tracking `0.18em`, all lowercase. Jost is a revival of the Bauhaus-adjacent Futura geometry — circular apertures, monolinear strokes, pure construction. It reads as Futura but with slightly warmer proportions, matching the coastal-blend palette. Used at `clamp(5rem, 12vw, 11rem)` for the hero, dropping to `clamp(1.5rem, 3vw, 2.5rem)` in sticky mode. - **Body / Editorial**: [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), weight 300 and 400, size `1.0625rem` (17px), line-height `1.72`. DM Sans has the low-contrast strokes of a geometric sans but with optical corrections that prevent the sterility of pure Futura at body size. Every paragraph in this site is a caption or a note — DM Sans carries that register. - **Accent / Labels**: [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weight 300, size `0.75rem`, uppercase, tracking `0.2em`. Used for section labels (`§ 01 — ABOUT`, `§ 02 — WORK`), metadata captions, and navigation micro-text. Space Grotesk has geometric DNA but introduces deliberate optical irregularities that read as handcrafted — exactly right for the darkroom aesthetic. **Palette — Coastal Blend:** | Token | Hex | Usage | |-------|-----|-------| | `Void` | `#0D1B24` | Page background (above horizon: sky void) | | `Depth` | `#162635` | Secondary background (below horizon: sea depth) | | `Fog` | `#1E3A4C` | Grid tile background color (sea grid cells) | | `Horizon` | `#9BB5C3` | The 1px band line, navigation text, fine rules | | `Sand` | `#D8DCDF` | Body text, secondary labels | | `Salt` | `#EEF2F4` | Hero wordmark text, high-emphasis headings | | `Bloom` | `#C5DDE8` | Bokeh circle fill (at low opacity, 15–30%) | | `Tide` | `#7AA8BF` | Accent color — hover states, active indicators | | `Dusk` | `#4A7A93` | Mid-tone — grid tile borders, decorative rules | **Color Logic:** - The palette is a single desaturated blue-gray range, from `Void` (near-black) to `Salt` (near-white), all in the blue-gray family of coastal light. No warm tones. No contrast-color accent. - Bokeh circles: `Bloom` at `opacity: 0.18–0.28`, with `filter: blur(var(--blur-radius))` where `--blur-radius` varies per circle from `8px` to `42px`. The circles are not decorative — they represent actual out-of-focus light sources (stars, distant lighthouse lamps, studio lights). - The grid tiles below the horizon: alternating `Fog` and `Depth` fills with `1px` `Dusk` borders. No gradients within tiles — pure flat Bauhaus blocks. --- ## Imagery and Motifs **All imagery is CSS + inline SVG. No photography files. No stock assets.** **Bokeh Field (sky zone):** The entire upper half of the viewport is a field of CSS-rendered bokeh circles, generated in JavaScript at page load. Each circle is a `` SVG element with: - Radius: random value between `4px` and `80px` - Fill: `Bloom` (`#C5DDE8`) - `fill-opacity`: random value between `0.08` and `0.28` - `filter: blur(Xpx)` where X correlates with radius — larger circles blur more (simulating depth of field: distant stars bloom more than close ones) - CSS `transform: translate()` animation with randomized duration (90s–150s) and delay The field contains approximately 60 circles. The density is highest near the horizon band and thins toward the top of the viewport — suggesting that the camera is aimed slightly downward and the stars are near the horizon. **Star-Celestial Motifs:** The celestial language is not clipart stars. Instead, every star-reference is expressed through **diffraction spikes** — the 4-point cross pattern of light through a Bauhaus-style geometric aperture (hexagonal, rendered in SVG). When a bokeh circle reaches its smallest blur value (`blur(2px)`), it gains four thin SVG lines (`stroke: Bloom`, `stroke-width: 0.5px`, `length: 12px`, `opacity: 0.5`) extending from its center — a diffraction spike. This is the only moment a "star" shape appears in the design, and it appears only as a photographic artifact, not an icon. **Grid Sea Tiles (below horizon):** A CSS grid of `8×5` rectangular tiles, each `1fr` wide, with alternating fill values from `Fog` and `Depth`. The tiles carry no content. They exist as the visual representation of the sea abstracted into geometry — the Bauhaus interpretation of water. On hover, individual tiles lighten slightly to `Horizon` fill over a `400ms` ease-out transition, spreading to adjacent tiles with staggered `100ms` delays (a ripple without animation libraries). **Bauhaus Geometric Accent:** A single Bauhaus geometric composition appears in the `About` section: three concentric circles (SVG, stroke-only, `Dusk` color, stroke-width `1px`) with a bisecting horizontal rule. This references the Bauhaus school's own logo and serves as a section divider. No other decorative elements exist. **Monospace Details:** Exposure metadata appears in the footer as fake camera settings: `f/1.4 · 1/2000s · ISO 800 · postp.day`. This text appears in Space Grotesk, size `0.7rem`, opacity `0.4`, and functions purely as atmospheric decoration. --- ## Prompts for Implementation **The story to tell.** A photographer has finished a day of shooting on the coast. They open `postp.day` in the editing suite — a small Bauhaus-style room overlooking the water. The sun has set but the sky is still coastal-dark, not black. The lights of distant ships and stars are visible through the window, out of focus because the room's glass is slightly fogged. The site does not sell anything. It is a portfolio space — a contact sheet, a selection of frames from the day. The visitor scrolls through the contact sheet and finds the images worth keeping. **Hero section (above the fold):** - Full viewport height. Background: `Void`. The SVG bokeh field fills the upper 50vh. At exactly `50vh`, the `Horizon` 1px rule. The wordmark `postp.day` in Jost weight 100, `clamp(5rem,12vw,11rem)`, `Salt` color, centered on the rule (baseline = 50vh), letter-spacing `0.18em`. - Navigation five-item row immediately below the wordmark: `about · work · contact · journal · index` in Space Grotesk `0.75rem`, `Horizon` color, margin-top `28px`. - Below the rule (50vh to 100vh): the `8×5` grid sea tiles in `Fog`/`Depth`. - On page load: `blur-focus` transition. The bokeh field starts at `filter: blur(24px)` and transitions to natural blur values over `2500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. The wordmark fades in from `opacity: 0` to `opacity: 1` at `1200ms` delay, `800ms` duration. **Scroll behavior:** - The hero section is `position: sticky; top: 0` with a height that collapses from `100vh` to `80px` as the user scrolls past the fold. The bokeh field fades to `opacity: 0.2` at the collapsed state. The wordmark scales from display size to `clamp(1.5rem,3vw,2.5rem)` and moves to left-aligned at the collapsed state. - Below the hero: three-column contact-sheet grid. Each column is a "frame" section. Columns alternate: content / void / content. Void columns contain only the `Dusk`-color decorative concentric circles at centered 30% opacity. **Content sections (contact sheet):** Each frame section has: - A Space Grotesk label at top: `§ 01 — ABOUT` in `0.75rem`, `Horizon` color, uppercase - DM Sans body text in `Sand`, `1.0625rem`, `line-height: 1.72` - No images — the bokeh circles in the hero establish all visual richness; the content zone is deliberately spare - A `1px` `Dusk` bottom rule as section separator **Animation constraints:** - No JavaScript animation libraries. All motion is CSS transitions and CSS `@keyframes`. - `prefers-reduced-motion: reduce` respected globally — all transitions collapse to `opacity`-only, 200ms. - The bokeh circles use CSS custom properties for their animation parameters, allowing JavaScript to set random values at page load without a library. **Typography implementation:** Google Fonts import for Jost (weights 100, 300), DM Sans (weights 300, 400), Space Grotesk (weight 300). Use `font-display: swap`. **AVOID:** - Any CTA buttons or pricing blocks - Photography files or external image assets - Warm color tones or any color outside the coastal-blend range - Decorative star clipart or icon-font stars — stars appear only as bokeh and diffraction spikes - JavaScript libraries for animation — CSS only - Navigation in a horizontal bar at top — navigation lives on the horizon band only --- ## Uniqueness Notes 1. **The horizon as layout axis, not metaphor.** Centered at 84% in the corpus means "hero stack centered above CTA." Here, centered means a single 1px horizontal rule at exactly `50vh` — the coastal horizon — and every layout decision derives from that bisection. The page is a seascape, not a webpage. No other registered design uses a pure horizon-band as the primary compositional rule. 2. **Bauhaus constructivism + optical defocus as a unified system, not two aesthetics layered on each other.** The corpus uses glassmorphism (21%) and blur (4%) as surface-decoration effects. This design uses blur as a *photographic realism claim*: the bokeh circles blur because light sources actually blur through glass at shallow depth of field. The blur radius is correlated with the circle radius to simulate real optics. The Bauhaus grid below the horizon is the same system viewed in focus — crisp, geometric, flat. The site is a single coherent optical metaphor, not a style mashup. 3. **Diffraction spikes as the only celestial motif.** The seed calls for `star-celestial` motifs. The corpus at 5% uses star shapes decoratively (icon stars, SVG five-point stars, clipart). This design refuses the five-point star entirely. Stars appear only as photographic artifacts: bokeh circles that have sharpened enough to grow four-point diffraction lines — the optical signature of a geometric aperture (hexagonal iris). The star is earned, not pasted. 4. **The contact sheet as portfolio structure.** Post-processing is the work of choosing which frames to keep. The three-column alternating layout references the physical contact sheet — the photographer's first selection tool. No other coastal or Bauhaus design in the corpus uses the contact sheet as its primary organizational metaphor. 5. **Palette discipline: no warm tones, full desaturation.** The coastal-blend palette in the corpus appears at 2% and typically includes sand/terra cotta warm tones. This design uses coastal exclusively in its cool register — the blue-gray light of late dusk or early dawn, after the warmth has drained from the sky. The palette range is a 9-step cool progression from `Void` (#0D1B24) to `Salt` (#EEF2F4) with zero hue variation outside the blue-gray family. **Seed:** aesthetic: bauhaus, layout: centered, typography: futura-geometric (realized as Jost — Google Fonts Futura revival), palette: coastal-blend, patterns: blur-focus, imagery: bokeh-background, motifs: star-celestial, tone: calm-serene **Avoided from frequency analysis (OVERUSED):** photography as imagery (87%), parallax (76%), mono typography (76%), warm palette (88%), hand-drawn aesthetic (58%), generic centered-hero-above-CTA layout (84%).