# Design Language for lordly.dev

## Aesthetics and Tone

lordly.dev is a **cinematic authority archive** — the digital equivalent of a red-wax-sealed dossier left on a mahogany desk in a wood-panelled library at dusk. The site operates in the register of a great house's estate record: not flashy, not desperate, but utterly assured. Every pixel communicates that whoever built this has nothing to prove and no need to shout.

The visual language is **cinematic-authoritative**: think wide-aspect black-and-white photography cropped to 21:9 stills, deep amber-and-obsidian palette, and typography that has the weight of a carved lintel rather than a printed brochure. The mood sits between a Kubrick corridor — deliberately framed, slightly cool — and the opening titles of a BBC historical drama where the credits roll over sepia estate photography.

Tone is **authoritative without being cold**: the site knows its history, presents it on its own terms, and invites the visitor to read slowly. There are no urgency triggers, no conversion funnels, no countdown timers. The page exists like a primary source document: complete, unhurried, final.

Vintage motifs are deployed as structural elements, not decoration. Ruled lines are the weight of a Victorian ledger rule — 1.5px, not hairline. Section dividers recall typographic ornaments from Caslon specimen books: three-em dashes flanked by lozenge points. Pull quotes are set in a ruled box the way a newspaper would have framed an important extract in 1923.

## Layout Motifs and Structure

The architecture is a **vertical timeline** — a single unbroken scroll that reads as a chronicle unfolding from top to bottom, each section a chapter in an ongoing record. This is not a "features list" timeline; it is the kind of timeline an archivist would produce: each entry is a full-width dated panel with a ruled left margin carrying a year-stamp or era-label in small caps.

**Structural blueprint:**

- **Opening panel** — full-viewport-height, nearly full-bleed cinematic photograph (21:9 crop, heavily vignetted), with the wordmark `lordly.dev` set in oversized Neo-Grotesque at the lower-left in cream against near-black. A single rule extends from the wordmark to the right edge at cap-height. No navigation visible on load; a subtle up-caret appears in the lower-right after 2.5 seconds.
- **Timeline spine** — a 2px vertical rule runs the full height of the scroll on the left, 72px from the viewport left edge on desktop, 24px on mobile. Every section "hooks" into this spine via a horizontal dash-rule at its top.
- **Timeline entries** — each entry is a two-column layout: the left column (240px on desktop) holds the era label (year, epoch, or category name in small caps + a lozenge bullet), the right column holds the narrative content. On mobile, columns stack.
- **Full-bleed photography panels** — every third entry breaks out of the two-column structure to a full-width cinematic photograph with a caption rendered as a plate legend below: italic, 11px, right-aligned, preceded by a long em-rule.
- **Closing seal panel** — the final section of the page is a near-black panel with a centered circular emblem (SVG, hand-drawn quality) and a single line of text below: the domain in small caps, and nothing else.
- **No sticky navigation, no floating buttons, no modals.** Anchored section headings appear only as the timeline label in the left column.

Spatial rhythm uses a base unit of 24px. Section vertical padding is 96px top/bottom. The timeline spine is always 72px from the left edge. Maximum content measure is 680px for body text (approximately 65 characters per line).

## Typography and Palette

**Typography — grotesque-neo system:**

