# Design Language for archetypic.dev ## Aesthetics and Tone archetypic.dev is a developer-focused site that deconstructs software design patterns to their archetypal roots -- the universal forms beneath the code. The visual language channels street-style culture: raw, expressive, urban, and defiantly non-corporate. Imagine a developer conference hosted in a converted warehouse in Shoreditch or Williamsburg -- exposed brick walls covered in wheat-paste posters of code snippets, graffiti-tagged whiteboards with system architecture diagrams, and attendees in vintage band t-shirts debating factory patterns. The ".dev" suffix roots this firmly in tech, but the street-style aesthetic rejects the sterile glass-and-gradient look of typical developer tools. Instead, think of street art as design documentation: bold, layered, textured, with the raw energy of a wheat-paste poster that's been partially torn and re-layered. The tone is warm-inviting with an edge -- a senior developer who teaches at hackathons and listens to punk rock. ## Layout Motifs and Structure The layout employs an **asymmetric** composition that mimics the organic, unplanned quality of a street poster wall -- content blocks are positioned with deliberate imbalance, some overlapping, some isolated, creating a collage-like visual rhythm. **Primary structure:** - **Opening viewport (100vh):** A textured concrete-grey background (#E8E0D4) with visible grain. The "archetypic" wordmark is rendered in Garamond classic serif at large scale (clamp(40px, 8vw, 100px)) -- the unexpected elegance of a classical serif against the street texture creates immediate contrast tension. ".dev" sits below in a contrasting street-style treatment: bold sans-serif, rotated -3 degrees, with a rough underline. A torn-paper edge SVG effect runs across the bottom 15% of the viewport, revealing a dark layer (#1A1A2E) beneath. - **The Stack (code pattern showcase):** An asymmetric layout with content blocks positioned at varied offsets. Design pattern cards are 280-480px wide, positioned with CSS Grid using `grid-column: span 2` / `span 3` on a 6-column grid, but with deliberate empty columns creating gaps. Some cards overlap their neighbors by 20-40px using negative margins. Each card has a different rotation (-2deg to +2deg) applied via transform. - **The Wall (featured content):** A full-width section that simulates a wheat-paste poster wall. 3-4 "posters" are layered at slight angles (CSS transform: rotate), with torn edges (SVG clip-path), partially overlapping. Each poster contains a different type of content: one has code, one has a diagram, one has a manifesto-style text block. Background uses a darker tone (#2A2433) with the concrete grain texture. - **The Alley (editorial):** A narrow column (max-width: 560px) offset to the left (margin-left: 15vw) with long-form content. Right side is negative space with occasional floating "sticker" elements -- small circular badges with abstract shapes and icons in Coastal palette colors. Stickers have hover-lift effects (translateY: -4px, slight rotation change). - **The Tag (footer):** A dark section (#1A1A2E) with the "archetypic.dev" wordmark rendered as a graffiti-style tag -- large, bold, with a dripping effect SVG on the descenders. Below, minimal links in Garamond italic. ## Typography and Palette **Fonts:** - **Headlines:** "EB Garamond" (Google Fonts) -- a refined classical Garamond revival that creates deliberate friction with the street-style aesthetic. Weight 700 for headings, 400 italic for pull-quotes. Size: clamp(32px, 5.5vw, 80px). Letter-spacing: -0.01em. The clash between high typography and low-culture visuals is the defining tension of the design. - **Body text:** "DM Sans" (Google Fonts) -- a clean geometric sans-serif with excellent readability and a contemporary developer-tool feel. Weight 400, line-height: 1.75, size: clamp(15px, 1.1vw, 17px). Its neutrality provides a stable reading surface amid the visual chaos. - **Code/Labels:** "Fira Code" (Google Fonts) -- a monospace with programming ligatures, used for code snippets, pattern names, and technical labels. Weight 400, size: 14px, letter-spacing: 0.02em. Rendered in Coastal Teal or Mural Pink against dark backgrounds, in #1A1A2E against light. **Palette:** - **Concrete Light:** #E8E0D4 -- primary background, weathered wall - **Ink Dark:** #1A1A2E -- primary text, dark sections, deep contrast - **Coastal Teal:** #2EC4B6 -- primary accent, vibrant street color - **Mural Pink:** #E71D73 -- secondary accent, poster/sticker highlights - **Wheat Paste Cream:** #F5F0E6 -- card backgrounds, poster surfaces - **Asphalt Grey:** #4A4A5A -- secondary text, muted elements - **Tag Gold:** #F0B429 -- tertiary accent, warm highlight, sticker fills ## Imagery and Motifs **Core visual motifs:** - **Torn paper edges:** SVG clip-paths applied to section boundaries that create irregular, torn-paper transitions between sections. Each tear is unique -- generated with randomized SVG path points along the horizontal axis with vertical jitter of 20-50px. The torn edge reveals the layer beneath, creating depth. - **Concrete grain texture:** A CSS background using SVG `feTurbulence` filter (baseFrequency: 0.65, numOctaves: 4, type: fractalNoise) at very low opacity (3-5%) over the base color. Applied to all light-background sections. This grain is subtle but omnipresent, creating tactile warmth. - **Abstract shapes as circuit references:** Small geometric shapes (triangles, circles, squares, lines) in accent colors, scattered as decorative elements. Some are connected with thin lines, suggesting circuit board traces or system architecture diagrams. These appear as floating "stickers" in The Alley and as card decorations in The Stack. - **Wheat-paste layering effect:** In The Wall section, content panels are layered with CSS `z-index` stacking, slight rotations (transform: rotate(1-3deg)), and torn-edge clip-paths on their borders. Some panels have a "peeling corner" effect achieved with a small triangle-shaped pseudo-element with a shadow underneath. - **Hover-lift interaction:** All interactive elements (cards, stickers, links) lift on hover with `translateY(-4px)` and a deepened box-shadow (from `0 2px 8px rgba(0,0,0,0.1)` to `0 8px 24px rgba(0,0,0,0.15)`). The lift uses spring easing: `cubic-bezier(0.175, 0.885, 0.32, 1.275)`. This underused pattern (3% frequency) becomes a signature interaction. ## Prompts for Implementation **Full-screen narrative opening:** On load, the Concrete Light background with grain texture appears. The "archetypic" wordmark slides in from the left (translateX: -80px to 0, 700ms, ease-out) in EB Garamond. The ".dev" stamps in from above (translateY: -30px to 0, 400ms, spring easing, 300ms delay) with its slight rotation. The torn-paper edge at the bottom animates: the SVG clip-path transitions from a straight line to its jagged torn shape (600ms, starting at 800ms), revealing the dark layer beneath with a satisfying visual rip. **Asymmetric grid with overlaps:** Use CSS Grid with 6 columns: `grid-template-columns: repeat(6, 1fr); gap: 20px;`. Place cards with explicit grid-column spans and varying start positions. Apply transform: rotate() with CSS custom properties (--rotation) set per card (-2deg, 1deg, -1deg, 2deg cycling). Use negative margins (margin-top: -30px on select cards) to create overlaps. Z-index varies to control stacking. **Wheat-paste Wall section:** Create 3-4 absolutely positioned panels within a relative container. Each panel: `position: absolute; width: 45-65%; transform: rotate(var(--rot)); clip-path: url(#torn-edge-N);` where each panel has a unique torn-edge SVG clip-path. Layer with z-index: 1, 2, 3, 4. The peeling corner: `::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; background: linear-gradient(135deg, transparent 50%, #E8E0D4 50%); filter: drop-shadow(-2px -2px 3px rgba(0,0,0,0.1)); }`. **Sticker system in The Alley:** Small circular elements (width: 48-64px, border-radius: 50%) with accent-colored backgrounds and abstract SVG icons inside. Position with `position: absolute` at varied right-margin positions (right: 5vw to 25vw, top values staggered). Each sticker has a unique slight rotation. On hover-lift: `transform: translateY(-4px) rotate(calc(var(--base-rot) + 5deg)); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);`. **Torn paper SVG clip-paths:** Pre-generate 4-5 unique torn-edge paths as SVG `` elements in a hidden SVG block. Each path runs horizontally with randomized vertical jitter points. Reference via `clip-path: url(#tear-1)` etc. Animate on entry by transitioning from a straight-line clipPath to the torn version (requires JavaScript to interpolate between two path definitions). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No glassmorphism. No clean corporate gradients. No symmetrical layouts. No stock photography. ## Uniqueness Notes **Differentiators from other designs:** 1. **Classical Garamond serif against street-style visuals:** The deliberate typographic friction of using EB Garamond -- one of the most refined classical typefaces -- against torn paper, concrete textures, and graffiti-style elements creates a highbrow/lowbrow tension unique in the collection. 2. **Torn-paper edge transitions between sections:** While other designs use clean dividers or gradient fades, this design uses SVG clip-path torn-paper effects that physically separate sections with an organic, destructive quality. The animated "rip" on the hero section is distinctive. 3. **Wheat-paste poster layering:** The Wall section's overlapping, rotated, torn-edged content panels simulate actual street posters layered over time. This physical-world collage approach to content presentation is unique. 4. **Hover-lift as primary interaction pattern:** By making the underused hover-lift (3% frequency) the consistent interaction pattern across all elements -- cards, stickers, links -- this design establishes a cohesive, bouncy interaction language that contrasts with the raw visual aesthetic. **Planned seed:** street-style, asymmetric, garamond-classic, coastal-blend, hover-lift, abstract-shapes, circuit, warm-inviting **Avoided overused patterns:** centered layout, card-grid rectangles, parallax, cursor-follow, mono typography dominance, photography, gradient palette, mysterious-moody tone, scroll-triggered as primary animation