# Design Language for a6c.boo

## Aesthetics and Tone

The domain is two jokes folded into each other. **`a6c`** is a CSS short-hex color — `#aa66cc`, a soft lilac-violet that browsers have whispered to designers for thirty years. **`.boo`** is the friendliest sound in the English language — a child jumping out from behind a curtain, a small ghost in a bedsheet, a Victorian valentine that refuses to be scary. The site treats this name as a **floral conservatory haunted by a polite ghost**: a Victorian botanical plate pinned to the wall of an empty greenhouse, where the lilac in the illustration occasionally **flickers, slips one channel, and resettles** as if the printer were possessed by a very shy spirit.

The aesthetic is **flat-design**, but flat in the way a botanical lithograph from 1887 is flat — no gradients, no glassmorphism, no soft shadows, no "skeuomorphic depth." Everything is a single solid color or its duotone partner, with the only texture coming from **the line-weight of a custom-drawn botanical illustration** and from **deliberate channel-separation glitches** that misregister the two ink plates by one to four pixels. The greenhouse is empty but the plants are absolutely paying attention.

Tone is **whimsical-creative**: the page should feel like a love-letter from a phantom to a fern. It is *not* spooky, *not* horror-aesthetic, *not* cyberpunk-glitch. The glitch is a giggle. The ghost is a gardener. The serif headings introduce themselves with the grace of a Latin plate label and then occasionally trip over their own ribbon and apologize. Copywriting voice is closer to a hand-illuminated seed catalog than to a tech homepage.

The site rejects the corpus's two dominant tones (professional 15%, friendly 15%) and the dominant aesthetic clusters (hand-drawn 75%, editorial 50%, glassmorphism 30%) in favor of a combination — **flat-design + serif-classic + duotone + custom botanical illustration with glitch flourishes** — that does not appear anywhere else in the registry.

## Layout Motifs and Structure

The composition is **strictly centered** — every primary element sits on a single vertical axis running down the middle of the viewport — but the *interpretation* of "centered" is unusual. The corpus uses centered (85%) almost exclusively for hero stacks above CTAs. Here, centered means **the column of an herbarium specimen sheet**: one tall, narrow column down the middle of the page, the way a pressed flower is mounted on a 11×17 archival sheet with handwritten margins on either side.

**Macro structure: the Specimen Sheet.**
- The viewport is divided into three vertical regions: a **left margin (16% width)** for handwritten ghost-marginalia in mauve script, a **center column (clamp 32rem to 48rem, max 56% width)** for the primary content stack, and a **right margin (16% width)** for taxonomic labels, Latin binomials, dates of pressing, and the occasional very small drawing of a moth.
- The center column is one continuous **scroll-as-specimen-sheet** experience. There is no horizontal scrolling, no parallax-layer-stacking (the corpus has parallax at 80% — we deliberately abstain), and no sidebar nav.
- Section breaks are marked by **pressed-flower dividers**: a single hand-drawn botanical plate centered between sections, separated by a thin lilac rule above and below, with a Latin date in small caps to its right (e.g., `Coll. III · MDCCC·LXVII`).

**The Five Plates (sections of the page):**
1. **The Frontispiece** — a single full-viewport plate: domain wordmark `a6c.boo` set in classical serif italic at huge optical size, with a custom-illustrated bouquet of lilacs, ferns, and forget-me-nots drawn around it. A small bedsheet-ghost peeks from behind the largest fern, blinking once every nine seconds.
2. **The Index of Apparitions** — a centered single-column table of contents styled as a **plate index** from a 19th-century botanical folio. Each row: roman numeral · plant common name · plant Latin name · page-marker glyph (a tiny ghost emoji in mauve). Hovering a row glitches the lilac channel of the corresponding entry by 2px to the right and back.
3. **The Specimen Cards** — three to five centered "specimen mounts," each a tall card (max-width 38rem) containing one custom illustration above, one classical serif paragraph below, and a typewritten label taped to the lower-right corner with a tiny piece of mauve washi tape (drawn, not a real image).
4. **The Pressed Correspondence** — a center column of "letters from the ghost," each a short paragraph in serif-italic, signed with a hand-drawn ghost-glyph and dated in Roman numerals. Each letter occasionally **mis-prints**: the lilac plate slides one pixel left of the ink plate, holds for 80ms, slides back. The mis-print is the ghost adjusting its glasses.
5. **The Colophon Plate** — a final centered specimen card stating, in small caps and a single elegant block: *Drawn, set, and haunted in the year MMXXVI. Pressed in two colors: lilac and ink. The ghost remains.*

