# Design Language for archetypos.dev

## Aesthetics and Tone

archetypos.dev occupies the quiet, ink-scented chamber where a 19th-century patent office shares a wall with an Edo-period woodblock printer's workshop. The Greek root *arche-typos* means "original mark" or "primal impression" -- the matrix, the punch, the die from which all copies descend. This site treats archetypes not as psychological categories or mystical figures but as **engineering diagrams of the soul**: isometric cutaways of primordial forms, rendered in the calm, authoritative language of a Victorian technical plate crossbred with the axonometric precision of a Japanese architectural sketch.

The mood is **horological** -- the patience of a watchmaker inspecting escapements with a loupe, finding that each gear is an archetype and each archetype is a gear. Visitors arrive expecting an abstract psychological platform and instead encounter what feels like a leather-bound folio of engineered impressions: pressure plates, embossing dies, printing matrices, each one revealing its interior machinery through isometric section-view illustrations drawn in the language of hand-inked engineering.

Tonally the site is **scholarly-intellectual** crossed with a touch of **nostalgic-retro** -- not the kitsch of vaporwave but the genuine gravity of a nineteenth-century broadsheet technical journal, the kind with foldout engineering plates showing steam engines in axonometric section. There is no hurry. There is no enthusiasm. There is only the quiet conviction of a draftsman who has spent thirty years drawing exactly the same perfect ellipse and who now draws it for you.

Where other archetype-themed designs reach for Jungian mysticism or editorial drama, archetypos.dev reaches for the drafting table lamp, the rotring pen, the T-square, the burnished brass rule. It asks: what if archetypes were *manufactured objects* -- precision tools for impressing meaning onto consciousness? What would their technical specifications look like? What would the assembly drawing of "The Hero" reveal if you could see its gears?

## Layout Motifs and Structure

The entire site is a **technical folio** -- a sequence of plate pages drawn on toned paper, each one devoted to a single archetypos (original impression) and organized according to the conventions of a 19th-century engineering manual. There is no hero section. There is no hamburger menu. There is a **plate numbering system** in the upper-right corner (`PL. I`, `PL. II`, `PL. III`) rendered in engraved roman numerals that serves as the sole navigation.

**Primary structural elements:**

- **The Frontispiece (0-100vh):** A single isometric illustration sits dead-center on a field of toned oatmeal paper: a cutaway view of an ornate embossing die showing its interior mechanism. The die is labeled `ARCHETYPOS I - PRIMA IMPRESSIO` in small caps beneath, in the style of a museum specimen card. A hand-lettered dimension line with arrows indicates the scale. No welcome text, no tagline, no CTA. Just the object, presented for contemplation.

- **The Folio Pages (each 100vh):** Each subsequent "plate" presents one archetype as an isometric engineering drawing with four quadrants: (upper-left) the ELEVATION VIEW -- the archetype seen face-on as a printed stamp impression on aged paper; (upper-right) the SECTION VIEW -- a cutaway showing internal mechanism, gears, springs, levers that represent the archetype's psychological components; (lower-left) the PART LIST -- a hand-lettered specification table listing components in small caps: `CRANKSHAFT: AMBITION`, `ESCAPEMENT: PATIENCE`, `MAINSPRING: WILL`; (lower-right) the ASSEMBLY NOTE -- a paragraph of copper-plate handwriting describing the archetype's operation, couched in the technical language of a patent application.

