# Design Language for concengine.com

## Aesthetics and Tone

concengine.com is a **playful concrete-poetry engine** — a site that imagines what would happen if a Roman quarry foreman, a 1962 concrete-poetry chapbook, and a children's pop-up science book were forced to share a single workshop bench under a low desert sun. The "engine" is not mechanical. It is **a kiln of sentences**, a slow-turning lapidary drum where words are tumbled against marble offcuts until both come out softer at the corners. The site treats *concrete* as a **double pun the entire layout takes seriously**: concrete the material (limestone aggregate, Portland cement, Carrara dust) **and** concrete the poetic discipline (Eugen Gomringer's *konstellationen*, Ian Hamilton Finlay's stone-carved verse at Little Sparta, Augusto de Campos's vertical typographic gardens).

The dominant feeling is **grounded-earthy whimsy** — a tone almost absent from the corpus (1%). Not the rural-cottagecore version of earthy, not the brown-bag-and-burlap version, but the version where you press your palm flat to a sun-warmed limestone bench at 4 p.m. in late September and feel the day's heat coming back up through your wrist. The site is **warm in the bones**, but it makes jokes. It is **playful** the way a stonemason's apprentice is playful — chalk-drawing rude faces on the back of a column drum while the master isn't looking. The whimsy has weight. It is **never cute**, never twee, never "fun-shaped": every flourish is anchored to something with mass.

The inspiration stack is deliberately specific:

- **Ian Hamilton Finlay's Little Sparta (1966–2006)** — single-word verses carved into garden stones, where the *placement of the stone in the landscape* is half the poem.
- **Eugen Gomringer's "silencio" (1953)** — the original concrete-poetry constellation, where a single missing word in the center of a grid is the loudest thing on the page.
- **The Brion Family Tomb by Carlo Scarpa (1968–78)** — concrete that has been *taught manners* by a Venetian goldsmith; raw aggregate inlaid with brass keylines and travertine plugs.
- **A 1971 Pelican paperback of Apollinaire's *Calligrammes*** — sun-browned at the page edges, with marginalia in a soft pencil.
- **The neon "OPEN" sign in the window of a roadside Italian-American bakery** at golden hour, glowing ember-orange against a backdrop of wet limestone and a sunset moving from peach to plum.

That last item is doing real work in the design. The site is **lit principally by neon glow** — but the neon is **always behind something solid**. Letters carved into stone slabs are backlit so a corona of sodium-orange spills around their edges. Cracks in concrete tiles emit a soft cherry-pink line of light. A marble Doric capital sits on the page with a pale tangerine halo behind it, as if it has been propped up against a motel sign. The neon is not decorative chrome; it is **the warmth coming through the masonry**.

## Layout Motifs and Structure

The structural metaphor is a **slate of Roman *forma urbis* fragments**, each one carrying a single concrete poem, **arranged as a minimal-navigation single-page kiln** that you scroll through as if walking the length of a stonemason's yard at sunset. Minimal-navigation is rare in the corpus (3%) and the site commits to it without compromise: **no top navigation bar, no sticky chrome, no hamburger, no footer with link columns, no breadcrumb, no menu of any kind anywhere.** The only navigational affordance is a single thin **brass-keyline progress rule** that runs vertically down the right margin like the gilt edge of a 1962 chapbook, marking position in the kiln from `0:00 silencio` to `7:23 conclusio`.

The page is built as **seven engraved tablets** separated by full-bleed bands of **warm desert dusk**. Each tablet is a discrete concrete poem that occupies one full viewport height and is composed using **path-draw-svg as its primary structural device**, not as decoration. The poem's letters are not set in the document as type — they are **drawn as SVG paths over 1.4–2.8 seconds when the tablet enters the viewport**, as if a chisel were cutting them in front of you. When the cut completes, the path is filled in with stone-color, and a neon glow blooms behind the cut line for 600ms before settling to a steady ember.

**The seven tablets, in order:**

