# Design Language for a6c.dev ## Aesthetics and Tone a6c.dev is staged as **a 1933 Trans-Pacific aviation bureau's technical announcement, projected through the glossy plastic optimism of a 2006 Windows Vista product reveal**. The conceit: an authoritative engineering ministry — letterhead, embossed seal, gold-foil monogram — that has been digitized onto a Bondi-blue translucent dashboard, the way a treasury department might publish a white paper if it were sponsored by a Frutiger-Aero ISP circa 2007. The domain string `a6c` is read three ways across the page: as the **hexadecimal byte 0xa6c** (the address of a register), as **A-Six-C** (a fictitious airframe designation, "Model A6C"), and as **the room number on a brass office door** at the Bureau of Developer Affairs. The mood is **authoritative, unhurried, and faintly ceremonial** — the cadence of a chairman's address, never the cadence of a startup pitch. There is no marketing, no sign-up, no "Get Started." The page behaves as if the visitor has already been admitted to a closed briefing and now must read what is on the wall. Frutiger-Aero's signature components — wet-glass orbs, ringed water-bubbles, chrome-rimmed lozenges, sky-and-meadow gradient backplates, lens-bloom highlights — are arranged not as decoration but as **the actual furniture of a stage set**: each gloss-button is a *cabochon* on the gilt frame of an art-deco proclamation. The result is the friction-collision between two confident-but-incompatible visual cultures (1933 Manhattan transport ministry vs. 2006 Redmond tech-optimism), held in equipoise so that neither wins. The page does not wink at the viewer. It is grave about its own absurdity. Inspirations, named explicitly: the **Chrysler Building lobby**'s African-marble inlays and Edward Trumbull ceiling mural; **Cassandre's 1935 Normandie poster**; the **Windows Vista Aero default wallpaper** ("Img1," by Hamad Darwish); the **first-generation iPhone calculator**'s lozenge keys; **A. M. Cassandre's "Dubonnet" man** as a moving icon set; the **embossed brass plaques** outside Rockefeller Center elevator banks; the **2007 Apple Keynote** glass-button presets at 92% opacity; **Sears Tower observation-deck** signage. None of these is quoted literally — they are crushed into a single visual paste that has the *authority* of the deco bureau and the *humidity* of Aero. ## Layout Motifs and Structure The composition is **layered-depth** in the aggressive, parallax-stacked sense — not glassmorphism's three-card-deep blur, but **seven discrete Z-planes**, each carrying one class of object, each translating at a different rate as the page scrolls. The effect resembles a **painted theatrical flat-stage** where flats slide independently, except each flat is a sheet of curved Lucite with its own internal gloss and Fresnel rim. This is the load-bearing structural conceit of the site. Z-plane inventory (back to front): 1. **Z-7 — Sky.** A meadow-and-cumulus gradient backplate, the Frutiger-Aero `bliss.jpg` translated into a CSS conic-and-radial composite (warm afternoon zenith, no horizon visible, only sky-into-meadow at the lowest 8vh). Translates at scroll rate × 0.05. 2. **Z-6 — The deco proclamation panel.** A single 14:9 gilt-bordered card, stretching to ~78vw, holding the chapter heading in art-deco display caps, gold-leaf-over-cream. Rate × 0.18. 3. **Z-5 — Geometric-shape ornaments.** Stepped ziggurats, sunburst rays, chevroned bands, Pan-Am-style globe medallions, **drawn as inline SVG with gold gradients** and a 1px micro-bevel. Rate × 0.32. 4. **Z-4 — Duotone-photographic vignettes.** Archival-style photographs (workshop interiors, blueprint tables, rotary phones, a hand on a slide-rule) treated in **duotone: bureau-bronze + cream-paper**, never full color. Rate × 0.50. 5. **Z-3 — The reading column.** A 56ch single column of body text, set on a pearl-translucent acrylic slab with a 4px chrome rim. Rate × 1.00 (locked to scroll). 6. **Z-2 — Aero glass orbs and ringed water-bubbles.** Floating, sized 24–96px, held in fixed positions but with a 6° `rotateY` parallax tied to cursor X. Rate × 1.18 (counter-scrolls). 7. **Z-1 — Cursor-bound highlight gleam.** A single 600px radial-bloom that follows the cursor at 80ms ease, multiplying onto every layer below. Rate: cursor. The grid governing horizontal placement is a **deco-ratio 12-column system** with a strict 1.272 (square root of phi) gutter, never a 1:1 gutter. Columns are 5.6vw wide, gutters are 7.1vw wide. This makes every block feel **slightly too widely set**, which is the deco-architectural sensation: the page breathes the way a 1930s lobby breathes, with too much marble between you and the next column. Vertical rhythm is **proclamation → annotation → exhibit → quiet** in a four-beat cycle, repeated nine times for a total scroll length of ~520vh. Each cycle takes the eye through: - A full-bleed deco proclamation panel (the headline, gilt, centered, all caps), - A right-margin annotation column (footnote-style text, 12px, set in a humanist serif), - A duotone-photo exhibit floating across the lower-third (offset 40% off-grid), - A 24vh of empty meadow-sky, holding nothing but two drifting Aero orbs. There is **no header navigation, no footer, no logo lockup, no menu, no page chrome**. The only persistent element is a small **brass plaque in the upper-left** reading `BUREAU 0xA6C · DEV.` — drawn as SVG, 14px tall, never larger. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with bureau-discipline.** - **Limelight** (display, regular only). Carries every chapter heading, every proclamation. This is the **art-deco-display** voice of the page — narrow, geometric, with the high-waisted "E" and tight aperture forms of 1928–1935 theater marquees. Set at 96px / 0.92 line-height for proclamations, 64px for chapter heads, **always tracked +120 letterspace**, **always set in `text-transform: uppercase`**, **always gold-foil over cream**. Limelight never appears below 32px on this site; smaller deco moments are handled by Poiret One. - **Poiret One** (display, regular). The secondary deco face, used for the brass-plaque wordmark, the chapter numbers ("CHAPTER · I"), the Pan-Am-style medallion captions ("MODEL · A6C · TRANSPACIFIC"), and the deco bullet markers. Set at 14–28px with +180 letterspace. Poiret One's hairline geometry pairs cleanly with Limelight's heavier ribs without competing. - **Newsreader** (variable, weight 400–700, optical size axis 6–72). The body and annotation voice. Newsreader is chosen *against* the deco display — a gentle, low-contrast humanist serif that quiets the proclamations, the way a typed memo lies on a marble desk. Body 17px / 1.6 / weight 420 / optical-size 17. Footnote 12px / 1.5 / weight 460 / optical-size 12. Pull-quote 22px italic / 1.45 / weight 500 / optical-size 22. Justification on, hyphenation on, the editorial tradition. **There is no monospace face on this site.** This is deliberate. The page refuses the 92%-prevalence mono convention; numerals and hex addresses (`0xA6C`, `0x10000000`) are set in **Newsreader's tabular-figures variant** (`font-variant-numeric: tabular-nums lining-nums`), which renders even hex constants as if they were column-aligned figures in a 1930s ledger. Numbers feel ledger-bound, not terminal-bound. **Palette — warm, eight values, named like deco-bureau pigment swatches:** - `#3B2310` **bureau-bronze** — primary foreground, used for body Newsreader, plaque text, deco rule lines. Reads as old ink on rag paper. - `#7B4A1D` **cordovan-leather** — secondary foreground, used for art-deco rule frames, chapter-number Poiret, and the chrome-rim *outer* edge of every Aero glass orb. - `#C8902B` **gold-foil** — the proclamation gilt. Used as the primary stroke and fill of every Limelight chapter heading, every ziggurat ornament, every sunburst ray. Always rendered with a 0–24% inner gradient toward `#E8B85A` so it reads as foil, not paint. - `#E8B85A` **gilt-highlight** — the gold's inner light, only used inside the foil gradient, never alone. - `#F4E8D2` **cream-paper** — the deco panel background, the reading column substrate. The base "page" tone. Slightly warmer than ivory, slightly cooler than buff. - `#FBF5E8` **vellum-mist** — the body-column acrylic translucent (used at 78% alpha). The aero "glass" beneath text. - `#7BC0D4` **frutiger-sky** — the warm-leaning sky-blue of the meadow backplate's upper third. Sits in the warm palette by being shifted toward green-cyan rather than pure blue, so it reads as 4pm afternoon, never noon. - `#B8D49A` **meadow-green** — the lower third of the backplate, the Aero `bliss` meadow tone. Gradient rule: the sky backplate is `radial-gradient(ellipse at 50% 38%, #FBF5E8 0%, #7BC0D4 28%, #B8D49A 92%, #C8902B 100%)` — the gold-foil at the lowest edge ties the deco palette into the Frutiger-Aero one, so the two cultures share a horizon. ## Imagery and Motifs **Three motif families, layered.** **1. Geometric-shapes (deco):** Ziggurats (3-step, gold-foil, 48px tall, used as section-break ornaments). Sunburst rays (24 rays, 5° aperture each, expanding from a 12px center disk, used at chapter boundaries). Chevron bands (6-chevron horizontal stripes, used as rule lines beneath proclamation headings). Pan-Am-style globe medallions (a circle quartered by latitude/longitude lines, with three flight-paths arcing across, gold-stroke 1.5px, 96px diameter, used once per chapter as the chapter-number frame). Stepped frames (every photograph is bordered by a 4-step deco frame, like a Chrysler-Building elevator door, drawn as SVG with a 0.5px chrome inner stroke and a 1.5px gold-foil outer stroke). All shapes are **inline SVG**, never raster. All are **counter-animated** — see below. **2. Frutiger-Aero hardware:** Wet-glass orbs (radial gradients with a 22% top-highlight crescent, 6% bottom under-glow, 1.5px chrome outer rim, 0.5px inner cream rim, sized 24–96px). Ringed water-bubbles (concentric translucent rings, 4 rings deep, 60% inner alpha to 0% outer). Lozenge buttons (Vista-style pill, 32×88px, gold-foil-on-cream, 4px corner radius — but they are never interactive, they are **furniture**, displayed as if photographed as a museum exhibit of "buttons no one will press"). Lens-bloom highlights (single 12px white-to-transparent radial dot, placed at the 11-o'clock position of every orb and lozenge). **3. Duotone-photo vignettes:** Twelve archival images, each treated in a strict two-tone gradient map: shadows mapped to `#3B2310` bureau-bronze, highlights mapped to `#F4E8D2` cream-paper, midtones interpolating linearly. No third color. Subjects: a 1930s drafting table with T-square; a brass-knobbed switchboard; a stack of carbon-paper memos; a Bakelite rotary telephone; a slide-rule mid-calculation; a hand turning a brass valve; a typewriter with a half-pulled page; an oscilloscope with a single sine trace; a row of filing-cabinet drawers; a teletype paper-tape spilling onto the floor; a gloved hand holding a single punched card; a wall clock at 3:47. Each photo is held in a deco-stepped frame (motif 1) and floated within a wet-glass orb housing (motif 2), so the duotone-photo *is* the cabochon stone of an Aero gem mounted in a deco setting. This recursive nesting is the central visual gag: **archival memory, encased in 2006 plastic, mounted in 1933 brass**. **Decorative typographic dingbats** (Poiret One special characters, recolored gold-foil): a single ❦ (floral heart) divides every paragraph cluster; a triple ⟡⟡⟡ (lozenges) closes every chapter; a long deco rule (custom SVG, not a unicode em-dash) terminates the page. ## Prompts for Implementation Build a6c.dev as **a single HTML document, one CSS file, one small ES module — no SPA, no router, no framework, no React, no build step beyond a single esbuild pass**. The page is one continuous vertical scroll, ~520vh, nine chapters, four-beat cycle per chapter. The visitor lands, reads, scrolls, leaves. There is no second page. The page does not link out. **Storytelling is the organizing principle, not navigation.** The nine chapters compose **a single fictional bureau memo announcing the airframe Model A6C, written as if the bureau had to describe a developer environment**: 1. *Frontispiece.* The title `BUREAU 0xA6C · TRANS-PACIFIC DEVELOPMENT DIVISION` in Limelight, 96px gold-foil, on cream-paper, framed by a Pan-Am globe medallion. Below: a single duotone-photo of the bureau's brass door plaque. The Aero meadow-sky backplate is at 100% opacity. Hold for 100vh. 2. *Charter.* Three justified Newsreader paragraphs explaining the bureau's mandate. A floating wet-glass orb at the right margin contains a single deco ziggurat. As the reader scrolls, the orb counter-animates upward at 1.18× scroll rate, while the ziggurat *inside* the orb counter-animates downward at 0.7× — so the ziggurat appears to **stand still in absolute space** while everything around it moves. 3. *The Airframe.* A duotone-photo of an oscilloscope (standing in for "the engine"), encased in a 480px Aero orb, mounted in a 4-step deco frame, captioned "MODEL · A6C · POWERPLANT." Annotation column at right. 4. *The Cockpit.* A grid of nine lozenge-buttons, each labeled in Poiret One with a fictitious instrument name (`MAGNETO`, `PITCH`, `RPM`, `OIL`, `FUEL`, `PRESS`, `EGT`, `VAC`, `CLOCK`). The buttons are never clickable. The cursor-gleam highlights one at a time as the reader scrolls past, gold-foil flooding into the lozenge for 600ms then receding. 5. *Range.* A Pan-Am globe medallion enlarges to 80vh, three flight-paths drawing themselves with `path-draw-svg` over 4 seconds, gold-foil stroke. The globe rotates 18° as the reader scrolls 100vh — the rotation is **counter-animated** to the scroll direction, so scrolling down rotates the globe *toward* the reader. 6. *Manifest.* A justified Newsreader column listing twenty fictional aircraft tail numbers, each set in tabular-nums (`N-A6C-001` through `N-A6C-020`), with a duotone-photo of a teletype paper-tape spilling diagonally across the column. The tape is a real `` path with 80 hand-drawn perforations. 7. *Maintenance Log.* The bureau-memo voice is sustained: "On the seventh of October, 1933, the third magneto…" — six paragraphs of bureau prose. A single Aero orb floats at center, holding a duotone-photo of a wall clock; the clock's second-hand is the only animation, sweeping in real time at 1Hz. 8. *Recommendation.* A full-bleed deco proclamation: `THE BUREAU RECOMMENDS · APPROVAL` in Limelight, gold-foil, on cream, framed by chevroned bands. No paragraph follows. The proclamation holds the viewport for 80vh, then dissolves. 9. *Colophon.* A small Newsreader column, 12px, listing the three fonts, the eight palette swatches, and the line "RENDERED IN BUREAU AERO · 1933 / 2006." The brass plaque in the upper-left is the only thing remaining as the page ends. **Animation rules — counter-animate is the load-bearing pattern.** Wherever a deco ornament sits inside an Aero orb, the ornament moves *opposite* to the orb on scroll (orb rises, ornament sinks, or vice versa) — making the ornament feel **gravitationally fixed in absolute world-space** while the Aero hardware floats around it. This is the visual signature of the site and must appear at least seven times across the nine chapters. Use IntersectionObserver to start each counter-pair, `transform: translateY()` on `requestAnimationFrame`, easing with a custom `cubic-bezier(0.22, 1, 0.36, 1)`. Never use scroll libraries; this is hand-rolled. **Cursor-gleam.** A single 600px radial-bloom div, fixed-positioned, follows pointer at 80ms ease-out via `transform: translate3d`. Mix-blend-mode `screen` over the cream layers, `overlay` over the bronze layers. On `pointer:coarse` (touch), the gleam locks to viewport center and scales 1.05 with a 4-second sine ease, so mobile readers still see the bureau breathing. **Page entrance.** On load: meadow-sky backplate fades in over 1.4 seconds. The brass plaque draws itself in 0.6 seconds (SVG `stroke-dasharray` reveal). The proclamation `BUREAU 0xA6C` types itself letter-by-letter in Limelight at 90ms per character, gold-foil flooding in behind each glyph 60ms after it lands. A single Aero orb materializes at 1200ms with a 600ms scale-from-0.6 + opacity-0-to-1 + 4px chrome-rim widening. Total entrance: 2.4 seconds. After entrance, no further auto-animations; everything is scroll- or cursor-driven. **Sound: none.** Bureau memos are silent. **Storytelling discipline:** every paragraph of body copy must read as the bureau's voice — measured, declarative, no contractions, no second-person, no exclamations. The page never asks the reader to do anything. There is no CTA, no pricing block, no stat-grid, no testimonials, no team section, no FAQ. The reader reads a bureau memo and leaves. ## Uniqueness Notes Seven differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Frutiger-Aero × Art-Deco crossover.** The frequency analysis shows frutiger-aero at 2% (one site) and art-deco-display typography at 2% (one site). **Their intersection is zero before this design.** The load-bearing conceit — 1933 bureau memo encased in 2006 Aero plastic — is the signature of a6c.dev and would be plagiarism if copied. No other site in the cohort fuses these two confident-but-incompatible visual cultures. 2. **Seven-plane parallax, not three-card glassmorphism.** The 92% prevalence of `parallax` in the corpus is almost universally a single hero-image translation. a6c.dev runs **seven simultaneous Z-planes** with seven distinct rates, including counter-scrolling planes (Z-2, Z-1) and locked-to-cursor planes (Z-1). This is layered-depth executed at theatrical-flat density. 3. **Counter-animate as a structural pattern, not a flourish.** The 10% counter-animate prevalence is mostly used once per page as an accent. Here, **counter-animate is the load-bearing motion grammar**: every deco ornament inside every Aero orb must move opposite to its housing on scroll. This appears at least seven times across nine chapters and produces the design's central visual gag — ornaments that feel gravitationally fixed in absolute space while their containers drift. 4. **No monospace face.** The 92% mono prevalence in the corpus is refused outright. Hex constants (`0xA6C`) are set in Newsreader's tabular-nums variant, so even register addresses look like 1930s ledger figures. The page commits to a no-terminal-DNA position. 5. **Recursive motif nesting: photo-in-orb-in-frame.** Every duotone-photo is *encased* in a wet-glass Aero orb, which is *mounted* in a deco-stepped frame. The recursion is the gag: archival memory, encased in 2006 plastic, mounted in 1933 brass. No other CMassC site uses this triple-encasement convention. 6. **Bureau-voice prose discipline.** Every paragraph is written as a fictional bureau memo: declarative, no contractions, no second-person, no CTAs. The page is **authoritative** in the precise sense — it speaks *down* to the reader from a position of granted authority — which contrasts with the corpus's dominant warm-inviting and pastoral-romantic registers (17% and 15% respectively). authoritative tone sits at 5% prevalence; this design takes it further than any current instance by sustaining bureau-voice across 520vh with zero marketing language. 7. **Deco-ratio gutter (1.272, √φ).** The horizontal grid uses a √φ gutter rather than a 1:1 or 1.618 ratio, producing the *too-widely-set* sensation of a 1933 marble lobby. No other site in the cohort grids on √φ, and the ratio is documentable in a single CSS custom property (`--gutter-ratio: 1.272`). **Chosen seed (from assignment):** aesthetic: frutiger-aero · layout: layered-depth · typography: art-deco-display · palette: warm · patterns: counter-animate · imagery: duotone-photo · motifs: geometric-shapes · tone: authoritative. **Avoided patterns from frequency analysis:** glassmorphism (65%, refused — the page uses Aero gloss, not blur-card glass), hand-drawn (90%, refused — every line is geometric SVG), photography in full color (95%, refused — every photo is duotone), monospace typography (92%, refused — Newsreader tabular-nums replaces it), card-grid layout (55%, refused — the page is a single scrolling proclamation), full-bleed (85%, refused — the page is layered-depth with no full-bleed cards), generic warm-inviting tone (17%, refused — bureau-voice is authoritative), parallax-as-single-hero (92%, refused — seven Z-planes), gradient-mesh imagery (17%, refused — palette gradients are radial deco-foil, not mesh).