- **The Margin Apparatus:** Along the outer edge of every plate runs a vertical band of marginalia -- measurement rules in picas and ciceros (the old typographer's units), tiny isometric reference sketches showing the archetype in alternative orientations, Greek letter annotations (α, β, γ) referencing specific components, and foxing stains that appear to have soaked through from the plate behind.

- **The Index Fold-Out (horizontal scroll zone):** One section breaks from the vertical folio structure into a horizontal scroll: an enormous foldout index-plate showing all twelve archetypes arranged in an isometric grid, each one a tiny precise miniature connected to its neighbors by an annotation web of lines, arrows, and Greek letter relationships. This is the only horizontal scroll on the site and it functions as an overview diagram that users can drift through at their own pace.

- **The Colophon (final 100vh):** The site ends not with a CTA but with a formal colophon plate in the 19th-century style: `ENGRAVED BY LIGHT ON SILICON GLASS IN THE YEAR MMXXVI`, followed by the tools used (specified as fictional instruments: "brass loupe, T-square, horological lathe"), the type specimen notes, and the paper stock ("simulated oatmeal laid, 120gsm"). The colophon is itself an isometric drawing of a drafting table with tools arranged on its surface.

**Grid logic:** The underlying grid is a traditional **manuscript grid** (single text column with generous outer and inner margins) subverted by the isometric drawings, which break out of the text column and occupy asymmetric space at 30-degree projection angles. The isometric projection creates an implied three-dimensional grid over the page: the 30-degree lines of the drawings form a secondary geometric rhythm that makes the flat paper feel like a surface being inscribed at an angle.

## Typography and Palette

**Typography:**

- **Display / Plate Titles:** "IM Fell English" (Google Fonts) -- a digital revival of John Fell's 17th-century Oxford types, with irregular letterforms that retain the rough impression of hand-cut metal type struck through an inking plate onto laid paper. Used for plate numbers and archetype names at sizes from `clamp(2.5rem, 5vw, 4.5rem)`, set with old-style figures and small caps, letter-spacing `0.03em`. The irregularity of the impressions is a FEATURE: each character feels individually inked, slightly off-register, imperfect in the honest way of letterpress.

- **Body / Technical Specification:** "Cormorant Garamond" (Google Fonts) at weight 400, size `clamp(0.95rem, 1.1vw, 1.15rem)`, line-height `1.7`, tracking `0.01em`. The tall x-height and sharp Garamond serifs evoke a patent-office specification document. Used for the assembly notes, paragraphs of scholarly prose, and caption text.

- **Technical Annotation / Part Lists:** "Crimson Pro" (Google Fonts) at weight 500 SMALL-CAPS at sizes `0.78rem` with `letter-spacing: 0.14em`. Used exclusively for part-list tables, dimension labels, and quadrant headers (`ELEVATION`, `SECTION`, `PART LIST`, `ASSEMBLY NOTE`). The small-caps setting evokes museum specimen labels and patent drawing annotations.

- **Handwritten Marginalia:** "Mrs Saint Delafield" (Google Fonts) -- a copperplate script face, used sparingly at weight 400, size `1.1rem`, for the "assembly note" paragraphs that describe each archetype's operation. Rendered in dark sepia ink, the script conveys the voice of a draftsman or engineer annotating their own drawing after hours.

- **Monospaced Measurement:** "Redaction 35" (Google Fonts, alternative fallback: "JetBrains Mono") at size `0.7rem`, used only for the measurement rules, picas/ciceros markings, and coordinate annotations in the margins. Rendered in the faintest ink of the palette so as not to compete with primary content.

**Palette:**

The palette is **sepia-nostalgic** crossed with a precise draftsman's set -- the specific pigments of a Victorian engineering folio that has aged for 140 years in a climate-controlled archive.

- **#e8dcc4 Oatmeal Laid** -- the primary surface; a warm, slightly-yellowed paper tone, simulating 120gsm laid paper with the faintest linen texture.
- **#d4c29f Aged Vellum** -- a deeper paper tone used for alternate sections, cartouches, and the frontispiece; represents a slightly different paper stock bound into the same folio.
- **#2d1f12 Inkstone Brown** -- the primary ink color; a warm, deep brown-black that reads as iron-gall ink aged into brown, never pure black. Used for all primary line-work and body text.
- **#5c3a1e Walnut Crop** -- a secondary ink tone; used for dimensional annotations, Greek letter labels, and the handwritten script marginalia.
- **#8b2c1e Cinnabar Seal** -- a single accent color appearing rarely: on official-looking stamp impressions ("FILED 1897"), on chop-seal authentications in the margin, and on certain key dimension markers. The color of cinnabar mineral ink used for imperial seals and proofreading marks.
- **#6b5d3e Verdigris Tarnish** -- the faint green-brown oxidation tone used for the foxing stains, the occasional water-ring mark, and the patina on the isometric illustrations of metal components. Represents brass that has aged.
- **#3f2a4a Indigo Drop** -- a rare deep purple-blue, used only for the measurement rules and the thinnest marginal annotations. Evokes the purple indigo of a draftsman's chalk-line snap.

Contrast ratios against the paper ground are kept honest -- no pure black, no pure white -- creating the warmth of a genuinely old document rather than a Photoshop filter.

## Imagery and Motifs

**Core Visual Motifs:**

- **Isometric Archetype Machines:** The defining imagery of the site. Each archetype is illustrated as a precision mechanical object rendered in true **30/30/30 isometric projection** (not dimetric, not trimetric -- strict isometric, the way Victorian engineers drew). These are not literal machines but imaginary archetype-apparatuses: The Hero is a brass escapement that regulates moments of courage; The Sage is a horological compound microscope whose lenses focus wisdom; The Trickster is a nested pantograph that copies one gesture into another; The Caregiver is a hand-blown glass alembic that distills tenderness. Each machine is drawn in continuous ink line at varying weights (0.3pt, 0.5pt, 0.8pt, 1.2pt for dimension, outline, cutaway, and heavy shadow respectively) in Inkstone Brown on the paper ground. Interior mechanisms are shown via CUTAWAY SECTIONS with tiny hatching lines indicating solid material in the 19th-century engineering drawing style.

- **Stamp-Impression Elements:** Throughout the plates appear simulated impressions of archetype stamps pressed into the paper -- faint shadow on one side, slight paper-deformation on the other, as if the page itself has been embossed. Each impression is slightly imperfect: a missed edge here, an over-inked corner there. These imperfections are preserved and even exaggerated to convey the tactile reality of pressing metal into paper.

- **Hand-Lettered Annotation Systems:** Every technical drawing is annotated in the 19th-century engineering manner: leader lines ending in arrowheads point to components, with labels set in small caps. Greek letters (α, β, γ, δ) identify repeated components across multiple plates. Dimension lines extend between arrows, with measurements rendered in the old typographer's picas and ciceros (e.g., "14 picas, 6 points"). The annotation network is PART of the visual composition, not ancillary to it -- the callouts dance around the machinery like scholarly moths.

- **Cartouche Panels:** Each plate features at least one ornate cartouche -- a decorative bordered panel in the style of a patent certificate seal -- that contains the archetype's formal designation. The cartouches are hand-drawn in fine line work with subtle flourishes: laurel branches, engraved ribbons, small classical motifs (no kitsch, no clip-art; every line is drawn as if by a draftsman who considered the flourish's proportions for thirty seconds before beginning).