1. **`silencio` (the empty constellation).** A 5×3 grid of the word `concrete`, with the center cell missing — the white-space cell holds a slow-pulsing sodium-orange neon glow visible through a hairline crack in the slab.
2. **`engine` (the kinetic gear).** The word `engine` set in eight progressively rotated copies, fanning around a central pivot like a turning millstone, each copy drawn in path-draw 100ms after the previous.
3. **`conc—` (the broken-stone calligramme).** A 760-pixel block paragraph about the etymology of *concrete* (Latin *concretus*, "grown together"), where the paragraph is **shaped like a halved column drum** — the right margin of every line traces the curve of a Doric column profile.
4. **`stack` (the cairn).** Eight single-word lines stacked tightly with negative leading, each line shorter than the one below, forming a **literal cairn of words** — `voice / over / the / quiet / hum / of / a / kiln`.
5. **`drum` (the lapidary tumble).** A horizontal scroll-locked band where eight words tumble inside a circular SVG mask, colliding with one another like pebbles in a rock tumbler, settling after 6 seconds into a single line that reads `language is a soft mineral`.
6. **`open` (the bakery window).** A wide horizontal slab carrying a single neon-script word `open` glowing ember-orange against a wet-limestone field, with a marble Doric capital propped on the lower-left corner.
7. **`conclusio` (the unsigned colophon).** A 12pt italic Cormorant paragraph in pencil-gray, set centered in a 540-pixel measure, signing off the kiln with a date carved into a small slate plaque at the foot of the page.

**Columnar logic.** A primary column of 720 pixels (target 64 characters per line) is centered in a 1320-pixel canvas with a **right marginalia channel** of 240 pixels reserved for **footnote-glosses set in 13/18 italic Cormorant Garamond**. The marginalia behave like the side annotations in a humanist textbook: short, parenthetical, dated. On tablet, the marginalia migrate to **inline pull-quote callouts**; on mobile, they collapse to a tappable `[gloss]` token that expands a one-sentence footnote inline.

**Vertical rhythm.** A single 28-pixel baseline grid governs the whole page. Every tablet break is exactly 8 baselines of dusk-band between, never more, never less. The rhythm is *boring on purpose*, so the contents of each tablet can be wildly different in shape without the page feeling restless.

**No CTA buttons. No pricing. No stat-grid. No "trusted by" logo wall. No three-column features. No testimonials.** The site is the kiln; the kiln is the site.

## Typography and Palette

The typographic system is **humanist** — the warmest, most human-shaped category in the corpus — and it is built around **two voices doing all the work** with a single mono accent.

