# Design Language for archetype.works ## Aesthetics and Tone archetype.works is **a neomorphic aquarium**, a softly-extruded, dreamy-ethereal study cabinet in which seven Jungian archetypes have been preserved as **living tropical-fish specimens** swimming through pressed-foam vitrines. The whole site is built as if you are pressing your face against the curved glass of a private collector's tank room at 4:17 in the morning, and the room is lit only by the bluish glow leaking from the water itself. Every panel on the page **rises out of the same matte putty surface** — never a hard rectangle, never a sharp shadow, only inset and outset bevels carved from a single continuous plane. The fish are real photographs (captured wild, not aquarium-shop), but they have been color-graded into the page palette so they look like they were *born* of the foam. The result is half memory-palace, half deep-sleep dream: a place where psychological types acquire fins. The dreamy-ethereal tone (only 1% in the corpus) is treated literally rather than figuratively — the page **drifts**. Nothing snaps to a hard 1.0 opacity; nothing animates with linear easing; nothing arrives at its destination, it always overshoots and resettles. The reader should feel as though the design is exhaling. There is no marketing voice. There is the soft, unhurried, faintly melancholy voice of someone narrating a half-remembered dream about fish that taught them something. archetype.works does not sell the archetypes; it **introduces** them, the way one introduces aquarium guests to a child who is too tired to be loud. The reference texture is **wet glass at low light**: condensation, not gloss; bioluminescence, not neon; suspended particulate, not bokeh. If you were to tap the screen with a fingernail, the soft-UI panels should look like they would press inward by 2px, hold, and rebound. The fish, meanwhile, should feel as if they are **on the other side** of the glass, not on it. ## Layout Motifs and Structure The composition is **layered-depth** in the most literal possible sense (12% in the corpus, but never executed as a literal multi-pane aquarium): the page is a stack of **seven semi-transparent depth strata** sitting at different z-distances inside an imagined 800px-deep tank. The viewer's eye is always at the front glass; everything else recedes into bluish haze. There is **no traditional grid**. There is, instead, a **water column** down the center of the viewport (max-width 1240px) divided into seven vertical depth-zones, each carrying one archetype: 1. **Surface Zone (0–14% scroll)** — *The Self.* A single oversized neomorphic tile floats at the top, lit from above; one wandering Moorish Idol grazes its upper edge. No copy yet, only a 11pt mono accession number `ARCHETYPE 00 / SELF` tucked into the soft-bevel corner. 2. **Sunlit Zone (14–28%) — *The Persona.*** A pair of inset and outset tiles overlap diagonally; an Emperor Angelfish drifts between them, casting a soft inner shadow on the lower tile. Copy emerges only when the cursor hovers — underline-draw animation pulls a 1.5px line beneath each phrase as it is read. 3. **Twilight Zone (28–42%) — *The Shadow.*** Three concentric pressed circles, the deepest one inset to look like a portal into the foam itself; a school of Banggai Cardinalfish moves through it. 4. **Deep Zone (42–56%) — *The Anima/Animus.*** Two paired tiles, one inset (feminine, receiving), one outset (masculine, projecting), connected by a hairline conduit; a Mandarinfish (the most photographed fish in the corpus, used here in a *single* hero photograph) settles in the conduit like a heartbeat. 5. **Midnight Zone (56–70%) — *The Mentor / Wise Old.*** A long horizontal neomorphic shelf carrying a row of tiny abalone-shaped pebble buttons, each one a sub-archetype; a Lookdown fish drifts past, mirror-bodied, almost invisible. 6. **Abyssal Zone (70–84%) — *The Trickster.*** The grid breaks. Tiles tilt at gentle 4° angles; a Long-spine Porcupinefish hovers at the section break; underline-draw lines arrive *before* the words they will underline. 7. **Bedrock Zone (84–100%) — *The Hero's Return.*** A single floor-tile fills the column, inset deeply, holding the colophon and a quiet `archetype.works / made of foam and water` mark. A solitary Tang fish exits frame to the right. There is **no top navigation**, only a fixed left-margin `depth gauge` (a vertical neomorphic slider, 24px wide × 60vh tall) marking which zone the reader currently inhabits. There is **no footer banner**, no cookie modal, no chat widget, no email capture, no pricing tier, no stat grid, no testimonial wall. The page is a slow descent. Crucially, **all panels share one continuous extruded surface**. The neomorphic surface is the floor of the tank; every tile is just a region of it that has been pressed in or pressed out. There are no hard borders anywhere on the page; everything is a soft-UI bevel. The triadic palette (rare at 4%) is applied **to the haze between layers**, not to the panels themselves — the panels remain the warm putty base. ## Typography and Palette **Fonts (Google Fonts only, three voices, all from the mono and humanist axes — restraint is the discipline):** - **Display & accession codes — *JetBrains Mono* (weights 400 / 600 / 800).** Used for the wordmark `archetype.works` at 72px in the masthead with `letter-spacing: -0.02em`, for the seven zone labels (`ARCHETYPE 00–06`) at 13pt small-caps with `letter-spacing: 0.18em`, and for the depth-gauge tick marks at 9pt. JetBrains Mono is chosen because its open apertures and slightly humanist slope keep the page from feeling clinical — mono is at 95% in the corpus, so this site **uses mono but tries to soften it** with a humanist mono rather than a square one. - **Body & dream-narration — *DM Mono* (weights 300 / 400 / 500).** The seven archetype paragraphs are set in DM Mono 16/28, weight 300, color `#3A4A5C`, max line-length 58 characters, with `text-rendering: geometricPrecision` and a 0.01em letter-spacing nudge. DM Mono's slightly looser counters and less-engineered feel keep the body from looking like terminal output. Italics are used for fish-species captions and Latin binomials only. - **Caption & whisper layer — *Cormorant Infant* (weight 300, italic).** The only non-mono voice on the page. Cormorant Infant appears at 11pt italic for the bottom-of-tile attributions (`— after Jung, MDR, p. 188`) and for the soft floating captions that appear when a fish is hovered (`Pterapogon kauderni, 7cm, Banggai Islands`). Restricted to under 6% of all text — this is the *whisper*, the breath against the glass. **Palette (eight tones, triadic at the haze level, monochrome at the surface level):** - **Foam Base (panel surface):** `#E2E6EC` — the warm-cool putty that every neomorphic panel is carved from. This is the matte plastic of the entire page. ~62% of pixels. - **Foam Highlight (outset bevel):** `#FFFFFF` at 78% opacity, applied as a 4px upper-left soft inner shadow. - **Foam Shadow (inset bevel):** `#A8B2C0` at 60% opacity, applied as a 4px lower-right soft outer shadow. - **Triad Hue 1 — Lagoon Cyan:** `#5FB8C9` — the bluish water-haze drifting between depth strata, used in radial gradients at 8–22% opacity. The first leg of the triad. - **Triad Hue 2 — Mandarin Apricot:** `#E89F6B` — the warm fish-color highlight, used only on hover-reveal underline-draws and on the Mandarinfish photograph's preserved chroma. The second leg. - **Triad Hue 3 — Sea-Urchin Plum:** `#7E5A8C` — the deep-shadow tone in the Abyssal and Bedrock zones, used in the lowest-opacity haze layers and as the body-text color on dark sections. The third leg. - **Body Ink:** `#3A4A5C` — never pure black. All paragraph text. The color of writing seen through 30cm of clean saltwater. - **Bedrock:** `#1B2230` — used only in the depth-gauge well and the colophon zone, the deepest pressing of the foam. The triad — `#5FB8C9 cyan / #E89F6B apricot / #7E5A8C plum` — is harmonically separated by 120° on the wheel and appears **only as background haze**, never as flat fill. The neomorphic surfaces themselves remain monochrome putty. This is the rare-corpus move: triadic palette is at 4%, and no prior site combines triadic with neomorphic; doing so without polluting the soft-UI surface is the discipline. ## Imagery and Motifs **Photography — but a very specific kind of photography.** Imagery is at 97% in the corpus, so its *presence* is unremarkable. The differentiation is **what the photographs are of and how they are processed**: - **Twelve hero fish photographs**, all real, all wild, sourced from public-domain marine archives (NOAA, USFWS, Smithsonian Ocean), all featuring tropical reef species. Each photograph is **isolated against transparent background** (alpha-cut around the silhouette), de-noised, and color-graded so its midtones fall within the triad: cyans pushed to `#5FB8C9`, warms pushed to `#E89F6B`, deep shadows pushed to `#7E5A8C`. The fish look photographic but **belong to the page palette**. - **Each fish is a Jungian glyph.** The Mandarinfish (Synchiropus splendidus) is the Anima/Animus because of its dual-color pattern. The Lookdown (Selene vomer) is the Mentor because its mirror-body reflects the reader. The Long-spine Porcupinefish is the Trickster. The Banggai Cardinalfish school is the Shadow (always a school, never alone). The Moorish Idol is the Self (always alone). The Emperor Angelfish is the Persona (always crowned). The Tang is the Hero's return. - **Motion of the fish.** Each fish image is wrapped in a `` that drifts on a 24-second sine-curve loop, amplitude 18px horizontal × 6px vertical, with `animation-timing-function: cubic-bezier(.42,0,.58,1)`. Hover halts the drift and gently underlines the fish's binomial in apricot. - **No stock photography of people. No abstract product shots. No 3D renders. No icons.** The only non-photographic visuals are the neomorphic panels themselves and the SVG hairlines used for depth-zone dividers. **Motifs (tropical-fish at 11% — used here not as decoration but as load-bearing meaning):** - **The Reef Census Card.** In each depth zone, beneath the archetype name, a tiny 38×38 px neomorphic pillow holds the species' Latin binomial in 9pt JetBrains Mono small-caps, the depth range in meters (`12–35m`), and the IUCN status indicator as a 4px round dot in lagoon-cyan, apricot, or plum. It is a cataloguing motif, lifted from museum specimen tags but rendered in soft-UI putty. - **The Drift Bubble.** Throughout the page, 6–10px translucent circles drift upward at 4–8 second intervals, never more than three on screen at once, opacity peaking at 12%. They are CSS-only, never imagery, and they serve as ambient pulse — reminding the reader they are inside water. - **The Underline-Draw Hover.** When the cursor enters a paragraph, a hairline `#E89F6B` apricot line draws itself left-to-right beneath the line currently being read, at 1.5px thickness, animating over 320ms with `path-length` interpolation. This is the only place the apricot triad-hue touches text. (Underline-draw is at 22% — present but not overused; the singularity is *combining it with neomorphic foam*, which no prior site has done.) - **The Pressed Pebble Buttons.** All interactive controls (the depth gauge, the species-binomial chips, the colophon lock) are pebble-shaped (25px × 18px ovoid) inset-shadowed neomorphic pads. They depress 2px on click, hold 80ms, rebound on a soft spring. - **The Ripple-on-Click.** A click anywhere on the page emits a 240ms expanding circular ripple at the cursor in 4% lagoon-cyan, exactly one ripple per click, never compounding. It is the ambient acknowledgment that you are touching glass. There is no logo system beyond the `archetype.works` wordmark; no avatar grid; no team photo wall; no testimonial portrait row. ## Prompts for Implementation Build archetype.works as **a single static page** — one HTML file, one CSS file, one ES module of JavaScript — and treat it as a four-and-a-half-minute slow descent through a private aquarium of seven Jungian archetypes. Resist every instinct to brand, sell, convert, or capture. There is no CTA, no email signup, no contact form, no chat widget, no cookie modal, no language selector, no pricing tier, no testimonial wall, no stats grid, no logo cloud, no comparison table, no FAQ accordion. The page is a **depth dive**, not a landing page. **Storytelling structure (seven zones, vertical scroll, dreamy-ethereal pacing):** 1. **Surface (0–14%).** The page opens with the wordmark `archetype.works` extruded from the foam at 72px JetBrains Mono, with a single inset hairline tracking beneath it. No subhead. After 1.4s, a single Moorish Idol drifts in from the upper-right, pauses, and grazes the wordmark's lower edge. The reader has been greeted, and the entire thesis of the page — *fish are archetypes; archetypes are fish* — has been silently asserted. 2. **Sunlit / Persona (14–28%).** Two overlapping neomorphic panels carry a 4-sentence dream-narration about the Persona ("the mask the dreamer wore to the wedding it never attended"). On hover, an apricot underline draws beneath the sentence currently in the reader's gaze. An Emperor Angelfish drifts left-to-right between the panels, casting an inner shadow on the lower one. The Reef Census Card in the lower-left logs `Pomacanthus imperator / 5–25m / IUCN: LC`. 3. **Twilight / Shadow (28–42%).** Three concentric pressed circles, deepest at the center, function as a portal. The Banggai Cardinalfish school (a single image with 7 fish) drifts through the portal in a slow horizontal pan, opacity peaking at 88% as they cross center. The narration speaks of the Shadow as "the part of the dreamer that knew the wedding had not happened, and refused to grieve." Underline-draw triggers on hover only. 4. **Deep / Anima-Animus (42–56%).** The page reaches its emotional center. Two paired tiles, one inset, one outset, connected by a 1.5px hairline conduit. A single Mandarinfish photograph (the most-loved fish on Earth, used as the page's emotional pivot) holds the conduit's center, drifting on a slow 32-second sine. The narration is the longest in the page (180 words) and is the only place the Cormorant Infant whisper-italic appears in the body, as a quoted dream-fragment. Drift-bubbles peak in density here. 5. **Midnight / Mentor (56–70%).** A horizontal neomorphic shelf carries seven pebble-buttons, each labeled with a sub-archetype (Sage, Magician, Healer, Crone, Senex, Puer, Anchorite) in 11pt mono small-caps. Hover any pebble and a Lookdown fish drifts past, its mirrored body briefly reflecting the reader's pebble selection back at them — implemented as a CSS mask-image cross-fade, not WebGL. 6. **Abyssal / Trickster (70–84%).** The grid tilts. Three tiles rotate at gentle 4° angles, one clockwise, two counter. Underline-draw triggers **before** the cursor arrives, drawing the underline first and waiting for the cursor to catch up — a single deliberate violation of cause-and-effect. A Long-spine Porcupinefish hovers at the section break, slowly inflating and deflating on a 6s loop (CSS scale 1.0 → 1.06 → 1.0). The narration is shorter and more cryptic here: "the dreamer realised the fish had been swimming through the dreamer, not the tank." 7. **Bedrock / Return (84–100%).** A single deep inset floor-tile carries the colophon: `archetype.works / a depth study / made of foam and water / © now`, set in JetBrains Mono 13pt. A solitary Tang fish enters from the left and exits to the right at a slow constant velocity over 18 seconds, completing the page's only horizontal traversal. After it leaves, the page is quiet. The drift-bubbles continue forever. **Animation discipline (dreamy-ethereal at 1%, layered-depth at 12%):** - **Easing is always `cubic-bezier(.42,0,.58,1)`** (sine-in-out) or a soft spring with stiffness 80 and damping 24. **Never linear, never sharp.** - **Every animation overshoots its target by 2–4% and resettles**. Nothing snaps. The reader's nervous system should never receive a hard edge. - **Parallax on scroll**, but limited to the haze layers (the cyan, apricot, plum gradients drifting between zones). The neomorphic foam itself never parallaxes — it is the floor of the room. The fish drift but do not parallax. (Parallax is at 92% in the corpus — used here, but consciously demoted to the haze layer.) - **Cursor-follow is forbidden.** Cursor-follow is at 62% in the corpus and breaks the dreamy-ethereal contract; the page must feel *unaware* of the reader, the way a dream is unaware of the dreamer. - **Magnetic hover is forbidden** (50% in corpus). The pebbles depress, but they do not chase the cursor. Soft-UI is about pressing, not attracting. - **Stagger animations are restricted** (65% in corpus). The only staggered element is the seven depth-gauge ticks revealing on initial load, 80ms apart. No card-grid stagger reveals. **Neomorphic implementation rules (1% in corpus — get this right):** - **Background of `` is `#E2E6EC`. Every "panel" is the *same* `#E2E6EC`** with a paired `box-shadow: inset 4px 4px 8px #A8B2C0, inset -4px -4px 8px #FFFFFF` (for inset/pressed) or `box-shadow: 4px 4px 8px #A8B2C0, -4px -4px 8px #FFFFFF` (for outset/raised). No other shadow recipes. No drop-shadows. No backdrop-filter blur (that's glassmorphism, a different aesthetic). - **Border-radius is always between 18px and 36px.** Never sharp, never circular (except for the abyssal portal and the depth-zone tick dots). - **No borders, no outlines, no rules, no dividers.** Depth is communicated *only* through the bevel pair. - **Hover state for panels: shadows shrink by 25% over 240ms.** The panel "lifts" toward the reader without changing color. - **Click state for panels: shadows invert (outset → inset) for 80ms, then rebound.** The press is felt. **Type-setting rules:** - **No oversized hero type.** Largest type on the page is the 72px wordmark. Body text caps at 16/28. Display restraint is part of the dreamy-ethereal contract. - **No animated headlines, no kinetic typography, no typewriter effects.** Text should feel *settled*, as though it has been there since before you arrived. - **Underline-draw is the only text animation.** It triggers on hover-line, draws at 320ms, persists for 1.6s after hover ends, then fades. **Photography processing pipeline (encoded as a CSS filter recipe):** ``` filter: saturate(0.78) contrast(1.04) hue-rotate(-3deg) brightness(0.96) blur(0.3px); ``` Each fish image is exported as PNG with alpha channel (no white-box backgrounds), pre-graded in the source asset to fall within the triad, and then receives the above CSS filter at runtime to harmonize with the foam surface. The 0.3px blur is critical: it dissolves the JPEG-edge artifact that betrays cut-out photography and makes the fish read as **suspended in water** rather than **pasted on a page**. **Single-page constraints:** - **One route, no navigation between pages.** Every internal link is an in-page scroll-anchor. - **No external embeds.** No YouTube, no Vimeo, no Twitter, no Substack, no Mailchimp. - **No third-party fonts beyond Google Fonts**. JetBrains Mono, DM Mono, Cormorant Infant — that is the entire family list. - **No dark mode, no light mode toggle**. The page is its one light. The aquarium's bluish 4:17 a.m. glow is the only mode. - **No motion-reduce override** (this is a creative/aesthetic exhibit, not an enterprise app — drift is the medium). The reader should arrive, scroll through seven zones over roughly four-and-a-half minutes, finish at the Bedrock colophon feeling slightly hypnotized and faintly tearful, and close the tab without bookmarking. The page does not want to be returned to. A dream is not a destination. ## Uniqueness Notes This design's differentiators, each measured against the 70-design corpus revealed by the frequency analysis: 1. **Neomorphism + tropical-fish + triadic + dreamy-ethereal is a quadruply-empty intersection.** The frequency report shows neomorphism at **1%**, tropical-fish at **11%**, triadic palette at **4%**, and dreamy-ethereal tone at **1%**. None of the rare aesthetics has been combined with another rare in the corpus, and no prior site uses neomorphism as the *substrate* for tropical-fish photography. archetype.works claims this empty quadrant and treats neomorphism not as decorative soft-UI but as the literal floor of an aquarium — a structural metaphor no prior design has attempted. 2. **The fish are load-bearing semantic objects, not decoration.** Where prior sites use photography (97% of corpus) as hero imagery or background bokeh, archetype.works binds each of seven photographs to one Jungian archetype and uses the fish as the page's only narrative subject. The fish *are* the archetypes; the fish *are* the navigation; the fish *are* the depth indicator. No other site in the corpus binds imagery to semantics this tightly. 3. **Triadic palette applied only to haze, never to surface.** Triadic is rare (4%) and almost universally misused as flat-fill panels. archetype.works keeps the neomorphic surface monochromatic putty and pushes the triadic harmony entirely into background gradient haze — a consciously inverted application that preserves the soft-UI discipline while still claiming the rare palette tag. 4. **Mono typography is humanist-mono, not tech-mono.** Mono is at 95% — nearly universal — and the corpus default is square, terminal-styled tech-mono. archetype.works deliberately picks JetBrains Mono and DM Mono (humanist axes, open apertures, slight calligraphic memory) to soften the mono category from inside; this is mono **against** the corpus's mono. 5. **No cursor-follow, no magnetic hover, no stagger.** The corpus average is cursor-follow at 62%, magnetic at 50%, stagger at 65%. archetype.works refuses all three because each violates the dreamy-ethereal contract — a dream cannot be aware of the dreamer. This refusal is itself a differentiation: the page has only **two** interaction patterns (underline-draw on read-line, ripple on click) and one ambient animation (drift-bubbles), and that minimalism is the move. 6. **Underline-draw is occasionally pre-emptive.** In the Trickster zone, the underline draws *before* the cursor arrives — a single intentional cause-and-effect violation. No other corpus site uses underline-draw as a narrative device rather than a feedback signal. 7. **Layered-depth is treated as literal water column, not z-axis cards.** Layered-depth is at 12% in the corpus and is typically expressed as overlapping translucent cards. archetype.works treats it as a vertical descent through a 7-zone aquarium with discrete depth ranges, IUCN-status pebbles, and species census cards — depth as *biome*, not as *parallax*. 8. **The chosen seed.** This site's documented seed is `aesthetic: neomorphism, layout: layered-depth, typography: mono, palette: triadic, patterns: underline-draw, imagery: photography, motifs: tropical-fish, tone: dreamy-ethereal`. Every section above is a literal honoring of those eight axes simultaneously. **Avoided patterns from frequency analysis (consciously declined):** - **hand-drawn aesthetic (94%)** — declined; aesthetic is neomorphism, not illustration. - **glassmorphism (68%)** — declined; superficially adjacent to neomorphism but operates on a different visual law (blur vs. bevel). Holding the line on neomorphism's monochrome substrate is the discipline. - **gradient palette (94%)** — declined as surface, used only in haze layers. - **warm palette (92%)** — declined; the page is cool-cyan-dominant. Apricot is the only warm note and it appears only as text underline. - **full-bleed layout (87%)** — declined; the page is centered and column-confined. - **card-grid layout (65%)** — declined; the layout is a vertical depth dive, not a card grid. - **parallax pattern (92%)** — demoted from full-page parallax to haze-only parallax. - **spring (67%) / cursor-follow (62%) / magnetic (50%) / stagger (65%)** — all declined as listed above. - **vintage motifs (24%) / nature motifs (21%)** — declined; motif is specifically tropical-fish, not generic nature. - **warm-inviting tone (20%) / pastoral-romantic (18%)** — declined; tone is dreamy-ethereal. What remains is a page that, by simultaneously embracing four rare-corpus tags (neomorphism, triadic, dreamy-ethereal, tropical-fish-as-semantic-subject) and refusing six saturated patterns, occupies a region of the design space no prior site has occupied.