- **Foxing and Aging Patterns:** Randomly distributed across every page are authentic-feeling aging marks: foxing stains (brown speckling from fungal spores in historic paper), occasional water-rings that appear to have bled through from a careless tea-cup, tiny pinholes at the corners where the paper was once tacked to a drafting board, subtle creases indicating the page has been folded and reopened. These are rendered with SVG filters and subtle layered overlays, never as a single repeating texture pattern.

- **The Continuous Line Index:** On the foldout overview plate, all twelve archetype machines are connected by a single continuous hand-drawn line that weaves between them like the filigree of a Renaissance drawing. Following the line with your cursor reveals the relational language between archetypes -- which archetypes share components (the same escapement gear appears in both Hero and Sage; the same lens appears in Sage and Magician).

- **Brass Tool Inventories:** Several subsidiary plates show the *tools* required to manufacture archetypes: calipers, dividers, burin engravers, a copper-plate printing press, a brass loupe with its own cross-sectioned mechanism. These tool plates function as material footnotes -- reminders that archetypes are crafted, not merely found.

## Prompts for Implementation

**Narrative Architecture:** The site is a folio to be read, not a SaaS landing page to be scanned. Implementation must prioritize the feeling of TURNING PAGES -- a deliberate, weighted, patient advance through a sequence of precisely drawn plates. The user is a reader in a private archive, not a visitor being converted into a lead. There are no CTAs. There is no pricing. There are no testimonials. There is no stat-grid. If a button must exist, it is a small engraved plaque in the colophon that reads `CORRESPOND` and opens a mailto link that appears as a folded letter in the margin.

**Animation Philosophy:**

