# Design Language for a6c.dev

## Aesthetics and Tone

`a6c.dev` is a **developer's holographic field notebook** — but the hologram is *aged*. Imagine a 1974 transistor-radio repair manual that has been laminated in iridescent foil and left in a south-facing window for fifteen years. The foil still refracts, but the refraction now passes through tea-stained mylar and dust. The page glints when you tilt it, and the glint is not chrome-blue or laser-pink — it is muted plum, dusty teal, oxidized copper, and bone.

The site is the inside of a senior engineer's brain at the moment they are explaining something. It is **conversational, never instructional** — first-person, low-stakes, with the cadence of a friend who has stayed up late solving the problem you are about to ask about. Headlines are spoken, not declared. The voice is the voice of the cursor: it asks, it pauses, it concedes, it wonders out loud. There are no badges, no "Trusted by," no logos-on-grey strip. The site reads like the comments at the top of a `.c` file written by someone who likes both Donald Knuth and Joy Division.

The mood sits at the cross of three references that do not normally meet:

- **Plate IX of a 1973 IEEE Transactions journal** — half-tone diagrams of integrated circuits, crisp black ink on cream paper, with tiny serif captions and the smell of warm laminate.
- **A diffraction-grating sticker on a kid's Trapper Keeper, c. 1989**, faded — its rainbow now reduced to four ghost-colors that drift across the surface like an oil slick on a parking-lot puddle.
- **A late-night terminal session** where the developer is muttering to themselves in the comments, and the muttering is the documentation.

The aesthetic verdict: **holographic, but with the holography filtered through forty years of cigarette smoke and library light.** Iridescence as memory rather than novelty. A circuit board recovered from a thrift-store calculator, photographed under museum-glass.

## Layout Motifs and Structure

The page is **strictly centered** — a single 720px reading column that holds the conversational spine of the entire site. This is deliberate counter-programming against the registry's 85% full-bleed rate: a6c.dev is **a column, not a canvas**. But the centeredness is not a Medium-blog centeredness. The column lives inside a wider **circuit-board substrate** that bleeds to the viewport edges, and the relationship between the column (the conversation) and the substrate (the machine that hosts the conversation) is the entire structural metaphor.

Concrete rules:

- **The Conversation Column** (720px, centered). All prose, code blocks, and inline diagrams live here. It is set on a 12-line baseline grid of 28px. Vertical rhythm is sacred and never broken.
- **The Substrate** (full viewport behind the column). A schematic-printed-circuit pattern at 12% opacity, drawn in `#3F4A52` line on `#E8E0CF` paper. The traces do not loop randomly — they **route from one heading anchor to the next**, so headings on the page are literal pads on a literal board, and the board's copper visibly connects them. Scroll moves the column; the substrate stays fixed and parallax-free, so the column reads as a tape pulled through a circuit reader.
- **The Margin Cursor**. To the left of the column, in the ~22vw gutter, lives a thin vertical lane (40px wide) reserved for the **cursor's history**. As the user moves their mouse, the lane records a trailing 1px polyline in muted plum (`#7A4A5C`) — a literal seismograph of the reading session. The lane resets on each new section. It is the only thing in the gutter; the right gutter is empty on purpose, to acknowledge the asymmetry of left-to-right reading.
- **Prism Cells**. Three places on the page — never more — display a **holographic data-viz cell**: a 320×320 square that contains a small chart (a sparkline of commit cadence; a polar plot of dependency depth; a Voronoi of API call latency). Each cell is rendered as if etched into a sheet of diffraction film: the chart's strokes catch the cursor's position and refract through the four ghost-colors of the palette in a 7-degree arc, never further.
- **No grid of cards. No three-up feature blocks. No CTA strip.** The only repeating structural unit is the **paragraph**, and paragraphs are sometimes interrupted by a `<aside class="footnote-circuit">` that branches into the substrate as a soldered trace, with a tiny mirror-foil endpoint a few inches away. Footnotes are physical destinations, not popups.
- **Section transitions** are marked by a **single horizontal hairline trace** (1px, `#3F4A52`) that begins at the right margin of the column, runs into the substrate, makes one 90-degree turn, and terminates at a small filled square — the via that connects to the next "layer" of the board (the next section).

