# Design Language for penclos.com ## Aesthetics and Tone penclos.com is the catalogue-vitrine of **Pen Clos** — an imaginary closed atelier of fountain-pen makers, a "clos" in the vineyard sense: a single walled enclosure where every nib is ground by hand and every barrel is turned, lacquered, and laid to rest under glass. The site is not a shop and not a blog; it is a **lacquered cabinet of curiosities for writing instruments**, presented with the geometric pageantry of 1925-Paris **art-deco ornate luxury**: sunburst marquetry, stepped ziggurat frames, fan-pleated chevrons, fluted black columns, and gilt hairlines drawn with a draughtsman's compass. The mood is **opulent-grand and elegant-sophisticated** — a hushed, lamp-lit jewel-room, the kind of cabinet you'd find behind a brass cage in a Right Bank passage. Everything is symmetrical until the moment a pen tilts; everything is still until ink moves. Nothing here shouts; the luxury is in the *restraint of the ornament* — deco discipline, not deco excess. There is no "Add to cart," no "Limited drop," no countdown. The visitor is a guest being shown the maker's private vitrine, one piece at a time, the way a sommelier decants without comment. ## Layout Motifs and Structure The page is a **single vertical procession of seven lacquered "plates"** — think the numbered colour plates of a 1920s deluxe-edition portfolio — each plate a full-viewport **stepped-ziggurat frame** (a black-and-gilt border that recedes inward in three crisp 6px terraces, like the silhouette of the Chrysler crown). Within each frame the composition is **strictly bilaterally symmetric on a central plumb-line**: a vertical gilt hairline runs floor-to-ceiling down the exact centre of every plate, and the pen specimen for that plate stands *on* that line like an obelisk on its axis. Flanking the centre line, **fan-pleated chevron panels** open left and right at a fixed 22.5° pleat, in alternating matte-black and deep-lacquer-green facets — these are the only "columns." Captions live in a slim horizontal **cartouche bar** pinned to the lower third: a stepped lozenge of brushed brass holding the plate number (engraved deco numerals) on the left, the pen's name centred, and a single line of provenance on the right. **No top navigation, no hamburger, no logo lockup, no footer slab, no sidebar.** Navigation is a **vertical gilt "ruler"** down the far right margin — seven engraved tick-marks, one per plate, with a tiny diamond bead that slides to the active tick. The seven plates: 01 the workshop threshold, 02 the nib, 03 the barrel-turning, 04 the lacquer (urushi), 05 the clip & cap-band, 06 the ink, 07 the closing of the clos (a gate). Negative space (the deco "void of the cartouche") is generous: each specimen floats with at least 18vh of clear lacquer above and below it. **Avoided:** the 91%-common card-grid, the 88%-common full-bleed photo hero, the 34%-common dashboard, the 14%-common bento-box. ## Typography and Palette **Type system — Google Fonts only:** - **Display / plate titles & deco numerals:** `Poiret One` (regular 400) — a true geometric art-deco face with the thin, circular, compass-drawn strokes of 1920s poster lettering; used at large sizes (clamp 3rem–6.5rem), letter-spacing `0.14em`, always uppercase for plate titles. Its perfect-circle bowls echo the sunburst motif. - **Secondary display / cartouche names:** `Cinzel Decorative` (regular 400, bold 700) — engraved Roman capitals with subtle deco flares; reserved for the pen names inside the brass cartouche bar, letter-spacing `0.22em`. - **Body / provenance lines & captions:** `Marcellus` (regular 400) — a refined humanist serif with classical proportions and a lapidary feel; runs at 1.05rem–1.2rem, line-height 1.75, letter-spacing `0.02em`. Calm, literate, never busy. - **Micro-labels / ruler ticks / index numerals:** `Marcellus SC` (small-caps) at 0.72rem, letter-spacing `0.34em`. Deliberately **no monospace anywhere** (the corpus is 94% mono — this is a clean break). **Palette (deep lacquer + brass, a restrained deco quintet):** - `#0B0B0C` — *Lacquer Black* (primary ground; the cabinet's japanned interior) - `#13261C` — *Clos Green* (deep bottle-green lacquer; alternating chevron facets, plate 03 & 06 grounds) - `#C9A75B` — *Atelier Brass* (primary metal; hairlines, ziggurat terraces, ruler, cartouche) - `#E7D8B0` — *Pale Vellum* (warm off-white for body text and the deluxe-portfolio paper texture) - `#7C1F2B` — *Inkwell Garnet* (the single accent — wax-seal red / oxblood ink; used only for the active diamond bead, the ink-flow on plate 06, and the closing gate's keyhole) - `#1E3A2E` — *Verdigris Shadow* (a darker green for inner ziggurat terrace shadows and chevron seams) Gradients are used **only** as a faint vertical brass-to-shadow sheen on metal surfaces (≤8% luminance shift) — never the corpus-typical broad warm gradient (98%+ of sites). High-contrast black/brass, monochrome-within-a-hue restraint. ## Imagery and Motifs **Specimen plates — one writing instrument per plate, all drawn as crisp SVG line-and-fill, no photography (the corpus is 98% photography):** - **01 — The threshold.** A pair of fluted black deco doors, half-open, gilt sunburst inlaid in the lintel; a thin shaft of vellum-light spills across the floor toward the viewer. Drawn as ~40 straight gilt strokes + two filled black panels. - **02 — The nib.** A single oversized fountain-pen nib (≈420px tall) standing point-up on the centre line, rendered as precise SVG paths: the tine slit a 0.5px garnet line, the breather hole a perfect circle, the shoulders fanned in a 7-ray sunburst engraving. A faint compass-arc construction line is left visible behind it, like a draughtsman's plate. - **03 — The barrel.** A turned ebonite barrel shown in three rotational "frames" stacked vertically (a deco triptych), each frame a stepped-lozenge cartouche; chuck-lines and chatoyance drawn as parallel gilt hairlines. - **04 — The urushi.** Concentric sunburst rings of layered lacquer, each ring a slightly different green/black facet, radiating from a central maki-e gold-fleck speckle (tiny brass dots scattered on a fixed pseudo-random lattice). - **05 — The clip & cap-band.** A roller-clip and engraved cap-band laid flat and mirrored, the cap-band's frieze a repeating chevron-and-pearl deco border. - **06 — The ink.** A faceted deco inkwell (octagonal, stepped stopper) with a single thread of *Inkwell Garnet* spilling and pooling on the centre line — the only "wet," organic curve in the whole site. - **07 — The clos closed.** A tall wrought-iron deco gate with a sunburst crest and a single garnet keyhole; behind its bars, the doors of plate 01 now shut. The procession ends where it began. **Recurring decorative DNA:** the **rising-sun fan** (7-ray, always 7, matching the 7 plates); the **stepped ziggurat terrace** (3 steps everywhere — frames, cartouches, stoppers); the **chevron-and-pearl frieze** (a 1px gilt zigzag with bead nodes, used as horizontal section rules); the **compass-arc ghost line** (faint construction geometry left visible, the maker's hand). Background texture: a barely-there 4% vellum grain on the Pale Vellum panels and a 3% brushed-metal anisotropic streak on brass surfaces. ## Prompts for Implementation Build penclos.com as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics, no cookie banner, no chatbot. The page is a **~90-second guided procession through seven lacquered plates** of a fountain-pen atelier. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no FAQ, no logo wall, no newsletter, no contact form** — only the cabinet and its seven specimens. **Narrative & motion (storytelling first, never CTA-driven):** 1. **Plate 01 — Threshold.** On load: the lacquer-black ground, then the gilt ziggurat frame *draws itself* terrace by terrace (three short SVG path-stroke reveals, 320ms each, eased `cubic-bezier(.22,1,.36,1)`). The deco doors then swing from shut to half-open (a 2.4s CSS rotateY on each leaf about its hinge edge, `transform-origin` on the outer jamb), and the vellum light-shaft `clip-path` widens across the floor. Title "PEN CLOS" sets in Poiret One, letters rising 8px and un-blurring in staggered sequence (110ms between glyphs). 2. **Scroll = turning a portfolio plate.** Each plate-to-plate transition is a **page-turn**: the outgoing plate rotates ~6° on the central plumb-line and slides up behind the ziggurat frame while the incoming plate's specimen *grows along the centre line* from a 1px gilt seed-line into full form (a `scaleY` from a hairline, 700ms). The frame itself never moves — only contents turn. Driven by `IntersectionObserver`, no parallax library. 3. **Plate 02 — Nib.** As it enters, the visible compass-arc construction line sweeps once (SVG `stroke-dashoffset`, 1.1s) as if a draughtsman just drew it, then fades to 14% opacity. The tine-slit garnet line *pulses* the faintest 4% width once on entry. Hovering the nib tilts it ≤4° toward the cursor with a brass glint that travels down one shoulder (a thin moving `linear-gradient` mask) — the only cursor-aware behaviour, and it is **slow and weighted**, never the springy/magnetic corpus default. 4. **Plate 03 — Barrel.** The three rotational frames reveal top-to-bottom with a 180ms stagger; on each, the parallel gilt chuck-lines extend left-to-right like a lathe pass. 5. **Plate 04 — Urushi.** Concentric lacquer rings bloom outward from centre, one ring per 90ms, last; then the maki-e gold flecks fade in across their fixed lattice with a 6ms-apart twinkle stagger. A very slight, slow rotation (0.4°/s, `prefers-reduced-motion` aware) keeps the lacquer "alive." 6. **Plate 05 — Clip & cap-band.** The mirrored clip halves close toward the centre line and "click" together (a 60ms scale-snap). The chevron-and-pearl frieze on the cap-band draws across as a repeating SVG pattern reveal. 7. **Plate 06 — Ink.** The octagonal inkwell's stopper lifts; a single garnet thread (animated SVG path) spills down the plumb-line and pools into a stepped-lozenge puddle at the cartouche bar. This is the visual climax — the one organic, "wet" moment in an otherwise crystalline geometric site. 8. **Plate 07 — The clos closed.** The wrought-iron gate's two leaves swing shut along the centre line; the garnet keyhole gives one slow glow; behind the bars, plate 01's doors are seen shut. Title returns small in the cartouche: "the clos is closed." A faint chevron-and-pearl rule draws beneath it and the page rests. **Static / structural details:** the right-margin gilt "ruler" is `position: fixed`, its diamond bead moving with `transform: translateY()` synced to scroll progress; each tick engraves (a 1px inset gilt notch). The brass cartouche bar at each plate's lower third is `position: sticky` within its plate so the caption stays read-able as the plate turns. Use CSS `@font-face`-free Google Fonts ``. All ornament is SVG or pure CSS gradients/clip-paths — **no raster images at all**. Honour `prefers-reduced-motion`: replace page-turns and the urushi rotation with simple 200ms fades, keep the ink-spill but instant-draw it. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Art-deco rendered as a closed cabinet of writing instruments, not a luxury landing page.** Deco is only ~5% of the corpus and almost always used for "luxury brand / real-estate gold / opulent showcase." Here it is a *museum portfolio of seven colour plates* — numbered, symmetric, hushed — with zero commerce furniture. The pageantry is curatorial, not promotional. 2. **Hard break from the three biggest corpus conventions at once:** no monospace (corpus 94% mono → here Poiret One + Cinzel Decorative + Marcellus), no broad warm gradient (corpus 98%+ → here a flat lacquer-black/brass/oxblood quintet with only an ≤8% metal sheen), and no photography (corpus 98% → here 100% SVG line-and-fill specimens with visible draughtsman's compass arcs). 3. **Strict bilateral symmetry as the structural law,** with a literal floor-to-ceiling gilt plumb-line through every plate and the specimen standing *on* that axis — the opposite of the corpus-dominant card-grid (91%), full-bleed hero (88%), and asymmetric (44%) layouts. The only asymmetry permitted is a ≤6° plate-turn and a ≤4° nib-tilt. 4. **Motion is "weighted and lacquered," not springy.** The corpus runs 91% parallax / 89% cursor-follow / 85% spring / 82% magnetic. This site uses *page-turns*, *self-drawing gilt frames*, an *ink-spill climax*, and one slow weighted nib-tilt — heavy, deliberate easing throughout, no spring physics, no magnetic snap, no parallax library. 5. **The "seven" rule:** seven plates, seven-ray sunbursts, three-step ziggurats everywhere — numerology as ornamental discipline, an editorial constraint absent elsewhere in the corpus. **Chosen seed/style:** `art-deco ornate luxury` — *aesthetic: art-deco, layout: ma-negative-space (centred/symmetric procession), typography: art-deco-display, palette: gold-black-luxury (lacquer-black + brass + oxblood), patterns: path-draw-svg, imagery: line-illustration, motifs: sharp-angles (sunburst/ziggurat/chevron), tone: opulent-grand.* **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (80%), card-grid (91%), full-bleed photo hero (88%), photography imagery (98%), mono typography (94%), warm+gradient palette (98%/95%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (82%), dashboard (34%), bento-box (14%), pastoral-romantic tone (35%).