# Design Language for algoha.com
## Aesthetics and Tone
algoha.com is a **light-academia chalkboard riot** — the brand is built on the etymology of its own name: *algorithm* + *aha*. The site stages a contradiction: the prim, ivory, library-light surface of light-academia (long oak refectory tables, daylight through clerestory windows, tea rings on the margin of a marked-up exam paper) is being **broken open from inside** by the edgy-rebellious tone of a student who has just realised the proof is wrong and is now cross-hatching the entire blackboard with chalk that she snapped in half on purpose.
Imagine the **Reading Room of a Cambridge college at 11:14 a.m. on a Wednesday in late October**, vellum-pale daylight, a thirty-foot oak table, a crystal water glass beading on a Latin lectionary — and then imagine the youngest fellow at the table standing up, kicking her chair backward, and writing "no — Q.E.D. is a *lie*" on the wall in bone-blue chalk twelve feet wide. The room does not move. The chalk dust hangs. Everyone keeps reading. The stain stays on the wall for the next four hundred years. *That* is the temperature of algoha.com.
The mood is not anger — it is the cold blue elation of **a single insight that breaks the consensus**, kept in monastic quiet. We refuse the warmth of cottagecore and the burgundy gravity of dark-academia. algoha is a **midnight-blue** academia: ink on cold paper, oxford rooms after a frost, the navy hour just before the fellows light the gas lamps. Edgy-rebellious is *posture*, not loudness — the cheekbone, the slight lift of the chin, the chalk snapped in half. There is precisely one moment of breakage per page; the rest is library decorum. The visitor must feel **invited into the breaking**, not shouted at.
Tagline frame for the entire visual system: *"every algorithm is an `aha` that has not yet been refuted."*
## Layout Motifs and Structure
The whole site is a **broken-grid** — and the breakage is *load-bearing semantics*, not decoration. We start from a strict 12-column 1440-wide academic broadsheet grid with 24px gutters and a 96px baseline rhythm — the most rigid grid possible, modeled on Le Monde's Sunday edition crossed with the Oxford University Press 1958 manuscript style guide. Every section *begins* by honoring this grid for at least 60% of its height. Then, at exactly one moment per section, **the grid fractures** — a column shifts 17px to the left, an image bleeds three columns past its assigned cell, a pull-quote rotates -2.4°, a footer rule slides under the body text instead of beneath it. The fracture is always **anchored to the moment of insight** in the copy; the eye learns within the first two sections that "broken grid = aha."
**Six panels in a strict descent**, each one panel = one insight = one fracture:
1. **The Refectory (0–100vh).** The wordmark "algoha" sits at column 3–8, baseline-aligned. A sentence-length blockquote sits at column 7–12, justified. At 92% of the height, column 7 *snaps left by 38px and rotates -1.7°*, bringing the quote into collision with the wordmark. This is the first fracture and the first lesson: algoha's grids are made to be broken.
2. **The Margin (100–200vh).** A scanned page of a 19th-century mathematics treatise sits full-bleed; the body of algoha's manifesto runs as a *marginal annotation* in the right 3 columns, hand-set as if a fellow had written in the margin. The fracture: a single algorithm step (`while H(x) ≠ aha: x ← refute(x)`) is set in chalk-blue grotesque, scaled 4× larger than the marginalia, and is allowed to *cross* the central gutter into the treatise page. The treatise page does not reflow; the algorithm just sits on top of it like a stamp. This is the **morph** anchor (see Patterns).
3. **The Wall of Refutations (200–300vh).** A grid of nine **glassmorphic cards**, each containing a single named refutation (`Russell ⟶ Frege`, `Gödel ⟶ Hilbert`, `Turing ⟶ decidability`, etc.). The grid is 3×3, perfectly aligned, until you hover one card: that card *grows by 1.18×*, the card to its right shifts 6° clockwise, and the card below it drops 22px. Hover-decay restores the grid. The "broken" state is therefore **interactive and reversible** — you break the wall, you let it heal.
4. **The Lectern (300–400vh).** Centered, single column, 640px max-width, justified body, drop-cap "A". A long-form essay panel — the design's deliberate "calm before the second fracture." At 88% scroll-depth a hard-edged **midnight-blue triangle** of 480px appears in the right margin, half off-screen, rotating slowly (±0.4°). The triangle is the first geometric-shape motif explicitly visible. The body copy *reflows around it* using CSS shape-outside.
5. **The Chalk Wall (400–500vh).** Black-blue background. A live algorithmic poem in chalk-grotesque, set 11 lines × 88 chars wide, monospaced rhythmically. Lines fade in one at a time on scroll, 220ms apart. The fracture: line 7 is *struck through* with a chalk slash hand-drawn in SVG, replaced by the corrected line below it. The strikethrough is permanent. Wikipedia-style "previously" annotation appears in 11px Inter Tight, lower-right of the slashed line, reading *"corrected after publication 2026-05-09."*
6. **The Colophon (500–580vh).** A traditional academic colophon: *"set in Inter Tight and Cormorant Garamond, on a broken twelve-column grid, by lsware, in the year 2026."* The fracture: the period at the end is rendered as an **18px solid midnight-blue circle**, three times the size of any other punctuation on the site, and it *bleeds slightly* below the baseline.
There is no top-nav, no footer-nav, no breadcrumb, no contact form, no pricing block, no stats grid, no testimonial slider, no logo cloud, no CTA stack. The site is read top-to-bottom like a manuscript. The only navigation is the scroll wheel and a single floor-level scroll progress indicator: a **thin midnight-blue line** at the bottom of the viewport, 2px tall, that fills left-to-right, broken at six points (one per panel) by a 4px gap. The progress indicator itself respects the broken-grid principle.
## Typography and Palette
**Type stack — Google Fonts only.**
- **Inter Tight** (variable, weight 100–900, opsz 14–32). The primary **grotesque-neo** workhorse. We use Inter Tight rather than Inter or Space Grotesk because Inter Tight is the closest Google-Fonts approximation of a true contemporary neo-grotesque (Akzidenz lineage) with a slightly tighter set-width and the cleanest rendering of `a`, `g`, and `R` at display sizes. All headings, all numerals, all algorithm step lines, the wordmark, and the chalk-wall poem are set in Inter Tight. The wordmark "algoha" is set at clamp(80px, 14vw, 240px), weight 700, letter-spacing -0.052em, optical size 32, with the ascender of `l` deliberately raised 4% above the cap-height baseline (a subtle, uneasy detail). Algorithm steps are set in Inter Tight, weight 500, with `font-variation-settings: "opsz" 14`, monospaced via `font-feature-settings: "tnum", "ss01"`.
- **Cormorant Garamond** (weight 300, 400, italic). The light-academia counterweight. Used *only* in the marginalia of the Margin panel, the long-form essay in the Lectern panel, the colophon, and any block of more than three sentences. Body copy: 19px / 1.62, weight 400, optical alignment from `text-rendering: optimizeLegibility`. Cormorant's old-style figures, ball terminals on `a` and `e`, and the high contrast of its italic give the site its scholarly skin. We never mix Inter Tight and Cormorant in the same line — they alternate by panel, by purpose, like a duet.
- **JetBrains Mono** (weight 400). Used *exclusively* in two contexts: the algorithm pseudocode (e.g. `while H(x) ≠ aha: x ← refute(x)`) and the "previously" annotations on the chalk wall. JetBrains Mono is chosen over Inter Tight's tabular figures because the slab terminals on the lowercase glyphs read as *machine-set chalk*, an essential texture for the chalkboard moment.
**Palette — `midnight-blue` first, ivory parchment second, chalk dust third, one heretic accent.**
- `#0B1638` — **Refectory Midnight.** The dominant midnight-blue. The single deepest tone. Used as text color on cream backgrounds, and as background for the Chalk Wall panel. This is the site's signature.
- `#1B2A57` — **Oxford Slate.** A 14% lighter midnight-blue. Used for borders, the broken progress line, the geometric triangle in the Lectern, and the punctuation-circle in the colophon. Also the chalk color on the Chalk Wall, but only for *unrefuted* lines.
- `#3F5BA8` — **Chalk Dust Blue.** A dust-cloud blue used for hover states, glassmorphic-card edges, and the rotating annotations. It is the only "lifted" blue — it appears when something is *moving* or *being broken*.
- `#F2EDE0` — **Vellum Cream.** The ivory parchment background of every panel except the Chalk Wall. Modeled on aged book-page (Cambridge University Press 1962 stock). Never pure white. Pure white is forbidden everywhere except the inside of the glassmorphic cards.
- `#E5DCC3` — **Tea-Stain.** A subtle, warmer cream used for the marginalia background and the colophon panel, applied as 18% noise-grain overlay so it reads as paper aging from sunlight, not as a flat fill.
- `#0F0E0C` — **Manuscript Ink.** Reserved for body copy on the Vellum Cream where contrast must be absolute (legal text equivalents, the colophon, the chalk-wall poem against itself). Never used as a background.
- `#C2230D` — **Heretic Vermilion.** The single allowed non-blue color, used **once per scroll**, for exactly one purpose: marking the *struck-through* line on the Chalk Wall, and the rotating "no — Q.E.D. is a *lie*" annotation when it appears as cursor-follow caption (see Patterns). Vermilion is mixed from a 1640 Venetian printer's red — it is the color of marginal corrections in *all* serious 17th-century manuscripts. The whole edgy-rebellious tone is concentrated in this one hue, held back ferociously to make its appearances violent.
Ratios in pixel area, averaged across the page: Vellum Cream 52%, Refectory Midnight 22%, Tea-Stain 11%, Oxford Slate 8%, Chalk Dust Blue 4%, Manuscript Ink 2%, Heretic Vermilion 0.6%. The vermilion is so rare that on most scrolls it appears for less than 200ms.
## Imagery and Motifs
**Glassmorphic-cards are the structural imagery** — they are the only floating UI element on the site, and they are deployed *exclusively* in the Wall of Refutations (panel 3) and as the cursor-follow tooltip when annotating geometric-shapes in panel 4. Each glassmorphic card is built from `backdrop-filter: blur(28px) saturate(1.4)`, a 1.5px inner stroke at 40% Oxford Slate, an outer drop-shadow of `0 24px 64px rgba(11, 22, 56, 0.18)`, and a `linear-gradient(135deg, rgba(242, 237, 224, 0.62), rgba(242, 237, 224, 0.18))` fill. Because the panels behind them are textured Vellum Cream with grain noise, the blur produces a *slightly wet* read — like glass placed on damp parchment, never the cold sheet-of-acrylic look of mainstream glassmorphism.
The cards are *square*, 280×280px on desktop, and they hold exactly **one geometric refutation diagram** plus one Inter Tight 14px caption. The diagrams are the second imagery layer: **geometric-shapes**, hand-drawn in SVG with a deliberate 0.6px chalk-jitter on every stroke (achieved with ``). The shapes are: the Russell circle-not-containing-itself, the Möbius strip of Turing's machine, the Gödel numbering ladder, the diagonal proof argument, the lambda triangle, the halting Klein bottle, the entscheidung square. Each shape is rendered in Oxford Slate stroke 1.5px on transparent, 3D-rotating *imperceptibly* on a 22-second loop (±2°), so the eye thinks the shapes are hand-twitching as you read.
**Geometric-shapes elsewhere on the site:**
- The 480px midnight-blue triangle in the Lectern panel — a hard-edged, single-color, no-stroke isosceles triangle pointing left, rotating at 0.018 rad/sec. CSS shape-outside reflows the Cormorant body around it. This is the calmest shape on the site.
- The colophon's punctuation-circle — perfect 18px disc, no anti-aliasing trickery, sitting half a pixel below baseline.
- The progress indicator at floor — six 4px gaps in a 2px line are themselves a geometric figure (the broken ruler).
- A field of 7 ghost-rectangles, 1px Oxford Slate stroke at 14% opacity, scattered across panels 1, 4, and 6 at irregular angles. They are the broken grid made literally visible — placeholder cells nothing was drawn into.
**No photography. No icons. No 3D renders. No illustrations of people. No emoji.** The only raster image on the entire site is the scanned 19th-century mathematics treatise that backgrounds the Margin panel — and that scan is duotoned into Refectory Midnight (shadows) → Vellum Cream (highlights) at 78% opacity, with a 6% film grain overlay, so it reads as a memory of a page rather than a page.
**Texture and grain.** Every panel except the Chalk Wall has a 6% Perlin-noise grain overlay (12px tile, generated once and cached) baked into the cream backgrounds. The Chalk Wall has its own *separate* grain — 22% strength, 4px tile, mimicking chalk dust on a black-blue board. The two grains never cross.
**The chalk strikethrough.** The single most important raster moment on the site — the hand-drawn SVG slash on line 7 of the Chalk Wall poem. It is a four-stroke chalk gesture, drawn as four overlapping `` elements with stroke-dasharray animation, with a 1.5° upward tilt, broken in the middle (chalk lifted and re-applied), and ending in a small flourish-tick. It is *animated to draw itself* over 480ms when scrolled into view, then never re-animates.
## Prompts for Implementation
Build algoha.com as **one long HTML document**, no SPA, no router, no JS framework. The page is a single scrolled manuscript. Six `` elements stacked vertically. Total scroll length 580vh on desktop, 700vh on mobile (because the broken-grid fractures need extra room to register at narrower widths).
**Panel-by-panel implementation:**
1. **The Refectory.** On load, the page is Vellum Cream. The wordmark `algoha` materialises with a **morph** animation from a 6×6 grid of 18px Oxford Slate dots into the final Inter Tight letterforms over 1.4s — the dots interpolating along precomputed bezier paths to the corners of each glyph. (Use SVG `` with morphing or anime.js morph-path.) After the morph settles, hold the strict grid for 5s of scroll, then trigger the column-shift fracture: column 7 transforms `translate(-38px) rotate(-1.7deg)` over 320ms with `cubic-bezier(0.85, 0, 0.15, 1)`. This is the user's first lesson: the grid breaks.
2. **The Margin.** The treatise scan loads at 78% opacity, duotoned. The marginalia text fades in with **stagger** (one paragraph at a time, 180ms apart, no parallax). The algorithm step `while H(x) ≠ aha: x ← refute(x)` is the **morph** anchor: it starts as plain text, then on scroll-into-view its letterforms morph into a path-drawn SVG version of themselves — JetBrains Mono → vector-extracted SVG paths → stroke-dashoffset animated → finally re-fixed as static SVG. The morph takes 900ms and never reverses. The point is: the algorithm step *becomes a stamp on the page* during reading.
3. **The Wall of Refutations.** Nine glassmorphic cards in a 3×3 CSS Grid, gap 24px. On hover (or focus), the hovered card receives `transform: scale(1.18) translateZ(0)`, the card to its right rotates 6°, the card below shifts 22px down. Use `:has()` selector or JS to coordinate. Each card's geometric-shape diagram is an inline SVG with the chalk-jitter filter; on hover, the SVG `` increases its `feDisplacementMap scale` from 1.3 to 2.4 over 220ms — the chalk gets *more* nervous when looked at. **Cursor-follow**: as the cursor moves between cards, a 240×64px glassmorphic tooltip trails the cursor by 80ms (lerp 0.18), containing the refutation in 14px Inter Tight Heretic Vermilion. The tooltip is the only place vermilion appears in this panel.
4. **The Lectern.** Calm. Single column 640px, justified. Drop-cap "A" set in Cormorant 96px weight 300, paired with a 480px Oxford Slate triangle in the right margin (half-bleed, rotation -0.018rad/sec). Body copy uses CSS `shape-outside: polygon(...)` to flow around the triangle. At 88% scroll-depth the triangle **morphs** into a square over 1.2s, by linearly interpolating the four polygon vertices — three triangle points splitting into four square corners. The body re-flows continuously during the morph. The morph is the panel's only motion.
5. **The Chalk Wall.** Background snaps to Refectory Midnight. The 11-line poem fades in line-by-line on scroll, 220ms apart, in Inter Tight 18px Chalk Dust Blue. When line 7 enters view, the **chalk strikethrough animation** plays: a hand-drawn SVG slash draws across the line in 480ms, the line color fades from Chalk Dust Blue to 38% opacity, and the corrected line slides up from below it (translateY 32px → 0, opacity 0 → 1, 320ms). The strikethrough is the *only* place the Heretic Vermilion appears in panel 5 — the slash itself is rendered in vermilion to ensure the eye registers the wound. A `` tag below the slashed line, Inter Tight 11px, reads *"corrected after publication 2026-05-09"* in Chalk Dust Blue at 50% opacity.
6. **The Colophon.** Vellum Cream returns. Single justified paragraph, Cormorant 16px, weight 400, italic. The terminal period is replaced by a `` rendered as an 18px-diameter Oxford Slate circle, positioned `display: inline-block; vertical-align: -0.18em`. On the very last frame of scroll, the circle does **morph** into a perfect square over 600ms then back to a circle — a final, almost imperceptible signature of the broken-grid principle. After this morph, the page is silent. There is no footer. The browser is the only frame.
**Global motion contract.** Motion on algoha.com obeys three rules:
1. Every animation that is not a hover-state lasts between 220ms and 1400ms — never less, never more.
2. Every easing curve is one of two: `cubic-bezier(0.85, 0, 0.15, 1)` (the "snap") for fractures and morphs, or `cubic-bezier(0.22, 1, 0.36, 1)` (the "settle") for stagger and fade-in.
3. There is exactly one fracture per panel. The user is rewarded for scroll patience, not for clicks.
**Storytelling primacy.** The site is a six-act argument, not a product page. The visitor leaves remembering the **vermilion slash on the chalk wall**, the **algorithm step that became a stamp**, and the **column that snapped left in the Refectory** — three sensory-narrative anchors, no CTA, no signup, no pricing.
**No hero CTA. No newsletter modal. No cookie banner. No "talk to sales." No exit-intent popup. No social proof strip. No stats grid (`97% accuracy / 12k users`). No three-tier pricing block. No testimonial carousel.** If the implementer feels the urge to add any of these, the answer is no — algoha is a manuscript, not a landing page.
## Uniqueness Notes
This design's distinct departures from the 50 designs already in the registry, and from the seed's defaults:
1. **Light-academia in midnight-blue.** Light-academia's web canon is cream + sage + warm gold + sun-through-curtains. algoha is the first design in the registry to render light-academia *cold-leading* — Vellum Cream stays as the parchment surface, but the dominant tonal weight is Refectory Midnight (22% pixel area) instead of warm gold or sage. The result is library-light with the heater turned off — the temperature-inversion of the aesthetic is the headline differentiator.
2. **Edgy-rebellious as a single 0.6%-pixel-area gesture.** The frequency analysis shows edgy-rebellious is essentially absent from the catalog. Most edgy-rebellious sites blast vermilion or neon across 30%+ of the surface (graffiti, brutalism). algoha holds the rebellious tone to *0.6% of pixel area* — a single chalk slash, a single trailing tooltip, a single annotation. Rebellion is *editorial*, not *visual* — the proof is *that* the slash is there, not *how loud* it is. This is opposite to every existing edgy-rebellious site on the web.
3. **Broken-grid as semantic, not decorative.** Broken-grid appears in only 4% of registry designs and is usually used aesthetically (Bauhaus pastiche, magazine spread). algoha's broken-grid is **semantically anchored**: every fracture corresponds to a moment of insight in the copy, and the user learns this contract within the first panel. The grid is not "broken because it looks cool"; it is broken at the exact line of text where the argument turns. This narrativisation of the grid system is the design's core innovation.
4. **Grotesque-neo paired with Cormorant Garamond, never co-set.** Inter Tight (the grotesque-neo) and Cormorant Garamond (the light-academia serif) never share a line of text. They alternate by *panel*, by *purpose*, like the two sides of an argument. Grotesque-neo carries the algorithmic voice; Cormorant carries the academic voice. The site is a duet, not a chorus.
5. **Glassmorphic-cards on parchment, not on photographs.** Glassmorphism's web idiom is glass-over-photograph (lens flares, gradients, neon). algoha applies glassmorphism *over textured Vellum Cream with grain noise*, producing a "wet glass on damp paper" read that no other registry design uses. The blur saturation is bumped to 1.4 (vs. the conventional 1.0–1.2) precisely to amplify the cream paper underneath, not to dramatise a photo behind.
6. **Morph as the only pattern, applied four times exactly.** Morph appears in only 8% of the catalog. algoha uses morph as its *signature* motion — but only four times across the whole document: dots-to-letterforms (panel 1), text-to-stamp (panel 2), triangle-to-square (panel 4), and circle-to-square-to-circle (panel 6). No other animation pattern is used at all (no parallax, no spring, no cursor-follow except for the single tooltip in panel 3). The single-pattern discipline is the inverse of the registry's parallax-and-spring-everywhere norm.
7. **Geometric-shapes deployed as proofs-as-figures.** Geometric-shapes appears in only 2% of registry designs. algoha doesn't use shapes decoratively — it uses them as *iconographic refutations* (Russell's circle, Turing's Möbius, Gödel's ladder, the diagonal). The shapes are arguments, not ornament. This is the inverse of standard geometric-shapes design language, which uses them as background pattern.
8. **Heretic Vermilion held to 0.6% of pixel area.** Most palettes featuring a "pop accent" deploy it across 6–18% of the canvas. algoha's vermilion is held to 0.6% — fewer than three usages per scroll, each one an act of marginal correction. The hue is borrowed from 1640 Venetian printer's red; the discipline of *holding it back* is the differentiator.
9. **No CTA. No pricing. No testimonials. No stats grid.** Per the rule. The site is six panels of argument and a colophon. No conversion surface anywhere. This is anomalous for a `.com`.
10. **Document chosen seed/style:** *aesthetic: light-academia, layout: broken-grid, typography: grotesque-neo, palette: midnight-blue, patterns: morph, imagery: glassmorphic-cards, motifs: geometric-shapes, tone: edgy-rebellious.*
11. **Reference avoided patterns from frequency analysis:** AVOIDED hand-drawn (92% saturation), AVOIDED parallax (92% saturation), AVOIDED stagger-as-default and spring (62% each), AVOIDED cursor-follow as global motion (54%), AVOIDED gradient palette and warm palette (92% / 90%), AVOIDED full-bleed centered card-grid layout (84% / 76% / 56%), AVOIDED mono as primary type (94%), AVOIDED photography (96%). PREFERRED broken-grid (4%), grotesque-neo (4%), morph (8%), geometric-shapes (2%), glassmorphic-cards (6%), edgy-rebellious tone (rare). The design's frequency choices are the inverse of the catalog's center of mass.