# Design Language for archaic.studio ## Aesthetics and Tone archaic.studio is the digital conservatory of a fairy-run preservation studio — a quiet, professional atelier where archaic artifacts (forgotten ligatures, lichen pressings, dried sigils, weathered stamp-seals, palm-sized clay tablets) are kept under blown-glass vitrines and softly catalogued. The aesthetic is **fairycore filtered through curatorial discipline**: the gauzy luminance and pressed-flower romance of the fairycore mood, but stripped of cottage clutter and rendered with the typographic precision of a Swiss museum guidebook. Picture the inside of an air-clear specimen jar at first light — milk-cream haze, the faintest mint-glass undertone, a single rune-fly drifting between vitrines. The mood is **professional, not whimsical**. Captions are written in the cadence of a museum wall label, not a fairy-tale narrator. There are no sparkles, no glitter shaders, no "tap the toadstool" easter eggs, no kawaii faces. There is a serene, slightly secretive scholarship at work — fairies as conservators, not as mascots. Visitors land already mid-tour; the site never explains what it is, never asks for an email, never sells a product. It simply opens vitrine after vitrine. The narrative spine is **stewardship of the archaic** — what is old is not nostalgic here; it is *living material under glass*, breathing slowly. The page should feel like wandering a hush-floored gallery while wearing cotton archivist's gloves. Voices are kept under a whisper. Glass clinks once and settles. The studio's working hours are noted in tiny Frutiger numerals: *open from first dew to last petal*. ## Layout Motifs and Structure The site is a **single vertical sequence of seven vitrine-slabs** shown as **floating glassmorphic cards drifting over an off-white parchment field**, with **minimal-navigation** that lives only as a slim left-side rail of seven dots — one dot per vitrine. There is no top nav, no hamburger, no logo cluster, no footer. The dot-rail is the *only* navigation, and it never grows or labels itself; on hover, a thin Frutiger numeral (01 / 02 / …) emerges 12px to the right of the active dot and fades back when you move away. **Composition:** - The parchment field is a flat creamy `#F6EFE2` ground with a barely-perceptible long-fiber paper texture (a single 1200px tileable noise SVG at 4% opacity). No gradients. No vignettes. The field never moves on scroll. - Each vitrine-slab is a **glassmorphic card** of `min-height: 86vh`, `width: clamp(640px, 72vw, 1080px)`, centered on the parchment field but **offset by an organic-blob mask** — that is, every card is clipped through a soft, 7-anchor-point organic-blob `clip-path` so its edges lobe gently outward and inward. Each card's blob outline is *unique* (seven different blob shapes across the seven cards), generated once at build time and inlined. - Cards are **stacked with overlap**: the top edge of card N+1 lobes 7vh into the bottom edge of card N, so as you scroll, the next card *rises into* the previous like a second jellyfish swimming up beneath the first. - A **persistent organic-blob field** drifts at z-index 0 behind the vitrines: 5 large translucent mint-cream blobs (60–90vmin diameter), each animated on a slow 38-second spring orbit (see Patterns). These are the only background motion. - Cards carry an **8px inner glass rim** — a 1px stroke at `rgba(255,255,255,0.55)` inset 8px, plus a 0.5px outer stroke at `rgba(155,180,160,0.22)` — giving each vitrine the doubled-edge optic of real museum glass. - Inside each vitrine, content is locked to a **two-column asymmetric grid**: a 38% specimen column (left) and a 62% label column (right), with a 7% gutter. The specimen column holds the artifact (an SVG glyph, a pressed-leaf vector, a rune); the label column holds the wall-label prose in Frutiger-clean type. On viewports below 720px the grid stacks to a single column with the specimen sitting 56% width, top-aligned. **Vertical pacing:** A 24vh creamy-cream gap separates each vitrine pair, except between vitrines 04 and 05 where the gap collapses to 4vh — the visitor is meant to feel that those two specimens are kept in adjacent drawers of the same cabinet. This irregular rhythm is the only spatial "tell" of the studio's curatorial point of view. ## Typography and Palette **Type system (Google Fonts only):** - **Frutiger-clean primary face:** `Mulish` (variable, weights 300–700) — used for all UI, captions, wall labels, and dot-rail numerals. Mulish stands in for the Frutiger family voice: humanist neo-grotesque with open apertures, a square-shouldered lowercase 'a', and the same gentle, civic clarity Frutiger pioneered for Charles de Gaulle airport signage. Letter-spacing is set to `-0.005em` at body, `0.06em` uppercase at micro-labels. - **Specimen-numeral face:** `Inter Tight` (variable, weights 400–600) — used *only* for vitrine numerals (01 / 02 / …) and for the cataloguing index strings (e.g. *cat. no. AS-2026.014*). Tabular figures locked on via `font-variant-numeric: tabular-nums lining-nums`. - **Wall-label italics:** `Cormorant Garamond` italic 400 — used sparingly for the single italicized phrase that opens each label (the *prelude line*). Set at 1.18em relative to body. - **No display face. No mono.** The 95%-of-sites mono convention is absent. The 93% hand-drawn convention is absent. The 30% handwritten convention is absent. **Type scale (rem, root 18px):** - Wall-label body: 1.0rem / 1.62 line-height / weight 400 - Wall-label heading: 1.42rem / 1.22 line-height / weight 600 / letter-spacing -0.012em - Vitrine numeral: 4.8rem / weight 500 / `Inter Tight` / line-height 1.0 - Micro-label (e.g. CAT. NO., MEDIUM, ORIGIN): 0.72rem / weight 600 / uppercase / letter-spacing 0.12em - Prelude italic: 1.12rem / weight 400 / `Cormorant Garamond` italic - Dot-rail emergent numeral: 0.78rem / weight 500 / tabular **Palette — creamy-pastel, mint-conservatory variant (8 hexes):** - `#F6EFE2` — *parchment cream* — the persistent ground field - `#FBF6EB` — *milk vellum* — vitrine card fill at 72% opacity over the ground - `#E7E1D2` — *aged linen* — vitrine inner rim shadow base - `#C9D9C7` — *conservator mint* — accent stroke on glyphs, drifting blob #1, dot-rail active state - `#D8C9DB` — *dried lavender* — drifting blob #2, italic prelude line color - `#E9C9B4` — *bisque petal* — drifting blob #3, micro-label background pad on hover - `#3E4C40` — *deep moss-ink* — body text, all primary copy, glyph stroke - `#6E5C4C` — *walnut shadow* — secondary text, micro-label foreground The palette is **flat, not gradient**. The 93% gradient convention is deliberately absent. Color is layered through *translucency and stacking*, not through linear-gradient ramps. The only gradient present is a 12% radial cream-to-vellum within each vitrine card to suggest internal glass-light, masked at 0.06 alpha. ## Imagery and Motifs **Specimen archive (one per vitrine):** 01 — **A single conjugated ampersand-glyph,** drawn fresh as a 380px SVG in deep moss-ink with a 0.6px conservator-mint inner stroke, body filled at 8% mint. The glyph is held mid-air inside the vitrine by an inferred-only stand (no actual stand drawn — only the cast-shadow ellipse beneath it). 02 — **A pressed lichen specimen,** rendered as 14 organic-blob clusters in three pastel tints (mint, lavender, bisque), each blob a true 8-point bezier with no perfectly circular forms. Subtle 0.4px walnut shadow underneath. A pin-tag in the lower-right reads `CAT. NO. AS-2026.002 / lichen, vellum-pressed / origin: undisclosed orchard`. 03 — **A wax seal-stamp impression,** as a 280px circular blob (NOT a perfect circle — a slightly lobed organic-blob, asymmetric on three axes), filled creamy-bisque with a stamped-in monogram of three nested archaic ligatures (ae / oe / fi) in moss-ink. The seal carries a 1px inner-shadow at `rgba(62,76,64,0.18)` to suggest pressed depth. 04 — **A folio of three dried-petal forms,** arranged in a triptych on the specimen column. Each petal is an organic-blob in a different pastel tint, sized 110/140/96 px. The label calls them *petalographs* and assigns each one a Latin-binomial (genuine but obscure: *Anemone nemorosa*, *Lunaria annua*, *Geum rivale*). 05 — **A clay tablet fragment,** rendered as a 320px asymmetric blob with a chip taken out of the upper-left lobe (a deliberate convex notch in the clip-path). Across the tablet face: 6 horizontal rows of "cuneiform" composed of small mint-stroked dashes and dots — *not real cuneiform*, an invented script consistent across the rest of the site. This script reappears in the favicon. 06 — **A pollen pawprint study,** as a scatter of 23 micro-blobs (each 6–14px) arranged in a soft asymmetric drift across the specimen column. They animate on first reveal — see Patterns. Title on the wall label: *"FIG. 06 / DRIFT, OBSERVED"*. There are no captions on individual pollen grains. 07 — **An empty vitrine.** The specimen column is intentionally bare except for a single conservator-mint cast-shadow ellipse at the base — implying the artifact has been removed for restoration. The wall label reads: *"on loan to private study; please return after first frost."* This is the studio's signature gesture. **Motifs woven throughout:** - **Organic-blobs as structural language.** Every shape on the site that is not type — vitrine clip-paths, drifting background, specimen 02, 03, 04, 05, 06, the dot-rail dots themselves — is an organic-blob with 6–9 anchor points and *no perfectly circular curves*. Circles are explicitly forbidden as a primitive in this build. - **The cast-shadow ellipse.** Every specimen sits on a soft, 8px-blurred ellipse at `rgba(62,76,64,0.10)`. This is the *only* shadow on the site. No `box-shadow` on cards. No drop-shadow on text. Only the cast-shadow under each artifact. - **The invented script.** A single internally-consistent script of dashes and dots appears in the tablet (specimen 05), in the favicon, in the 404 page, and on the dot-rail when the visitor reaches vitrine 07 (the empty one) — at which point the seven dots briefly transliterate into seven script-characters for 1.4 seconds before reverting. - **The pin-tag.** Each vitrine carries a small `cat. no.` pin-tag (a tiny milk-vellum rectangle, 96×24px, with a single thread of conservator-mint string drawn behind it). The tag is the only place where capital-letter Inter Tight appears. **Imagery EXPLICITLY ABSENT:** no photography (the 96% convention), no hand-drawn sketches (the 93% convention), no nature photographs of forests or mushrooms or fairies, no AI-generated illustration, no stock botanical engravings, no parallax-stars background, no glow effects, no neon. Every visual mark is a vector blob or a glyph. ## Prompts for Implementation Build archaic.studio as a **single HTML page, one CSS file, one ES module** — no framework, no build step required, no service worker. The page is a 90-second walking tour of seven vitrines on a parchment field. There is **no CTA, no pricing, no email capture, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner**. **Storytelling structure (seven vitrines, vertical scroll, spring-driven entrances):** 1. **Vitrine 01 — Ampersand.** First paint within 220ms: parchment field, drifting blob field already in motion (animations begin pre-scroll), the ampersand vitrine settled at 18vh from top. Wall label opens with the prelude italic *"to begin, a glyph held in air."* No subtitle. No "scroll to continue" cue except the second vitrine's upper lobe just kissing the viewport bottom at 92vh. 2. **Vitrine 02 — Lichen pressing.** As the visitor scrolls, the lichen vitrine springs upward into place (see spring directives below). The 14 lichen blobs animate in **stagger from the lichen's center outward**, 80ms apart, each scaling from 0.6 to 1.0 with a soft spring overshoot of 1.04. Total reveal: 1.6s. 3. **Vitrine 03 — Wax seal.** The seal "presses in" — the blob arrives at 1.18 scale and settles to 1.0 over 520ms with a critically-damped spring (no overshoot — this is a press, not a bounce). The three nested ligatures inside fade in 240ms after the seal settles. 4. **Vitrine 04 — Petalograph triptych.** The three petals enter from off-stage left, each on a slight 6° offset rotation, settling to 0° as they reach their slot. Stagger 140ms. The Latin binomials in the wall label type-set themselves (no typewriter cursor — the letters simply appear in stagger over 320ms, weight-fading from 200 to 400). 5. **Vitrine 05 — Clay tablet.** The tablet enters with a slow, weighty spring (mass 4.2, stiffness 80, damping 12) — visibly heavier than every other specimen. The "cuneiform" rows draw left-to-right via stroke-dashoffset, one row at a time, 240ms per row, 6 rows, total 1.44s. The chip in the upper-left lobe is permanently part of the clip-path; it is not animated. 6. **Vitrine 06 — Pollen drift.** This is the only vitrine with **continuous post-entrance motion**: after the 23 pollen blobs enter, they continue to drift on individual 12–18 second spring orbits within a 40px radius of their nominal position, indefinitely, while the vitrine is in viewport. They pause when the vitrine is fully scrolled past (IntersectionObserver `isIntersecting === false` halts their RAF loop to stay polite on battery). 7. **Vitrine 07 — Empty drawer.** The vitrine arrives empty. The cast-shadow ellipse is already present on first paint of this slab (drawn before the artifact would have arrived, then nothing arrives). After 2.6s of stillness in this vitrine, the seven dots in the left rail briefly transliterate into the invented script for 1.4s, then revert. This is the entire "easter egg" surface of the site. **Spring engine — the soul of the build:** - Implement a tiny RAF spring engine in 60 lines of JS. Use *framer-motion-style* spring math: `stiffness`, `damping`, `mass`, `restDelta`, `restSpeed`. Do **not** import a library; write it yourself. - All entrance animations are spring-driven, not eased-cubic. The 63% spring convention is honored deeply: every vitrine, every glyph, every petal moves on a spring solver, with per-vitrine tuned constants. Vitrine 03 (seal) is critically damped; vitrines 02, 04 are softly underdamped (overshoot 1.04); vitrine 05 (tablet) is heavy and slow. - The drifting background blobs are also spring-driven, but their target positions cycle every 38 seconds in a Lissajous pattern (mint = 1:2 phase, lavender = 2:3, bisque = 3:5), so they never traverse the same path twice. **Anti-pattern directives — what this site will NOT do:** - **No parallax.** The 93% parallax convention is absent. Vitrines slide in via spring; the parchment field never moves. - **No cursor-follow.** The 58% cursor convention is absent. The cursor remains the system default. No glow trail, no magnetic snap, no spotlight, no custom cursor SVG. - **No card-grid.** The 60% card-grid convention is absent. There is exactly one column of vitrines, vertically stacked, never two-up or three-up. - **No full-bleed hero.** The 85% full-bleed convention is absent. The first vitrine is centered with margin and lobes; it never edge-bleeds. - **No gradient backgrounds.** The 93% gradient convention is reduced to a single 12% intra-vitrine radial. The site is otherwise flat color. - **No mono typography.** The 95% mono convention is absent. - **No hand-drawn illustration.** The 93% hand-drawn convention is absent. All marks are vector geometry. **CSS engineering notes:** - Each vitrine's organic-blob clip-path is stored as a CSS custom property `--vitrine-N-clip` on the `:root`. The seven blob shapes are defined once and reused. Changing one custom property reshapes that vitrine. - Glassmorphism is achieved via `backdrop-filter: blur(14px) saturate(108%)`, layered over a semi-translucent vellum fill `background: rgba(251, 246, 235, 0.72)`. The doubled glass-rim is two `box-shadow inset` layers: `inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 0 0 9px rgba(255,255,255,0.0)` (the 8px gap), plus an outer `box-shadow: 0 0 0 0.5px rgba(155,180,160,0.22)`. - Every blob uses `clip-path: path('...')` with absolute-pixel paths normalized via `clip-path: path(evenodd, '...')`. Use `fill-rule: evenodd` consistently. - Type system uses one variable axis on Mulish (`wght` 300–700) and one on Inter Tight (`wght` 400–600). Cormorant Garamond is loaded only at 400 italic. Total font-data budget should stay under 110 KB. - Honor `prefers-reduced-motion: reduce`: collapse all spring motion to a 240ms fade, freeze the drifting blobs in their first-frame positions, and disable the pollen continuous drift in vitrine 06. The transliteration easter egg in vitrine 07 still fires (it is content, not motion). - The favicon is a single 32×32 SVG: one creamy blob with three dots of the invented script in moss-ink. No raster fallback. **Bias toward immersive narrative experience:** the visitor arrives, drifts through seven vitrines without a single button press, and leaves. The page does not announce itself. There is no hero headline shouting "Welcome to archaic.studio". The only words on screen are wall-labels and pin-tags. The whole page is one quiet, professional walk through a glass-light room. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Fairycore in professional voice, not whimsical voice.** Every other fairycore-adjacent site in the corpus reads as cute, soft, story-time. archaic.studio reads as a museum wall: clinical, hushed, scholarly. The fairy is the *conservator*, never the *narrator*. This collapses the 18% pastoral-romantic tone convention into the 5% professional tone convention while preserving fairycore's visual softness. 2. **Glassmorphism without the SaaS dialect.** The 65% glassmorphism convention in this corpus is overwhelmingly attached to fintech/SaaS dashboards. archaic.studio uses glassmorphism as **museum vitrine glass** — translucent display cases for archaic artifacts, not feature panels for product cards. Same technical primitive (`backdrop-filter`, doubled inner rim), entirely different semantic. 3. **No circles, ever.** Every shape that is not type is an asymmetric organic-blob with 6–9 anchor points. No `border-radius: 50%`, no ``, no `rounded-full`. This is enforced as a project-wide rule. The blob is the only primitive, which is a stricter geometric constraint than any other site in the corpus. 4. **No cursor-follow, no parallax, no card-grid, no full-bleed, no mono, no hand-drawn, no gradient backgrounds.** Six of the heaviest project-wide conventions are deliberately absent. The site removes more than it adds, in a corpus that mostly adds. 5. **Minimal-navigation taken to its extreme.** The 3% minimal-navigation convention is realized as **a 7-dot rail with no labels until hover**, no top nav, no footer, no logo cluster. There are zero clickable elements other than the 7 dots and a single pin-tag link in the final vitrine. By raw clickable-element count, archaic.studio is one of the least-interactive sites in the corpus, by intention. 6. **Creamy-pastel as conservator's daylight, not bedroom-decor.** The 1% creamy-pastel convention appears here in a *museum-archival* register — closer to the cream of foxed paper and lichen-mint than to nursery decor or candy aesthetics. Specifically a pastel of *aged neutrals*, not bright pastels. 7. **The seventh empty vitrine.** Ending on absence — a deliberately empty specimen drawer with a wall label saying the artifact is *on loan to private study* — is a structural gesture no other site in the corpus performs. It is the studio admitting that not everything is on display. 8. **Spring engine written from scratch.** No animation library. A 60-line RAF spring solver tuned per-vitrine. This honors the 63% spring convention more *literally* than libraries do; the springs are visibly distinct (heavy tablet vs. underdamped petals vs. critically-damped seal), which is uncommon when teams use one global spring config. **Chosen seed:** *aesthetic: fairycore, layout: minimal-navigation, typography: frutiger-clean, palette: creamy-pastel, patterns: spring, imagery: glassmorphic-cards, motifs: organic-blobs, tone: professional* **Frequency analysis honored — patterns deliberately AVOIDED:** - **hand-drawn (93%):** absent — every mark is geometric vector. - **photography (96%):** absent — no photo, anywhere. - **mono typography (95%):** absent — only Mulish, Inter Tight, Cormorant Garamond italic. - **gradient palette (93%):** absent except for one 12%-alpha intra-vitrine radial. - **parallax (93%):** absent — spring entrances only, no rate-of-motion variance. - **full-bleed layout (85%):** absent — every vitrine is contained, lobed, gapped. - **centered layout (78%):** softened — vitrines are centered horizontally but stacked with organic overlap, not on a strict centerline. - **card-grid (60%):** absent — single vertical column, never a grid. - **cursor-follow (58%):** absent — system cursor only. - **warm palette (91%):** softened — creamy-pastel reads as cool-warm balanced (mint conservator, lavender, bisque), not as the brown/orange "warm" most of the corpus uses. **Frequency analysis honored — patterns deliberately PREFERRED:** - **fairycore (3%):** present and re-cast as professional curatorial voice. - **minimal-navigation (3%):** present as the 7-dot rail. - **frutiger-clean (3%):** present via Mulish and Inter Tight tabular numerals. - **creamy-pastel (1%):** present as the conservator's-daylight palette. - **organic-blobs (3%/6%):** present as both motif and structural primitive. - **professional tone (5%):** present in every wall-label voice. - **glassmorphic-cards (8%):** present, recontextualized as museum vitrines. - **spring (63%):** present and *taken seriously* — per-vitrine tuned spring constants, written from scratch.