- **Display & carved-stone headings — [Fraunces](https://fonts.google.com/specimen/Fraunces)** variable, axes `wght 100–900` and `opsz 9–144` and `SOFT 0–100`. Fraunces is a humanist serif explicitly built for high-contrast display use with optical-size grading; its `SOFT` axis lets letterforms shift from sharp-cut chisel terminals (SOFT=0, used at viewport-top tablet headings) to softened, sun-rounded terminals (SOFT=100, used at the closing colophon). All seven concrete-poem tablets render their primary word in **Fraunces 9pt-wide opsz at 200pt display, weight 700, SOFT 24** — the result reads like Trajan's column inscriptions if Trajan had also been a sign-painter for a 1962 espresso bar.
- **Body, gloss & marginalia — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** in Italic 400 for the right-margin glosses (13/18, tracking +20) and Roman 500 for the body block of tablet 3 (16/26, tracking 0). Cormorant's slightly elongated descenders give the marginalia a hand-set look; the italic is angled at exactly 11° which matches the angle of the chiseled Fraunces serifs, so the two voices sit comfortably in the same yard.
- **Datestamp & ordinal accent — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** Light 300, used **only** for the seven tablet ordinals (`0:00`, `1:08`, `2:14`, `3:01`, `4:35`, `5:42`, `6:50`, `7:23`) and the colophon date. Mono appears on a maximum of 18 characters across the entire site. Its job is to play the role of a small numeric stamp on the back of a stone fragment; it never enters the body.

**Numerical type rules:**

- Headline target: **200pt** (clamp 92px → 200px → 13.2vw).
- Body target: **16/26**, **64ch measure**, **measure 720px**.
- Marginalia: **13/18, italic, +20 tracking**, ragged-right.
- Mono: **11/16, light 300**, never more than 18 characters at a time.

**Palette — `sunset-warm` (a near-unique key in the corpus):**

The palette is **sunset-warm**, a key effectively unused in the registry — `warm` saturates the corpus at 98% but `sunset-warm` specifically does not appear. The palette is built as a **stone-and-neon dichotomy**: every color is either a quarried mineral or a glow that sits behind a quarried mineral.

- `--travertine` `#F1E6D0` — base page color; the warm cream of an unsealed travertine tile at golden hour.
- `--limestone-wet` `#C9B89A` — the color of a limestone bench after the sun has gone down for an hour and the dew has begun to come up; used for tablet bodies and the secondary slab fill.
- `--carrara-shadow` `#8E7E68` — body text base; the long shadow under a marble offcut.
- `--basalt-deep` `#2C211A` — heading text and chiseled cut color; used at 100% for cut paths and 88% for body display.
- `--ember-orange` `#FF7A3D` — the bakery-window neon, used **only** behind cracks, between letters, and inside the `silencio` empty cell. Never as a fill, always as a glow.
- `--sodium-tangerine` `#FFB169` — the corona of `--ember-orange`, sitting one Gaussian-blur step out at `stdDeviation=18`.
- `--rose-quarry` `#E8A29A` — the dusk-band gradient transition color; appears only in the 8-baseline gaps between tablets.
- `--plum-dusk` `#5C3A4E` — the bottom of the dusk-band gradient and the `conclusio` pencil-gray.
- `--brass-rule` `#B8923D` — the right-margin progress rule color; also used for hairline keylines around tablet edges, never thicker than 0.75px.

**Gradients (used sparingly):**

- `--dusk-band: linear-gradient(180deg, #F1E6D0 0%, #E8A29A 42%, #5C3A4E 100%)` — full-bleed band between tablets, 224px tall.
- `--ember-corona: radial-gradient(circle, #FF7A3D 0%, #FFB169 38%, transparent 70%)` — used as the neon glow behind cuts, never as a button fill.

## Imagery and Motifs

**No photography. No stock. No portraits. No screenshots. No icons.** The visual world is built from five families of inline SVG, all drawn in the document and animated in place. The site is its own illustration.

1. **Carved-stone calligrammes (the seven tablets themselves).** Each tablet's primary word is rendered as a concrete-poetry calligramme — the word cut into a marble slab as path-drawn SVG with hairline `--brass-rule` stroke (0.6px) traced over 1.6 seconds at tablet entry, then filled with `--basalt-deep` and bloomed with `--ember-corona` for 600ms. The slab itself is a soft-edged rounded rectangle filled `--limestone-wet` with a 14%-opacity grain-noise texture (procedural `feTurbulence` filter, baseFrequency 0.74) overlaid to give the impression of unpolished cut stone.

2. **Marble-classical fragments.** Marble is rare in the corpus (motif 4%) and we use it precisely. **One marble Doric capital** (drawn as inline SVG in the spirit of a Vignola engraving, ~280px wide), **one fluted column drum half-section** (used as the right-margin profile for the tablet-3 calligramme), and **one acanthus-leaf fragment** (used as the ornament between body paragraphs in tablet 3). All three are drawn as **two-tone duotone SVG line-engravings** in `--carrara-shadow` and `--travertine` only — no shading, no fills, just the engraver's parallel-line technique. They are placed asymmetrically and are not centered: the capital sits at the lower-left of tablet 6, the column drum profile is the right edge of tablet 3, the acanthus appears once at exactly 4:35 of the kiln and never again.

3. **Neon-glow halos (the ember work).** Neon-glow is used by 1% of the corpus and is the site's signature imagery. The neon is rendered as a **stack of three Gaussian blurs** (`stdDeviation=4, 12, 26`) with the strongest blur at the lowest opacity (10%) and the tightest blur at full opacity, applied to a **path that is always *behind* a stone element**. The neon never appears alone; it is always seen *through* a crack, *between* letterforms, *behind* a cut edge, or *around* a marble fragment. The cumulative effect is a page that looks like it is being lit from within by a small, friendly fire.

4. **Hairline brass keylines.** A single 0.6px–0.75px `--brass-rule` keyline edges every tablet, every marginalia callout, and the right-margin progress rule. The keylines are drawn as `stroke-dasharray` paths animated by path-draw on first viewport entry, taking 900ms to complete. Brass is the connective tissue of the page — it does the same job that gold-leaf borders do in a 14th-century manuscript, but quieter.

5. **Procedural stone-grain noise.** A single inline `<filter id="travertine-grain">` element is defined once at the top of the document and reused across all stone surfaces. It combines `feTurbulence baseFrequency=0.74 numOctaves=2` with `feColorMatrix` tuned to warm the noise toward `#C9B89A`. Composited at 14% opacity. This is the only "texture" on the page; there is no paper grain, no scan lines, no film burn, no halftone, no glitch.

**Decorative motifs (used sparingly, never in groups):**

- A single chalk-drawn rude face (a tiny grotesque mask, ~24px wide, hand-traced as SVG) hides on the bottom-left corner of tablet 4 — the apprentice stonemason's joke. Discoverable but unannounced.
- A **brass-headed nail** (drawn as a 6px filled circle with a 1px brass keyline) sits at each of the four corners of every tablet, as if the slab has been pinned to the page. The nails do not move.
- A single **slate plaque** at the colophon, 280×120px, holds the date in JetBrains Mono Light. The plaque is the only rectangular element on the page that has a 4px corner radius; everything else has 1.5px or 0px.

## Prompts for Implementation

Build concengine.com as **a single 100vh-tall vertical kiln** that the user walks through from `0:00 silencio` to `7:23 conclusio`. There is no other page. There is no other state. There are no buttons to press. The user **scrolls and the engine carves**. Below is the chapter-by-chapter implementation prompt for the HTML/CSS/JS layer — written to bias toward **storytelling, not interface**.

**Document shape.** A single `<main>` element. Inside it, seven `<section data-tablet="N">` elements with a `min-height: 100vh` and a content centerline at 720px. Between each pair of `<section>` elements, a `<div class="dusk-band">` with `height: 224px` carrying the `--dusk-band` gradient. The right margin holds a single fixed-position `<aside class="kiln-rule">` containing the brass progress rule and the seven ordinal stamps. **No `<nav>`, no `<header>`, no `<footer>`.** The `<aside>` is purely typographic — it is **not** a sticky nav.

**Tablet entry choreography (universal across all 7 tablets):**

1. **t = 0ms** — tablet enters viewport (IntersectionObserver, `threshold: 0.34`).
2. **t = 0–900ms** — brass keyline border draws around the slab (`stroke-dashoffset` from 1 to 0, ease `cubic-bezier(.22,.61,.36,1)`).
3. **t = 600–2200ms** — primary word path-draw begins. Each glyph is one SVG `<path>` cut over 110–180ms, staggered 60ms apart. Easing: `cubic-bezier(.65,.05,.36,1)` ("the chisel hesitates, then bites"). Stroke is `--brass-rule` 0.6px during the cut.
4. **t = 2200–2400ms** — fill flood. The cut path's fill animates from `transparent` to `--basalt-deep` over 200ms (easeOut).
5. **t = 2400–3000ms** — ember bloom. The neon corona behind the cut (a copy of the path, scaled 1.04, blurred 26px, color `--ember-orange`) fades in to 78% opacity, then settles to a steady 42% with a 0.6Hz breathing pulse (`opacity 0.42 ↔ 0.48`).
6. **t = 3000ms+** — marginalia gloss types in via `path-draw-svg` on its underline, 64 characters at 28ms/char.

**Tablet 1 — `silencio` (the empty constellation).** Render a 5×3 CSS grid of `concrete` set in Fraunces 200pt SOFT 24, weight 700. The center cell `[3,2]` is empty. Behind that empty cell, place an absolutely-positioned `--ember-corona` radial gradient at 320×320px, breathing at 0.4Hz. Across the slab, draw a single hairline `--brass-rule` crack from upper-left to lower-right, passing through the empty cell. The crack draws over 2.4 seconds.

**Tablet 2 — `engine` (the kinetic gear).** Eight copies of `engine` arranged on a circle of radius 280px around the tablet center. Each copy is rotated `i × 45°`. Each copy path-draws in turn, 100ms apart, starting from the noon position and proceeding clockwise. After all eight have drawn, the entire group rotates 8° over 6 seconds (then back), forever — a slow millstone. **Never let the rotation exceed 8°.** This is a kiln, not a carousel.

**Tablet 3 — `conc—` (the broken-stone calligramme).** A 720-pixel block paragraph of body Cormorant 16/26. The right margin is **shaped to follow the profile of a halved Doric column drum** — define an SVG `<clipPath>` that traces the column profile (entasis included; a ~3% bulge at one-third height) and apply it to the right edge of the paragraph. The text **wraps to the column profile**, so each line is a different length. A faint `--carrara-shadow` outline follows the column edge as a hairline.

**Tablet 4 — `stack` (the cairn).** Eight single-word lines, each shorter than the one below, in Fraunces 600 at sizes `108, 96, 84, 72, 60, 48, 38, 30 px`. Negative leading: `line-height: 0.78`. Each line is offset horizontally by `i × 6px` to the right, creating a **literal stone-cairn lean**. Each line path-draws in turn, top-to-bottom, 140ms apart. Below the cairn, in the bottom-right corner, the chalk-drawn rude face appears (the apprentice's joke), drawn over 800ms in white chalk-stroke at 60% opacity.

**Tablet 5 — `drum` (the lapidary tumble).** A circular SVG mask, diameter 580px, centered. Inside it, eight Fraunces words tumble: `language`, `is`, `a`, `soft`, `mineral`, and three repeats of `·`. Use a tiny 2D physics integration (Verlet or position-Verlet, 60fps) where each word is a rigid body bouncing off the circle wall. Damping: 0.92. After **6 seconds** of tumbling, energy drains to zero and the words **settle along the horizontal diameter** in the order `language is a soft mineral`. When they settle, the circular mask itself path-draws a 0.6px brass keyline around its circumference (final lapidary polish).

**Tablet 6 — `open` (the bakery window).** A wide single word `open` set in Fraunces 240pt italic, drawn as a **neon-script path with a 4px stroke** in `--ember-orange`, with a 26px Gaussian-blur halo. Behind it, a wet-limestone field (`--limestone-wet` with 18% grain-noise overlay). Lower-left, the Doric capital SVG sits at 280px wide. The neon `open` flickers exactly twice on first entry — `on (180ms) → off (90ms) → on` — then stays on with a 0.6Hz breathing pulse. The flicker is the only "glitch" allowed on the page.

**Tablet 7 — `conclusio` (the colophon).** Centered 540-pixel measure of Cormorant Italic 400 at 13/22, in `--plum-dusk`. Sign-off paragraph (8–10 lines) explaining that the kiln has finished its turn for today. At the foot, a 280×120px slate plaque carries the JetBrains Mono Light date stamp (the build's actual date, written in `MM·DD·YYYY` form). No links. No "subscribe." No social icons. The page ends.

**Cursor and pointer behavior.** No cursor-follow effect. No magnetic links. There are no links. The cursor is the user's own; the page doesn't grab at it. **Hover state on the entire page: nothing changes.** The site is a kiln, not a carnival.

**Reduced motion.** `@media (prefers-reduced-motion: reduce)` collapses every path-draw to an instant fill, every breathing pulse to a static glow, every tumble to the settled state. The page still reads end-to-end, just without the choreography.

**Dark mode.** None. The kiln is lit by sunset; there is no other lighting condition. A `prefers-color-scheme: dark` request is acknowledged with a 4% darkening of `--travertine` (to `#E9DEC5`) and nothing else — the dusk doesn't go to night, it stays at dusk.

**No JS frameworks.** Vanilla. One single `kiln.js` file, ~280 lines, owning IntersectionObserver hooks, the small Verlet integrator for tablet 5, and the seven `data-tablet` choreography sequences. CSS uses custom properties for every color and `clamp()` for every typographic size. SVG is inline in the document, never referenced externally.

## Uniqueness Notes

Differentiators from the existing 62-design corpus, anchored to the frequency analysis.

1. **Concrete-poetry-as-engine is genuinely unbuilt in the registry.** The corpus has hand-drawn (82%), editorial (53%), and minimalist (20%) aesthetics in abundance, but **no design treats concrete poetry as the structural conceit of the page**. Sites that feature poetry tend to set it as decoration; concengine.com makes **the poem the layout itself** — the column-profile clip-path of tablet 3, the cairn-lean of tablet 4, the lapidary-tumble of tablet 5 are not "elements on a page about concrete poetry," they are concrete poems. The pun on *concrete* (engine + verse) is load-bearing structure, not garnish.

2. **`grounded-earthy` tone (1% of corpus) committed to without retreating into cottagecore or watercolor.** The frequency report shows `grounded-earthy` is essentially absent (1%). The few earthy designs in the corpus drift toward pastoral-romantic (8%), watercolor (16%), or cottagecore (8%). concengine.com refuses those exits. The earthiness here is **quarry-floor earthiness** — limestone, basalt, brass nail-heads, the smell of a stonemason's yard at 4 p.m. — paired with concrete-poetry intellectualism. The result is a tone the corpus has not yet attempted: **a stonemason who reads Apollinaire**.

3. **`neon-glow` imagery (1% of corpus) and `marble-classical` motifs (4%) used together, in a single page, with neither dominating.** Each is rare on its own; their *combination* does not appear in the corpus. The site uses them in a strict subordinate relation: **the neon is always behind the marble, never in front.** Marble lit by ember neon is the site's signature image, and to my knowledge it is unbuilt elsewhere in the registry. The bakery-window-meets-Doric-capital tableau in tablet 6 is the visual thesis statement.

4. **`minimal-navigation` (3% of corpus) taken to its logical conclusion — zero navigation.** Many "minimal-navigation" designs in the corpus still ship a top bar, a logo + 2 links, or a hamburger. concengine.com ships **no navigational chrome at all**. The single brass-rule progress indicator down the right margin is purely typographic — it is not interactive, it does not link, it is not a sticky nav. The implementation prompt explicitly forbids `<nav>`, `<header>`, and `<footer>` elements. This is a stricter reading of "minimal-navigation" than any design currently in the corpus.

5. **`sunset-warm` palette as a near-unique registry key.** The palette `warm` is at 98% (effectively all designs are warm). The specific key `sunset-warm` does not appear in the frequency report. The site is the first to commit to *sunset-warm specifically*, with a published two-axis scheme (stone vs. neon) that lets warmth do real semantic work — stone for fact, neon for warmth-coming-through-fact. The dusk-band gradient between tablets is the connective tissue.

6. **`humanist` typography (38%) executed as a single variable family + one accent, instead of the typical 4–5 voice stack.** Humanist is moderately frequent in the corpus, but most humanist designs run a 4–5 voice typographic stack. concengine.com runs only **two voices** (Fraunces + Cormorant) plus an 18-character mono accent (JetBrains Mono). The `SOFT` axis on Fraunces does the work that other designs solve by adding a third or fourth typeface. This is a tighter humanist execution than the corpus average.

7. **`path-draw-svg` (35%) used as primary structural content, not as decorative flourish.** A third of the corpus uses path-draw-svg, but almost always for underlines, ornaments, or icon strokes. concengine.com uses path-draw to **render the seven primary words of the seven tablets** — i.e., the page's main typographic content is *cut on viewport entry*, not pre-rendered. This makes path-draw the primary content delivery system, not a garnish. The implementation prompt is explicit on this and the choreography centers it.

**Chosen seed (planned):** aesthetic: `playful`, layout: `minimal-navigation`, typography: `humanist`, palette: `sunset-warm`, patterns: `path-draw-svg`, imagery: `neon-glow`, motifs: `marble-classical`, tone: `grounded-earthy`.

**Patterns deliberately avoided based on frequency analysis:** `parallax` (93%, omnipresent — replaced with the strict 8-baseline tablet rhythm), `stagger` (70%) is used only inside a single tablet's path-draw sequence, never across the page; `scroll-triggered` (54%) is reduced to a single IntersectionObserver hook per tablet; `centered` layout (93%) is broken by the asymmetric marginalia channel; `photography` imagery (95%) is fully refused in favor of inline SVG. The site does not use bento-box, dashboard, sidebar nav, parallax-sections, or any horizontal scroll except tablet 5's circular tumble (which is not a scroll, it is a physics simulation contained in a 580px disc).
<!-- DESIGN STAMP
  timestamp: 2026-05-06T10:53:35
  domain: concengine.com
  seed: seed
  aesthetic: concengine.com is a **playful concrete-poetry engine** — a site that imagines wh...
  content_hash: 4fbd9e2006f7
-->