- **Display / Wordmark:** [Barlow](https://fonts.google.com/specimen/Barlow) — weight 700 (Bold), used at clamp(3.2rem, 7vw, 6.4rem) for the primary wordmark. Tracking: letter-spacing 0.12em in small caps mode. The Barlow family's slightly condensed geometric structure reads as authoritative and modern without the clinical quality of pure Helvetica clones.
- **Section Era Labels (timeline left column):** [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) — weight 600, uppercase, letter-spacing 0.2em, size 0.75rem. These are the "chapter numbers" of the archive.
- **Body text:** [Barlow](https://fonts.google.com/specimen/Barlow) — weight 400, size clamp(1rem, 1.1vw, 1.125rem), line-height 1.75. Long paragraphs in this weight read like formal correspondence: unhurried, measured.
- **Pull quotes:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) — italic weight, size 1.375rem, color `#C8A96E` (amber-gold). The serif italic against the grotesque body creates deliberate typographic tension — the voice of a cited authority inside a modern record.
- **Plate captions and footnotes:** Barlow 300, 0.6875rem, `#8A8070` (warm ash), right-aligned.

**Palette — complementary (obsidian + amber):**

- `#0D0C0A` — deep obsidian black (primary background, opening panel, closing seal)
- `#1C1A15` — dark walnut (section backgrounds alternating)
- `#2B2620` — aged leather shadow (border and rule color)
- `#F5F0E8` — warm parchment (primary body text color)
- `#C8A96E` — amber gold (pull quotes, era label accents, lozenge ornaments, timeline spine highlight on hover)
- `#8A8070` — warm ash grey (captions, secondary text, ruled lines at reduced opacity)
- `#3D3020` — dark tobacco (hover states on interactive elements, pressed states)
- `#E8D5B0` — antique cream (wordmark, section headings)

The complementary axis is obsidian-black against amber-gold — a palette that recalls hand-stamped ledger ink (near-black) against aged vellum and wax seals (amber). No blues, no cold whites, no greens. The entire palette is warm-dark: the site exists at golden hour, perpetually.

## Imagery and Motifs

**Photography is the exclusive imagery vocabulary.** Every image is a full-bleed cinematic still: high-contrast, slightly warm in shadow, cooler in highlight. Subject matter draws from the visual register of estate documentation and historic craft — worn desk surfaces with a single pen, a half-open leather-bound ledger, a stone archway in late afternoon light, a wax seal being pressed, weathered oak panelling with a diagonal shaft of window light. No people, no faces, no devices.

**Specific photographic treatments:**
- All images are desaturated to approximately 30% saturation, then warm-toned via a CSS `sepia(0.15) contrast(1.1) brightness(0.92)` filter chain — this gives them the quality of a slightly over-developed film print.
- A CSS vignette overlay (radial gradient from transparent center to `rgba(13, 12, 10, 0.7)` at edges) is applied via a `::after` pseudo-element on every image container.
- Full-bleed panels use `object-fit: cover` with `object-position: center 35%` to consistently show horizon and midground.

**Vintage motifs as structural ornament:**
- **Lozenge bullet** (`◆`) — used in era labels to separate year from category, in `#C8A96E`.
- **Three-em ornament rule** — `— ◆ —` used as section transition between body text and pull quote.
- **Plate legend rule** — a 40px horizontal rule (`#8A8070`, 1px) precedes every caption, left-aligned within the caption column.
- **Circular emblem (closing seal)** — an SVG drawn at 200×200px: outer ring with fine tick-marks at each degree position (like a compass rose without cardinal labels), inner text reading `LORDLY.DEV · EST.` in Barlow Condensed small caps, center void. Rendered at `#C8A96E` on `#0D0C0A`.
- **Animated timeline spine** — the 2px left-rule uses a CSS `border-image` with a repeating linear-gradient that slowly shifts between `#2B2620` and `#C8A96E` as the user scrolls, achieved by scroll-driven `@keyframes` on a CSS custom property.

**Border animation (border-animate pattern):**
The `border-animate` pattern is applied to era-label containers: a subtle 1px border traces the perimeter of each era-label block on scroll-entry, drawing from the top-left corner clockwise over 600ms using an SVG `stroke-dashoffset` animation triggered by `IntersectionObserver`. This is the only animation that originates on-element (as opposed to the global timeline spine animation).

## Prompts for Implementation

Build lordly.dev as a **single vertical chronicle page** — one scroll, no navigation links to other pages, no popups, no sidebars. The experience is reading a long-form document that has been deliberately typeset and placed in front of you.

**Implementation blueprint:**

1. **`<head>` / setup:**
   - Google Fonts: `Barlow:ital,wght@0,300;0,400;0,600;0,700&family=Barlow+Condensed:wght@600&family=Libre+Baskerville:ital,wght@1,400` — single `<link>` request.
   - CSS custom properties on `:root`: `--obsidian: #0D0C0A; --walnut: #1C1A15; --leather-shadow: #2B2620; --parchment: #F5F0E8; --amber: #C8A96E; --ash: #8A8070; --tobacco: #3D3020; --cream: #E8D5B0;`
   - `scroll-behavior: smooth` on `html`; no `overflow-x: hidden` trap — instead contain via max-width on inner wrapper.

2. **Opening panel (`#panel-hero`):**
   - Full-viewport-height (`100dvh`), `position: relative`, background: `--obsidian`.
   - `<figure>` child: `position: absolute; inset: 0; z-index: 0;` containing an `<img>` with CSS filter `sepia(0.15) contrast(1.1) brightness(0.92)`, `object-fit: cover`, `object-position: center 35%`. `::after` pseudo carries the vignette radial-gradient.
   - Wordmark `<h1>` positioned `position: absolute; bottom: 72px; left: 72px; z-index: 1;` in Barlow 700, `clamp(3.2rem, 7vw, 6.4rem)`, color `--cream`, letter-spacing `0.12em`.
   - A single ruled line element: `<div class="hero-rule">` — `position: absolute; bottom: calc(72px + 0.6em); left: 72px; right: 72px; height: 1.5px; background: linear-gradient(to right, --amber, transparent 80%); z-index: 1;`
   - Up-caret (`↑` or `›`) appears in lower-right after 2.5s via CSS animation `opacity: 0 → 1` with `animation-delay: 2.5s; animation-fill-mode: forwards`.

3. **Timeline section wrapper (`<main class="chronicle">`):**
   - `position: relative; padding-left: 72px;` on desktop; `padding-left: 24px` mobile.
   - `::before` pseudo: `content: ''; position: absolute; left: 71px; top: 0; bottom: 0; width: 2px; background: var(--leather-shadow);` — this is the static spine rule. A scroll-driven `@keyframes` animates `background` between `--leather-shadow` and `--amber` at 40% progress using `animation-timeline: scroll()` (CSS scroll-driven animations API).

4. **Timeline entry (`<section class="entry">`):**
   - CSS Grid: `grid-template-columns: 240px 1fr; gap: 48px;` on desktop; single column on mobile.
   - Left column (`.entry__label`): `font-family: 'Barlow Condensed'; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: --amber; padding-top: 4px;` — includes lozenge bullet `◆` between year and category.
   - Right column (`.entry__content`): Barlow 400, `--parchment`, line-height 1.75.
   - On entry into viewport (`IntersectionObserver`, threshold 0.15): the entry label border draws via SVG stroke-dashoffset animation (border-animate pattern). Add class `is-visible`; CSS handles the animation via `transition: stroke-dashoffset 600ms ease`.

5. **Full-bleed photography panel (`<figure class="entry--fullbleed">`):**
   - Spans full grid width: `grid-column: 1 / -1; margin: 0 -72px;` on desktop.
   - `aspect-ratio: 21/9; overflow: hidden; position: relative;`
   - Caption below: `<figcaption class="plate-caption">` — `font-family: Barlow; font-weight: 300; font-size: 0.6875rem; color: --ash; text-align: right; padding-top: 8px;` preceded by a `<span class="plate-rule">` (40px wide, 1px tall, `background: --ash`, `display: inline-block; vertical-align: middle; margin-right: 8px;`).

6. **Pull quote (`<blockquote class="pull-quote">`):**
   - `border-left: none; padding: 24px 32px; border: 1.5px solid var(--leather-shadow); background: var(--walnut);`
   - Quote text in Libre Baskerville italic 1.375rem `--amber`.
   - Preceded by ornament `<span aria-hidden="true">— ◆ —</span>` in Barlow 400, `--ash`, centered, `display: block; text-align: center; margin-bottom: 16px;`.

7. **Closing seal panel (`#panel-seal`):**
   - `min-height: 100dvh; background: --obsidian; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;`
   - SVG compass emblem: 200×200px, `stroke: --amber; fill: none; stroke-width: 0.5;` — outer circle with 360 tick marks (every 1° a 3px tick, every 10° a 7px tick, every 90° a 12px tick), inner text arc reading `LORDLY.DEV · EST. MMXXIV` in Barlow Condensed 600 9px.
   - Below emblem: `<p class="seal-domain">` — `lordly.dev` in Barlow Condensed 600, letter-spacing 0.35em, uppercase, `--ash`, 0.75rem.

8. **No CTAs, no pricing blocks, no stat grids, no form inputs, no social proof carousels.** The only interactive element is scroll.

**Scroll-driven effects:**
- Opening panel photograph has a very subtle `scale(1.0) → scale(1.04)` parallax on scroll (CSS `animation-timeline: scroll(root)`, `animation-range: 0 40dvh`), giving the impression the camera slowly pulls back as you scroll into the chronicle.
- Era labels in the left column `opacity: 0 → 1; transform: translateX(-8px) → translateX(0)` on IntersectionObserver entry, staggered 80ms after the right column content.

## Uniqueness Notes

1. **Complementary obsidian-amber palette applied as a cinematic archive, not luxury branding.** The frequency report shows `complementary` as a palette token with low usage in the corpus. Most dark-palette designs in the registry use `midnight-blue` or `dark-neon`; lordly.dev uses a warm obsidian + amber-gold axis that reads as aged document ink rather than night-club neon or corporate navy.

2. **Timeline-vertical layout used as a chronicle structure, not a "features roadmap."** `timeline-vertical` appears in the seeds vocabulary but the corpus frequency report shows it is not a dominant layout in existing designs. Here the timeline is a genuine archival chronology — era labels, dated entries, ruled left-spine — rather than a product roadmap or resume timeline.

3. **Border-animate pattern deployed as a structural reveal on era-label boxes, not as hover decoration.** The frequency report shows `border-animate` at very low usage. This design uses it as a scroll-triggered SVG stroke animation on entry containers — the border draws as the entry enters the viewport, encoding the timeline's "filling in" quality as the visitor scrolls through the chronicle.

4. **Photography treated with a film-development filter chain rather than plain desaturation or duotone.** The imagery seed is `photography` (highest frequency in the corpus at 89%), but the specific treatment here — `sepia(0.15) contrast(1.1) brightness(0.92)` plus a warm vignette — produces a look closer to a developed silver-gelatin print than the typical stock-photography or duotone treatments elsewhere in the registry.

5. **Grotesque-neo typography used at authoritative, not playful, register.** The `grotesque-neo` typography token appears at only 3% in the corpus — and existing uses skew toward editorial/playful contexts. Barlow + Barlow Condensed as a paired grotesque-neo system, combined with Libre Baskerville italic for pull quotes, constructs a formal authority register normally associated with serif-dominant designs.

**Chosen seed:** aesthetic: cinematic, layout: timeline-vertical, typography: grotesque-neo, palette: complementary, patterns: border-animate, imagery: photography, motifs: vintage, tone: authoritative

**Avoided overused patterns:** photography (89% — used here but with a distinct film-print treatment to differentiate from generic stock use), minimal imagery (38% — avoided entirely in favor of full-bleed cinematic panels).
<!-- DESIGN STAMP
  timestamp: 2026-05-08T18:03:42
  domain: lordly.dev
  seed: is
  aesthetic: lordly.dev is a **cinematic authority archive** — the digital equivalent of a re...
  content_hash: fa269c2615a7
-->