# Design Language for archetype.works ## Aesthetics and Tone archetype.works is a professional portfolio for a design practice that thinks in archetypes -- recurring patterns, universal forms, foundational models. The visual language channels the tactile, slightly imperfect warmth of hand-drawn illustrations printed on premium matte stock, combined with the volumetric playfulness of inflated 3D forms. Imagine a design studio's mood board made physical: hand-sketched wireframes pinned next to glossy 3D-rendered prototypes, burnt sienna marker strokes overlapping with chrome-finished typography. The "works" suffix demands that this feels like a body of accomplished output -- substantial, curated, professional -- but the inflated-3D and hand-drawn elements prevent it from feeling corporate. The tone is professional with a creative edge: a designer who wears a blazer to client meetings but whose sketchbook is full of wild, gestural drawings. ## Layout Motifs and Structure The layout uses a **card-grid** system where the cards themselves are the stars -- each one a miniature world with its own dimensional treatment. The grid is the showcase frame; the cards are the art. **Primary structure:** - **Opening viewport (100vh):** A warm off-white background (#FDF6ED) with the "archetype" wordmark rendered in a serif-revival typeface at generous scale (clamp(40px, 7vw, 96px)), positioned center-left with a slight upward offset from true center. The ".works" sits directly below in a hand-drawn style -- slightly wavy baseline, as if written with a felt-tip pen (achieved with SVG text on a wavy path). A large hand-drawn circle (SVG, imperfect, 3px stroke in Burnt Sienna) frames the wordmark loosely, not perfectly centered. A small inflated 3D shape (a rounded blob with CSS highlights suggesting volume) floats to the upper-right, casting a soft shadow. - **The Works (card grid):** A 3-column grid (desktop) / 2-column (tablet) / single-column (mobile) of project cards. Each card is 1:1.2 aspect ratio with a white background, subtle border (1px #E0D5C8), and a unique visual treatment: some cards have hand-drawn sketch overlays (SVG line drawings over content), others feature inflated 3D elements (CSS gradients creating puffy, dimensional surfaces), and others are purely typographic (large serif-revival text filling the card). The grid gap is 32px. Cards lift on hover with cursor-follow shadow rotation. - **The Pattern Library (scrolling showcase):** A horizontal-scrolling row of archetype pattern cards -- smaller than the main grid cards (240px x 320px), showing fundamental design patterns with hand-drawn annotations. Scroll with momentum, no snap. Each card has a hand-drawn border (SVG path with slight jitter). - **The Process (editorial section):** A two-column layout -- left column (55%) contains body text with hand-drawn underlines and margin notes in Burnt Sienna, right column (45%) contains a series of stacked illustrations that scroll at a slightly different rate (subtle scroll-speed differential, not aggressive parallax). Book-scholarly margin notations in the serif type add an academic quality. - **The Colophon (footer):** A full-width band in Espresso (#2C1810) with the "archetype.works" wordmark in Warm Cream, flanked by small hand-drawn decorative brackets (SVG, imperfect curves). ## Typography and Palette **Fonts:** - **Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with high contrast between thick and thin strokes, evoking the elegance of serif revival movements. Weight 700, size: clamp(32px, 5vw, 72px). Its sharp serifs and generous x-height create authoritative display text. Italic variant used for emphasis and pull-quotes. - **Body text:** "Source Serif 4" (Google Fonts) -- a robust, readable serif designed for extended text. Weight 400, line-height: 1.8, size: clamp(15px, 1.1vw, 17px). Its transitional style harmonizes with Playfair Display while being more utilitarian. - **Annotations/Labels:** "Caveat" (Google Fonts) -- a handwriting font with genuine hand-drawn character, used for margin notes, sketch-style labels, and card annotations. Weight 400-700, size: 16-20px. Rendered in Burnt Sienna. This font carries the hand-drawn thread throughout the design. **Palette:** - **Warm Cream:** #FDF6ED -- primary background, premium matte paper - **Espresso:** #2C1810 -- primary text, rich dark brown - **Burnt Sienna:** #C2622D -- primary accent, hand-drawn marker color - **Copper Orange:** #E07B3A -- secondary accent, warm vibrancy - **Sketch Grey:** #7A7062 -- secondary text, pencil-grey - **Card White:** #FFFCF7 -- card backgrounds, brightest white - **Book Scholarly:** #8B7355 -- tertiary, margin notes, annotations ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn SVG overlays:** Imperfect line drawings (circles, arrows, brackets, underlines) rendered as SVG paths with slight jitter in their coordinates and variable stroke-width (1.5-3px). Applied as overlay decorations on cards, section headers, and margin annotations. Colors: Burnt Sienna for warm annotations, Sketch Grey for structural notations. - **Inflated 3D elements:** CSS-only dimensional shapes -- rounded rectangles and blobs with carefully crafted radial-gradient backgrounds that simulate directional lighting (highlight at upper-left, shadow at lower-right). Applied to decorative floating shapes and select card backgrounds. Colors: soft pastels (muted orange, cream, warm pink) with white highlights. - **Book-scholarly margin notes:** Text positioned in the outer margins (using negative margins or absolute positioning) in Caveat font, slightly rotated (1-3deg), mimicking handwritten notes in a textbook margin. These provide commentary, definitions, or asides to the main content. - **Cursor-follow shadow on cards:** Card shadows rotate their offset direction based on cursor position relative to the card center. Implemented with JavaScript tracking mouse position and updating CSS custom properties for shadow offset-x and offset-y. Shadow color: rgba(44, 24, 16, 0.12). - **Imperfect borders:** Instead of standard CSS borders, key containers use SVG path borders with hand-drawn quality -- slightly wobbly lines generated with randomized SVG path control points. This applies to the hero circle, Pattern Library cards, and section frames. ## Prompts for Implementation **Full-screen narrative opening:** On load, the Warm Cream background appears. The hand-drawn SVG circle draws itself around the center area (stroke-dashoffset, 1200ms, ease-in-out). The "archetype" wordmark fades in within the circle (opacity 0 to 1, 600ms, starting at 400ms). The hand-drawn ".works" text on a wavy SVG path draws character by character (SVG stroke animation, 800ms, starting at 1000ms). The inflated 3D blob floats in from the upper-right (translateY: -30px to 0, translateX: 30px to 0, with spring easing, 800ms). **Card grid with varied treatments:** Use CSS Grid: `grid-template-columns: repeat(3, 1fr); gap: 32px;`. Apply three card-type classes rotating through the grid (.card-sketch, .card-3d, .card-type). Sketch cards get SVG overlay pseudo-elements. 3D cards get inflated gradient backgrounds. Type cards get oversized Playfair Display headlines. On hover, all cards lift (translateY: -6px) with the cursor-follow shadow. **Cursor-follow shadow system:** Attach a mousemove listener to each card's parent grid. Calculate the cursor position relative to each card center. Map the x/y delta to shadow offset (max 8px in any direction). Update CSS custom properties: `card.style.setProperty('--shadow-x', offsetX + 'px'); card.style.setProperty('--shadow-y', offsetY + 'px');`. Apply: `box-shadow: var(--shadow-x) var(--shadow-y) 24px rgba(44, 24, 16, 0.12);`. **Horizontal Pattern Library:** Use a flex container with `overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;`. Cards are `flex: 0 0 240px; margin-right: 16px;`. No scroll-snap -- free momentum scrolling. Each card has the hand-drawn SVG border applied as a border-image or positioned SVG pseudo-element. **Hand-drawn SVG generation:** Pre-create 5-6 SVG line sets (circles, underlines, brackets, arrows) with slight path irregularity. Use these as reusable components. For the jitter effect, SVG paths use quadratic Bezier curves (Q command) with control points offset 2-4px from the mathematically perfect position. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No flat corporate aesthetics. No dark mode. No neon colors. No perfectly straight geometric borders. ## Uniqueness Notes **Differentiators from other designs:** 1. **Hand-drawn + inflated-3D duality:** No other design in the collection combines imperfect hand-drawn SVG overlays with CSS inflated 3D shapes. This creates a "sketchbook meets product render" aesthetic that embodies the design process itself -- from rough concept to polished output. 2. **Three-class card rotation system:** The grid alternates between sketch-style, 3D-style, and typographic-style cards, creating visual variety within a consistent grid. This card-type rotation is a unique grid treatment. 3. **Cursor-follow shadow with rotational direction:** While cursor-follow effects exist in the collection (overused at 76%), this implementation is specific and unusual -- the shadow direction rotates based on cursor position, creating a "light source follows mouse" effect that is more nuanced than typical cursor-follow interactions. 4. **Book-scholarly margin annotations in handwriting font:** The margin notes in Caveat font positioned outside the main content column create a textbook-annotation aesthetic that reinforces the "archetype as scholarly concept" theme. No other design uses handwriting-font margin notes as a structural element. **Planned seed:** inflated-3d, card-grid, serif-revival, burnt-orange, cursor-follow, hand-drawn, book-scholarly, professional **Avoided overused patterns:** centered layout, parallax, mono typography, photography, gradient palette, mysterious-moody tone, fade-reveal as primary animation, scroll-triggered as sole interaction