# Design Language for continu.ax

## Aesthetics and Tone

continu.ax is a site that inhabits the idea of the *axis of continuity* — the invisible spine around which long-duration things rotate and persist. The domain reads as both "continue" and "continuum" collapsed into a single Latin-flavored abbreviation, and the design takes that etymology seriously: everything on the page is about what endures, what flows without breaking, what maintains its form across perturbation.

The aesthetic is **holographic-elegant** — the palette is muted vintage (dusty rose, aged parchment, antique brass, verdigris) but every surface carries a faint iridescent sheen, as if the page were printed on interference-coated stock from a 1970s printing house that had accidentally discovered thin-film optics. The holographic effect is *quiet and inhabiting*, not loud: a slight prismatic edge when the background catches the light, a headline that shifts from warm ivory to pale aquamarine as the eye travels across it, a vertical rule that grades from copper to violet over its full height.

The tone is **authoritative** — not corporate, not academic, but the tone of a long document that has been written by someone who knows exactly what they mean and sees no reason to soften it. Sentences are complete and declarative. Headings are nominal phrases, not questions. There are no exclamation marks. The site does not ask for the visitor's attention; it assumes it.

The mood is **slow and reverent** — the page unscrolls the way a scroll unscrolls: from the top, continuously, with no section break interrupting the flow. Transitions are eased at 800ms or longer. Nothing snaps; everything flows.

Visual inspiration: the interference patterns on a soap film held to a gray sky; the aging lacquer of a 1920s Bakelite radio, peeling into iridescence; a palimpsest vellum leaf where three layers of text glow through each other; the way oil on wet stone makes temporary color.

## Layout Motifs and Structure

The page is a **single unbroken vertical column**, 680px maximum width, centered on the viewport with generous lateral breathing room (minimum 12vw margin per side on desktop). There are no sidebars, no asides, no floating panels. The column is the axis — everything else is margin.

**Vertical rhythm is strict.** A base unit of 8px governs all spacing. Section spacing is always a multiple of 48px (6 base units squared). Line-height for body text is 1.75 — generous, slow, meditative.

**Five movements (sections), each a continuous scroll from the previous:**

1. **The Axis** — full-viewport opening. The wordmark `continu.ax` set at display size (clamp(4rem, 10vw, 9rem)) in Cormorant Garamond italic, bone-white, against a near-black muted aubergine ground (`#1a1018`). Below it, a single 48px-tall generative SVG line — a single continuous Bezier flowing left-to-right across the full column width, rendered in iridescent CSS gradient (copper → verdigris → dusty-rose → copper). This is the *axis line*, the site's signature motif. No other images in this section.

2. **The Premise** — a long-form typographic passage (400–500 words) about the nature of continuity. Set in Cormorant Garamond body at 20px/1.75. Drop capital on the first letter, rendered 4 lines tall in the display weight. A thin left border in `#8B7355` (antique brass) runs the full height of the section, offset 48px left of the text column. This border is the parallax element: it scrolls at 0.7× the page scroll rate.

3. **The Form** — the axis line motif reappears, now animated. A full-width generative SVG canvas (height: 40vh) renders a family of 12 flowing Bezier curves, each one a slightly offset echo of the original axis line, rendered in semitransparent iridescent strokes. The curves drift slowly (each curve drifts on a 24-second sine cycle, independent phase offset) — the animation is pure CSS, no JavaScript. Below the canvas: a centered subheading and 2–3 short declarative paragraphs.

4. **The Continuance** — an alternating text-and-margin layout. The text column remains 680px, but on alternating paragraphs, a pull-quote (max 3 lines) floats into the left margin at 240px, set in Cormorant Garamond italic 16px, in `#C4A882` (warm parchment), bracketed top and bottom with 1px rules in `#8B7355`. The pull-quote does not reflow with the body text — it sits in a CSS grid cell that overlaps the main column's left margin. On mobile (< 768px) pull-quotes collapse into the normal flow above the paragraph they annotate.

5. **The Close** — the final section returns to near-full-viewport height. The wordmark repeats at smaller scale (2.4rem), right-aligned in the column. A final axis line SVG, this time dissolving from solid to transparent over its right 40%. Below: a single line of contact or attribution in Cormorant Garamond small-caps 13px, tracked at +0.08em, in `#7A6B57`.

**Parallax behavior:** The antique-brass vertical rule in section 2 scrolls at 0.7×. The generative curve canvas in section 3 scrolls at 0.85×. The background color of the outermost container shifts imperceptibly from `#1a1018` at the top to `#1c1510` at the bottom (a 2% warmth increase over the full page height), managed by a scroll-position CSS custom property.

## Typography and Palette

**Typography — two-family system, both on Google Fonts:**

- **Primary display and body: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** — italic weight 400 for body text, regular weight 300 for long-form passages, semibold 600 for headings and pull-quote attribution, bold italic 700 for the wordmark. Cormorant is a high-contrast old-style serif descended from Garamond's punches, available in six weights and a dedicated italic cut with true calligraphic stress. Its extreme thin-to-thick contrast makes it holographic in its own right: the thin strokes almost disappear, and the thick strokes hold the page like architecture.

