# Design Language for archetypos.dev ## Aesthetics and Tone archetypos.dev is a meditative encounter with form itself — a site that feels like stepping barefoot into a Tadao Ando concrete pavilion at golden hour, where the last light of day pours through a single narrow slit in the wall and paints a blade of amber across a polished stone floor. The aesthetic is zen in the most architectural sense: not decorative minimalism, but the profound emptiness that makes a space feel sacred. Every pixel of negative space is deliberate. The site breathes. The domain name — "archetypos" — points to primordial forms, the original patterns from which all others derive. This becomes the conceptual spine: the site presents itself as a catalog of elemental geometric shapes that shift and dissolve and reconstitute, as though the viewer is witnessing the fundamental building blocks of visual reality in their most distilled state. The tone is futuristic-cutting-edge, but not in the chrome-and-neon sense — rather, the cutting edge of contemplation, where advanced technology serves stillness. Think: a research lab where they study silence. Think: the control room of a spacecraft designed by a Kyoto monk. The future here is calm, precise, and deeply geometric. Every interaction is unhurried. Hover states take 800ms to complete. Scroll transitions are eased with cubic-bezier curves that mimic the deceleration of a stone settling into sand. Nothing snaps. Nothing bounces. Everything morphs — smoothly, inevitably, like watching a time-lapse of crystal growth. ## Layout Motifs and Structure The layout is a strict single-column vertical flow, but "single-column" here does not mean "narrow centered text block." The column IS the viewport. Content occupies the full width of the screen, but elements within each section are positioned with extreme intentionality using a hidden 12-column grid where only 4-6 columns are ever activated at once. The active columns shift section by section — sometimes content lives in columns 2-5 (left-biased), sometimes in columns 7-10 (right-biased), sometimes a single element spans columns 4-9 (centered but not symmetrically). This creates a gentle lateral rhythm as the user scrolls, a breathing motion left-right-center that prevents monotony without introducing chaos. **Section Architecture:** - **Opening void:** A 100vh blank field in the deepest background color (#1a1018), interrupted only by a single geometric shape — a circle — that fades in over 3 seconds at 40% opacity in the sunset palette's warmest tone (#ff6b35). The domain name does not appear until the user scrolls. This is an act of confidence: the site trusts its visitor. - **Name reveal zone:** As the user scrolls past the opening void, the text "archetypos" appears letter by letter (not typewriter-style, but as a morph: each letter grows from a tiny geometric dot into its final letterform over 600ms, staggered 80ms apart). The text sits in columns 3-10, left-aligned, at approximately 8vw font size. Below it, a single subtitle line in 1.2rem body text: a short philosophical fragment about form and pattern, positioned in columns 3-7. - **Shape meditation sections:** Three to four full-viewport sections, each dedicated to a single geometric shape (circle, triangle, square, hexagon). Each shape is rendered as a large SVG (50-70vw) that undergoes a slow continuous morph animation — the circle breathes (subtle scale oscillation), the triangle rotates imperceptibly (1 degree per second), the square rounds its corners and then sharpens them on a 12-second loop, the hexagon pulses its stroke width. Accompanying text (2-3 sentences) is positioned in different column ranges per section, creating that lateral breathing. - **Convergence section:** A final full-viewport section where all four shapes are present simultaneously, arranged in a loose geometric composition. They drift slowly, overlapping and separating, their colors cycling through the sunset palette. A closing statement appears in small text at the bottom of the viewport. - **Coda:** A 50vh section of pure background color with only the domain name centered in small type (0.8rem) and no other content. The page ends in silence. Vertical spacing between sections is generous — minimum 30vh of pure negative space between content blocks, allowing the background color to dominate. No visible section dividers, no horizontal rules, no decorative borders. ## Typography and Palette **Typography:** - **Display / Headlines:** "Josefin Sans" (Google Fonts) — a geometric sans-serif with elegant, slightly Art Deco proportions and distinctive high x-height. Used at 8vw for the main domain title and 3.5vw for section headings. Weight: 300 (Light) exclusively. The extreme lightness at large sizes creates the zen quality — letterforms that feel drawn with a single thin brush stroke. Letter-spacing: 0.12em for the domain title (wide, airy), 0.06em for section headings. All text is lowercase, reinforcing calm. - **Body / Paragraphs:** "Work Sans" (Google Fonts) — a geometric sans-serif designed for screen readability with a warm, humanist undercurrent that softens the strict geometry of Josefin Sans. Used at 1.1rem, weight 300, line-height: 1.85 (extremely generous). Letter-spacing: 0.02em. Color: #c4a07a (muted amber) on dark backgrounds, ensuring the text feels warm but recessive — it does not compete with the geometric shapes for attention. - **Accent / Labels:** "Josefin Sans" at 0.7rem, weight 400, letter-spacing: 0.2em, uppercase. Used sparingly for small annotations near shapes (e.g., "circle," "triangle") — these are whispered labels, not shouty captions. Color: #8a6e52 (deep bronze). **Palette:** The palette is sunset-warm: the colors of the sky in the fifteen minutes between golden hour and nightfall, captured in their most saturated and most muted states simultaneously. | Role | Color | Name | |------|-------|------| | Background (deep) | #1a1018 | Twilight Abyss | | Background (mid) | #2d1f2b | Dusk Plum | | Primary accent | #ff6b35 | Burning Tangerine | | Secondary accent | #e8a44a | Amber Glow | | Tertiary accent | #c4587a | Sunset Rose | | Warm highlight | #ffd275 | Saffron Haze | | Body text | #c4a07a | Desert Sand | | Muted label | #8a6e52 | Deep Bronze | | Shape stroke | #ff8c5a | Ember Line | The palette never includes pure white or pure black. The deepest dark is #1a1018 (a purple-tinted near-black that reads as warm void), and the brightest light is #ffd275 (a golden yellow that reads as controlled warmth, never harsh). This tonal compression creates intimacy — the site feels like a room lit by a single lantern. ## Imagery and Motifs **Abstract Geometric Shapes (Primary Visual Element):** All imagery is generated purely through SVG and CSS — no photographs, no raster images, no external assets. The four archetypal shapes are the entire visual vocabulary: 1. **Circle (archetypos.circle):** A 60vw SVG circle, stroke-only (no fill), stroke color #ff6b35, stroke-width: 1.5px. The circle breathes: a CSS animation scales it between 0.97 and 1.03 over an 8-second ease-in-out loop. On scroll-into-view, the circle draws itself using a stroke-dasharray/stroke-dashoffset animation over 2 seconds. 2. **Triangle (archetypos.triangle):** A 55vw equilateral triangle SVG, stroke-only, stroke color #e8a44a, stroke-width: 1px. It rotates continuously at 0.5 degrees per second (barely perceptible — the viewer senses motion without identifying it). A second triangle, 10% smaller, overlays at 3-degree offset, stroke color #c4587a at 40% opacity, creating a subtle geometric echo. 3. **Square (archetypos.square):** A 50vw square SVG with border-radius morphing between 0% and 15% on a 12-second cubic-bezier loop — the shape continuously questions whether it is a square or a rounded rectangle, embodying the "morph" pattern. Stroke color: #ffd275, stroke-width: 1.2px. 4. **Hexagon (archetypos.hexagon):** A 45vw regular hexagon SVG. Its stroke-width oscillates between 0.5px and 3px over 10 seconds, and its rotation shifts by 30 degrees every 15 seconds (eased, not snapped), meaning it periodically presents as a different orientation of the same shape. Stroke color: #ff8c5a. **Morph Interactions:** The morph pattern is the site's signature animation paradigm. Beyond individual shape animations: - When two sections are both partially in the viewport during scrolling, their shapes merge: the exiting shape morphs into the entering shape via SVG path interpolation (using a lightweight JS morph library or CSS clip-path transitions). The circle becomes the triangle becomes the square becomes the hexagon. - On hover (desktop), shapes respond by subtly increasing their stroke-width by 0.5px and shifting their color one step warmer in the palette (circle goes from Burning Tangerine to Amber Glow) over 800ms. **Geometric Motifs in Background:** The background is not flat. A field of tiny geometric dots (2px circles) at 5% opacity is scattered in a quasi-random Poisson distribution across the full viewport, rendered as a single SVG pattern tile. These dots create the faintest texture — barely visible but preventing the background from feeling digitally dead. The dot color is #2d1f2b on the #1a1018 background, meaning they are only visible at close viewing distance or on high-density displays. This is a nod to the zen concept of hidden detail that rewards attention. **No Icons, No Illustrations, No Photos:** The site contains zero conventional imagery. No hero images, no icon sets, no illustrations. The geometric shapes ARE the imagery. This radical commitment to abstraction is the core differentiator — the site proves that four shapes and nine colors can create a complete visual universe. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be built as a single HTML file with no navigation, no header, no footer, no hamburger menu, no links. It is a self-contained contemplative object — a digital tokonoma (Japanese display alcove). The entire experience is scrolling through a vertical sequence of geometric meditations. **Technical Directives:** - **HTML structure:** A single `
` element containing 6-8 `
` elements, each `min-height: 100vh`. No `