The layout reads top-to-bottom as one continuous trace, never as a magazine of independent panels.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Display & headings — `Fraunces`** (variable, opsz 9–144, wght 100–900, soft optical). Set headings at opsz 144, wght 380, with a +0.7 SOFT axis to introduce the era-correct optical mush. H1 is 64px, italic, set in the column gutter so its descenders breach the column rule. As the cursor approaches a heading from below, the heading's `wght` axis ticks from 380 to 520 across 240ms — a small living swell. This is the **expressive-variable** seed-requirement, treated as breath rather than decoration.
- **Body — `Newsreader`** (variable, opsz 6–72, wght 200–800). Set at 17px / 28px line-height, opsz 16, wght 380. Newsreader is chosen because its optical-size axis was modeled on actual newsprint scans from the era of the 1973 IEEE journal reference; at body size it is gently mushy in a way that pairs with the holographic film grain.
- **Code & captions — `JetBrains Mono`** (variable, wght 100–800, italic). Used sparingly, only for inline tokens, code blocks, and substrate labels (resistor codes, IC pin numbers). 14px / 22px. Captions get italic at wght 360.
- **Numerals — Fraunces tabular figures**, used for any chart axis, footnote indicator, or version stamp. Tabular figures are required so the data-viz grids align to the substrate.

The cursor-follow effect is a **second typographic axis**: in headings only, the variable `OPSZ` axis is bound to the cursor's vertical distance from the heading. Far cursor → opsz 12 (display-bold, condensed apertures). Near cursor → opsz 144 (open, leisurely apertures). The heading widens its vowels as you approach. No other site in the registry uses cursor-distance as an opsz driver.

**Palette — Muted Vintage Holographic** (eight colors, all named):

- `#E8E0CF` — **Bone Paper**: the laminated cream of the 1973 journal, primary background.
- `#D9CDB6` — **Tea Stain**: a darker companion for the substrate's negative space and quiet panels.
- `#3F4A52` — **Soldered Slate**: the trace ink, all body text, all rule lines. Not black — black would betray the era.
- `#7A4A5C` — **Plum Phosphor**: cursor lane, primary accent, a vintage-CRT pinkish-rust.
- `#5C7A78` — **Oxidized Teal**: secondary accent, used for code-token highlight and for one of the four holographic ghost-colors.
- `#A88A4E` — **Oxidized Copper**: tertiary accent, used on circuit pads, vias, and the trace endpoints.
- `#9E9CB0` — **Mylar Lavender**: the third ghost-color, for hover-states on inline links.
- `#C4B294` — **Bone Shadow**: a 30%-mix between Bone Paper and Soldered Slate, used only inside the holographic prism cells to ground the diffraction.

The palette explicitly refuses **warm gradient** (95% / 90% in the registry). There are no gradients except inside the three Prism Cells, and even there the gradient is constructed from the four named ghost-colors — Plum Phosphor → Mylar Lavender → Oxidized Teal → Oxidized Copper — never a CSS `linear-gradient(blue, purple)`.

## Imagery and Motifs

The site has **no photographs**. The registry shows photography at 85% — a6c.dev opts out entirely. Instead, all imagery is **schematic** and **data-driven**:

- **Substrate circuitry**: a hand-routed printed-circuit-board diagram drawn at 0.6 px stroke, with rounded rectangle pads (6×10 px), drilled vias (3 px circles with 1.2 px copper rings), and traces that respect a 45/90-degree-only routing rule. The board is not generated randomly — its topology is **the site's information architecture**, drawn as a board. Pads are anchored to heading positions; resistors are paragraph dividers; ICs are aside callouts. The whole site is a literal schematic of itself.
- **Holographic foil overlays** on the three Prism Cells: SVG `<filter>` chains using `feTurbulence` (baseFrequency 0.011) + `feDisplacementMap` + `feColorMatrix` rotated through the four ghost-colors. The foil is animated at 0.4 turns per minute so it never reads as flashy — it reads as a sheet of mylar caught in slow window light. When the cursor is over a Prism Cell, the foil "tilts" toward the cursor with a 7-degree max excursion.
- **Data-viz primitives** as the page's only "art":
  - A **sparkline** of the developer's git commit cadence over the last 365 days (one pixel per day, plotted on a 365×64 strip), shown inline with text — never as a hero.
  - A **Voronoi diagram** of the dependency tree of one specific tool the page is talking about, rendered with cells colored in the ghost-palette and labelled at 9px JetBrains Mono.
  - A **polar plot** of the page's own structure — sections at compass bearings, with arc-length proportional to word-count. The plot updates as the user reads (the arc they have read fills with Plum Phosphor at 30% alpha).
  - A **timing-diagram** strip (digital-logic style, square-wave traces in Soldered Slate on Bone Paper) used as a section divider once, depicting the rise-time of a single network request as if it were a logic signal. Captions: `CLK`, `REQ`, `ACK`, `DATA`.
