# Design Language for archetypic.dev ## Aesthetics and Tone archetypic.dev is a curio cabinet of personas — a playful yet refined portfolio that treats each project as an archetype rendered in sepia-washed collage. The visual direction draws from Victorian-era specimen catalogues crossed with a whimsical scrapbooking aesthetic: hand-torn paper edges float over aged parchment backdrops, and every project card tilts gently in 3D space as if pinned to an angled display board in a collector's parlor. The playfulness emerges not from bright colors or bouncing animations but from the unexpected juxtaposition of stately serif typography against circuit-board trace motifs, as if an Edwardian inventor built a portfolio out of telegraph parts and pressed flowers. The mood is elegant-sophisticated with an undercurrent of mischief. It feels like being welcomed into the private study of someone who catalogs ideas the way entomologists catalog butterflies — with meticulous care but obvious delight. Nothing is sterile; everything has a deliberate patina, a wink of personality behind the polish. The site should feel like a physical object: weighted, textured, and warm in the way old books and antique instruments are warm. ## Layout Motifs and Structure The primary layout is a **portfolio-grid** — a tilted, perspective-shifted grid of project cards that creates an oblique viewing angle, as if the user is looking down at specimens arranged on a slightly angled drafting table. The grid uses CSS `perspective` (1200px on the container) with subtle `rotateX(3deg)` on the grid wrapper, giving the entire card field a gentle 3D rake. **Structure:** - **Hero zone (100vh):** A single full-screen sepia-toned parchment field. The site title "archetypic.dev" is set in large Playfair Display italic, centered vertically. Below it, a single line of body text in Alegreya Sans. Behind the text, a faint circuit-board trace pattern (SVG, drawn with 0.5px strokes in #8b7355 at 15% opacity) slowly rotates in a 120-second CSS animation. No scroll indicator — the parchment texture and the gentle rotation of the background pattern invite curiosity. - **Portfolio grid (main section):** A 3-column grid on desktop (2 on tablet, 1 on mobile) with `gap: 2.5rem`. Each cell is a project card styled as a collage specimen — layered paper rectangles with visible paper-tear edge masks (SVG clip-paths with jagged organic contours). Cards are not all the same height; they use `grid-row: span 1` or `span 2` in an alternating pattern to create visual rhythm without a masonry JavaScript dependency. The grid container has a subtle `transform: perspective(1200px) rotateX(2deg)` that the user can override via cursor position using a tilt-3d interaction (see Patterns). - **Detail panels:** Clicking a card triggers a `tilt-3d` flip animation — the card rotates 180 degrees on its Y-axis to reveal a back face with project details, rendered on a darker parchment (#3d2b1f) with cream text (#f5e6c8). No modal overlays or route changes; the interaction happens in-place within the grid. - **Footer zone:** A single-row strip styled as a torn paper edge along the top border, containing minimal contact information in Alegreya Sans at 14px, with circuit-trace SVG dividers between each link. **Avoid:** No asymmetric freeform layouts. No centered single-column reading experiences. No dashboard chrome. The grid is the architecture. ## Typography and Palette **Typography:** - **Display / Headings:** "Playfair Display" (Google Fonts) — an elegant transitional serif with high stroke contrast and distinctive italics. Used at 3rem–5rem for the hero title (italic variant), 1.75rem–2.25rem for section headings (regular weight 700). Letter-spacing: -0.01em for headings. The high contrast between thick and thin strokes echoes the tension between playful and sophisticated. - **Body / Paragraphs:** "Alegreya Sans" (Google Fonts) — a humanist sans-serif companion to Playfair Display, with subtle calligraphic DNA that prevents the body text from feeling clinical. Used at 1rem (16px) with line-height 1.75 for comfortable reading. Weight 400 for body, 500 for emphasis. This font's slightly warm personality bridges the gap between the ornate display type and functional readability. - **Accent / Labels:** "IBM Plex Mono" (Google Fonts) — used sparingly for project metadata labels, dates, and technical annotations on card backs. Set at 0.75rem (12px), weight 400, letter-spacing: 0.06em, text-transform: uppercase, color #8b7355. This provides the circuit/technical counterpoint to the otherwise organic typography stack. **Palette (Sepia-Nostalgic):** | Role | Color | Hex | |------|-------|-----| | Parchment Base | Warm aged cream | #f5e6c8 | | Deep Sepia | Rich walnut brown | #3d2b1f | | Copper Accent | Oxidized copper | #b87333 | | Ink Dark | Near-black warm ink | #1a1410 | | Circuit Trace | Muted brass | #8b7355 | | Highlight Glow | Amber candlelight | #d4a056 | | Card Shadow | Translucent umber | rgba(61, 43, 31, 0.25) | | Cream Text | Pale vellum | #ede0c8 | The palette is deliberately non-gradient and non-neon. Colors shift in lightness and warmth rather than hue. The entire site lives within a 30-degree hue band (warm browns to amber), creating a monochromatic-warm scheme that avoids the overused gradient and high-contrast palettes found in other designs. Subtle texture is achieved through CSS `background-image` noise overlays (SVG turbulence filter at 0.4 baseFrequency) rather than color variation. ## Imagery and Motifs **Collage Composition:** Every project card is a layered collage — not a flat card with a thumbnail. Each card consists of 2-3 overlapping rectangular shapes at slightly different rotations (CSS transforms between -3deg and +4deg), with the topmost layer containing the project screenshot or illustration, the middle layer a torn-paper texture strip (SVG clip-path with organic jagged edges), and the bottom layer a solid sepia field. The layering creates physical depth without box-shadows — depth comes from overlap and rotation, not blur. **Circuit-Board Trace Motifs:** The circuit motif appears throughout as a subtle structural decoration, never as a hero element. Implementation: SVG `` elements drawn with 0.5–1px strokes in the Circuit Trace color (#8b7355), depicting right-angle traces with small circular pads at junctions (4px diameter). These traces serve as: - Section dividers between the hero and the portfolio grid - Connecting lines between cards in the grid (drawn between adjacent cards using absolute-positioned SVGs that bridge the gap gutters) - Footer decorations replacing standard horizontal rules - Background watermarks (full-viewport SVG at 8% opacity behind the portfolio grid, slowly rotating) The circuit traces are not literal motherboard reproductions — they are stylized, almost art-nouveau interpretations with occasional organic curves mixed into the right-angle geometry, blending the technical motif with the handcrafted collage aesthetic. **Paper Textures:** Three distinct paper textures are used, all generated via CSS/SVG (no raster images): 1. **Parchment base:** `background-color: #f5e6c8` with an SVG `feTurbulence` filter overlay (type="fractalNoise", baseFrequency="0.65", numOctaves="4") at 6% opacity, creating subtle paper grain. 2. **Torn edges:** SVG `` elements with hand-drawn polygon coordinates that create organic, jagged edges on card layers. At least 4 different tear patterns are rotated and mirrored for variety. 3. **Dark vellum:** Used on card back faces — `#3d2b1f` base with the same turbulence filter at 10% opacity, plus a subtle radial gradient from center (#4a3628) to edges (#3d2b1f) simulating aged vellum's natural color variation. **Iconography:** No traditional icons. Decorative elements are small SVG "specimen pins" — circles with a line through them (like entomological mounting pins) — placed at the top-center of each collage card to reinforce the collector/cabinet metaphor. These pins are rendered in Copper Accent (#b87333) with a 1px Ink Dark (#1a1410) stroke. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a 100vh hero that is pure atmosphere: aged parchment, a slowly rotating circuit-trace SVG background, and the site title in enormous Playfair Display italic. There is no navigation bar, no hamburger menu, no call-to-action button. The hero exists to establish mood. After 100vh of scroll, the portfolio grid appears — not with a fade-in, but with a tilt-3d entrance: the entire grid slides up from below with a slight rotateX that settles from 8deg to 2deg over 800ms (CSS transition on scroll intersection). **Tilt-3D Interactions:** The core animation pattern is tilt-3d. Implementation approach: - Each portfolio card tracks cursor position within its bounds and applies `transform: perspective(800px) rotateY(Xdeg) rotateX(Ydeg)` where X and Y are derived from the cursor's offset from the card center, clamped to +/-8 degrees. This creates a physical, tactile feel — as if the user is tilting a real card on a table. - On card hover, a subtle Amber Candlelight (#d4a056) glow appears behind the card as a `box-shadow: 0 0 40px rgba(212, 160, 86, 0.15)`, simulating warm lamplight hitting the raised card. - On card click, the tilt-3d transitions into a full Y-axis flip (180deg) to reveal the card's back face. The flip animation uses `transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)` with `backface-visibility: hidden` on both faces. **Scroll Behavior:** Avoid parallax scrolling entirely. Instead, use `IntersectionObserver` to trigger one-time entrance animations: - Cards enter the viewport with a gentle scale-up from 0.92 to 1.0 combined with opacity 0 to 1, each card staggering 80ms after the previous one (CSS `transition-delay` set via `--stagger-index` custom property). - The circuit-trace background SVG rotates continuously at an imperceptible speed (0.5deg/second), creating ambient motion without scroll-jacking. **CSS Architecture Notes:** - Use CSS custom properties for the entire palette, enabling a potential dark-mode variant (swap #f5e6c8 base to #1a1410, #3d2b1f to #f5e6c8) without restructuring. - Card torn-edge clip-paths should be defined as reusable `` elements in a hidden SVG sprite block at the top of the HTML document. - The tilt-3d JavaScript should be vanilla — no libraries. A single event listener on the grid container using event delegation handles all card tilts. - Grid responsiveness: 3 columns at >1024px, 2 columns at >640px, 1 column at <640px. On mobile, tilt-3d is replaced by a simple tap-to-flip interaction (no cursor tracking). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, marketing hero sections with multiple buttons, testimonial carousels, team photo grids. This is a portfolio — a collection of specimens, not a sales pitch. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Portfolio-grid as physical specimen cabinet:** No other design in this collection uses a tilted-perspective portfolio grid that treats project cards as layered collage specimens with torn-paper clip-paths and entomological pins. The physical-object metaphor (collector's cabinet, drafting table) is distinct from the typical flat card grid or freeform asymmetric layout that dominates the collection. The CSS `perspective` and `rotateX` on the grid container create a spatial viewing angle unique to this design. 2. **Sepia-nostalgic monochromatic warmth without gradients:** While 100% of designs in the collection use warm palettes and 97% use gradients, this design deliberately avoids gradients entirely. The entire palette lives within a 30-degree warm-brown hue band, achieving depth through texture (SVG turbulence noise, torn-paper layering, translucent umber shadows) rather than color transitions. This creates a distinctly aged, physical quality that no other design achieves. 3. **Circuit-trace motifs as art-nouveau ornamentation:** The circuit motif (at 11% frequency in the collection) is typically used as a literal tech decoration. Here, circuit traces are reimagined as art-nouveau-inspired structural ornaments — right-angle pathways with occasional organic curves that serve as section dividers, card connectors, and background watermarks. This fusion of technical precision with handcrafted aesthetics is the site's core visual tension and appears in no other design. 4. **Tilt-3D as primary interaction (not parallax):** While 97% of designs rely on parallax scrolling, this design uses zero parallax. The primary motion pattern is tilt-3d (5% frequency) — cursor-responsive perspective transforms on individual cards that create tactile, object-like interactivity. Combined with card-flip reveals, the interaction model is fundamentally spatial rather than scroll-based, making it feel like handling physical objects rather than reading a webpage. 5. **Playfair Display + Alegreya Sans typography pairing:** The playfair-elegant typography choice (0% frequency in collection) brings high-contrast transitional serifs that echo Victorian specimen labels, paired with the humanist warmth of Alegreya Sans. This typographic combination has zero overlap with the mono-heavy (97%) collection, immediately distinguishing the site's textual voice. **Seed:** aesthetic: playful, layout: portfolio-grid, typography: playfair-elegant, palette: sepia-nostalgic, patterns: tilt-3d, imagery: collage, motifs: circuit, tone: elegant-sophisticated **Avoided overused patterns:** parallax (97%), stagger as primary animation (94%), asymmetric freeform layout (97%), centered single-column (85%), monospaced typography (97%), minimal/absent imagery (91%), gradient palettes (97%), generic tech motifs (97%)