# Design Language for lordly.dev ## Aesthetics and Tone lordly.dev is the digital seat of a **sovereign control plane** -- a platform that grants developers dominion over distributed systems the way a regent holds dominion over scattered provinces. The conceit is deliberate and a little theatrical: this is not a friendly SaaS dashboard with confetti animations, it is a *throne room rendered in glass and graphite*. You arrive not as a customer but as a delegate granted audience. The atmosphere is corporate in the way a central bank or a constitutional court is corporate -- impeccable, restrained, quietly intimidating -- but laced with something stranger underneath: a faint electromagnetic unease, the sense that the machine you command is also watching you back. The mood word is **"sovereign uncanny."** Cool-gray marble surfaces that should be solid occasionally *shudder* -- a one-frame chromatic tear, a glyph that briefly displaces itself -- as if the rendered world is a projection over something with its own intentions. Think of the lobby of a powerful institution at 3am: the lights are on, the floors are polished, but no one is there, and the building itself seems to be holding a breath. The visual register sits between **late-corporate-modernism** (Helvetica-era annual reports, embassy architecture, the cold confidence of mid-century power graphics) and **signal-degradation glitch art** (scanline tear, datamosh artifacts, the ghosts left by a frame that didn't fully resolve). Tone is **mysterious-moody and quietly authoritative**: full sentences, no exclamation marks, no emoji, no "hey there!" -- the copy speaks the way a chancellor speaks, declaratively and without hurry. Nothing begs. Nothing converts. The site simply states what it is and waits. ## Layout Motifs and Structure **Primary layout: layered-depth -- a stack of translucent strata, each a "court" the visitor descends through.** The page is built as **five overlaid planes** on a fixed deep-gray field, navigated by scroll. Rather than scrolling content *past* a static viewport, the planes themselves separate: as you scroll, the topmost stratum lifts slightly and fades its opacity from 100% toward 8%, sliding upward at 1.0x scroll speed, while the stratum beneath it was already present at 1.0x and a deeper one drifts at 0.82x and a third at 0.66x -- a literal parallax-layered-depth so the world feels like sheets of frosted glass suspended in dark space, each carrying its own typographic content. A faint vertical hairline (1px, #5A6472 at 22% opacity) runs down the left margin with small geometric tick-marks -- circle, square, triangle, square, circle -- one per stratum, acting as a "register of courts" navigator. Clicking a tick smoothly translates the stack. The five strata, in descent order: 1. **The Threshold** -- domain wordmark + single declarative line. Full-bleed, centered, generous void above and below (min 28vh of empty graphite). 2. **The Writ** -- what the platform governs (orchestration, policy, lineage), laid out as a left-aligned asymmetric column at the 0.382 vertical line, with geometric-shape glyphs as section markers. 3. **The Survey** -- a quiet schematic of the domains under control, rendered as an SVG isometric-adjacent diagram of nested squares and connecting lines (no photos, no charts, no stat-grids -- a *map*, not a metrics board). 4. **The Audience** -- a slow vertical sequence of short declarative statements, each occupying its own near-full viewport, fading in line by line, the deeper strata visible as soft gray ghosts behind the words. 5. **The Seal** -- closing wordmark, a single geometric monogram that draws itself in SVG, and one understated link. Composition rules: editorial margins (12vw desktop, 7vw tablet, 6vw mobile), a visible baseline grid of hairlines at 6% opacity behind text blocks, asymmetric placement that alternates between the 0.382 and 0.618 vertical anchors. **No card grids. No bento boxes. No pricing tables. No three-up stat rows.** Negative space is a material here -- vast cool-gray emptiness is the point. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Wordmark / Stratum Titles:** **"Newsreader"** (Google Fonts, weight 500 and 600, optical size enabled via `font-optical-sizing: auto`). A humanist serif with a literary, slightly stern bearing -- it reads as *authority that has read deeply*, not authority that shouts. Used at clamp(2.6rem, 6.5vw, 6rem) for the wordmark, all lowercase, letter-spacing -0.02em. The thin-thick modulation gives a faint engraved-on-bronze quality at large sizes. - **Body / Declarative Prose:** **"Spectral"** (Google Fonts, weight 400, with 400 italic for asides). A humanist serif designed for screen reading with a calm, even color and tall x-height -- it carries long declarative sentences without fatigue and pairs with Newsreader as a quieter sibling. Body at clamp(1.05rem, 1.3vw, 1.3rem), line-height 1.7, max measure 62ch. - **Eyebrows / Tick Labels / Schematic Annotations:** **"IBM Plex Mono"** (Google Fonts, weight 400, letter-spacing 0.18em, uppercase). The single mechanical voice in the system -- used sparingly for labels like `STRATUM 02 / THE WRIT` and for the glitch artifacts (when a word tears, a fragment of it ghosts in Plex Mono). Tiny: 0.7rem. **Palette -- cool-grays, an austere ledger of graphite and slate with two restrained accents:** - `#0E1116` -- **Obsidian Field.** The base void behind all strata. Nearly black but blue-cool, never warm. - `#171B22` -- **Privy Graphite.** The first translucent stratum's tint; also section dividers. - `#2A313B` -- **Slate Vellum.** Mid-gray surface for the schematic plane and quote backgrounds at low opacity. - `#5A6472` -- **Pewter Rule.** Hairlines, tick-marks, secondary annotation text, geometric outlines. - `#9AA4B2` -- **Ash Prose.** Default body-text color on dark -- legible but unhurried, never pure white. - `#E6EAF0` -- **Pale Quartz.** Reserved for the wordmark and the single most important line per stratum. Used like a spotlight, not a default. - `#3E6E8E` -- **Cold Sovereign Blue.** The one chromatic accent -- a muted steel-teal-blue for the active tick-mark, link underlines, and the "in-control" pulse on the schematic. Cold, never cheerful. - `#B5485B` -- **Vermilion Fault.** The glitch accent only -- the chromatic-aberration red channel that appears for 1-2 frames during a shake/tear, and the color of the `shake-error` micro-event. Never used in stable UI; it is the color of the machine flinching. Contrast pairings: Ash Prose (#9AA4B2) on Obsidian Field (#0E1116); Pale Quartz (#E6EAF0) on Obsidian Field for hero lines; Cold Sovereign Blue (#3E6E8E) text/rules on Privy Graphite (#171B22). ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Everything is constructed from SVG geometry, CSS, and typography -- which suits both the corporate-modernist register and the glitch-art register, since glitch is fundamentally about *rendered* things failing. 1. **The Geometric Seal.** The signature mark: a composition of a circle circumscribing a square circumscribing a triangle (point-down), all stroke-only in Pewter Rule with the triangle in Cold Sovereign Blue. It is the favicon, appears at small scale beside each stratum title, and at large scale on The Seal stratum where each shape's path *draws itself* sequentially (path-draw-svg, 0.9s per shape, ease-in-out). The motif is **geometric-shapes** taken literally -- circle, square, triangle as a heraldic alphabet of power: the seal, the cornerstone, the spearhead. 2. **The Strata Edges.** Each translucent plane has a 1px top edge in Pewter Rule that, on scroll, briefly *displaces* -- shifting 3-6px horizontally for one frame with a Vermilion Fault / Cold Sovereign Blue chromatic split, then snapping back. This is the world's seam showing. 3. **Glitch-art artifacts (restrained, never decorative-busy).** Three controlled events: (a) **scanline tear** -- on stratum entry, a 2px-tall horizontal band of the title text renders offset by 8px with RGB-split for ~120ms; (b) **glyph displacement** -- once every ~14s of dwell, a single random character in visible body text jumps 2px and ghosts a Plex Mono duplicate in Vermilion Fault at 30% opacity, then resolves; (c) **datamosh smear** -- the schematic diagram, on first reveal, paints from a "smeared" state (CSS blur 12px + skewX 4deg + chromatic offset) and resolves to crisp over 600ms, as if the map is coming into focus from a degraded transmission. 4. **The Survey Schematic.** An SVG of nested squares connected by orthogonal lines (right-angle elbows only -- no curves), representing "domains under control." Nodes are small geometric shapes; the active path between two nodes carries a slow Cold Sovereign Blue pulse traveling along it (a `` or CSS offset-path dot). It reads as a constitutional chart of provinces, not a metrics dashboard. 5. **Baseline hairline grid.** Faint horizontal rules at 6% Pewter Rule behind every text block -- the ledger lines of an old institutional document, grounding the floating glass strata in something rigorous. 6. **The shake-error gesture.** Reserved exclusively for the (single, optional) audience-request form on The Seal stratum: a wrong/empty submission triggers a tight horizontal shake (translateX keyframes ±6px, 4 oscillations, 320ms, cubic-bezier(.36,.07,.19,.97)) with the field border flashing Vermilion Fault. The machine, briefly, says no. This is the *only* place red appears in stable interaction. ## Prompts for Implementation **Build it as a full-screen narrative descent, not a marketing page.** Single HTML document; the experience is the five strata. Use `scroll-snap-type: y proximity` so strata settle but never feel jerky. Respect `prefers-reduced-motion` by disabling all glitch/shake/parallax and leaving a calm, static layered composition (the design must read as serious even with zero motion). **Opening sequence (The Threshold):** Page loads on pure Obsidian Field (#0E1116), empty for 350ms. Then a single 1px Pewter Rule horizontal line draws across the center (1.6s ease-in-out). On completion it does one chromatic-split shudder (Vermilion Fault left-channel, Cold Sovereign Blue right-channel, 90ms) and snaps clean. The wordmark **"lordly.dev"** then fades up in Newsreader 600, Pale Quartz, lowercase, character by character at 40ms stagger. Below it, after a beat, one Spectral line fades in: *"A sovereign control plane. You hold the writ."* No button. A small Plex Mono `▼ DESCEND` hint pulses faintly at the bottom. **Layered-depth scroll mechanics:** Implement the five strata as `position: sticky` or transform-driven layers. As scroll progresses through a stratum's range, that stratum's `opacity` eases from 1 → 0.08 and `translateY` eases from 0 → -8vh, while it sits *above* the next. Strata beneath move at 0.82x and 0.66x of scroll for depth. Each stratum keeps its own backdrop-filter blur(14px) and a translucent tint (Privy Graphite / Slate Vellum at 10-18% alpha) so deeper text is always faintly visible as gray ghosts -- the "courts behind courts" feeling. The left-margin tick navigator (circle/square/triangle/square/circle) updates its active mark to Cold Sovereign Blue with a subtle glow. **Stratum entry choreography:** Each title arrives with the scanline-tear glitch (one band offset 8px + RGB-split, 120ms) then resolves; the Plex Mono eyebrow types in (typewriter-effect, 28ms/char); body lines stagger-fade upward (12px, 60ms apart, cubic-bezier(.22,1,.36,1)). **The Survey schematic:** Build the nested-squares SVG inline. On reveal, animate from datamosh state (blur 12px, skewX 4deg, chromatic offset 6px, opacity 0.3) to crisp over 600ms. Then start the slow Cold Sovereign Blue pulse traveling the active connector path on a 4s loop. Hovering a node lifts it 2px and brightens its stroke -- restrained, no card-flips, no tilt-3d carnival. **Ambient glitch loop:** A `setInterval` (~14s) picks a random visible body character, wraps it, applies a 2px jump + Vermilion Fault Plex Mono ghost duplicate at 30% opacity, holds 140ms, resolves. Sparse enough to unsettle, never enough to annoy. **The Seal (closing):** The geometric seal (circle ⊃ square ⊃ triangle) draws itself path-by-path in SVG. The wordmark repeats, smaller. One Spectral line: *"The provinces are quiet. The seal is yours."* Below, an optional single-field "request audience" input -- empty/invalid submit triggers the `shake-error` gesture (±6px ×4, 320ms, border flashes Vermilion Fault). One understated text link, Cold Sovereign Blue with an `underline-draw` on hover. Nothing else. No footer mega-nav, no social-icon row, no newsletter pitch. **AVOID:** CTA-heavy hero stacks, pricing blocks, feature-card grids, three-up stat rows, testimonial carousels, gradient-mesh blobs, warm colors, rounded playful UI, emoji, exclamation marks. The site should feel like being granted audience in a cold, perfectly-kept seat of power where the walls occasionally flicker. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **"Sovereign uncanny" -- power graphics fused with signal-degradation glitch.** No other site here treats glitch-art as the *seam of an authoritarian machine* rather than as cyberpunk decoration or vaporwave nostalgia. The glitch is rare, surgical, and unsettling specifically because the rest of the design is so composed and corporate -- the contrast is the concept. Glitch artifacts here are diegetic ("the world's projection failing"), not aesthetic flourish. 2. **Literal layered-depth as "courts behind courts."** While layered-depth appears in ~24% of designs, almost always as soft parallax for atmosphere, here it is the *entire navigation model and narrative*: five translucent strata you descend through, each fading to a ghost as the next emerges, with a circle/square/triangle "register of courts" navigator. The depth carries meaning (descending through tiers of authority), not just visual interest. 3. **Cool-grays + geometric-shapes as a heraldic system.** Cool-grays palette is used by only ~1% of designs and geometric-shapes motif by ~0% -- this site builds an austere graphite ledger and turns circle/square/triangle into an actual heraldic alphabet (seal / cornerstone / spearhead) rather than generic decorative shapes. The single accent (Cold Sovereign Blue) and the single forbidden color (Vermilion Fault, only for the machine flinching) make the palette behave like a constitution. 4. **Anti-conversion, declarative voice.** Zero buttons in the persuasion sense, zero stat-grids, zero pricing -- the copy is chancellor-speak, full declarative sentences, no exclamation, no emoji. The only interactive "no" in the whole site is the `shake-error` on the lone audience-request field (rare pattern, ~2%), which doubles as the only moment Vermilion Fault touches stable interaction. 5. **Humanist serif duo (Newsreader + Spectral) instead of the near-universal mono.** ~94% of designs lean on mono type; this one uses two humanist literary serifs as its voice of authority-that-has-read-deeply, with IBM Plex Mono confined to the role of the cold mechanical annotation layer and glitch ghost. **Chosen seed / style:** aesthetic: corporate, layout: layered-depth, typography: humanist, palette: cool-grays, patterns: shake-error, imagery: glitch-art, motifs: geometric-shapes, tone: mysterious-moody. **Avoided patterns from frequency analysis:** sidestepped the saturated defaults -- mono typography (94%), gradient/warm palettes (96%/91%), counter-animate (92%), centered layout (92%), photography/minimal imagery (65%/69%). Leaned into the underused: layered-depth layout, humanist type, cool-grays palette, shake-error pattern, glitch-art imagery, geometric-shapes motif. Glitch as a *named aesthetic* sits at only ~6% and glitch-art imagery at ~1%, so the treatment here -- restrained, diegetic, corporate-adjacent -- is distinct from the cyberpunk-flavored glitch elsewhere.