- **Iconography** is exclusively the symbolic language of EE schematics — resistor zigzag, capacitor parallel-bars, ground triple-rake, op-amp triangle, diode arrow. These are used for nav, for inline emphasis, and for footnote markers. There are no Feather/Lucide/Heroicons. There is no smiley, no rocket, no lightbulb.
- **Decorative pattern: dot-matrix Halftone** at 14% Bone Shadow, applied only to the inside of `<aside>` callouts, so callouts feel like a different paper-stock pasted onto the main sheet.
- **The cursor itself** is a custom SVG: a tiny circuit probe (a sharp tip with a coiled wire receding off-screen at 30 degrees). The probe leaves a 12-pixel afterimage trail in Plum Phosphor, fading over 600ms. This is the "cursor-follow" seed-requirement, expressed as a probe rather than as a glow.

## Prompts for Implementation

Build this as **a single long-scrolling letter from one developer to another**, told in the second person (`you`), centered, paced like a conversation rather than a pitch. The implementation must obey three vows:

**Vow 1 — The page is a circuit, and the circuit is the information architecture.**

Before writing any markup, draw the substrate. The substrate is a single SVG that lives in `position: fixed` behind the column. It contains:

- A pad at the y-position of every `<h2>` and `<h3>` in the document. Pads are anchored at runtime using `getBoundingClientRect`.
- Traces routing pad-to-pad along Manhattan paths (45/90 degrees only), drawn with `stroke-dasharray` so they animate-in on scroll.
- ICs (rectangles with pin-rakes) at the position of each `<aside>`.
- Vias (small drilled circles) wherever an inline link points to another section in the same page; the link draws a hairline trace from itself, through the gutter, to the target's via.

When the page first loads, the substrate is invisible. Then the traces draw themselves in over 1.4 seconds, one trunk-trace at a time, like a board being soldered. Once drawn, they remain static — no parallax, no shimmer.

**Vow 2 — The cursor is the protagonist.**

The cursor is the user's hand on a probe. Implementation:

- Replace the OS cursor with the custom SVG probe (CSS `cursor: url(...) 2 2`).
- Track cursor on `mousemove` (rAF-throttled). Maintain a 24-point ring buffer of recent positions, drawn as a polyline in the left gutter lane at 1px Plum Phosphor, fading from alpha 1.0 (head) to alpha 0.05 (tail).
- The probe's afterimage is a `<canvas>` overlay rendered at devicePixelRatio, refreshed every frame, with each step decaying by 0.92.
- Headings react: when the cursor is within 360px (vertical) of a heading, the heading's variable-font axes interpolate `wght` from 380→520 and `opsz` from 12→144 with `cubic-bezier(.2,.7,.1,1)`, 240ms.
- The three Prism Cells receive `transform: perspective(900px) rotateX(...) rotateY(...)` capped at ±7 degrees, driven by cursor offset from cell center. The SVG holographic filter's `feColorMatrix hueRotate` is also bound to the cursor's angle around the cell center — so the cell's holographic surface "rotates" with you.
- When the cursor leaves the page (`mouseout` to `<html>`), the probe's afterimage continues drifting for 1.6 seconds, decaying like a stuck oscilloscope trace.

**Vow 3 — The voice is one developer talking to one developer.**

Copy is written second-person, lowercase first letter on most paragraphs, with em-dashes and parentheticals — the cadence of a code-review comment. Replace any "Get Started" or "Sign Up" with `// you can follow along here`. Replace "Pricing" with `// what this costs to run`. Replace headings with **questions** the cursor seems to be asking the page: `what is this thing, exactly?`, `but does it actually compile?`, `how do you keep state, then?`. Headings are *interrogative*, not nominal.

**The narrative arc (one continuous scroll):**

1. **Address line.** The page opens with a single line of JetBrains Mono, dim, top-centered: `// for whoever is reading this at 2 a.m.`. Below it, the H1 in Fraunces 64px italic: `you found a6c.dev.` The substrate has not yet drawn itself; the page is a blank cream sheet.
2. **The probe arrives.** As soon as the user moves their mouse, the probe cursor appears, the Plum Phosphor lane begins recording, and the substrate solders itself in across 1.4 seconds.
3. **The first paragraph** is a confession: a developer admitting that they registered this domain to give a name to the part of their work they don't usually talk about. No product is described; instead, a *practice* is described.
4. **First Prism Cell** appears centered: a Voronoi of the dependencies of one tool the developer uses every day. Cursor-driven holography. Caption: `// the things i depend on, sized by how many lines they cost me last year.`
5. **A circuit footnote branches** into the substrate, with a soldered endpoint that, when hovered, expands an aside about a specific bug at 03:14 a.m. on a specific date.
6. **The middle of the page** is a long quiet stretch — six paragraphs, no decoration, just the column and the cursor and the slow drift of the substrate. The polar plot in the right corner of the viewport (small, 120px) updates as the reader progresses.
7. **Second Prism Cell**: the timing-diagram strip, animated to "scrub" through one second of a network request as the user scrolls past it.
8. **Third Prism Cell**: the developer's own commit sparkline, with a Plum-Phosphor underline marking the day the domain was first registered.
9. **Closing.** The H2 reads: `is this a portfolio? not really.` The final paragraph is one sentence and a hairline trace that runs off the bottom of the viewport, into the substrate, with a soldered endpoint just visible in the last 24 pixels.
10. **No footer.** No social links. No newsletter capture. The page ends with a single `// thanks for reading this far.` in JetBrains Mono and the cursor's probe, still recording.

