# Design Language for pencloser.com ## Aesthetics and Tone pencloser.com is a **soft-architecture meditation on the click** — the brand is the precise micro-moment when a pen cap seats home: that *snk* of resin on resin, the small mechanical exhale that means *the writing is finished, for now*. The whole site treats this two-millimetre journey as if it were a building you could walk through. The aesthetic is **blobitecture** — rooms, vestibules and corridors made of rounded, pillowy, load-bearing curves rather than walls — crossed with a **wabi-sabi** acceptance that nothing closes perfectly: caps wobble, threads cross, ink dries in the nib, and that imperfection is the point. Tone is **zen-contemplative** with a thread of **whimsical-creative** dry humour — the site is faintly amused at itself for building a cathedral around a biro. Mood references, specifically: the inflated interior of an Olafur Eliasson tunnel; the matte, finger-smooth ABS of a Pilot Hi-Tec-C clicker photographed at macro under diffuse north light; the way warm putty-coloured clay slumps before it is fired; the hush of a stationery shop at 8am before the lights are fully up; Bauhaus colour theory filtered through a beanbag. Nothing here is sharp. Nothing here shouts. Surfaces look like you could press a thumb into them and leave a dimple that slowly recovers. The dominant emotional register is **relief** — the relief of putting something down. This is explicitly **not** a product page, not a SaaS landing, not a shop. There is one verb on the entire site: *close*. The visitor's reward for scrolling is not a purchase — it is the sound and the settling. ## Layout Motifs and Structure The site is **organic-flow** built on a deliberately *soft* grid: a 1440-wide canvas divided not by straight columns but by seven vertical "lobes" — overlapping blob masks (`border-radius` clip-paths with 30–55% radii on each corner, animated ±4% on a slow loop) that the content nests inside. Think of the page as a single inflated corridor you scroll *down through*, narrowing and widening like a throat. There is no card-grid anywhere. There are no rectangles with hard 0px corners — the minimum corner radius site-wide is 18px, and the structural containers run 64–220px. Six chambers, stacked, total scroll length ~560vh desktop / ~720vh mobile: 1. **The Threshold.** Full-bleed putty field. A single colossal pen cap, rendered as a smooth 3D-ish CSS blob (stacked radial gradients + multiple soft box-shadows, no real WebGL needed), floats centred and slightly tilted. The wordmark `pencloser` sits *inside* the cap's mouth in small mono caps. As the page loads, the cap descends 40px and rotates 6° — it is being lined up. Negative space (**ma**) dominates: the cap occupies maybe 28% of the viewport, surrounded by breathing room. 2. **The Approach Corridor.** The layout pinches inward — the blob lobes narrow to ~600px centre channel. Text flows in a single soft column, set ragged-right, describing the geometry of a closure: thread pitch, friction fit, the "detent." Each paragraph sits in its own pale blob bubble that gently inflates on scroll-into-view. 3. **The Catalogue of Imperfect Closures.** The corridor widens again into an asymmetric, **broken-grid** room — but the breaks are *bulges*, not fractures. Six exhibits, each a different failed/partial closure (the cross-threaded cap, the cap that clicks but leaks, the cap put on the wrong end), arranged in a loose orbital scatter. Hover any exhibit and it swells (**elastic** scale to 1.06 with overshoot) and the others recede. 4. **The Anechoic Chamber.** The single darkest moment — a near-black putty room where everything is muffled. One element: a large soft pad. Press-and-hold it and you trigger the close: the cap from chamber 1 slides into frame, seats, the screen does a single 8px inward *settle* (the whole layout briefly scales 0.992 then springs back), and a quiet sound plays. This is the climax. 5. **The Resting Shelf.** Layout opens fully, lobes at maximum width. Closed pens lie horizontal in a slow horizontal-scroll band — a contemplative procession, like boats moored. No labels. Just rest. 6. **The Colophon Cul-de-sac.** The corridor tapers to a rounded dead end. Tiny mono text — what the site is, who made it, the date. The cap from chamber 1 reappears one last time, fully seated, motionless. End. Navigation is **minimal** — a single soft floating dot lower-left that, on hover, blooms into six smaller dots (one per chamber). No header bar. No footer bar in the conventional sense — the colophon *is* the end of the corridor. ## Typography and Palette **Type stack — Google Fonts only.** - **Fraunces** (variable, opsz 9–144, wght 100–900, SOFT and WONK axes pushed toward their soft/wonky extremes). The display and editorial face. Fraunces' optical "wonk" gives headings a slightly slumped, hand-thrown character that matches the wabi-sabi clay metaphor — letters that look like they relaxed. Used for all chamber titles (clamp(2.6rem, 7vw, 6rem), wght 320, italic on alternate words), the wordmark fallback, and the long contemplative body text in chambers 2 and 6 (set at 1.25rem / 1.85 line-height, wght 380). - **Space Mono** (regular + italic). The "instrument label" voice — used for the wordmark inside the cap mouth, exhibit captions in chamber 3, the chamber-navigator tooltips, all numerals (thread pitch "0.6mm", "≈2mm of travel"), and the colophon. Always uppercase with +0.08em tracking for labels, sentence case for the colophon. Mono here reads as *spec sheet*, the dry counterpoint to Fraunces' softness. - **Newsreader** (variable, italic-capable). A quiet utility serif for any running secondary captions and the chamber-2 marginalia — chosen because its low contrast and gentle bracketed serifs sit between Fraunces' wonk and Space Mono's rigidity without clashing. **Palette — warm, muted, low-contrast on purpose.** The site is mostly one colour family (putty / unfired clay), with two restrained accents. - `#E7DFD2` — **Bisque Putty.** The primary surface. Warm grey-beige, the colour of dry stoneware slip. ~46% of pixel area. - `#D6CBB8` — **Shadow Putty.** The recessed-blob colour, used for the inner faces of lobes and the inflated bubbles' undersides. ~22%. - `#F4EFE6` — **Lit Putty.** The near-white highlight on the top curve of every blob, where the diffuse north light lands. ~14%. - `#2A2620` — **Anechoic Umber.** Near-black warm brown. Body text on light, full background of chamber 4. ~9%. - `#C6452B` — **Nib Vermilion.** The single saturated accent — the colour of a felt-tip's leaked dot. Used *only* for: the active chamber dot, the moment-of-close flash on the cap's seating ring, and one underline-draw on the wordmark. Never more than ~1% of pixel area at once. Restraint is the rule. - `#7C8A6B` — **Olive Slip.** A muted sage used sparingly for the chamber-3 hover halo and the resting-shelf band's faint wash. ~3%. - `#B7A98E` — **Threadline Tan.** Hairline colour for the thin SVG paths that trace cap threads and the corridor's centre guideline. ~1%. Gradients are *radial and soft only* — every blob is a 2–3 stop radial from Lit Putty through Bisque to Shadow Putty, never a linear bar. ## Imagery and Motifs **The blob-as-room is the structural imagery** — there is almost no photography and no stock anything. Visual content is built from: - **CSS-sculpted soft solids.** The hero cap, the chamber-4 pad, the resting pens — all assembled from layered `radial-gradient` fills + 3–5 stacked `box-shadow`s (one tight dark inset for the seam, two wide soft outers for ambient occlusion, one tiny bright inset for the rim light). They read as photographed objects but are pure CSS. Each carries one `::after` highlight bleb that drifts ±6px on a 9s ease loop — the "wet clay" shimmer. - **Thread-path SVGs.** Thin (1.25px) Threadline Tan strokes that spiral — `path-draw-svg` reveal on scroll — to diagram the helix of a screw cap. Pure linework, hand-loose, slightly uneven spacing. - **The detent dot.** A small Nib Vermilion circle that appears at the exact scroll position where each chamber "clicks in," and pulses once (single **ripple**, no loop). It is the site's only recurring icon. - **Grain.** A faint film-grain / paper-noise overlay (SVG `feTurbulence`, 3% opacity, `mix-blend-mode: multiply`) over everything — the wabi-sabi tooth. - **No icons in the UI sense.** No hamburger, no chevrons, no social glyphs. Affordances are blobs that breathe slightly faster on hover. Decorative motif vocabulary: concentric soft rings (the cap's seating face), the slow drift of underwater-bright highlight blebs, hairline helices, and the recurring silhouette of a capped pen lying down. ## Prompts for Implementation Build pencloser.com as **one long HTML document** — no framework, no router, no SPA. A single scrolled corridor. Six `
` stacked vertically. CSS does almost all the heavy lifting; JS is small and surgical. **Storytelling spine:** the visitor is *closing a pen*, in slow motion, by scrolling. Chamber 1 lines it up. Chambers 2–3 are the contemplative descent. Chamber 4 is the click (the only interactive climax). Chambers 5–6 are the rest afterward. Every animation should feel like *settling*, never *snapping* — overshoot and slow recovery, cubic-bezier(0.22, 1, 0.36, 1) as the house easing, never linear, never bounce-hard. Chamber-by-chamber: 1. **The Threshold.** On load: Bisque Putty fills the screen. The hero cap (a `div` stack of radial gradients + box-shadows, `border-radius` ~46% 54% 50% 50%) fades in at scale 1.02, then descends `translateY(40px)` and `rotate(6deg)` over 1.4s — being aligned. Wordmark `pencloser` in Space Mono caps materialises *inside* the cap's dark mouth with a 0.4s **fade-reveal**, plus one Nib Vermilion `underline-draw` beneath it. Subtle **parallax**: the cap drifts at 0.85× scroll, its highlight bleb at 1.1×, so it feels three-dimensional. A whisper of mono text below: "≈2mm of travel · 0.6mm thread pitch · one click." 2. **The Approach Corridor.** As the user scrolls in, the blob lobes (CSS `clip-path` on the section's left/right pseudo-elements, animated radii) **morph** narrower — the channel pinches to ~600px. Paragraphs each live in a `.bubble` (Shadow-Putty radial fill, big radius) that **inflates** on scroll-into-view: from `scale(0.94)` + `opacity 0` to `scale(1)`, **staggered** 90ms apart, with a 6px settle overshoot. Newsreader-italic marginalia floats in the gutter, drifting at 1.15× parallax. Text is genuinely about closure mechanics — friction fit vs. snap fit vs. screw thread — written with quiet wit. 3. **The Catalogue of Imperfect Closures.** Lobes bulge wide. Six `.exhibit` blobs scattered on a broken (bulged, not fractured) grid — use absolute positioning at irregular offsets, each a small CSS-sculpted pen-and-cap in a slightly wrong state. **Tilt-3d** on pointer-move (max 8°, soft). On hover: the hovered exhibit does an **elastic** scale to 1.06 (overshoot to 1.075, settle), gains a soft Olive Slip halo (`box-shadow` bloom), and **cursor-follow** brings a Space-Mono caption blob ("CROSS-THREADED · still spins forever") that trails the cursor with `spring` lag. Non-hovered exhibits dim to 0.7 opacity and shrink 0.97. Thread-path SVGs **path-draw** in as the chamber enters view. 4. **The Anechoic Chamber.** Full Anechoic Umber background — the page goes hushed and dark. Grain opacity bumps to 6%. One element: a large soft `.pad` (radial putty gradient, very large radius, gentle breathing scale loop). Instruction in dim mono: "press and hold to close." On `pointerdown`: the chamber-1 cap slides up from `translateY(120%)` into seated position over ~700ms; at seat, a single Nib Vermilion **ripple** flares from the seating ring, AND the entire page does one **settle** (`transform: scale(0.992)` for 120ms then springs to 1) — the whole layout flinches inward like a held breath released. Play a short, soft synthesized *snk* via Web Audio (a quick filtered noise burst + tiny resonant ping; respect `prefers-reduced-motion` by skipping the screen-settle but keeping the cap seat). After the close, dim text fades in: "closed." 5. **The Resting Shelf.** Background eases back to Bisque. Lobes at max width. A `horizontal-scroll` band of ~9 capped pens lying horizontal, scrolled by vertical wheel translated to horizontal `translateX` (or native horizontal scroll on touch). Each pen drifts up/down ±5px on its own slow loop — moored boats. Faint Olive Slip wash under the band. No captions. **Blur-focus**: pens near the viewport edges sit at `filter: blur(2px)` and sharpen toward centre. 6. **The Colophon Cul-de-sac.** The corridor tapers — lobes converge to a rounded dead-end shape. Tiny Space-Mono text, sentence case: what the site is, the maker, the date 2026. The hero cap reappears, fully seated, motionless — `prefers-reduced-motion`-safe, no animation. A last detent dot pulses once and goes still. The page simply *ends*. No CTA, no newsletter, no "back to top" rocket. Cross-cutting: house easing `cubic-bezier(0.22,1,0.36,1)`; every blob has the drifting `::after` highlight bleb; the `feTurbulence` grain overlays the whole ``; the lower-left navigator dot blooms into six on hover with **stagger**; all reveals are scroll-triggered via `IntersectionObserver`; honour `prefers-reduced-motion` everywhere (kill drifts, parallax, screen-settle; keep static layouts and the audio gated behind explicit interaction). **AVOID:** any stat-grid, pricing block, testimonial carousel, feature-card triptych, hard-cornered rectangles, hero CTA buttons, sticky nav bars. ## Uniqueness Notes Distinct departures from the 454 designs already in the registry and from the seed's defaults: 1. **Blobitecture as literal architecture, not decoration.** The 3% of sites that touch blobitecture use organic blobs as background ornament. Here the blobs *are* the corridor — the layout grid itself is seven animated curved lobes that pinch and bulge as you scroll, so the page has the shape of a throat. No competing design uses morphing clip-path lobes as the load-bearing grid. 2. **A whole site about a 2mm mechanical event.** The subject is the *click of a pen cap closing*, treated as a building you walk through, with an anechoic-chamber climax you trigger by press-and-hold (cap seats + Web Audio *snk* + the entire layout flinching 0.8% inward). Single-verb site: the only action is *close*. Nothing in the registry builds a narrative experience around capping a pen, and the "whole-page scale-settle on interaction" is not a pattern in use. 3. **Near-monochrome putty discipline with a 1%-of-pixels vermilion.** Against a registry where 95% of palettes are gradients and 25% are high-contrast, this is ~82% one warm putty family, low-contrast on purpose, with linear gradients banned (radial-only, soft) and the single saturated colour (Nib Vermilion) rationed to under 1% of pixel area, appearing only at the literal moment of closure. Fraunces with SOFT/WONK axes pushed toward "slumped clay" + Space Mono "spec-sheet" labels is a pairing not present elsewhere. Chosen seed/style: **blobitecture fluid layout** (underused — ~3% of registry), with a **wabi-sabi** imperfection layer and a **zen-contemplative / whimsical-creative** tone. Avoided overused patterns from frequency analysis: no hand-drawn aesthetic (96%), no glassmorphism (80%), no card-grid layout (91%), no photography-led imagery (98%), no humanist/mono-default-only typography clichés used straight, no parallax-storytelling-as-the-whole-gimmick beyond restrained depth. Parallax/spring/stagger appear only in small, settling doses; cursor-follow is confined to one chamber's caption.