1. **Ink-Draw Reveals:** Every isometric illustration uses `stroke-dasharray` animation so that when a plate enters the viewport, the line-work DRAWS ITSELF line by line -- heaviest outlines first, then secondary lines, then hatching, then annotations, then the handwritten caption. The total draw duration is deliberately slow: 3-4 seconds for a main illustration, creating the feeling that a ghostly draftsman is re-inking the plate for you as you watch. Stroke draws should feel weighted and intentional, not mechanical -- use `cubic-bezier(0.77, 0, 0.175, 1)` easing to suggest a pen hand slowing at the end of each stroke.

2. **Impression Embossing:** The stamp-impression elements use a subtle 3D transform combined with box-shadow layers to simulate the moment of being pressed into paper. On scroll into view, the impression appears to be stamped: a barely-perceptible pressure shadow forms over 400ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` easing (a slight overshoot, like paper relaxing after pressure releases).

3. **Parallax by Paper Layers:** The page is conceived as THREE physical paper layers stacked: a base of oatmeal laid paper (scrolls at 1.0x), a mid-layer of technical drawings (scrolls at 1.05x), and a top-layer of marginalia and annotations (scrolls at 1.10x). The tiny parallax differential creates the illusion of transparent onion-skin tracing paper layered over each plate.

4. **Marginalia Choreography:** As each plate scrolls into position, the marginalia animate in with a slight delay -- dimension lines extend from a point with `transform-origin` set to their anchor, Greek letter labels fade in at their positions, measurement tick-marks stagger along their rulers. The effect is of a draftsman annotating the drawing AFTER it has settled onto the page.

5. **Cursor as Loupe:** The cursor is replaced on specific plate areas by a small isometric brass loupe SVG cursor. When hovering over annotated regions, a localized magnification effect reveals finer-grained details in the drawing -- tinier hatching, secondary annotations, Greek letter footnotes -- that are otherwise rendered invisible. This is the site's ONE playful surprise and it rewards exploration.

6. **Horizontal Scroll for the Fold-Out:** When reaching the Index Fold-Out section, the scroll direction SMOOTHLY rotates 90 degrees -- vertical scroll continues but the content moves horizontally, creating the physical sensation of unfolding a large map plate from a bound book. Use `scroll-snap` combined with intersection observers to manage the transition.

7. **No Hover Hype:** Buttons, links, and interactive elements use only the most restrained hover treatments: a thin underline draws itself in 200ms, or the ink darkens from Walnut Crop to Inkstone Brown. NO scale transforms, NO glow effects, NO color shifts to bright accents. This is a 19th-century document; it does not flirt with you.

**Technical Implementation Notes:**

- **SVG-first rendering:** All isometric illustrations are hand-crafted SVG files with strokes, not raster images. This allows the draw animations, preserves crispness at any zoom, and keeps file sizes reasonable. Each SVG is a single file per plate.
- **Custom CSS transforms for isometric projection:** Use the transformation matrix `transform: matrix(0.866, 0.5, -0.866, 0.5, 0, 0)` for true isometric tiling of repeating patterns (grid backgrounds, texture fills).
- **Layered paper texture:** Build the paper ground from three layered CSS gradients plus a tiled seamless SVG noise pattern; this avoids a single repeating image and creates the illusion of genuine paper variation.
- **Typography-critical letter-spacing:** Small caps titles MUST have `font-variant: small-caps` + `letter-spacing: 0.14em`. Without the tracking, the title rhythm collapses.
- **Accessibility parallel layer:** The isometric drawings include visually-hidden `<desc>` and `<title>` elements that describe each archetype machine in plain prose so that screen readers get the full scholarly description.

**Storytelling Imperative:** The reader must come away feeling they have consulted a specialist's reference work -- a folio of archetypes presented as a craftsman's catalog of imagined machinery. Every design decision should reinforce the conviction that this is a DOCUMENT, not a webpage. If any section feels like a landing-page convention, rework it into a technical plate convention.

## Uniqueness Notes

**Differentiators from other designs in this portfolio:**

1. **Isometric technical-drawing language as core identity:** While the frequency analysis shows isometric aesthetic appears in only 2% of portfolio designs, archetypos.dev commits to it absolutely. Every archetype is presented as a precision isometric engineering illustration, never as typography, photography, or generative art. This sets it apart from both sibling archetype-themed designs (archetypic.dev's typography-as-imagery, archetype.works' geometric-glyphs-in-negative-space).

2. **Sepia-nostalgic palette with no pure white or black:** While 97% of portfolio designs use gradients and 95% use warm palettes, few commit to genuine sepia-nostalgic tones (2%). archetypos.dev uses a palette calibrated to imitate a specific material artifact (aged laid paper, iron-gall ink browning with age) rather than a digital color scheme. No pure #ffffff exists anywhere on the site.

3. **19th-century engineering folio structure:** Against the 92% prevalence of card-grids and 85% of centered layouts, archetypos.dev adopts a plate-based folio structure (magazine-spread, only 2% in frequency analysis) with a single-column manuscript grid AND asymmetric isometric illustrations that break the grid. The navigation is plate numbering (Pl. I, Pl. II) rather than a traditional menu.

4. **Handwritten copperplate marginalia alongside small-caps technical annotation:** Mixing five distinct typefaces (IM Fell English display, Cormorant Garamond body, Crimson Pro small-caps, Mrs Saint Delafield script, Redaction mono) in a disciplined hierarchy creates a typographic density that reads as an authentic historic document rather than a contemporary web typography pairing.

5. **"Machinery of the soul" concept:** The central conceit -- that archetypes are mechanical apparatuses with gears, escapements, mainsprings, and lenses -- is a concrete, specific metaphor that no other archetype-themed site in the portfolio adopts. It gives every illustration concrete content to render rather than reaching for abstract psychological symbolism.

6. **Ink-draw animation as primary interaction:** While 95% of designs use scroll-triggered reveals, archetypos.dev specifically uses `stroke-dasharray` ink-drawing animations at a deliberately slow pace (3-4 seconds per plate) to enforce a contemplative reading cadence. The slowness is the feature, not a bug.

7. **Cursor-as-loupe interaction:** Replacing the cursor with a brass loupe SVG on specific plate regions and using it to reveal hidden fine-grained detail is a novel interaction not present in any other design in the portfolio -- and it physicalizes the metaphor (an archivist using a loupe to examine a specimen).

8. **Horizontal fold-out scroll section:** While 20% of designs use horizontal scroll, no other design in the portfolio contextualizes horizontal scroll as "unfolding a map plate from a bound technical folio" -- a narrative framing that makes the direction change feel physical rather than arbitrary.

9. **Rejection of all conversion-optimized patterns:** archetypos.dev contains no CTAs, no pricing blocks, no stat grids, no testimonials, no newsletter signup, no hero-dominant layout, no bento-box. The site rejects the SaaS vernacular entirely in favor of a scholarly document vernacular. The only interactive terminus is a small engraved `CORRESPOND` plaque in the colophon.

**Chosen seed/style: "isometric technical docs"** (seeds.json) -- reinterpreted as a 19th-century engineering folio rather than a contemporary SaaS documentation site. This interpretation leverages multiple underused categories from the frequency analysis simultaneously (isometric aesthetic 2%, magazine-spread layout 2%, sepia-nostalgic palette 2%, nostalgic-retro tone 2%) while avoiding the saturated patterns (corporate aesthetic 87%, card-grid layout 92%, photography imagery 92%, scroll-triggered patterns 95%, mono typography 87%, warm palette 95%).

**Avoided patterns from frequency analysis:**
- **Corporate aesthetic (87%)** — rejected in favor of editorial/scholarly-archival.
- **Card-grid layout (92%)** and **centered layout (85%)** — replaced with folio-plate manuscript structure.
- **Photography (92%)** — replaced entirely with hand-drawn isometric SVG engineering illustrations.
- **Gradient palette (97%)** — rejected; all color transitions are physical (ink bleed, foxing, paper variation), never CSS gradients.
- **Mono typography (87%)** — used only in the most marginal role (tiny measurement rules), never as a primary voice.
- **CTA-heavy landing patterns** — no CTAs exist.
- **Bento-box (27%)** and **dashboard (7%)** — both irrelevant to a document-folio structure.
- **Mysterious-moody tone (37%)** — avoided in favor of scholarly-intellectual calm (the archetypes are demystified by being shown as precision instruments).
<!-- DESIGN STAMP
  timestamp: 2026-04-24T06:49:16
  domain: archetypos.dev
  seed: unspecified
  aesthetic: archetypos.dev occupies the quiet, ink-scented chamber where a 19th-century pate...
  content_hash: c3496c56ee0d
-->