# Design Language for algoha.com ## Aesthetics and Tone `algoha.com` is a **chromed editorial broadsheet pressed under glass** — imagine the masthead of a 1962 trade weekly that has been laser-cut from a single sheet of brushed nickel, slipped into an oxblood saddle-leather portfolio, and left on the dashboard of a parked Citroën DS. The light coming through the windshield is winter-grey. The leather has gone soft at the corners. The metal still holds an edge. When you brush your finger across the cover the chrome answers back; when you open it, the page underneath is set in Baskerville and reads like a letter, not a brochure. The word **algoha** is a hinge — a doubled exhalation, *algo* (Spanish for *something*), *aha* (the small surprised sound the body makes when an idea lands). The site is built around that hinge. It is a place where *something* clicks. The tone is **conversational** in the literal sense: the page speaks to the reader in second person, in full sentences, with semicolons and asides, the way an older editor speaks to a younger writer in the margin of a galley proof. There is no microcopy. There are no dashboards. There are no "features." There is a long, thoughtful column of prose threaded between sheets of polished steel. The mood is **late-afternoon aluminium** — the hour when industrial surfaces stop reflecting the sky and start reflecting the room they are in. The page is cool to the touch. It is also confiding. A reader should leave feeling that they have been spoken to like an adult who reads. Editorial here means *editorial* in the magazine-house sense: a stable masthead, a known voice, a column ruled in chrome, generous margins, a single lead photograph rendered as embossed leather, and the unhurried rhythm of a magazine that comes out when it is finished and not before. It is not "editorial" as a Pinterest tag. It is editorial as in *editor*. ## Layout Motifs and Structure The page is built as **seven parallax leaves**, each one a full-viewport editorial spread, scrolling at *three different rates*: a chrome substrate (slowest, 0.35× scroll), a leather mid-plane (1.0× scroll, the body copy), and a foreground of fine grid-lines and chrome rules (1.55× scroll, almost zooming past). The result is an editorial broadsheet that is *physically layered* — the reader is not scrolling through a page but **sliding three transparent acetates past each other**, the way a 1960s advertising studio assembled a layout on a light table. The grid is **a 12-column chrome rule** drawn at 0.5 px in `#B8B8BC` with hairline gaps every 96 px vertically. The rules are not decoration; they are **load-bearing geometry**. Every headline aligns to a column, every leather plate fills a precise four-column module, every pull-quote breaks exactly two columns. The grid is *visible at all times* — never hidden, never faded out — because part of the editorial honesty of this site is showing the reader the bones of the layout. A magazine that hides its column rules is hiding its argument. **The seven leaves**: 1. **The Masthead.** A full-bleed sheet of brushed chrome (`#C9CCD1` with anisotropic linear gradient at 87°) holding the wordmark **algoha** set in 22 vw Libre Baskerville Bold Italic, debossed *into* the chrome with a 3 px inner-shadow at `#6E7176`. Below the wordmark, a single sentence — the page's lede — set in 1.5 vw Baskerville roman, in `#1A1A1F`, on a sliver of cordovan leather grain that occupies columns 4–9. 2. **The Lead.** Body copy enters. A 720 px column of Libre Baskerville roman, 18 px / 32 px line-height, set against a soft leather mid-plane (`#3A2A22`, full-grain, scanned). The grid-lines persist over the leather as silver hairlines. 3. **The Argument.** An asymmetric two-column spread. Left column: a 4-column chrome plate inset into the leather like a nameplate on a cabinet drawer, holding a numeral *01* in Baskerville Italic Bold at 10 vw. Right column: continuing prose, with marginalia in 14 px Baskerville Italic in the gutter, indented with a 3 mm nickel rule. 4. **The Aside.** A full-bleed leather close-up — the **imagery seed** — rendered as a 1024 × 1024 sampled cordovan grain at 88% opacity, with a single italic pull-quote crossing the diagonal in 5 vw Baskerville Italic, white (`#F2EFE8`). 5. **The Counter-Argument.** Inverse of leaf 3: chrome dominant, leather as inset. The numeral *02*. The grid here tightens to 8 columns, signaling intensification. 6. **The Reckoning.** A long chrome strip down the center — a polished mirror-band of `#E0E2E5` — onto which the cursor casts a subtle following highlight (the **cursor-follow** seed). Body text wraps around the mirror-band on both sides, two narrow leather columns hugging a steel spine. 7. **The Colophon.** A return to the masthead chrome, but inverted: dark chrome (`#2C2E33`), white debossed type. A signature, a date, a single leather seal stamped at the lower right. There is **no hero section in the conventional sense**, no nav bar, no footer-as-nav, no sidebars, no card grids, no testimonials, no stat counters. The structure *is* the prose; the prose *is* the structure. Scrolling is the page-turn. Parallax is the binding. ## Typography and Palette **Type system — single family, three weights, used like a senior editor uses a red pencil:** - **Display & wordmark — [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville)** Bold Italic 700, set at **18–22 vw** for the wordmark and chapter numerals. Tracked at `-0.022em`. Old-style figures only. Optical-size hint via `font-optical-sizing: auto`. The italic is doing the heavy lifting — Baskerville's italic is one of the great italics, and we use it the way Vogue used it in the Liberman era: on the masthead, on the numerals, on the asides. - **Body — Libre Baskerville Regular 400.** 18 px / 32 px on desktop, 17 px / 30 px on mobile. Hyphenation enabled (`hyphens: auto`). Drop caps on the lede paragraph of each leaf — 4-line drop, set in Baskerville Bold Italic, color `#6E7176` (the nickel grey). Em-dashes preferred over en-dashes. Em-dashes set with hair spaces around them, the way a New Yorker copy editor would. - **Marginalia & captions — Libre Baskerville Italic 400** at 14 px / 22 px. Used in gutters, never in the main column. This is the *editor's voice in the margin of a galley proof* — small, present, never shouting. - **Numerals — old-style only**, with the optional swash on the *2* and the *7* enabled for chapter numerals. Tabular figures forbidden anywhere on the page; this is not a dashboard. This is the **baskerville-refined** seed-realization, executed at 3% frequency in the registry — only one other site uses it. We are committing to it harder than that one site does: where it uses Baskerville as one voice among several, algoha uses it as the *only voice*, the way a chamber soloist refuses an accompanist. **Palette — chrome-metallic, executed at 3% frequency:** | Role | Hex | Notes | |---|---|---| | Polished chrome (mid) | `#C9CCD1` | Primary substrate, brushed at 87° | | Cool chrome (light) | `#E0E2E5` | The mirror-band; specular highlights | | Dark chrome (deep) | `#2C2E33` | Masthead inverse, deep type | | Nickel grey (ink) | `#6E7176` | Drop caps, inner-shadow debosses | | Cordovan leather | `#3A2A22` | The mid-plane; full-grain ground | | Oxblood leather | `#5A2618` | Highlights in leather imagery, the seal | | Vellum (paper) | `#F2EFE8` | Reverse type, the colophon ink-on-chrome | | Steel hairline | `#B8B8BC` | Grid rules, column hairlines | | Charcoal (body ink) | `#1A1A1F` | The body color of every paragraph | The palette is **deliberately cool** — there is one warm note (the cordovan/oxblood leather pair) and the entire rest of the page resists it. This pushes against the registry's 96% warm-palette saturation: algoha is one of the few sites in the system where the dominant temperature is **cool**. The leather is not there for warmth; it is there as a *foil* to the chrome, the way a tan saddle on a chrome bicycle reads as luxury rather than nostalgia. ## Imagery and Motifs **No photographs.** The registry shows photography at 88%. algoha opts out. Instead: - **Leather as imagery.** The site's primary visual material is **scanned full-grain leather** rendered as a CSS-tiled background, supplemented by a single high-resolution 1024 × 1024 PNG used in leaf 4 (The Aside). The leather is generated procedurally with a layered SVG — a base hue of `#3A2A22`, overlaid with three turbulence filters at different scales (`baseFrequency="0.9"`, `0.04"`, `0.012"`), composited with a pebble-grain bump map and a soft directional light from the upper-left at 25°. The result reads as *cordovan*, not *suede*, not *patent* — a saddle-leather that has been used and oiled but not abused. This is the **leather-texture** seed-realization at <3% frequency in the registry; no other current design uses leather as its dominant visual material. - **Chrome as imagery.** The chrome substrates are CSS gradients, not images. Each chrome plate is a stack of three linear-gradients at 87°, 89°, and 92° composited with a 1 px noise texture (CSS `feTurbulence` at `baseFrequency="0.85"`) at 4% opacity. The gradients use stops at: `#E0E2E5` 0%, `#C9CCD1` 22%, `#A7A9AE` 48%, `#C9CCD1` 71%, `#DEE0E3` 100% — the asymmetric stop placement is what makes a gradient read as *brushed metal* rather than *silver crayon*. We pay attention to this. - **Grid-lines as motif.** A persistent 12-column chrome ruling is the only repeating decorative element. It appears on every leaf, never animates, never fades. It is the editorial spine of the site. The grid-lines motif is at 3% in the registry; we make it the **literal backbone**. - **The Seal.** A single proprietary mark — a 64 px circular debossed leather stamp in oxblood, sitting in the lower-right corner of leaf 7. The seal contains the wordmark **a** in Baskerville Italic, surrounded by a single hairline ring and the date in old-style numerals. It is the only "logo" the site has and it appears exactly once. - **No icons. No emojis. No social proof. No avatars.** A site that writes in full sentences does not need pictograms. ## Prompts for Implementation Build this as **a single seven-leaf editorial broadsheet** — a printed magazine that the reader unfolds by scrolling. Bias every implementation decision toward magazine typography, plate composition, and the slow turning of varnished cover stock. Do not implement modals, tooltips, dropdowns, mega-menus, search bars, sticky headers, CTAs, pricing tables, stat-grids, feature cards, social-proof rails, testimonial sliders, hero CTAs, "above the fold" calls to action, newsletter modals, cookie banners that look like CTAs, sign-up flows, or anything that reads as transactional. The page is a *broadsheet*, not a funnel. **Implementation Vow 1 — Three planes of parallax, never two, never four.** The CSS architecture is three `position: fixed` layers and one `position: relative` content layer. The three fixed layers are: ``` .layer-chrome { transform: translateY(calc(var(--scroll) * -0.35)); z-index: 0; } .layer-leather { transform: translateY(calc(var(--scroll) * -1.0)); z-index: 1; } .layer-grid { transform: translateY(calc(var(--scroll) * -1.55)); z-index: 3; } ``` The body copy lives at `z-index: 2`, between leather and grid, scrolling at the natural 1.0× rate. This produces the **parallax-sections** seed — three rates, three depths, the chrome behind, the leather under the prose, the grid in front. The `--scroll` variable updates on `scroll` via `requestAnimationFrame`, capped at 60fps, with a small spring smoothing (`lerp(current, target, 0.12)`) so motion never feels mechanical. This is the exact opposite of the registry's 85% generic-parallax: most sites parallax *images*; algoha parallaxes *layers of meaning*. **Implementation Vow 2 — The cursor is a polishing cloth.** The **cursor-follow** seed is realized as follows: a 280 px circular radial gradient (`#FFFFFF` 0% / 0.10 alpha → transparent 100%) is painted onto the chrome substrate at the cursor's `clientX, clientY`, masked to the `.layer-chrome` element only. As the cursor moves over chrome, a subtle highlight blooms — as if the reader were buffing the metal with a wool cloth. The highlight has a 240 ms trailing delay (a CSS transition on `--cursor-x`, `--cursor-y`) so it lags the cursor like a real reflection on a curved surface. Over leather, the cursor instead casts a faint warm bloom (`#5A2618` 0% / 0.08 alpha) — same mechanism, different palette. Over the grid, the cursor produces *no effect at all* — the grid is hard, structural, and refuses to react. This three-state cursor (chrome reflects, leather warms, grid resists) is unique to algoha and is the page's single richest interaction. **Implementation Vow 3 — Type animates only with optical-size, never with translate.** When a heading enters the viewport, its `font-optical-sizing` axis subtly increases from auto (display) to maximal display weight over 480 ms via `IntersectionObserver`. No fade-in. No slide-up. No `opacity: 0 → 1`. Headings *thicken into clarity* the way ink soaks into laid paper. Body paragraphs do not animate at all — they are simply set, and they sit there, the way a magazine column sits there. The page's only stagger is on the chapter numerals (*01*, *02* …), which crossfade their drop-shadows on enter. **Implementation Vow 4 — Conversational tone in the source.** Every body paragraph is written in the second person. "You are reading this. You will notice…" The voice is the editor's voice in a galley proof. Do not write headlines like "Our Mission" or "What We Do." Write like a human writing to another human. Section headings are full sentences ending in periods, not noun-phrase labels. The page has only one navigation: scrolling. **Implementation Vow 5 — Print-press details, not screen-press details.** - Drop caps on the lede paragraph of each leaf, 4-line drop, Baskerville Bold Italic, in nickel grey. - Em-dashes flanked by hair spaces (` — `). - Smart quotes everywhere; never straight. - Old-style figures everywhere. - Optical hanging punctuation on the right edge of every column. - Widow/orphan control via `text-wrap: pretty;`. - Hyphenation: `hyphens: auto; hyphenate-limit-chars: 7 4 3;`. - Ligatures on: `font-feature-settings: "liga", "dlig", "kern", "onum";`. **Implementation Vow 6 — The grid is a CSS background, not a separate element tree.** The 12-column chrome rule is rendered as a single `background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 0.5px), #B8B8BC calc(8.333% - 0.5px), #B8B8BC 8.333%);` applied to the foreground `.layer-grid` at 14% alpha. Vertical 96 px hairlines are a second `repeating-linear-gradient(0deg, ...)`. This is one element, one fixed layer, one paint pass, and it is the editorial spine of every leaf. **Implementation Vow 7 — The page must be readable with images off.** Because the imagery is CSS gradients and SVG procedural leather, not photography, the page degrades to a perfectly legible Baskerville-on-vellum essay even with all images blocked. This is not an accessibility note (per instructions, ignore accessibility) — it is an *editorial* note. A magazine essay should survive being photocopied. So should this page. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **editorial**, layout = **parallax-sections**, typography = **baskerville-refined**, palette = **chrome-metallic**, patterns = **cursor-follow**, imagery = **leather-texture**, motifs = **grid-lines**, tone = **conversational**. **Frequency-analysis context** (from `tools/design/frequency.sh`, 27 designs): - editorial aesthetic: 51% — common, but executed here against the *grain* of the dominant editorial reading (which is paper-and-watercolor); algoha goes chrome-and-leather. - parallax-sections layout: **7%** — only one other design uses this specific layout token. We commit to it harder, with three explicit planes. - baskerville-refined typography: **3%** — exactly one prior use. We are the second design ever in the registry to use this seed, and the first to use it as a *single-family* monoculture. - chrome-metallic palette: **3%** — exactly one prior use. We push it cooler. - leather-texture imagery: **<3%** — appears in no current design as a primary material. - grid-lines motif: **3%** — exactly one prior use. Made structural here. - cursor-follow patterns: 14% — common, but the three-state cursor (chrome reflects / leather warms / grid resists) is unique. - conversational tone: 14% — common, but combined with editorial-broadsheet structure it reads as a galley-proof, not a chatbot. **Differentiators from every other design in the registry:** 1. **Cool-temperature dominance against a 96% warm-palette field.** The registry is, by frequency, almost entirely warm. algoha's cool-chrome dominance with a single warm cordovan accent is structurally counter-programmed against the housing trend. Most "metallic" designs in the wild reach for gold; algoha reaches for nickel and oxblood, the colorway of a 1960s desk-set, not a 2010s SaaS landing. 2. **Three explicit parallax planes labeled by material, not by depth.** The conventional parallax pattern (85% of the registry) parallaxes images at varying speeds. algoha parallaxes **materials** — chrome, leather, grid — each with a semantic role (substrate, mid-plane, structural foreground). The reader is sliding three transparent acetates past each other, not watching a hero image lag. 3. **Single-family Baskerville monoculture.** The one other registry design that uses baskerville-refined pairs it with secondary families. algoha refuses pairing. One family, three weights, italic used as a lowered voice. This is the discipline of auction-catalog typography applied to a magazine essay. 4. **A three-state cursor that responds to material, not to element.** The cursor reflects on chrome, warms on leather, resists on grid. The interaction is not "hover-this-card" — it is the cursor *behaving like a finger on a physical surface*. This material-aware cursor is, to my knowledge, not present in any other design in the registry. 5. **No photography, no icons, no avatars, no microcopy.** The registry uses photography in 88% of designs and at least some iconography in nearly all. algoha is photograph-free, icon-free, avatar-free, microcopy-free. The page contains exactly one decorative non-text mark: the leather seal in leaf 7. 6. **Headings animate by optical-size, never by transform.** The 55% of registry sites that use scroll-triggered animation do so via fade/slide. algoha never translates, never fades. Headings *thicken into clarity* via the variable optical-size axis. Body paragraphs do not animate at all. The page is, animation-wise, almost still — but it is not static, because the cursor is always polishing the chrome. 7. **The grid is structural and visible, not decorative or hidden.** Most sites with a 12-column grid hide it; algoha *shows* it as a chrome rule on every leaf. This is editorial honesty at the CSS level — the page does not pretend its bones are invisible. **Avoided patterns (from frequency analysis):** - Avoided: hand-drawn aesthetic (77% — overused) - Avoided: photography imagery (88% — overused) - Avoided: full-bleed *and* centered layouts as primary (88%/88% — overused; algoha uses parallax-sections instead) - Avoided: warm palette (96% — overused; algoha is cool) - Avoided: gradient palette as primary (92% — overused as marketing-gradient; algoha uses gradient only to construct chrome substrate) - Avoided: mono typography (92% — overused; algoha is single-family Baskerville) - Avoided: vintage motifs (81% — overused; algoha is mid-century industrial, not Edwardian) - Avoided: standard parallax (85% — overused as image-lag; algoha uses parallax-sections with three semantic planes) The page that results is, deliberately, **the magazine the registry does not yet contain**: a chromed editorial broadsheet that speaks to its reader in Baskerville italic across a leather mid-plane, with the grid showing.