# Design Language for a6c.xyz ## Aesthetics and Tone a6c.xyz is a **pastel cyberpunk dossier** — the project archive of a fictional municipal cybernetics bureau that operates out of a converted bakery. The premise: imagine the year is 2087, neon has been outlawed by zoning ordinance, and every cyberpunk operative has been rebranded as a *civic clerk*. They still run the wires through the walls; they just file the paperwork in clotted-cream folders, type the manifestos in slab-serif courthouse formal, and stamp the duotone surveillance photos with butter-yellow seals. The whole site reads like a leaked file cabinet from an extremely polite dystopia — Blade Runner's evidence room, repainted in the colors of a 1962 Hallmark card and bound with linen tape. The dominant tone is **authoritative** — measured, slightly bureaucratic, capital letters used sparingly but with weight. There is no spectacle, no glow, no synth-drone. Where conventional cyberpunk sites assault with chromatic aberration and midnight blues, a6c.xyz speaks in the quiet voice of a department head reading aloud from a redacted memo. The mood is *cool surveillance under warm light* — the camera is on, but it's a Polaroid and someone wrote your name on the white border in fountain pen. Inspirations: Chris Marker's *La Jetée* stills printed on cream cardstock, Saul Bass title-card sequences slowed to 12 fps, the index pages of 1970s Library of Congress catalogs, Wes Anderson's *The French Dispatch* if it had been about hackers, and the calm interiors of a Tokyo postal sorting office at 4 AM. The site is unsettling not because it shouts, but because it never raises its voice while telling you that everything you do is being filed in triplicate, alphabetically, by butter-soft hands. ## Layout Motifs and Structure The page is built on a **persistent left sidebar dossier** — a 320px-wide vertical column pinned to the left edge of the viewport that functions simultaneously as navigation, table-of-contents, and *case file spine*. The sidebar is not a hamburger-collapsible afterthought; it is the load-bearing visual element of the entire site, present at every scroll position, never animated away. It carries: the case number `A6C-XYZ // FILE-No. 0087-Δ`, the file's "classification stamp" rendered as a rotated SVG seal in butter-yellow ink, a vertical stack of section anchors set in slab-serif small caps with `letter-spacing: 0.18em`, and a slow blinking cursor at the bottom that pulses once every 2.4 seconds — the only animated element on the sidebar, evoking a 1980s mainframe terminal that someone forgot to log out of. To the right of the sidebar, the main content area unfolds as a **vertically stacked sequence of dossier folios**, each rendered as a full-width "page" with a soft drop-shadow and 64–96px of internal padding. Folios are separated by **grid-line interstitial bands** — 24px-tall horizontal strips filled with a 4×24 micro-grid of 1px hairlines in `#A89A7C`, evoking the punched-card guides of a vintage IBM data-entry form. These bands are not decorative noise; they are *structural* — they function as the seams of the dossier's binding. Within each folio, the grid is a **strict 8-column layout with explicit gutter alignment** — content columns 1–5 carry the document body, columns 6–8 carry marginalia (timestamps, file cross-references, translator's notes, redaction stamps). The marginalia column is *always* set in 11px monospace and aligned `vertical-align: text-top`, never centered. A faint 0.5px guide line separates body from marginalia at column 5/6 — visible at 20% opacity, enough to confirm the grid without dominating it. This deliberate **grid-lines motif** is reinforced everywhere: section dividers are double rules (1px + 1px with 4px gap), every image is bordered with a 2px slab of `#3B2F1E`, and the corner of every folio carries a tiny `+` registration mark at 18px×18px — the kind printers use to align color plates. There is **no centered hero**, **no card grid**, **no full-bleed photography**. The site refuses the modern "above the fold" attention economy and replaces it with the rhythm of a person turning the pages of a clothbound report. ## Typography and Palette **Type stack — Google Fonts only:** - **Slab-serif headline & section face:** `Roboto Slab` (variable axes: weight 100–900). Used at 56–88px for folio titles like "I. INTERCEPT LOG // 04:18 LOCAL" and "IV. SUBJECT INTERVIEW, REEL 3," with `font-variation-settings: "wght" 740`, `letter-spacing: -0.01em`, and `text-transform: uppercase` for top-level headings only. Roboto Slab's broad, courtroom-confident slab terminals carry the *authoritative* tone without veering into Old West western — modern, civic, slightly intimidating. - **Secondary slab — running heads & captions:** `Bitter` (variable: weight 100–900, italic). Used at 14–18px for marginalia, photo captions, and dossier metadata. Bitter is a "screen-first slab" — softer than Roboto Slab, reads at small sizes without breaking down. Set captions in italic 400 to differentiate from body running heads in upright 600. - **Body & long-form prose:** `Source Serif 4` at 17px / 1.62 line-height for the main document body. Source Serif 4's transitional, Library-of-Congress feel pairs with the slab headlines exactly the way a chapter title in 36pt Clarendon pairs with 11pt Linotype Baskerville on the page beneath it. This is *not* a sans-serif site; even at body weight, the design refuses the digital-modernist default. - **Monospace — file numbers, timestamps, redactions:** `JetBrains Mono` at 11–13px for everything that mimics machine output: `FILE-No.`, timestamps formatted `2087-04-18T04:18:32Z`, hex-encoded "intercept fragments," and the recurring stamp text `[CLASSIFIED // CIVIC USE ONLY]`. Used in `#3B2F1E` on cream — never bright green, never terminal-glow. **Palette — creamy-pastel cyberpunk (8 hex values):** - `#F5EAD2` — **Clotted Cream**. Primary page background. The ground tone — every folio sits on this. Slightly warm, slightly desaturated, *barely* off-white. Like the inside of a manila envelope that was cream-colored to begin with. - `#EDDDB6` — **Butter Margin**. Sidebar background, marginalia rule fills, and stamped seals. Two clicks darker than the page — enough to read as a *separate paper stock*. - `#3B2F1E` — **Bureau Ink**. The primary text and rule-line color. Warm-black, never `#000`. Reads as fountain-pen iron-gall on cream cardstock. - `#7A2E2E` — **Redaction Burgundy**. Used exclusively for redaction bars, "TOP" in classification stamps, and the cursor-follow highlight (a 2px-tall underline, never a glow). Dark red on cream is the historic palette of every *real* dossier ever filed. - `#3D5A4C` — **Surveillance Sage**. Secondary accent — used for status pills, link underlines, and the duotone shadow channel of every photograph. A muted forest-green that whispers "this is monitored" instead of shouting it. - `#A89A7C` — **Hairline Olive**. The grid-line color. Every 1px rule, every dotted guide, every 4×24 micro-grid is rendered in this dusty olive — visible against cream at 20–40% opacity, invisible against butter. - `#D4A05C` — **Stamp Yellow**. The seal/stamp ink. Used for the rotated SVG classification seal in the sidebar, the `URGENT` corner flag, and the registration `+` marks. A burnt mustard that reads as *aged rubber-stamp pad*. - `#9DA3B0` — **Cold Glass**. The single cool-tone accent — used for hover states on links, the tiny "live" indicator dot in the sidebar, and the duotone highlight channel of every photograph. The only blueish color on the site, and even it is desaturated nearly to gray. This is where the *cyberpunk* hides. ## Imagery and Motifs **Duotone photography is the visual through-line.** Every photograph on the site — and there are exactly 12, no more — is processed into a strict two-color duotone using `#3D5A4C` (Surveillance Sage) for the shadows and `#9DA3B0` (Cold Glass) for the highlights, with mid-tones interpolated linearly. No third color, no gradient mesh, no overlay tint. This is achieved with a CSS `` element applying `feColorMatrix` in `matrix` mode — handcrafted, not an Instagram preset. The result: every photo on the page reads as a *surveillance contact print* developed in chemicals that ran out of the warm spectrum forty years ago. Subjects are always cropped tight, always lit from one side, always pinned to the page with four small `+` registration marks at the corners. **Grid-lines as recurring motif** appear at five scales: 1. The 4×24 micro-grid in interstitial bands (24px tall). 2. The 8-column body grid (visible as a 0.5px guide at column 5/6). 3. The full-folio outer border (2px `#3B2F1E`). 4. The classification-stamp inner crosshatch (a 6×6 grid of dots in Stamp Yellow, rotated 18°). 5. The page-margin "punched-card" perforations — a vertical column of 14 tiny circles at 8px diameter, 24px on-center, rendered down the right edge of each folio at 30% opacity. **Decorative motifs** include: rotated rubber-stamp seals (`[CIVIC BUREAU 087]`, `[CHECKED // 04·18]`, `[FILE COPY]`) drawn entirely in SVG with deliberate ink-pooling artifacts at the stroke ends; a recurring **file-clip illustration** at the top of each folio — a single trombone paper clip in `#3B2F1E` line-art, slightly askew, no two folios with the same clip angle; **redaction bars** rendered as solid `#7A2E2E` rectangles with a 1px `#3B2F1E` border and a tiny serial number set in JetBrains Mono 9px floating above them; and a **single recurring icon**: a small isometric-line drawing of an open card-catalog drawer, used as the favicon, the 404 illustration, and the visual punctuation between major sections. No emoji. No stock vectors. No 3D renders. The **cyberpunk content** lives entirely in the *text*, not the visuals: file names reference WAN intercepts, neural-implant hearings, jurisdictional disputes between municipal AIs, "subject coercion via predictive caching." The visual surface is calm cream-and-ink. The dissonance between the bureaucratic visual register and the cyberpunk subject matter is the entire creative engine of the site. ## Prompts for Implementation Build a6c.xyz as a **single long-scroll dossier** with a persistent left sidebar — a single HTML document, no SPA, no route-based navigation. The reader's experience should be that of a clerk handed a sealed file, told "this is everything we have," and left alone in a quiet reading room. **Sidebar (persistent, 320px, full viewport height):** - Render the sidebar with `position: fixed; top: 0; left: 0; bottom: 0; width: 320px; background: #EDDDB6;` and a 1px right border in `#A89A7C`. The main content sits at `margin-left: 320px`. - At the top of the sidebar: a 96×96px SVG classification seal — concentric circles, the word `BUREAU` arching across the top, `0087-Δ` arching across the bottom, a small star at center, all in `#D4A05C` ink with `mix-blend-mode: multiply` to bleed into the butter-margin paper texture beneath. Rotate the seal `-7deg` and stamp it slightly off-center — never aligned to the grid. The imperfection is the point. - Below the seal, the **table of contents** as a vertical list: nine entries, each set in Roboto Slab uppercase 13px / `letter-spacing: 0.18em` / `font-weight: 600`, prefixed by a Roman numeral in JetBrains Mono. Active section is marked with a 2px solid `#7A2E2E` left bar, never a glow, never a fill. The current scroll position should drive which entry is "active" via `IntersectionObserver`. - At the bottom of the sidebar, fixed: a single line of JetBrains Mono 11px reading `[CONNECTED // 04:18:32Z]` followed by a single character cursor `█` that pulses opacity 100→25→100 over 2.4s, infinite. This is the *only* animated element in the sidebar. **Main content — nine folios stacked vertically:** Each folio is a `section` with `min-height: 100vh`, `padding: 96px 8% 64px 8%`, a `1px solid #A89A7C` separator at top, and a small `+` registration mark in each corner. The 8-column grid is implemented with `display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 24px;`. Body text occupies columns 1–5; marginalia columns 6–8. 1. **Folio I — Cover Sheet.** No photo. Just the file title set in Roboto Slab 88px / weight 720, the case number in JetBrains Mono 14px below it, and a single rotated `[CLASSIFIED // CIVIC USE ONLY]` stamp in Stamp Yellow at `transform: rotate(8deg)` overlapping the title. Below: a one-paragraph "ABSTRACT" in Source Serif 4, max 280 characters. The first three words drop in with a **spring** animation (CSS `@keyframes` with `cubic-bezier(0.34, 1.56, 0.64, 1)`) on initial page load — overshooting slightly, settling. The rest of the paragraph is already in place. 2. **Folio II — Intercept Log.** Three duotone photographs stacked vertically (each 480×320), each with a four-line caption block in Bitter italic 14px directly below. Photos enter the viewport with a **spring** scale animation: `transform: scale(0.92) → scale(1)` over 480ms with overshoot, triggered by `IntersectionObserver` at 30% visible. Spring should feel like a paper print being clipped onto a corkboard, not like a UI bounce. 3. **Folio III — Subject Dossier.** A two-column split: left column body text in Source Serif 4 describing the subject, right column a duotone portrait with marginalia annotations connected to the photograph by **hand-drawn 1px SVG leader lines** (no straight CSS borders — actual `path` elements with `stroke-dasharray` that draw themselves on scroll-trigger over 1.2s). Each annotation describes a feature: "implant scar, posterior auricular," "wear pattern on left cuff suggests right-handed dominance." The annotations appear in JetBrains Mono 11px. 4. **Folio IV — Transcript.** Set entirely in body text — no images. The transcript is rendered as a long alternating-speaker dialogue, each speaker label in Roboto Slab small caps, the dialogue itself in Source Serif 4. **Redaction bars** (solid `#7A2E2E` rectangles, 1.4em wide, height matched to line-height) appear inline in the text approximately every 8 lines, each with a serial number in JetBrains Mono 9px floating just above. On hover of any redaction bar, the cursor changes to `not-allowed` and a tiny tooltip in JetBrains Mono reads `// REDACTED PER C.B. PROTOCOL 14.2`. No reveal — clicking does nothing. The redactions are *real*. 5. **Folio V — Map Plate.** A single full-width SVG schematic — a stylized municipal grid with intersections marked in `#A89A7C` hairlines, three nodes circled in `#7A2E2E`, and a curving dashed line traced between them representing the subject's movement. The dashed line draws itself over 2.4s on scroll-enter using `stroke-dasharray` animation. Around the map, eight marginalia notes in Bitter italic with leader lines pointing at specific intersections. 6. **Folio VI — Photographic Evidence.** Three more duotone photographs in a horizontal row across the full grid, each labeled "PLATE A," "PLATE B," "PLATE C" in Roboto Slab small caps. Below each, a four-line technical caption: aperture, shutter, location, observer initials. On hover, each photo gently scales to 1.04 with a **spring** ease over 320ms — paper lifting off the page. 7. **Folio VII — Marginalia Spread.** A deliberate "blank" folio: just the cream background, the corner registration marks, and a single hand-drawn fountain-pen note in the margin (rendered as inline SVG with a `pencil` filter `feTurbulence` displacement at 0.4 baseFrequency to give the stroke that wobble of a real nib). The note reads, in cursive: *"see also: file 0091-Ω, cross-reference 14:7"*. Nothing else. The page is *the punctuation*. 8. **Folio VIII — Index.** A two-column index, alphabetical, of every cross-referenced file mentioned in the dossier. Set in Bitter 13px, each entry a thin underline that draws itself in **spring** ease on hover. 9. **Folio IX — Colophon.** The sign-off: a paragraph in Source Serif 4 declaring the dossier closed, the date, the bureau seal again at 64×64, and a final rubber-stamp `[FILE COMPLETE // 04·18·2087]` rotated `-3deg`. The page ends with a single horizontal `1px #A89A7C` rule and 320px of empty cream space below — the exhale. **Animation philosophy — spring as the only motion.** Every transition on the site uses a spring curve (`cubic-bezier(0.34, 1.56, 0.64, 1)` or close variants). No linear fades, no ease-out slides, no parallax. Spring is the *only* dynamic vocabulary because it evokes physical paper — clipping, settling, pinning. Spring durations stay short (320–680ms). Nothing should feel "modern web" — everything should feel like a hand placing a sheet on a desk and it bouncing once before settling. **Cursor-follow note:** No cursor-trailing dot, no spotlight effect. The only cursor interaction is the redaction-bar `not-allowed` and a subtle 1px `#7A2E2E` underline that **draws itself in spring** under any interactive text within 240ms of cursor entering its bounding box. **Typography is the hero.** Almost every visual moment on this site is a typographic moment. Trust the slab. Trust the cream. Trust the silence. **Avoid:** CTA buttons, pricing blocks, stat grids, hero parallax, glowing neon, RGB chromatic aberration, terminal green, dark mode, signup forms, social icons, testimonial blocks, cookie banners visible in the hero, hamburger menus, sticky CTAs, "Get Started" anything. The site does not want you to do anything. It wants you to *read*. ## Uniqueness Notes This design's distinct departures from the rest of the registry — and from every standard cyberpunk template ever written: 1. **Cyberpunk in cream.** The frequency analysis shows `cyberpunk` aesthetic at 10% of the registry, but every existing instance pairs it with `dark-neon`, `midnight-blue`, or `chrome-metallic`. a6c.xyz pairs **cyberpunk** with **creamy-pastel** — the *only* such pairing. The result is an entire visual vocabulary (pastel cyberpunk dossier) that does not exist elsewhere in the batch. The cyberpunk content lives in the text; the visual register is municipal-civilian. 2. **Slab-serif as the dominant face.** The registry shows `slab-serif` typography at only 5% — and `mono` typography at 92%. a6c.xyz inverts the default: slab-serif (Roboto Slab + Bitter) is the page's voice; monospace is reserved for *machine artifacts* (file numbers, redaction serials, stamps) and never used for body or headlines. This is the opposite of every cyberpunk site in the registry. 3. **Duotone-photo at 2% becomes the imagery hero.** The frequency analysis shows `duotone-photo` at exactly 2% — essentially unused. a6c.xyz makes it the *exclusive* imagery treatment: every photograph on the site is a Surveillance Sage / Cold Glass duotone, processed by an authored `feColorMatrix` filter, with no third color permitted. This is not a stylistic flourish — it is the photographic *grammar* of the site. 4. **Sidebar layout with a stamped, rotated seal as load-bearing element.** Sidebar layout is at 17% — common enough — but no other site in the registry uses the sidebar as a *case-file spine* with a rotated SVG classification seal as its anchor. The sidebar here is not navigation: it is the *binding* of the dossier. 5. **Spring as the only animation pattern.** Spring is at 62% — popular — but always paired with parallax, stagger, or cursor-follow. a6c.xyz uses spring as the *only* motion vocabulary, with parallax (92%), cursor-follow (50%), and stagger (62%) all explicitly forbidden. The result: a site that moves only when paper would move. 6. **Grid-lines as five-scale fractal motif.** Grid-lines appear in many designs as background decoration. Here, the same motif (1px hairlines in `#A89A7C`) is used at five distinct *physical* scales — micro-grid bands, body-column guide, folio outer border, stamp crosshatch, punched-card perforations — each scale carrying a different semantic role. This is grid-lines used as *information architecture*, not background. 7. **Authoritative tone without corporate aesthetic.** The registry shows `authoritative` tone at only 5%, almost always paired with corporate or fintech aesthetics. a6c.xyz pairs authoritative with cyberpunk-bureaucratic — the cold formality of a courthouse memo applied to subject matter that includes neural implants and predictive caching. The dissonance is the design. 8. **Refusal of every CTA-driven web pattern.** No CTAs. No pricing. No stat grids. No hero parallax. No "Get Started." The site is a closed document for reading, not a funnel for converting. This refusal — explicit, structural, total — is itself a uniqueness statement. **Chosen seed:** `aesthetic: cyberpunk, layout: sidebar, typography: slab-serif, palette: creamy-pastel, patterns: spring, imagery: duotone-photo, motifs: grid-lines, tone: authoritative`. **Avoided patterns from frequency analysis:** parallax (92% — refused), mono typography as hero (92% — relegated to machine artifacts only), photography as raster (95% — replaced with strict duotone-only), warm/gradient palette (90% each — replaced with creamy-pastel + sage/glass duotone accents), full-bleed layout (85% — replaced with bordered folios on cream ground), card-grid (55% — refused entirely), centered hero (72% — refused entirely), hand-drawn aesthetic (90% — refused; only the marginalia note is hand-drawn, and even that is filtered SVG).