# Design Language for ethica.dev ## Aesthetics and Tone `ethica.dev` is a **Bauhaus ethics laboratory** — the visual equivalent of a 1923 Dessau workshop poster that has been run through a neon sign shop in present-day Tokyo. The site carries the uncompromising geometric discipline of Gropius-era design doctrine but electrifies it with a voltage that the original Bauhaus masters never imagined: hot electric magenta crackling against charcoal-black ground, acid yellow holding rule lines like copper conductors, and a cyan so saturated it reads as light-source rather than pigment. The tone is **professional without being corporate**. There is no hospitality here, no softening. The site speaks in the declarative, the way a Bauhaus manifesto speaks — direct, constructivist, confident that form serving function is itself a moral position. This is deliberate: `ethica.dev` deals in ethical frameworks for software systems, and the design must embody that same no-nonsense conviction. The mood is the inside of a rare-book room at midnight, lit only by neon signs in the windows — original 1920s typography books stacked on a steel shelf, and through the glass a city that has forgotten how to be anything but luminous. ## Layout Motifs and Structure The page unfolds as a series of **full-viewport parallax sections** — seven distinct panels that each occupy 100vh, stacked vertically in a continuous scroll. Unlike the common parallax treatment that moves background images at reduced speed, these sections use **layered depth stacking**: each panel contains a foreground typographic plane, a middle geometric plane (Bauhaus grid constructions), and a deep background plane (vintage photographic texture), all moving at ratios 1.0 / 0.6 / 0.25 on scroll. **Section rhythm:** 1. **Overture panel** — full-black ground, oversized single word in neon-outlined display type, vintage halftone photograph visible through a 12% opacity scrim, a horizontal rule that pulses with electric current 2. **Manifesto panel** — white ground, dense geometric grid, three columns of manifesto text in condensed display, red diagonal rule slashing bottom-right corner 3. **Principles panel** — charcoal ground, three Bauhaus circle-triangle-square constructions rendered in neon outlines, each rotating 120° on scroll entry 4. **Portfolio panel** — dark panel with organic-blob shapes in neon acting as window-masks for vintage photographs; blobs animate on hover via hover-lift 5. **Process panel** — white ground, technical elevation-drawing aesthetic, numbered step annotations in architectural handwriting style 6. **Philosophy panel** — full-black, dense paragraph text in a single column with 660px measure, marginal annotations in electric yellow 7. **Contact panel** — minimal, single centered composition with ruled grid and neon-stroke input fields **Grid logic:** An 8-column asymmetric grid on a 120px baseline, with a 24px base unit and 40px column gutters. Column spans break the expected 12-column rhythm deliberately — headers span 5/8, body text spans 3/8, creating the Bauhaus asymmetric tension. **No horizontal navigation, no sidebar, no footer nav** — a single continuous vertical essay. ## Typography and Palette **Type system (all verified on Google Fonts):** - **Display headlines — `Big Shoulders Display`** (Google Fonts, weights 100–900). Set at weight 800, tracking +0.04em, all-caps. The slab-free condensed geometry of Big Shoulders Display is the closest available match to the Bauhaus industrial display lettering. H1 at 96px, H2 at 64px, H3 at 48px. Neon-magenta `#FF006E` on black, or black on white. - **Subheadings and labels — `Bebas Neue`** (Google Fonts). All-caps display, weight 400, tracking +0.12em. Used for section labels, captions, manifest headings. Set at 24px–36px in electric yellow `#FFE600`. - **Body text — `IBM Plex Mono`** (Google Fonts, weights 300–700). Monospaced, weight 400, 18px/28px. The mono choice is deliberate: `ethica.dev` is a developer-facing platform, and monospace body text signals that the content itself is code-adjacent. Set in `#E8E8E0` on dark panels, `#1A1A1A` on light panels. - **Marginal annotations — `Archivo Narrow`** (Google Fonts, weights 400–700). Used for footnote-style margin text, timestamps, and pull-quote attributions. 13px, weight 400, `#9A9A9A`. **Palette (five primaries + two ground tones):** | Role | Hex | Name | |------|-----|------| | Ground-dark | `#0A0A0A` | Electric Black | | Ground-light | `#F5F0E8` | Press White | | Primary neon | `#FF006E` | Magenta Volt | | Accent neon | `#00F5D4` | Cyan Spark | | Charge yellow | `#FFE600` | Bauhaus Yellow | | Mid-dark | `#1E1E28` | Studio Night | | Rule red | `#E63329` | Constructivist Red | Color logic: Dark panels use `#0A0A0A` or `#1E1E28` as ground with neon accents at full saturation. Light panels use `#F5F0E8` with `#E63329` and `#1A1A1A` — classical Bauhaus red-black-white. No gradients: all color changes are hard cuts, the way neon tubes switch on. ## Imagery and Motifs **Vintage photography** is used as a textural presence rather than a documentary one. Every photograph is treated with a three-step process: (1) desaturated to near-greyscale, (2) duotoned with the section's neon accent color replacing the highlights (e.g., `#00F5D4` as the highlight tone, `#0A0A0A` as shadow), (3) composited at 65–85% opacity over a solid color plane. The photographs never appear as "content" — they read as patina, the way old halftone newspaper photographs look when you hold them at an angle. **Photo subjects:** vintage Bauhaus workshop photography (students at mechanical looms, architectural models on tables, master craftspeople at the Johansson gauge bench), 1920s–1940s scientific instrument photographs (oscilloscopes, measuring bridges, early computers), and mid-century aerial urban survey photographs. All sourced from the public domain Bauhaus-Archiv Dessau catalog and NARA collections. **Organic-blob motifs** appear as `clip-path` masks and SVG shape containers — the tension between Bauhaus rectilinearity and the blob forms is the central visual argument of the site. The blobs are not decorative: they are the thing that escapes the grid, the element that the Bauhaus machine cannot fully discipline. Each blob is rendered in neon outlines only (2px stroke, no fill) against a dark ground, giving the appearance of a neon tube bent into biological curves. On the Portfolio panel, blobs become filled windows into vintage photographs. **Bauhaus geometric constructions:** the Joost Schmidt triangle system, the Itten color-circle (redrawn in neon colors), the Klee pedagogical grid. These appear as decorative structural elements at 0.4 opacity, never as foreground. **Hover-lift pattern:** Every interactive element — blob-masked photos, section headings, manifesto items — responds to hover with a 4px `translateY(-4px)` and an increase in neon glow shadow intensity (from `0 0 8px` to `0 0 24px 4px`), transition 180ms ease-out. The lift is physical but the glow is electric. ## Prompts for Implementation Build `ethica.dev` as a **single-page vertical manifesto** — one continuous HTML document with no routing, no modal overlays, no sidebars. The site is the argument; scroll is the only navigation. **Parallax architecture:** Each section is a `
` with `position: relative; height: 100vh; overflow: hidden`. Three layers inside each section: ``` .layer-bg { position: absolute; will-change: transform; z-index: 1; } .layer-mid { position: absolute; will-change: transform; z-index: 2; } .layer-fg { position: relative; z-index: 3; } ``` Drive parallax via `IntersectionObserver` + `requestAnimationFrame`, reading `scrollY` and applying `transform: translateY(Npx)` to each layer. Layer-bg moves at 0.25× scroll velocity, layer-mid at 0.6×, layer-fg at 1×. **Neon glow implementation:** All neon effects use CSS `filter: drop-shadow()` and `text-shadow` — never `box-shadow` on block elements, which creates banding artifacts. For SVG blob outlines: `filter: url(#neon-glow)` with an SVG `` + `` filter defined once in a `` block. The glow filter has two layers: a tight 2px blur at 100% opacity and a loose 8px blur at 40% opacity, simulating the core-and-halo of a real neon tube. **Vintage photography treatment (CSS/JS):** Each photo element wraps a `` inside a `
` with `filter: grayscale(1) contrast(1.1)`. The duotone is applied via a CSS `::before` pseudo-element with `mix-blend-mode: color` and the target neon color. Section-specific neon tones are driven by CSS custom properties (`--duotone-color`) set per-section. **Blob animations:** SVG blob paths are generated with cubic Bézier control points placed on a perturbed circle (6–8 control points, perturbation ±30% of radius). On scroll-entry, blobs morph from their "dormant" form (tighter, more circular) to their "active" form (wilder, more biomorphic) using GSAP `morphSVG` or a hand-rolled cubic-interpolation between two static path definitions. Morph duration: 800ms, ease: `power2.out`. **Typography animation:** On scroll-entry, `Big Shoulders Display` headings perform a **weight sweep**: the `font-weight` CSS property animates from 100 to 800 across 600ms as the heading scrolls into the viewport, using `@supports (font-variation-settings: normal)` to gate the animation to browsers with variable font support. On non-variable browsers, the heading appears at full weight immediately. **Avoid:** - Any layout resembling a SaaS marketing page (pricing tiers, feature grids, testimonial carousels) - Navigation bars, hero-CTA-section patterns - Soft drop shadows or any shadow that does not use `drop-shadow` or neon-glow logic - Color gradients — all color transitions are hard cuts or duotone-only - Stock-photography-style images of people shaking hands or staring at laptops ## Uniqueness Notes **Chosen seed:** aesthetic = bauhaus, layout = parallax-sections, typography = art-deco-display, palette = neon-electric, patterns = hover-lift, imagery = vintage-photography, motifs = organic-blobs, tone = professional. **Differentiators from the corpus:** 1. **neon-electric palette at 1% frequency — the rarest palette in the registry.** The frequency report shows `neon-electric` appearing in only 1% of designs. Every other electric/neon treatment in the corpus uses `dark-neon` (7%) or `dopamine-neon` (5%), which tend toward rainbow gradients or pastel-neon. `ethica.dev` commits to a strict four-color neon vocabulary (magenta, cyan, yellow, red) directly derived from the Bauhaus primary palette, electrified. There are no gradients. The neon is disciplined by the same geometric logic that disciplines the grid. 2. **Vintage-photography at 1% frequency, used as duotone patina rather than content.** The corpus uses vintage at 64% — but nearly always as an ornamental or nostalgic surface. `ethica.dev` treats vintage photographs the way a Bauhaus designer would treat them: as *material*, not as *imagery*. They are desaturated, duotoned with neon accent colors, and composited at reduced opacity to become part of the panel's texture. The photograph's subject is secondary; its grain and tonal range are primary. 3. **Organic-blob motifs in deliberate opposition to Bauhaus geometry.** No other design in the corpus combines Bauhaus-strict geometric construction with biomorphic blob forms as a design *argument*. The blobs in `ethica.dev` are not decorative softeners — they are the site's central visual tension: the thing the grid cannot contain, rendered in the same neon-tube logic as the constructivist geometry around them. This creates a dialectical visual language that no other site in the registry attempts. 4. **art-deco-display typography at 6% frequency, specifically through Big Shoulders Display rather than the typical Playfair Display / Cormorant defaults.** The corpus's art-deco typography is overwhelmingly serif-based. `ethica.dev` uses the condensed geometric slab logic of Big Shoulders Display to deliver art-deco verticality and weight without any serif curvature — a Bauhaus-filtered art-deco that has stripped out the ornament but kept the industrial monumentality. 5. **Avoided overused patterns:** `hand-drawn` (71% in corpus — completely absent here), `editorial` (48%), `parallax` as a purely decorative background-scroll (91% — avoided in favor of three-layer depth staging with intentional z-index architecture). The site also avoids the corpus-dominant warm/gradient palette that appears in 97%/91% of designs respectively.