- **Secondary: [Cinzel](https://fonts.google.com/specimen/Cinzel)** — weight 400 only, used exclusively for small-caps labels, section numerals (set as Roman numerals: I, II, III, IV, V), and the axis-line caption beneath the generative SVG. Cinzel is cut in the tradition of Roman inscriptional lettering — it reads as ancient, incised, permanent, which serves the "continuity" concept exactly.

**Scale (major third, ratio 1.250):**
- `--step-0`: 18px (body base)
- `--step-1`: 22.5px (sub-body, pull-quote)
- `--step-2`: 28px (section subtitle)
- `--step-3`: 35px (section heading)
- `--step-4`: 44px (article title)
- `--step-5`: clamp(4rem, 10vw, 9rem) (wordmark display)

**Palette — muted vintage with iridescent interference layer:**

| Token | Hex | Role |
|---|---|---|
| `--deep-aubergine` | `#1a1018` | Page ground (near-black with violet undertone) |
| `--midnight-plum` | `#2b1e2a` | Section alternate ground, card surfaces |
| `--aged-parchment` | `#e8dfc9` | Body text, primary readable content |
| `--antique-brass` | `#8B7355` | Borders, rules, decorative lines |
| `--warm-verdigris` | `#7a9e8a` | Iridescent accent 1 (cool side of spectrum) |
| `--dusty-rose` | `#c4829a` | Iridescent accent 2 (warm side of spectrum) |
| `--pale-copper` | `#C4A882` | Pull-quotes, subdued highlights |
| `--bone-white` | `#f2ede3` | Wordmark, maximum contrast text on dark ground |

**Iridescent layer implementation:**
Every gradient that simulates the holographic sheen uses a three-stop CSS `linear-gradient` cycling `--pale-copper → --warm-verdigris → --dusty-rose → --pale-copper`. The gradient is applied at low opacity (0.15–0.25) as a `::before` pseudo-element overlay on the axis-line SVGs and on headings via `background-clip: text`. The axis-line SVG strokes themselves use a `linearGradient` SVG element with the same three color stops.

## Imagery and Motifs

**Primary motif: the flowing axis line.** Every section uses a variant of the single continuous Bezier curve introduced in the opening. Across the five sections, the axis line evolves:
- Section 1: single curve, full-opacity, copper-to-verdigris gradient
- Section 3: multiplied into 12 offset echoes, semitransparent, animated drift
- Section 5: single curve, fading to transparent on the right

The curves are generated as SVG path elements using cubic Bezier control points. The specific curvature formula: start tangent always horizontal (control point 1 at 25% width, same height as start), end tangent always horizontal (control point 2 at 75% width, same height as end), midpoint lifted or depressed by ±12% of SVG height. This ensures the curve always reads as a single confident horizontal arc — not a jagged wave, not a tight S, but the gentle bow of a longbow at rest.

**Generative art canvas (section 3):** Twelve Bezier curves, each with:
- Start and end points fixed to the left and right edges of the SVG
- Midpoint Y-position = base-Y + amplitude × sin(phase + time × frequency)
- Amplitude: 8–18% of SVG height (varies by curve index)
- Frequency: 0.03–0.07 cycles/second (very slow, meditative)
- Opacity: 0.08–0.22 (lightest curves float in the background; darkest curve is the axis)
- Color: interpolated position in the copper → verdigris → dusty-rose spectrum by curve index

All animation is pure CSS `@keyframes` with `animation-duration: 20s–32s`, `animation-timing-function: ease-in-out`, `animation-iteration-count: infinite`, `animation-direction: alternate`. No JavaScript required.

**No photography. No raster images.** The entire visual language is SVG, CSS gradients, and typography. This is intentional: the site is about abstract persistence, not concrete things.

**Decorative ornament:** A single SVG ornament — a minimal lemniscate (∞ symbol, mathematically correct as a Bernoulli lemniscate, not a typographic ∞) — appears once, between sections 2 and 3, centered, 40px tall, rendered in `--antique-brass`. It is not animated.

## Prompts for Implementation

Build continu.ax as a **single continuous document**, scrolled top to bottom, with no internal navigation links, no section anchors in the visual UI, no sticky headers. The page IS the experience — arriving at the bottom is arriving at the end of the text.

**Implementation priorities, in order:**

1. **Typography first.** Load Cormorant Garamond (300, 400, 600, 700, italic variants) and Cinzel (400) from Google Fonts with `font-display: swap`. Set all font sizes using `clamp()` with the major-third scale. The page should read beautifully with no CSS other than typography and color — every other effect is enhancement.

2. **Iridescent axis line.** The SVG axis line in section 1 is the single most important visual element. Spend effort on its curvature and its gradient. The gradient should cycle copper → verdigris → dusty-rose along the stroke using an SVG `linearGradient` with `gradientUnits="userSpaceOnUse"`. The stroke should be 2px on mobile, 3px on desktop.

3. **Parallax vertical rule.** The antique-brass vertical rule in section 2 uses CSS `position: sticky` with a calculated `top` offset and a `transform: translateY()` driven by a CSS custom property `--scroll-ratio` (set by a small scroll event listener). The rule moves upward at 0.3× scroll speed relative to the section (i.e., it appears to scroll slower).

4. **Generative curve animation.** Each of the 12 curves in section 3 is a separate `<path>` element inside an inline SVG. Their `d` attributes are pre-computed for 5 keyframe positions (at 0%, 25%, 50%, 75%, 100% of the animation) and interpolated via CSS `d` property animation (supported in modern browsers) or via `animateTransform` on a `<path>` group. The 12 curves should have staggered `animation-delay` values from 0s to -16s (negative delays for immediate mid-cycle start).

5. **Color progression.** The `background-color` of the `<body>` transitions from `#1a1018` to `#1c1510` as the user scrolls. Implement via `@property --page-warmth` (CSS Houdini registered property) and a scroll-driven animation: `animation-timeline: scroll(root)`. Fallback for non-supporting browsers: static `#1a1018`.

6. **Pull-quote margin float.** Use CSS Grid on the `.continuance` section: `grid-template-columns: 240px 1fr`. Pull-quotes occupy `grid-column: 1`, main body text occupies `grid-column: 2`. The pull-quote grid cell overlaps into the left margin using `margin-left: -288px` on the section wrapper (288px = 240px quote width + 48px gap). On mobile, collapse to `grid-template-columns: 1fr` and pull-quotes appear above their annotated paragraph.

**Tone of the text content:** Every passage of copy should be written as if by someone who has studied the long history of a single idea and has now sat down to report what they found. No marketing language. No calls to action. No second-person address ("you"). The site speaks in declarative third person, or in first-person plural ("we have found that..."). Sentences can be long. Semicolons are permitted. The copy should read as if it were originally written in Latin and translated by someone who respected both languages.

**AVOID:** Hero sections with large background images, button-heavy CTAs, card grids, pricing tables, testimonial carousels, sticky navigation bars, any animation faster than 400ms, any color brighter than `--dusty-rose`, any font other than Cormorant Garamond and Cinzel.

**BIAS TOWARD:** Long-form readable passages, generous line-height, typographic ornament, slow eased transitions, the feeling of reading a printed document rather than browsing a website.

## Uniqueness Notes

1. **Holographic-vintage fusion with no photography and no raster.** The corpus shows holographic aesthetic at a low frequency (~3–5% of designs use it explicitly), and when used, it typically involves product photography with reflective surfaces. continu.ax uses the holographic sheen entirely through CSS gradients and SVG linearGradients applied to typographic and line-art elements — no photography, no raster. This combination (holographic + zero-photography + SVG-only) does not appear in any other current design.

2. **Flowing-curves as primary site motif (1% frequency in corpus).** The frequency report shows `flowing-curves` at 1% — the lowest of all motif categories. The axis line Bezier motif evolves across all five sections, making it the structural and visual thread of the entire page. No other design in the corpus uses a single evolving line as its primary recurring visual element.

3. **Authoritative tone with zero second-person address.** The tone analysis shows `friendly` (45%) and `professional` (41%) dominating the corpus. `authoritative` is not listed as a separate category, meaning it is rare or absent. The deliberate choice of declarative third-person copy, Latin-influenced sentence structures, and prohibition of CTAs and second-person address produces a reading experience unlike any other site in the current registry.

4. **Elegant-serif typography using Cormorant Garamond (not the common Garamond or EB Garamond).** The corpus shows `mono` typography at 97% and `humanist` at 43%. Cormorant Garamond is a high-contrast revival that combines Garamond's old-style structure with extreme thin-to-thick contrast — it reads as more refined and fragile than EB Garamond, and it pairs naturally with the interference-light holographic palette. Paired with Cinzel (Roman inscriptional), this two-family system is absent from the current corpus.

5. **Muted-vintage palette anchored in aubergine-plum, not the typical warm-brown or cream.** The corpus shows `warm` palette at 98% and `muted` at 25%, but muted-warm typically means cream-and-ochre. continu.ax's muted palette is anchored in deep aubergine (`#1a1018`) with warm accents in brass and parchment — a dark ground with warm-vintage highlights, which inverts the standard muted-vintage formula (light ground, dark accents) found elsewhere.

**Seed documented:** aesthetic: holographic, layout: single-column, typography: elegant-serif, palette: muted-vintage, patterns: parallax, imagery: generative-art, motifs: flowing-curves, tone: authoritative
<!-- DESIGN STAMP
  timestamp: 2026-05-07T09:00:41
  seed: structure with extreme thin-to-thick contrast
  aesthetic: continu.ax is a site that inhabits the idea of the *axis of continuity* — the in...
  content_hash: 3585cdd53179
-->