# Design Language for haskell.day ## Aesthetics and Tone `haskell.day` is a **McBling pastoral observatory** — a place where the gaudy jewel-toned rhinestone excess of early-2000s McBling culture has been gently swallowed by a field of flowering clover at dusk. Imagine the moment a Paris Hilton tour bus breaks down in the Cotswolds: the chrome rims and Swarovski crystals catch the last golden hour light, and somehow it works. The aesthetic is the collision no one has tried: **rhinestone romanticism**. Not ironic kitsch, not pure cottagecore — a genuine synthesis where sparkle and pastoral softness are the same feeling. The mood is late-afternoon reverie — the kind that arrives after you have spent hours staring at a type-theory proof and realize the lambda symbol is also a shepherd's crook. `haskell.day` is a Haskell learning and appreciation site, and the design treats pure functional programming the way pastoral poetry treats farming: as an idealized, luminous version of a thing that is otherwise notoriously difficult. Glitch artifacts are not digital-destruction here. They are the shimmer of heat rising off a summer field — a brief iridescent distortion that makes you question whether you saw it at all. Photography of actual pastoral landscapes (rolling fields, wildflower meadows, mist over stone walls) appears desaturated to near-monochrome and then tinted in the site's signature analogous palette, giving every photograph the feeling of an overexposed film slide recovered from a disposable camera found at a barn dance. The overall tone is **pastoral-romantic**: unhurried, luminous, faintly melancholy, earnest without apology. ## Layout Motifs and Structure The page is a **modular-blocks** composition — not a uniform grid, not a bento-box, but a deliberate assemblage of irregular rectangular tiles arranged on an invisible 12-column / 8-row scaffold. Each block is a closed, self-sufficient unit. Some span the full 12 columns as a horizon bar; some occupy 3 columns and 5 rows as a tall portrait tile; some 7 columns and 2 rows as a wide landscape bar. No two adjacent blocks share identical proportions. **The scaffold logic:** - Base unit: `clamp(6px, 1.2vw, 14px)` — the McBling "pixel" - Column gutter: 2 base units - Row gutter: 2 base units - Block padding: 4 base units interior - No rounded corners — all blocks are sharp rectangles, which creates a rhinestone-cut faceted quality when viewed as a whole **Block types and their visual behavior:** - **Horizon bar** (12 × 1): Full-width title/chapter marker. Background is a desaturated photograph tinted with the site's violet-sage analogous gradient. Oversized display headline sits centered, bled to the top edge, with a `2px` McBling shimmer border in `#E8D5C4` (champagne-cream). - **Portrait tile** (3–4 × 4–6): Tall blocks for single concepts — a monad, a functor, a type class. Each portrait tile has a star-shaped CSS clip-path badge in the upper-right corner stamped with a short label ("IO", "Maybe", "Either"). - **Landscape bar** (7–8 × 2–3): Wide blocks for code examples or extended prose. A thin `1px` border in `#B8A9C9` (soft lavender) with a single row of rhinestone-dot CSS art (repeating radial gradient, 4px dots) along the top edge. - **Accent square** (2–3 × 2–3): Small blocks used as visual rests — a single oversized star glyph, a single word in display type, or a photograph crop. **Spatial rhythm:** Blocks are packed edge-to-edge with only the gutter separating them, so the overall composition reads as a single faceted surface — a rhinestone collar viewed from above. **Navigation:** A slim top bar, `52px` tall, with the wordmark at left and three text links at right. No hamburger menus, no mega-menus. The navigation disappears on scroll and reappears with a gentle fade when the user scrolls up. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headlines — [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display)** (variable wght 400–900, italic variant used heavily): The load-bearing voice. Used for block titles at `clamp(2.8rem, 5.6vw, 6.2rem)`, weight 900, italic. Lettertracking `-0.03em`. The extreme weight plus italic gives a McBling excess quality that somehow reads as romantic rather than aggressive against the soft palette. - **Subheadings / Labels — [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue)**: Used for short capsule labels, the star-badge stamps, and navigation items. All caps, `clamp(0.7rem, 1.1vw, 1rem)`, wide tracking `+0.18em`. The condensed all-caps provides a structural contrast to Playfair's flowing italics. - **Body / Running text — [`Lora`](https://fonts.google.com/specimen/Lora)** (wght 400–700, italic): A contemporary serif with brushstroke influence — sits perfectly between pastoral warmth and typographic rigor. Used at `18px / 32px` line-height, weight 400, light tracking `+0.01em`. - **Code — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** (wght 400, variable): For inline Haskell code snippets. `14px / 26px`, no tracking adjustment. Code blocks get a `#F5EFFF` background (pale lilac) and a `1px solid #C9B8E0` border. **Palette — analogous violet-sage-gold:** The palette is built on a 40° arc of the color wheel centered on violet, pulling in sage-green on one side and warm champagne-gold on the other. At 1% corpus frequency, analogous palettes are severely underused — this is a deliberate choice. | Role | Hex | Name | |------|-----|------| | Primary | `#7B5EA7` | twilight-violet | | Secondary | `#A8C5A0` | pastoral-sage | | Accent | `#E8D5C4` | champagne-cream (McBling shimmer) | | Dark ground | `#1F1530` | deep-field (near-black violet) | | Mid ground | `#3D2B5F` | dusk-violet | | Text primary | `#F0EAF8` | parchment-white | | Text secondary | `#C9B8E0` | soft-lavender | | Code surface | `#F5EFFF` | pale-lilac | Background: `#1F1530`. Most blocks use `#3D2B5F` or a desaturated-then-violet-tinted photograph fill. The champagne-cream (`#E8D5C4`) appears only as accent edges, borders, and the rhinestone-dot pattern. ## Imagery and Motifs **Photography** (imagery seed: photography) is central but transformed. All photographs are of real pastoral environments — rolling meadows, dry-stone walls, mist over hills, wildflowers in long grass, a horse in a twilight field. Each photograph is processed in two passes: 1. Desaturate to 90% monochrome 2. Apply a `mix-blend-mode: multiply` overlay in `#7B5EA7` at 60% opacity The result: every photograph reads as a duotone engraving in violet and shadow, which gives the pastoral imagery a McBling collectible-card quality — a holographic effect on a rural subject. **Star-celestial motifs** (motifs seed: star-celestial): Stars appear throughout as the site's signature decoration. They are not astronomical stars — they are the 4-point and 6-point jewel-cut stars of McBling rhinestone jewelry, rendered as CSS/SVG shapes. - **Rhinestone star badge**: A 4-point star (CSS `clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)` — standard 10-point star) appearing in block corners as category labels. Filled `#E8D5C4`, stroked `#7B5EA7` at `1.5px`. - **Celestial field**: In the hero horizon bar, a field of tiny 4px CSS stars (`::before` pseudo-elements positioned absolutely) floats above the photograph at 20% opacity, creating a night-sky-over-meadow effect. - **Section dividers**: A single horizontal row of alternating 4-point and 6-point stars in `#C9B8E0`, `16px` each, spaced `24px` apart, used as a decorative rule between major page sections. - **Glitch shimmer**: When a block is hovered, its star badge scales to 110% and a CSS `filter: hue-rotate(30deg) brightness(1.3)` fires for 120ms, then returns — the heat-shimmer glitch, not a digital-destruction glitch. **Glitch patterns** (patterns seed: glitch) are implemented as pastoral heat-shimmer, not digital violence: - `@keyframes shimmer`: `0% { clip-path: inset(0 0 100% 0) } 40% { clip-path: inset(42% 0 56% 0) } 100% { clip-path: inset(0 0 0 0) }` applied to photograph fills on page load for 800ms - A faint `box-shadow: inset 0 0 40px #7B5EA7` on all portrait tiles, pulsing at 4s interval with 20% opacity shift — the iridescent shimmer of a rhinestone caught in afternoon light ## Prompts for Implementation Build `haskell.day` as **a rhinestone pastoral — a Haskell appreciation site that feels like finding a jeweled compact at the bottom of a wildflower meadow**. One HTML file, one CSS file, one JS file. No router, no framework, no build step. **Macro narrative — one scrolled read:** 1. **Hero (horizon bar, full-width).** A desaturated-violet photograph of a rolling pastoral landscape fills the block. Above it, in Playfair Display italic 900, centered in parchment-white: `haskell.day`. Below the wordmark, in Bebas Neue tracked all-caps: `PURE FUNCTIONS. WILD FIELDS.`. A field of tiny star pseudo-elements drifts at `0.3px/frame` leftward over the photograph. The shimmer glitch fires once on load — the photo appears to vibrate for 800ms before settling. 2. **Three portrait tiles (3-col each, full row).** Each introduces one Haskell concept — Purity, Types, Laziness — in Playfair Display italic as a tall centered headline. A short Lora body paragraph below. A rhinestone star badge at the top-right corner, Bebas Neue label inside. Background: `#3D2B5F`. 3. **Wide landscape bar (9-col).** A Haskell code example in JetBrains Mono on `#F5EFFF`, with a violet border. Above the code block: a Playfair Display italic label "In Haskell, we write:". The rhinestone-dot border pattern (repeating radial gradient) runs along the top edge. 4. **Two portrait tiles + one accent square.** Left two tiles: Functors and Monads. Right accent square: a single oversized 6-point star SVG in `#E8D5C4` on `#1F1530` — a visual breath. 5. **Horizon bar — "The Day".** A second pastoral photograph, same duotone treatment. Centered Playfair Display italic: `Every day is a Haskell day.`. Below: a row of alternating star dividers. 6. **Grid of 6 accent squares (2-col each).** Six Haskell type-class names — `Functor`, `Applicative`, `Monad`, `Foldable`, `Traversable`, `Semigroup` — each in Playfair Display italic huge, centered in the tile, with the rhinestone star badge. Hover state: shimmer glitch fires, background lightens 15%, star badge scales up. 7. **Footer horizon bar.** Full-width, `#1F1530`, Lora body text centered: a two-sentence pastoral-romantic description of why Haskell is worth learning. Bebas Neue all-caps below: `HASKELL.DAY`. A row of 5 rhinestone stars centered beneath. **Animation specifications:** - `--transition-shimmer: 120ms ease-out` for all hover state changes - `--transition-glitch: 800ms steps(4)` for load-in shimmer effect - Star badge hover: `transform: scale(1.1) rotate(15deg)`, `transition: 120ms ease-out` - Block hover: `box-shadow` intensifies from `0 0 40px #7B5EA780` to `0 0 60px #7B5EA7B0` - Navigation fade: `opacity: 0 → 1` over `200ms` on scroll-up detection **CSS architecture:** - Use CSS custom properties for all palette values - `--grid-unit: clamp(6px, 1.2vw, 14px)` as the base unit - Grid layout via `display: grid` with `grid-template-columns: repeat(12, 1fr)` and `grid-auto-rows: calc(var(--grid-unit) * 8)` - Each block assigned explicit `grid-column` and `grid-row` spans - No flexbox for the primary layout — grid only **AVOID:** - CTA buttons with gradient fills and rounded corners - Pricing blocks, stat counters, feature grids - Any use of Inter or Roboto (too utilitarian for this aesthetic) - Neon greens or electric blues (wrong register for analogous pastoral-violet palette) - Flat, uniform card grids where every card is identical - Animations lasting longer than 1200ms (let things settle quickly) ## Uniqueness Notes 1. **McBling + pastoral-romantic fusion — never attempted in this corpus.** McBling sits at 2% of the corpus and is always deployed in its expected register: glossy, urban, excess. This design is the first to fuse McBling's rhinestone vocabulary with pastoral-romantic softness, producing a tone that has no prior art in the registry. 2. **Analogous palette at violet-sage-gold (1% corpus use) in combination with a dark `#1F1530` ground.** Analogous palettes in this corpus almost always run warm-earthy or ocean-teal. This is the first violet-anchored analogous scheme, and the only one set against a near-black violet background rather than a light or neutral ground. 3. **Glitch as heat-shimmer, not digital destruction.** Glitch patterns in this corpus (12% frequency) universally deploy the standard vocabulary: RGB-channel split, scanlines, jitter offsets, data-corruption aesthetics. This design reframes glitch as the iridescent shimmer of warm air over a sunlit field — a slow, organic, pastoral distortion. The `clip-path: inset()` shimmer technique replaces channel-split entirely. 4. **Star-celestial motifs as McBling rhinestone-cut jewelry shapes, not astronomical art.** Star-celestial at 4% frequency always means constellation maps, night-sky gradients, or astronomical illustration. This design uses the same cultural DNA (rhinestone jewelry stars from McBling Y2K fashion) that literally looks like stars but comes from a completely different source. 5. **Photography at 95% corpus frequency, but uniquely transformed by duotone overlay and used to ground an otherwise maximalist aesthetic.** Photography here is not decorative stock — it is the carrier of the pastoral-romantic tone, processed through a McBling collectible-card duotone filter. **Chosen seed:** aesthetic: mcbling, layout: modular-blocks, typography: display-bold, palette: analogous, patterns: glitch, imagery: photography, motifs: star-celestial, tone: pastoral-romantic **Avoided overused patterns (from frequency analysis):** - hand-drawn (66%) — no hand-drawn illustration - editorial (47%) — no editorial-flow layout - masonry (11%) — no masonry grid - photography used raw (95%) — transformed via duotone, not raw - layered-depth (8%) — composition is flat-faceted, not depth-layered