**Margins as architecture, not decoration.** Unlike the corpus's full-bleed dominance (85%), this site is unapologetically **margin-rich**. The empty space on either side of the specimen column is the greenhouse air. Tiny ghost-marginalia drift through it — small handwritten notes, taxonomic asides, a doodle of a snail, a date crossed out and rewritten — appearing on scroll-trigger but never advancing the user past the central column. The reader's job is to read the specimen sheet, not to chase calls to action. There are **no CTA buttons, no pricing tables, no stat-grids, no testimonial carousels**. There is one centered column of plants and a ghost commenting on them.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Display / Plate Titles**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic for the wordmark and section frontispieces, weight 500 upright for plate titles. Cormorant Garamond is the modern revival of Claude Garamont's 16th-century romans — it carries the exact weightless optical grace of a 19th-century plant lithograph caption. Set the wordmark `a6c.boo` at clamp(6rem, 14vw, 14rem), italic, with the period of `.boo` rendered as a tiny custom SVG ghost-dot rather than a glyph period.
- **Body / Specimen Notes**: [`EB Garamond`](https://fonts.google.com/specimen/EB Garamond), regular 400 and italic 400 only — no bold. EB Garamond is Georg Duffner's faithful digitization of the 1592 Egenolff-Berner specimen, the same matrices that set most botanical scholarship from 1600 to 1900. Body copy at 1.125rem, leading 1.7, measure 38rem max. Ligatures (`liga`, `dlig`, `hlig`) all enabled. **No sans-serif fallbacks** — if Garamond fails to load, the page must wait, in absolute respect for serif-classic typography. Mono is forbidden anywhere on this site (the corpus has mono at 90% — we abstain on principle).
- **Marginalia / Ghost Hand**: [`Imperial Script`](https://fonts.google.com/specimen/Imperial+Script) for the ghost's handwritten marginalia in the left margin. Imperial Script is a true Spencerian copperplate — looped, breathy, slightly haunted. Used at 0.95rem only.
- **Small Caps & Roman Numerals**: [`IM Fell English SC`](https://fonts.google.com/specimen/IM Fell English SC) for dates, plate numbers, and the colophon. IM Fell English is digitized directly from John Fell's 17th-century Oxford types, with deliberately preserved letterpress imperfections — every glyph leans about half a degree because the original punches did. This single typeface is the site's letterpress conscience.

**Palette (strict duotone — exactly two inks):**

The site is printed, conceptually, in **two ink plates only** — `Lilac` and `Ink`. Every color on the page is one of these two, or a tint/shade derived strictly from them by overlay opacity. There are no accent colors, no warning reds, no success greens. The palette is non-negotiable.

- **Lilac (a6c plate)**: `#aa66cc` — the literal expansion of `#a6c`, the domain itself. This is the ghost's color, the lilac petal, the watermark.
- **Ink (substrate plate)**: `#1a1224` — a deep aubergine-near-black, what you get if you mix the two CSS short-hex inks `#103` (deep purple) and `#000` and let them dry. This is every line, every serif, every leaf-vein.
- **Paper (background)**: `#f6efe1` — a warm uncoated cream, the color of 100-year-old herbarium card stock. It is *not* white; pure white is forbidden.
- **Tints used (for misregistration ghosting only):**
  - Lilac at 60% over Paper → `#c79de0` (the soft halo when the lilac plate slides)
  - Ink at 80% over Paper → `#3a2c44` (the marginalia on shadowed days)
  - Ink at 12% over Paper → `#e8e0d0` (the faintest underlay, used for the rule lines beneath plate titles)
- **Forbidden:** any saturated red, any green, any blue, any pure white, any black. The duotone is the law.

The palette deliberately rejects the corpus dominants (warm 95%, gradient 90%) by being **exactly two inks with zero gradients**. Every "color transition" on the page is achieved by *channel separation* (sliding the lilac plate by 1–4 pixels), not by gradient stops.

## Imagery and Motifs

**All imagery is custom-illustration** — drawn from scratch as inline SVG, single ink color (always `Ink`), single line weight (1.5px stroke, no fills, no gradients, no shading hatches except where structural). No photography (the corpus has photography at 85% — we abstain entirely). No stock vectors. No icon fonts.

**The botanical roster (recurring custom illustrations, drawn for this site):**
- **Lilac sprig** (*Syringa vulgaris*) — the wordmark companion, four-petal florets in ink-line, with a ghost-dot hovering above one petal.
- **Maidenhair fern** (*Adiantum capillus-veneris*) — used as section dividers, drawn as a single continuous fan of fronds.
- **Forget-me-nots** (*Myosotis sylvatica*) — five-petal star clusters used as bullet markers in lists.
- **Lily-of-the-valley** (*Convallaria majalis*) — drooping bell flowers, used vertically as the left-margin anchor of each specimen card.
- **Pressed violets** (*Viola odorata*) — used flat against the page as the "pressed" decorative element on the colophon plate.
- **Dried hydrangea floret** — the largest illustration, used as the frontispiece centerpiece behind the wordmark.
- **A single ghost-snail** (*Helix umbra*) — drawn once, in the right margin of plate IV, slowly tracking from bottom to top across the entire scroll length over the user's full reading session.

**The ghost (recurring whimsical motif):**
A small bedsheet-ghost — a single oval with two oval eye-holes, drawn in `Lilac` with a 1px `Ink` outline — appears in seven specific places on the page. It is **not a mascot**, it is a **resident**. It is always small (28px to 64px). It blinks (eye-holes briefly close as horizontal lines) on a 9-second cycle. When the user pauses scrolling for more than 6 seconds, the ghost in the nearest section wiggles once (rotation: -3deg → +3deg → 0, total duration 600ms, ease-out elastic). The ghost is the only thing on the page rendered in `Lilac` solid; everything else is line-art `Ink` on `Paper`.

**Glitch as floral language.** The glitch pattern is not RGB-channel cyberpunk. It is **two-plate misregistration**, the same mechanical hiccup that haunts a 19th-century chromolithograph when the press operator fed one sheet slightly off-square. Implementation:
- Each illustration is rendered twice in the DOM: once in `Ink`, once in `Lilac`, perfectly stacked with `mix-blend-mode: multiply` against the `Paper` background.
- On scroll-into-view, on hover, and at random 12–30 second intervals, the `Lilac` layer translates by `(±1px to ±4px, ±0px to ±2px)`, holds for 60–140ms, and snaps back. Total displacement per event never exceeds 4px to keep the illustration recognizable.
- The glitch never destroys legibility. It is **a flinch, not a corruption**. It is the ghost adjusting the print.

**Marginalia as recurring decoration.** Hand-written ghost notes (set in Imperial Script) populate the margins: `pressed III·VII·MDCCC·LXVII`, `the lilac smells of paper`, `scared the librarian, sorry`, `please water my friends`, `ghost-snail count: 1`, `MOTH on plate IV at minute 3:19`. These never repeat across page loads — there is a curated set of 24 marginalia and the page picks 11 to render at random, in slightly randomized rotations between -2.5deg and +2.5deg.

## Prompts for Implementation

**The story to tell.** A visitor opens an old herbarium volume bound in cream paper. The volume contains pressed lilacs, ferns, and forget-me-nots, each annotated by a polite ghost who has been alone in the conservatory for one hundred and fifty-nine years and is delighted to have company. The visitor scrolls through five plates of specimens; the ghost occasionally waves, occasionally bumps the printing press by accident, and signs off in copperplate at the colophon. The page does not sell anything. The page does not ask for an email. The page does not benchmark the visitor's attention. The page **introduces the visitor to a small collection of plants and to a ghost who looks after them**.

**Implementation arc, plate by plate:**

1. **Frontispiece arrival.** Page loads on a `Paper` background. The hydrangea SVG fades in over 1.6s (opacity 0 to 1, no movement). Once the hydrangea is at full opacity, the wordmark `a6c.boo` types in **as serif glyphs, one at a time, every 110ms**, with the small ghost-dot replacing the period of `.boo` and immediately blinking once. The ghost-dot then drifts up about 12px and settles, hovering. The whole sequence: 3.4 seconds. No skip button is provided. There is no scroll prompt; the user is trusted to scroll.

2. **Index of Apparitions.** A centered `<dl>` of seven entries (one per plate). Each entry is a row: `<dt>` is the roman numeral and the common name in EB Garamond italic; `<dd>` is the Latin binomial in EB Garamond regular small-caps. A hand-drawn forget-me-not glyph leads each row. On hover, the entire row's lilac layer slides 3px right for 90ms — the glitch is the hover affordance. No underlines, no color changes, no buttons.

3. **Specimen Cards (the three middle plates).** Each card is a single centered `<article>`, max-width 38rem, with the structure:
   - **Plate number** (small caps, IM Fell English SC, e.g., `Pl. III`).
   - **Common name** (Cormorant Garamond italic, weight 500, 3.6rem).
   - **Latin binomial** (EB Garamond italic, 1.4rem).
   - **The illustration** (custom inline SVG, both ink layers, ~360px tall).
   - **The note** (a 2-paragraph EB Garamond regular block; voice is the ghost's own, addressing the plant directly).
   - **The taped label** (a small absolutely-positioned div in IM Fell English SC, rotated -1.4deg, with two custom-drawn washi-tape strips at the corners in Lilac).
   On scroll into view (IntersectionObserver, threshold 0.4), the SVG fades in at 0.9s ease-out. Once in view, **the plant illustration breathes**: the entire SVG group scales between 1.000 and 1.006 on a 4.2-second sine cycle. Imperceptible at first glance, present on attention. The glitch fires at random within each card every 14–22 seconds.

4. **Pressed Correspondence (Plate IV).** A vertical stack of four short letters, each in EB Garamond italic, each closed by a hand-drawn ghost-glyph signature. The fourth letter contains the ghost-snail: a 24px snail SVG anchored in the right margin that, across the entire scroll length of the page, travels upward at a constant rate calculated from `document.scrollHeight` — by the time the user reaches the colophon, the snail has reached the top margin. The snail leaves a 1px `Lilac` trail at 30% opacity behind it, drawn into a `<canvas>` overlay; the trail fades over 60 seconds. This is the only `<canvas>` on the page.

5. **Colophon Plate.** A single centered specimen card. Pressed-violet illustration. The line *"Drawn, set, and haunted in the year MMXXVI."* sets in IM Fell English SC. Beneath it: *"Pressed in two colors: lilac and ink. The ghost remains."* The ghost on this final plate is twice the size of all previous ghosts (96px) and **does not blink**. It is watching the visitor leave. The page ends; there is no footer-nav, no share-bar, no related-content carousel.

**Animation rules of conduct.**
- **No parallax.** The corpus has 80% parallax saturation; this site refuses depth-layering. Everything sits flat on the specimen sheet.
- **No scroll-triggered slide-ins from the side.** Reveals are opacity-only or scale-only, always centered, always perpendicular to the scroll direction.
- **All easing is `cubic-bezier(0.32, 0.72, 0.24, 1)`** — a soft custom curve named `--ease-pressed-flower`. No bouncy springs, no elastic, no overshoot. Plants do not overshoot.
- **The glitch is the only "energetic" motion.** It is fast (60–140ms), small (≤4px), and always two-plate misregistration. It never appears more than once per second across the entire page.
- **Reduced motion (`prefers-reduced-motion: reduce`)**: ghosts stop blinking, plants stop breathing, the lilac plate stops glitching, the snail still travels but on a 30-minute cycle instead of scroll-coupled. The site remains beautiful in stillness.

**Technical sketch.**
- Single static HTML page. No framework. No build step beyond a CSS bundle.
- One `<style>` block defining the duotone variables, the centered specimen grid (CSS subgrid for the three-column macro), and the keyframes for blink, breathe, glitch.
- One `<script>` for: IntersectionObserver fade-ins, the ghost-snail scroll mapping, the random marginalia picker, the random glitch timer, and the reduced-motion gate.
- Custom-drawn SVGs are inlined in the HTML — never `<img>`, never external files. Every SVG carries a `<title>` with the plant's common name and a `<desc>` with its Latin binomial; the ghost has `<title>a small polite ghost</title>`.
- Web fonts via `<link rel="preconnect">` to Google Fonts; `font-display: block` (we wait for serif), but with a 1.5s timeout fallback to the system serif.

**Forbidden implementations** (both because of the seed and because of the corpus the site is differentiating against):
- No CTA buttons. No newsletter signup. No social-share row. No pricing block. No statistics grid. No testimonial section. No team-photo strip. No FAQ accordion.
- No mono typography. No sans-serif typography. No gradient backgrounds. No glassmorphism. No parallax. No 3D tilt. No cursor-follow elements (the ghost does not chase the cursor — it has its own life).
- No images of real photographs of plants. Only custom illustration.
- No accent colors outside the duotone.

The page is finished when a person can scroll from frontispiece to colophon, read every Latin name aloud, count the seven ghosts, watch the snail arrive, and feel like they have spent ten minutes in a quiet greenhouse with a friend.

## Uniqueness Notes

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

1. **Strict two-plate duotone with mechanical-misregistration glitch as the *only* motion accent.** The corpus uses glitch (10%) almost exclusively as cyberpunk RGB-channel-split decoration. This site re-frames glitch as **19th-century chromolithograph misregistration** — the lilac ink plate sliding 1–4px off the ink plate, then snapping back. It is glitch as letterpress hiccup, not glitch as digital corruption. No other registry entry pairs glitch with botanical illustration or with a strict two-ink palette.

2. **Custom-illustrated botanical herbarium as the entire site, with photography fully forbidden.** The corpus has photography at 85% and almost no custom illustration. This site is 100% custom inline SVG line-art (lilacs, ferns, forget-me-nots, lily-of-the-valley, hydrangea, violets, a snail, a ghost) — no stock vectors, no icon fonts, no photographs. Every visual element was drawn for this site.

3. **Centered specimen-sheet column with margin-rich, full-bleed-rejecting structure.** Centered (85%) and full-bleed (85%) are the two corpus dominants and are usually used together for hero stacks. This site keeps centered but rejects full-bleed, giving the page a 16% / 56% / 16% three-column herbarium architecture where the side margins are *active rendered space* (ghost marginalia in Imperial Script copperplate) rather than empty padding.

4. **Serif-classic-only typography with mono explicitly forbidden.** The corpus has mono at 90% and serif-classic at 5%. This site uses Cormorant Garamond, EB Garamond, IM Fell English SC, and Imperial Script — four classical serif/script faces, zero monospace, zero sans-serif. EB Garamond's matrices are a faithful 1592 digitization; this is the oldest typographic conscience in the corpus.

5. **A polite ghost as a recurring narrative resident, not a mascot.** The ghost appears seven times, blinks on a 9-second cycle, wiggles after 6 seconds of user idleness, and grows to twice its size on the colophon to watch the visitor leave. It is the site's tone (whimsical-creative) made physical. No other registry entry has a recurring blinking character anchored to user idleness.

6. **The ghost-snail's scroll-coupled migration.** A single 24px snail in the right margin travels from the bottom of the page to the top, mapped 1:1 to the user's scroll position, leaving a 30%-opacity 1px trail in `Lilac` rendered to a single canvas overlay. The snail completes its journey exactly when the user reaches the colophon. This is the only canvas use on the page and the only persistent stateful element. No other registry design uses scroll-coupled character migration.

7. **No CTAs, no pricing, no stats, no testimonials, no footer-nav.** The page tells one story (an herbarium visit) and ends. The corpus's CTA-rhythm and stat-grid conventions are absent by design.

**Avoided patterns from frequency analysis:**
- **Aesthetic** — abstained from hand-drawn (75%), editorial (50%), swiss (35%), minimalist (30%), glassmorphism (30%) by choosing **flat-design** (0% in corpus, fully fresh).
- **Imagery** — abstained from photography (85%) entirely; chose **custom-illustration** (effectively absent).
- **Layout** — kept centered (85%) but abstained from full-bleed (85%) and asymmetric (40%); the centered column is interpreted as an herbarium specimen sheet, an unusual reading.
- **Motifs** — abstained from vintage (75%); chose **floral-botanical** (5%, underused).
- **Palette** — abstained from warm (95%) and gradient (90%); chose strict **duotone** (10%, underused) with **zero gradients** anywhere on the page.
- **Patterns** — abstained from parallax (80%), scroll-triggered (50%), stagger (50%); chose **glitch** (5%, underused) and reframed it as letterpress misregistration.
- **Tone** — abstained from professional (15%) and friendly (15%); chose **whimsical-creative** (5%, underused).
- **Typography** — abstained from mono (90%) entirely; chose **serif-classic** (5%, underused) with four classical faces and no fallback to sans.

**Chosen seed (from assignment):** `aesthetic: flat-design, layout: centered, typography: serif-classic, palette: duotone, patterns: glitch, imagery: custom-illustration, motifs: floral-botanical, tone: whimsical-creative`. All eight axes drive a single coherent artifact: **a Victorian herbarium printed in two inks, haunted by a small polite ghost, where the only thing that misbehaves is the printing press**.
<!-- DESIGN STAMP
  timestamp: 2026-05-04T22:45:57
  seed: seed
  aesthetic: The domain is two jokes folded into each other. **`a6c`** is a CSS short-hex col...
  content_hash: 9444963a627c
-->