# Design Language for localcop.dev ## Aesthetics and Tone localcop.dev is the home of a developer tool that acts as a *local constable* for your codebase -- a policy enforcer, linter, and standards-keeper that patrols your project before anything reaches the remote. The visual identity is built on a deliberately strange collision: **the ornamental gravity of a Victorian maritime constabulary** crossed with **the cold, luminous instrumentation of a deep-submersible command deck.** Picture the brass-bound charthouse of an 1880s patrol cutter that has somehow been retrofitted with holographic sonar -- engraved acanthus borders glowing faintly cyan, a copperplate seal of office floating above a depth-gauge dial, filigree that doubles as a circuit trace. The mood is **energetic and authoritative without being grim** -- this is not a moody noir tool, it is a *brisk, confident officer on patrol*. There is forward momentum everywhere: diagonal currents pull the eye downward through the page, panels reveal themselves crisply, numbers tick up like a pressure gauge equalizing. The tone of voice is that of a slightly theatrical harbor-master: precise, a little grand, fond of words like "writ," "patrol," "manifest," and "all hands clear." But the energy is buoyant, almost gleeful about catching problems early -- the cop *enjoys* the work. Inspiration touchstones: Victorian engraved bond certificates and ship registries; the ornamental ironwork of pier pavilions; Jules Verne's *Nautilus* salon with its pipe organ and velvet; modern oceanographic ROV telemetry overlays; the bioluminescent palette of the bathypelagic zone. The site should feel like opening a brass-cornered logbook that turns out to be a live console. ## Layout Motifs and Structure **Primary layout: diagonal-sections with layered-depth staging.** The page is composed as a descent -- a dive through water layers, each section a stratum of the ocean from sunlit shallows to abyssal black. Section boundaries are **never horizontal**: every divide is a clean diagonal cut, between 4 and 9 degrees off-axis, alternating slope direction so the eye zig-zags downward like a submersible threading currents. These diagonals are reinforced by thin "current lines" -- 1px filigree rules in cyan at 14% opacity that streak across the cut at the same angle, occasionally curling into a Victorian flourish at the terminus. **Vertical depth structure:** 1. **The Charthouse (hero)** -- full-viewport. Deep-ocean photograph (light shafts in dark water) sits behind an ornate engraved cartouche frame that holds the wordmark "LOCALCOP" set like a seal of office. A futuristic depth-gauge dial in the corner reads "0 m." The whole hero is bounded top and bottom by brass-rule borders with corner ornaments. 2. **The Writ (what it does)** -- a diagonal band, slightly deeper blue. Content presented as an illuminated proclamation: a drop-cap initial in engraved style, body text in two asymmetric columns offset across the diagonal. 3. **The Patrol Routes (features)** -- the core **progressive-disclosure** zone. Each capability ("style writs," "import patrols," "secret sweeps," "dead-code dragnet") is a closed brass-cornered placard. Clicking unfurls it: the placard expands along the diagonal axis, ornamental corners rotating outward like opening calipers, revealing a deep-water photograph, a short description, and a faux-telemetry readout. Only one placard open at a time; opening one closes the last. 4. **The Manifest (how it integrates)** -- deeper still, near-abyssal. A vertical timeline rendered as a sounding line dropping through the section, knots marked at intervals (install, configure, hook, patrol) with engraved knot-glyphs. 5. **The Abyssal Seal (close)** -- the darkest stratum, near-black water. The ornate seal from the hero reappears, now glowing, with a single quiet line of text. No CTA grid, no pricing -- just the constable's mark at the bottom of the dive. Margins are generous (min 10vw desktop) and the engraved frame motif recurs: most major content blocks are wrapped in a thin double-rule border with Victorian corner spurs rendered in SVG. A persistent slim left rail shows current "depth" (scroll position) as a moving marker on a vertical gauge. ## Typography and Palette **Typography -- an eclectic-hybrid system, three voices that should not coexist but do:** - **Display / Wordmark / Section Titles:** "IM Fell English SC" (Google Fonts) -- a small-caps revival of a 17th/18th-century English foundry face, full of ink-trap irregularity and antique gravitas. Used for "LOCALCOP," section headers, and the proclamation drop-caps at clamp(2.4rem, 6vw, 5.5rem). Letter-spacing 0.06em. This is the *Victorian charthouse* voice. - **Subheads / Labels / Telemetry:** "Major Mono Display" (Google Fonts) -- a wide, monospaced, slightly futuristic face with circular geometry. Used for depth readouts ("DEPTH 1240 M"), placard labels, knot markers, and all faux-telemetry. Uppercase, letter-spacing 0.12em, often in cyan. This is the *submersible instrument* voice. - **Body / Descriptions:** "Spectral" (Google Fonts) -- a refined, screen-optimized serif with a calm transitional structure that bridges the two extremes. Weights 300 and 500. Used at 1.05--1.2rem with generous 1.7 line-height for all running text. This is the *neutral connective tissue* that keeps the hybrid legible. The pairing is intentionally "wrong" -- antique small-caps next to circular tech-mono -- which is the eclectic-hybrid point: the artifact is a brass logbook wired into a future console. **Palette -- ocean-deep, a true bathymetric descent:** - `#02141f` -- **Abyssal Black-Blue** (deepest backgrounds, the close section, near-pure void) - `#06283d` -- **Bathyal Navy** (primary dark background for most sections) - `#0a3d5c` -- **Twilight Zone** (mid-tier section bands, card backgrounds) - `#11607f` -- **Sunlit Slope** (upper sections, hover-lit panels) - `#2fd0d6` -- **Bioluminescent Cyan** (primary accent: current lines, telemetry text, glowing seal, active states) - `#7defe6` -- **Cold Foam** (lighter cyan for hover glows and highlights) - `#c9a35b` -- **Tarnished Brass** (the Victorian counter-accent: engraved frames, corner spurs, drop-caps, the seal of office) - `#e8dcc0` -- **Vellum Ivory** (primary text on dark, headings, the warm "paper" note inside ornament cartouches) - `#9fb6c4` -- **Sounding Grey-Blue** (secondary/body text, captions, muted UI) Brass and bioluminescence are the two charge-states -- everything dormant is brass-edged; everything *active* (open placard, current depth, the cop "on patrol") flares cyan. Backgrounds get darker as you scroll, literally diving. ## Imagery and Motifs **Photography (the primary imagery mode):** - Deep-ocean and dive photography: shafts of light penetrating dark blue water, the surface seen from below, kelp silhouettes, the cold geometry of a submersible viewport, bioluminescent plankton trails, a single distant fish at depth. Every photo is **colour-graded to the ocean-deep ramp** -- crushed blacks, lifted cyan midtones, slight teal cast -- so all images read as one continuous water column. - Photographs are **always framed**: never bleeding raw to the edge, but mounted inside the engraved double-rule cartouche with brass corner spurs, like a porthole or a plate in a Victorian natural-history folio. A faint film grain (2--3%) sits over every image. **Victorian-ornate decorative system (all SVG, no raster):** - **Engraved cartouche frames** -- the recurring container: thin double rules with scrolled acanthus corner ornaments, available in brass (dormant) and cyan-glow (active) variants. - **The Seal of Office** -- a circular ornamental device: an anchor crossed with a magnifying glass, ringed by the words "LOCALCOP -- LOCAL CONSTABULARY OF CODE" in IM Fell SC, framed by laurel-and-rope filigree. Appears as a watermark in the hero and glowing at the close. This is the brand mark. - **Filigree-circuit hybrids** -- ornamental flourishes whose curling tendrils resolve, on close inspection, into circuit traces with tiny via-dots: the literal fusion of Victorian and futuristic. - **Current lines** -- diagonal hairline streaks that mark section cuts and animate gently like flowing water. **Futuristic instrument motifs:** - **Depth gauge** -- the persistent left-rail scroll indicator: a slim vertical scale with metre markings and a glowing cyan bug that descends as you scroll, plus a digital readout. - **Sounding line** -- the integration-timeline spine: a thin vertical rope-line with engraved knot-glyphs at milestones. - **Telemetry chips** -- small Major Mono Display readouts on placards: "FILES SCANNED 4,210 / WRITS 0 / STATUS: CLEAR" -- diegetic data, not marketing stats. ## Prompts for Implementation **Full-screen narrative experience -- a dive, not a scroll.** - **Opening (0--3.5s):** Page loads on Abyssal Black-Blue (`#02141f`). A single brass hairline draws itself across the centre of the viewport (2s, ease-in-out). It splits into the double-rule of the cartouche frame, which expands outward to bound the viewport with brass corner spurs animating in (rotate + fade). Inside, the Seal of Office *etches itself* via SVG path-draw in Tarnished Brass (acanthus ring first, then the crossed anchor-and-glass, then the lettering around the rim) over ~2.5s. As the seal completes, the wordmark "LOCALCOP" fades up in IM Fell English SC beneath it, and a Major Mono readout in the corner blinks to life: "DEPTH 0 M -- ON PATROL." A faint current-line streaks diagonally behind everything. - **The dive (scroll behaviour):** As the user scrolls, the background colour interpolates smoothly down the ocean-deep ramp (`#06283d` -> `#0a3d5c` -> `#11607f` reversing back into `#02141f` near the end). The left-rail depth gauge's cyan bug descends; its digital readout counts up smoothly (counter-animate) -- "412 M ... 980 M ... 2,300 M." Diagonal section cuts come into view with their current-lines drawing across at the section angle (path-draw-svg, triggered on scroll). Photographs slide up into their cartouche frames with a slight parallax lag between frame and image (the frame settles first, the photo drifts to rest). - **Section reveals (energetic, crisp):** Each diagonal section's content staggers in -- title first (IM Fell SC, slight rise + fade), then body columns (Spectral, fade), then telemetry chips (Major Mono, quick scale-from-0.96 with a tiny spring). Stagger interval ~80ms. Keep it *brisk* -- short durations (300--450ms), confident easing, no languid drifts. This tool is energetic. - **Progressive disclosure -- the patrol placards:** Each feature is a closed brass-cornered placard showing only its IM Fell SC title and a Major Mono label. On click: the placard expands along the section's diagonal axis (max-height + transform), its four ornamental corner spurs rotating outward ~30deg like opening calipers, the brass rules brightening to Bioluminescent Cyan and emitting a soft outer glow (box-shadow bloom). The interior fades in: a colour-graded deep-water photograph in its inner frame, a Spectral description, and a live-looking telemetry chip whose numbers tick up once on open. Opening a second placard smoothly collapses the first (corners rotating back, glow fading to brass). Use `prefers-reduced-motion` to swap the expansion for a simple fade. - **The sounding line (integration):** A thin vertical rope-line draws downward through the Manifest section as it enters view; engraved knot-glyphs pop in at each milestone with a small bounce, each accompanied by a step label in IM Fell SC and a Major Mono command snippet that types itself out (typewriter-effect) -- e.g. `localcop patrol --strict`. - **Close:** Background settles to Abyssal Black-Blue. The Seal of Office returns at centre, now rendered in Bioluminescent Cyan with a slow, breathing glow (subtle pulse, 4s cycle). One line of Spectral text beneath: a quiet sign-off in the harbor-master voice. The depth gauge reads its maximum and freezes. Nothing else -- no button grid, no pricing table, no stat wall. Just the constable's mark at the bottom of the dive. - **Micro-details:** Cursor leaves a faint cyan bioluminescent trail that fades over ~600ms. Brass ornaments have a barely-perceptible engraved-line shimmer on hover. The whole page carries a 2--3% film grain overlay and a very slight vignette to keep the "underwater" enclosure. **AVOID:** CTA-stacked hero sections, pricing tiers, three-up stat grids, generic SaaS feature cards, marquee logo walls, chat-bubble testimonials. The telemetry chips are *diegetic flavour* (in-world readouts), never conversion metrics. No horizontal hero bands -- every section divide is diagonal. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Victorian-maritime-constabulary + deep-sea-instrument fusion as a literal design system.** No other design pairs engraved acanthus cartouches and a brass "Seal of Office" with a holographic depth gauge and ROV-style telemetry. The "filigree that resolves into circuit traces" motif makes the antique/futuristic collision the *content*, not just a vibe -- a brass logbook wired into a future console. 2. **The page is a bathymetric descent.** Background colour literally interpolates down the ocean-deep ramp as you scroll; a persistent depth gauge counts metres; sections are named for ocean strata; the close is the abyssal floor. This is a navigational metaphor (a dive) rather than the museum-gallery, archaeological-dig, or commercial-portfolio metaphors used elsewhere. 3. **Diagonal everything.** Every single section boundary is an angled cut (4--9deg, alternating), reinforced by drawn current-lines at the same angle, and the progressive-disclosure placards expand *along* that diagonal axis with rotating ornamental corners. Few designs commit fully to diagonal-sections, and none combine it with caliper-style ornamental expansion. 4. **Eclectic-hybrid type with no compromise:** antique English small-caps (IM Fell English SC) directly against circular tech-mono (Major Mono Display), bridged by Spectral. The "wrongness" is deliberate and load-bearing. 5. **Energetic, not moody.** Against a portfolio where 94% of tones skew "mysterious-moody," this deep-ocean dark theme is played *brisk and confident* -- short, springy animations; a theatrical-harbor-master voice that's gleeful about catching bugs; bioluminescent flare on every active state. Dark water, bright energy. Chosen seed: **aesthetic: victorian-ornate, layout: diagonal-sections, typography: eclectic-hybrid, palette: ocean-deep, patterns: progressive-disclosure, imagery: photography, motifs: futuristic, tone: energetic** Avoided per frequency analysis: not using the dominant `corporate` aesthetic, `centered` layout, `mono`-only typography, `gradient`/`warm` palette default, `counter-animate`-as-stat-grid, or `mysterious-moody` tone. Leaning into underused `victorian-ornate` (1%), `eclectic-hybrid` (0%), `ocean-deep` (2%), and `futuristic` motif (8%), while deliberately steering photography (64%, common) through an unusual unified colour-grade so it doesn't read as generic stock imagery.