# Design Language for haskell.day ## Aesthetics and Tone haskell.day inhabits the visual world of a brutalist concrete mainframe terminal that has been left running since 1987 -- a monolithic computing slab where type theory was born, where lambda calculus crystallized into executable poetry, and where the raw aesthetic of pure functional programming bleeds through every surface. The aesthetic is **brutalist type-theoretic infrastructure**: exposed structure, no decoration for decoration's sake, and an uncompromising devotion to the idea that correctness is beauty. The mood draws from three specific visual ancestors: (1) the concrete Brutalist university lecture halls of the 1960s-70s where computer science departments were first housed -- think the Barbican Centre's raw shuttered concrete, or the University of Edinburgh's Appleton Tower where much of Haskell's intellectual lineage was developed; (2) IBM mainframe terminal printouts from the 1970s -- green-bar continuous-feed paper with its distinctive alternating pale green and white stripes, the monospaced characters pressed hard into paper by dot-matrix impact; (3) the sparse, severe beauty of a mathematical proof written in chalk on a blackboard, where every symbol carries maximum semantic weight and whitespace is structural, not decorative. The tone is **raw-authentic** -- this site does not sell, persuade, or perform friendliness. It states. It demonstrates. It lets the underlying logic speak with the quiet confidence of a well-typed program that compiles on the first try. There is no eagerness here, no call to action. The site exists the way a theorem exists: completely, self-evidently, and with a certain austere satisfaction in its own internal consistency. ## Layout Motifs and Structure The layout follows a **full-bleed** architecture that treats the entire viewport as a single, unbroken computational surface. There are no rounded corners, no drop shadows, no cards floating above backgrounds. Content occupies the full width of the screen, divided into horizontal bands of varying height that stack vertically like registers in a processor -- each band a discrete computation that feeds into the next. **The Register-Band System:** The page is composed of horizontal full-width bands separated by 1px solid borders in #4A4A4A (gunmetal). Each band has a fixed left gutter of exactly 72px (the width of a traditional punch card's character count) that contains a monospaced line number or section identifier in #6B7B8D (slate). The content area begins at pixel 73 and extends to the right edge of the viewport with no right margin -- content is allowed to be clipped by the viewport edge on very long lines, just as terminal output would be. **Band Types:** 1. **Definition Bands** -- Full-width, height determined by content. Background: #1A1A1E (near-black). These contain the primary content -- text, code, declarations. Left gutter shows a section number in #6B7B8D. 2. **Type-Signature Bands** -- Narrow horizontal strips (exactly 48px tall) with background #22222A (slightly lighter). These act as structural separators between definition bands, containing a single line of monospaced text in #7C9EA6 (muted teal) that functions as a "type signature" for the section below -- a one-line declaration of what the next section will contain, using the Haskell type signature syntax: `sectionName :: Input -> Output`. 3. **Evaluation Bands** -- Full-width bands with background #0D0D12 (deepest black) and a left border of 3px solid #E85D4A (compiler-red). These contain computed or derived content -- statistics, generated visualizations, dynamic data. They represent the result of evaluating the definitions above. **No Centering:** Nothing on this page is centered. All text is left-aligned, beginning at the 73px mark. Headlines do not float in the middle of white space. They begin at the left edge and run rightward, like lines of code. The asymmetry is principled: it reflects the left-to-right evaluation of expressions, the top-to-bottom compilation of a module. **Vertical Rhythm:** The page uses a strict 24px baseline grid. All text, all spacing, all band heights are multiples of 24px. This is the equivalent of a monospaced line height -- every element snaps to the grid with the precision of a well-formatted source file. ## Typography and Palette **Typography:** - **Primary / Body / Everything:** "JetBrains Mono" (Google Fonts) -- weight 400 (regular) and 700 (bold). This is the backbone of the entire site. JetBrains Mono was designed specifically for reading code -- its distinguishing ligatures for operators like `->`, `=>`, `::`, `>>=`, and `<$>` make Haskell's syntax visually coherent rather than a jumble of ASCII punctuation. Used at `16px / 24px` (font-size / line-height) for body text. All text on the site is set in JetBrains Mono. There is no secondary font. A programming language site in a single monospaced typeface is an act of conviction, not limitation. Color: #C8CED6 (pale steel) on dark backgrounds. - **Headlines / Section Names:** JetBrains Mono weight 700 at `clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem)`. Headlines are NOT dramatically larger than body text -- the hierarchy is established through weight (bold vs regular), color (#E8ECF0 for headlines vs #C8CED6 for body), and the structural separation provided by type-signature bands. The restraint in size differentiation mirrors Haskell's flat module structure -- no deeply nested hierarchies, just clear, well-named top-level definitions. - **Type Signatures / Annotations:** JetBrains Mono weight 400 at `14px / 24px` (slightly smaller, same line-height grid). Color: #7C9EA6 (muted teal). These are the secondary voice of the site -- quieter, structural, always providing context. - **Gutter Numbers:** JetBrains Mono weight 300 (light) at `12px / 24px`. Color: #6B7B8D (slate). Right-aligned within the 72px gutter. **Palette:** The palette is **muted** -- desaturated, low-chroma, with the cold precision of a server room at 2am. No warm tones. No comfort colors. Every hue is shifted toward blue-gray. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Void | #1A1A1E | Default band background | | Background Secondary | Register | #22222A | Type-signature bands | | Background Tertiary | Deepspace | #0D0D12 | Evaluation bands | | Text Primary | Pale Steel | #C8CED6 | Body text | | Text Headlines | Bright Steel | #E8ECF0 | Headlines, emphasis | | Text Annotations | Muted Teal | #7C9EA6 | Type signatures, annotations | | Text Gutter | Slate | #6B7B8D | Line numbers, section IDs | | Accent Structural | Gunmetal | #4A4A4A | Borders, dividers | | Accent Error | Compiler Red | #E85D4A | Evaluation indicators, errors | | Accent Success | Typecheck Green | #5FA67C | Successful compilation states | | Accent Lambda | Lambda Violet | #8B7CB6 | Lambda symbols, functional decorations | | Accent Operator | Bind Gold | #C4A55A | Monadic bind operators, key symbols | ## Imagery and Motifs **No Photographs. No Illustrations. No Icons.** The site contains zero representational imagery. Every visual element is constructed from text characters, CSS geometry, and data-visualization primitives. This is a brutalist commitment: the content IS the decoration. **Circuit-Board Trace Lines:** Behind the content, at very low opacity (0.03-0.06), SVG path elements render a pattern that evokes printed circuit board traces -- right-angled paths connecting invisible components across the viewport. These traces are rendered in #4A4A4A (gunmetal) and use only 90-degree angles and 45-degree chamfers, never curves. The traces do not animate. They are static infrastructure -- the wiring beneath the surface. Each page load generates a slightly different trace pattern using a deterministic seed derived from the current date, so the "circuit" changes daily but is consistent for all visitors on the same day. **Lambda Watermarks:** At the intersection points of the circuit-board traces, small lambda symbols (λ) are placed in #22222A (barely visible against the #1A1A1E background). These are 48px tall, set in JetBrains Mono weight 300. They function as structural punctuation -- the way rivets appear on a Brutalist building's exposed steel beams. There are exactly 7 lambdas visible at any given scroll position (a reference to Haskell's lazy evaluation -- only what is visible is rendered). **Data-Viz Evaluation Blocks:** The evaluation bands contain CSS-only data visualizations that represent real or conceptual data about Haskell: - **Bar charts** rendered with CSS grid where each bar is a `div` with a width proportional to its value, colored in a monochrome gradient from #4A4A4A to #7C9EA6. - **Sparkline graphs** drawn with a single SVG `` in #5FA67C (typecheck green), no axes, no labels -- just the pure shape of data. - **Type-tree diagrams** using nested CSS flexbox to render Haskell type hierarchies as horizontal tree structures where each node is a bordered box containing a type name in #8B7CB6 (lambda violet). **Skeleton-Loading Reveal:** When the page first loads, every content band appears as a skeleton-loading state: horizontal bars of #22222A on #1A1A1E, pulsing with a subtle shimmer animation (a linear gradient of `rgba(255,255,255,0.02)` sweeping left-to-right at 1.5 seconds per cycle). The skeleton bars have the exact dimensions of the real content they will replace. Content is revealed band-by-band from top to bottom with a 200ms stagger delay, simulating the way a Haskell compiler evaluates a module: top-level definitions first, then their dependencies are forced in order. Each band transitions from skeleton to content with a 300ms fade -- the skeleton's shimmer stops, the bars dissolve, and the real content appears. This is not a loading indicator -- the content is already loaded. The skeleton reveal is a choreographed animation that gives the page a sense of computation, of evaluation-in-progress. **Cursor Blink:** The page title ("haskell.day") is followed by a blinking block cursor (a 2px-wide, 20px-tall rectangle in #C8CED6) that blinks at exactly 530ms intervals -- the traditional terminal cursor blink rate. This is the only continuously animated element on the page. Everything else is static or transitions once on load. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens with a full-viewport (100vh) definition band. Background: #1A1A1E. The first 72px from the left are the gutter, containing the number "001" in #6B7B8D, right-aligned. At pixel 73, the site title "haskell.day" appears in JetBrains Mono 700 at `clamp(1.5rem, 2vw + 0.5rem, 2rem)` in #E8ECF0, followed by the blinking cursor. Below the title (separated by exactly 24px), a type signature in #7C9EA6: `main :: IO ()`. Below that (another 24px), the body text begins in #C8CED6, speaking about Haskell not as a pitch but as a declaration -- what this language IS, stated with the economy of a module header comment. **Storytelling Through Type Signatures:** The narrative structure of the page is driven by the type-signature bands. Each one previews the next section using Haskell's actual type syntax. For example: - `purity :: SideEffect -> Impossible` (section about referential transparency) - `types :: Program -> Proof` (section about the Curry-Howard correspondence) - `lazy :: Demand -> Value` (section about lazy evaluation) These type signatures are not decoration -- they ARE the table of contents, the structural skeleton of the narrative. A Haskell programmer would read them and understand the page's architecture without reading a single body paragraph. **Skeleton-Loading Choreography:** Implement the skeleton-loading reveal as follows: 1. On DOMContentLoaded, all `.band` elements have class `.skeleton` applied, which renders them as shimmer bars. 2. After a 400ms initial delay (simulating "compilation start"), the first band's `.skeleton` class is removed with a 300ms CSS transition on opacity and background. 3. Each subsequent band is revealed 200ms after the previous one completes its transition. 4. The entire reveal sequence takes approximately 2-3 seconds for a typical page. 5. The shimmer animation uses `@keyframes` with a background-position shift on a linear gradient. **Circuit-Trace Background:** Generate the SVG circuit traces procedurally in JavaScript on page load. Use `Date.now()` floored to the nearest day as the random seed. Generate 15-25 trace paths, each consisting of 4-8 segments with 90-degree turns. Render as a single SVG element positioned `fixed` behind all content with `pointer-events: none` and `opacity: 0.04`. The traces should connect to the lambda watermark positions. **No Scroll Hijacking. No Parallax.** The page scrolls naturally. There are no scroll-triggered animations beyond the initial skeleton reveal. No parallax layers. No intersection observers firing animations on scroll. The brutalist philosophy demands that the content be available immediately and completely -- the user scrolls, the content is there. The only concession to dynamism is the initial skeleton-loading sequence, which runs once and never repeats. **CSS Custom Properties for Theming:** All colors, sizes, and timing values should be defined as CSS custom properties on `:root`, making the entire palette and rhythm system adjustable from a single location. This mirrors Haskell's approach to configuration: parameterize everything, hard-code nothing. **AVOID:** CTA buttons, pricing tables, testimonial cards, gradient backgrounds, rounded corners, box shadows, hero images, hamburger menus, footer link grids, newsletter signup forms, stat-counter animations, carousels, modals, tooltips, and any element that implies commercial intent. This is a site about a programming language, not a product landing page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Single-Font Commitment:** While every other design in the portfolio uses 2-3 typefaces to create hierarchy, haskell.day uses exclusively JetBrains Mono at different weights and sizes. This radical typographic austerity mirrors Haskell's own philosophy: achieve maximum expressiveness through a minimal set of well-chosen primitives. The typography frequency shows tech-mono at only 5% usage -- this design pushes that category to its purest extreme by eliminating all non-monospaced text entirely. 2. **Type-Signature Navigation System:** No other design uses a programming language's actual syntax as its structural navigation device. The type-signature bands that separate content sections are simultaneously decorative elements, structural dividers, and a table of contents readable by the target audience. This collapses three UI concerns into a single element -- a very Haskell-like approach to design. 3. **Skeleton-Loading as Narrative Device:** While skeleton-loading appears at 6% in the frequency analysis (typically used as a utilitarian loading state), this design repurposes it as the primary entrance animation -- a choreographed reveal that metaphorically represents Haskell's evaluation model. The skeleton is not hiding a loading delay; it IS the storytelling, turning the mundane UX pattern into a conceptual statement about lazy evaluation and thunk forcing. 4. **Zero Representational Imagery:** In a portfolio where 70% of designs use photography and 95% use minimal imagery approaches, this design uses NO images whatsoever -- not even abstract shapes or icons. Every visual element is constructed from typography, CSS geometry, and SVG data-visualization primitives. The data-viz imagery category (7% frequency) is employed here in its purest form: visualization without underlying data, used as raw aesthetic material rather than informational display. 5. **Brutalist Anti-Decoration on a .day Domain:** The .day TLD typically implies something light, temporal, and approachable. This design deliberately subverts that expectation with concrete-slab brutalism (8% frequency), creating a productive tension between the domain's inherent lightness and the visual language's severity. The raw-authentic tone (4% frequency) reinforces this: the site does not try to make Haskell approachable. It presents Haskell as Haskell is -- demanding, precise, and beautiful on its own terms. **Chosen seed/style:** aesthetic: brutalist, layout: full-bleed, typography: tech-mono, palette: muted, patterns: skeleton-loading, imagery: data-viz, motifs: circuit, tone: raw-authentic **Avoided overused patterns:** playful aesthetic (97%), centered layout (99%), warm palette (100%), scroll-triggered patterns (96%), photography imagery (70%), friendly tone (97%), vintage motifs (80%), parallax patterns (80%)