**Performance notes for narrative integrity** (not for Lighthouse): the substrate SVG must draw on a single `requestAnimationFrame` budget and remain static thereafter. The Plum Phosphor trail canvas runs at 30fps to feel slightly analog rather than slick. The variable-font axis transitions must use `font-variation-settings` with CSS transitions, not JS interpolation, so the breath feels native.

**Avoid absolutely:** carousels, accordions of FAQs, three-column feature grids, "as seen in" logo strips, pricing tables, testimonial quote cards, phone-mockup shots, gradient buttons, hero photos of laptops, and any phrase that includes the words "powerful," "seamless," "elevate," or "unlock."

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **holographic**, layout = **centered**, typography = **expressive-variable**, palette = **muted-vintage**, patterns = **cursor-follow**, imagery = **data-viz**, motifs = **circuit**, tone = **conversational**.

**Differentiators from every other design in the registry:**

1. **The page is its own schematic.** The decorative substrate is not random circuitry — it is a literal printed-circuit-board diagram of the site's own information architecture, computed at runtime from the DOM. Headings are pads, asides are integrated circuits, intra-page links are vias with traces routed through the gutter. No other design in the registry binds decorative line-work to live document structure. (Counters the registry's 75% reliance on "vintage" as a decorative motif by making *circuitry* the structural motif instead — circuit appears in only 10% of designs and is here load-bearing rather than ornamental.)

2. **Cursor-distance as a typographic axis.** Headings interpolate Fraunces' `opsz` axis based on the cursor's *vertical* distance to them. This treats the variable-font optical-size axis — which is normally bound to font-size — as a cursor-driven property. Cursor-follow is at 10% in the registry and expressive-variable is at 15%; nobody combines them into "the heading widens its apertures as your hand approaches." This is the primary kinetic identity of the site.

3. **The Plum Phosphor cursor lane.** A permanent left-gutter polyline that records the user's mouse path as a 1px seismograph of the reading session. It is not a generic cursor-trail effect — it is a *gutter element*, anchored to the column, persisted per section, and intentionally narrow. It treats the gutter as instrumentation rather than as whitespace.

4. **A muted-vintage palette refusing warm gradients.** With warm at 95% and gradient at 90% across the corpus, this design eliminates both. The palette is **eight named pigments**, all desaturated, all era-correct to 1970s laminated print, with the only gradient occurring inside three named Prism Cells and constructed exclusively from the four "ghost-colors" of the palette. No `linear-gradient(orange, pink)` exists in this stylesheet.

5. **Centered as a counter-pattern.** Centered occurs at 85% in the registry as a *layout choice* but is almost always paired with full-bleed (also 85%). a6c.dev is centered **without** full-bleed — a single 720px reading column on a substrate that is the width of the viewport but not the focus of it. This is "centered as a column," not "centered as a hero."

6. **No photographs, no stock illustration, no icon library.** Imagery is exclusively (a) the schematic substrate, (b) three holographic data-viz cells, and (c) electrical-engineering glyphs (resistor, capacitor, ground, op-amp, diode). Photography is at 85% in the registry; this design opts out completely. Data-viz appears in 5% of designs; here it is the primary art form.

7. **Conversational voice as second-person code-comment.** Copy is written as `//` comments to the reader, lowercase, em-dash-heavy, with H2 headings phrased as questions the cursor seems to be asking. The conversational tone (10% in the registry) is treated as developer-to-developer pair-programming rather than as marketing-warm.

**Patterns avoided per frequency analysis:** parallax (80%, used only as a deliberate static-substrate refusal), hand-drawn aesthetic (75%, replaced by schematic precision), photography (85%, removed entirely), full-bleed (85%, replaced by 720px column), warm gradient palette (95%/90%, replaced by eight desaturated pigments), mono-only typography (90%, replaced by Fraunces + Newsreader + JetBrains Mono in proportion 1:6:1), vintage-as-decoration (75%, replaced by vintage-as-color-temperature applied to a holographic technology motif).
<!-- DESIGN STAMP
  timestamp: 2026-05-04T19:56:02
  domain: a6c.dev
  seed: seed
  aesthetic: `a6c.dev` is a **developer's holographic field notebook** — but the hologram is ...
  content_hash: b3e3ac59a316
-->