# Design Language for archetypos.dev ## Aesthetics and Tone archetypos.dev channels the crystalline clarity of Scandinavian design through the lens of a high-altitude weather monitoring station perched above the Norwegian fjords. The visual identity fuses the restrained elegance of Nordic functional design -- think Alvar Aalto's curvilinear simplicity, Dieter Rams's "less but better" -- with the data-rich overlay language of heads-up displays found in aviation cockpits and maritime navigation systems. The domain "archetypos" (Greek: the original pattern) becomes the conceptual anchor: this is a site about foundational patterns in software development, presented as if you're observing them through a translucent instrument panel overlooking a vast coastal mountain range at dawn. The tone is authoritative without being cold -- a calm, expert voice speaking with the quiet confidence of someone who has mapped every peak and valley. ## Layout Motifs and Structure The layout uses a **HUD-overlay** composition layered atop a subtle, slow-moving aerial landscape. Users encounter data and content as if reading instrument readouts superimposed on a panoramic view. **Primary structure:** - **Opening viewport (100vh):** A muted coastal mountain panorama (CSS gradient layers simulating dawn light over peaks -- no actual photography) fills the screen. Overlaid: a thin circular reticle (SVG) centers the viewport, with the "archetypos" logotype rendered inside it in a clean rounded sans, letter-spaced widely. Altitude-style readouts (subtle, small text in the corners) display metadata: "v1.0", "lat 62.47N", a slowly incrementing timestamp. - **Navigation ring:** Instead of a traditional navbar, a semicircular arc of nav items curves along the bottom third of the viewport, each item positioned like compass headings (N, NE, E, etc.). On hover, a thin radial line extends from the center reticle to the hovered item, with a ripple pulse at the connection point. - **Content panels (below fold):** Scrolling reveals content sections that slide in as translucent frosted-glass panels (backdrop-filter: blur(12px) + slight white overlay). Each panel has a thin 1px border in #8FBCD4 and contains one "archetype" pattern with diagram, explanation, and code snippet. - **Section transitions:** Between panels, brief "scanning" animations play -- a horizontal line sweeps top-to-bottom across the viewport (like a radar sweep rotated 90deg), then the next panel materializes with a soft ripple from center outward. - **Footer zone:** A topographic contour map rendered in CSS (layered border-radius shapes in decreasing opacity) serves as the footer background, with contact/link info overlaid in the HUD style. No card-grids. No centered hero blocks. The entire experience reads like operating a sophisticated instrument that happens to teach you software patterns. ## Typography and Palette **Fonts:** - **Headlines/HUD labels:** "Nunito Sans" (Google Fonts) -- a balanced, rounded sans-serif with a warm Scandinavian clarity. Weight 700 for primary headings, 600 for HUD-style labels. Letter-spacing: 0.08em for headings, 0.15em for instrument labels. Size: clamp(20px, 3vw, 36px) for headings. The roundness feels approachable yet technical. - **Body text:** "Source Sans 3" (Google Fonts) -- a humanist sans designed for readability in UI contexts. Weight 400, line-height: 1.75. Size: clamp(15px, 1.2vw, 18px). Its open letterforms pair naturally with Nunito Sans without competing. - **Code/data readouts:** "IBM Plex Mono" (Google Fonts) -- used exclusively for code snippets, coordinate readouts, and the corner metadata displays. Weight 400, size: 13px fixed, letter-spacing: 0.04em. Slightly tinted in #8FBCD4 to differentiate from body text. **Color Palette:** - **Fjord Slate** #2C3E50 -- primary background for content panels and deep sections - **Dawn Mist** #D5E8F0 -- light background for frosted glass overlays and body text - **Coastal Azure** #8FBCD4 -- accent color for borders, reticle, nav highlights, and HUD elements - **Summit Snow** #F7FBFD -- pure light for headings on dark backgrounds - **Compass Gold** #D4A843 -- warm accent for active states, current-section indicators, and the timestamp readout - **Granite** #4A5568 -- secondary text, muted labels, footer elements - **Ridge Shadow** #1A2530 -- deepest dark for overlays and the opening background gradient base The palette is a coastal-blend: cool blues and grays reminiscent of sea fog meeting mountain rock, with a single warm gold accent that evokes the first ray of sunlight hitting a peak. ## Imagery and Motifs **Core visual motifs:** - **Reticle/crosshair:** A thin SVG circle with subtle tick marks at 0/90/180/270 degrees, always present at viewport center during the hero section. It rotates very slowly (360deg over 120s) via CSS animation. The reticle represents focus, precision, pattern-recognition -- core to the "archetypos" concept. - **Topographic contour lines:** CSS-generated concentric irregular shapes (border-radius with complex values like 48% 52% 68% 32% / 42% 58% 36% 64%) in decreasing opacity, creating the illusion of a topographic map. Used as section backgrounds and the footer. Colors: #8FBCD4 at 0.08 opacity, layered 5-7 times. - **Radar sweep line:** A CSS-animated radial gradient that sweeps clockwise (like a radar screen), used as a section-transition effect. Implemented with a conic-gradient rotating via @keyframes. - **Mountain silhouette:** The hero background is built from layered CSS triangles and gentle curves (clip-path polygons) in graduating shades from #1A2530 (foreground peaks) to #2C3E50 (mid-range) to #4A5568 (distant ridges), with the sky area as a subtle gradient from #D5E8F0 at top to #8FBCD4 at the horizon line. - **Lens flare accents:** Small radial-gradient circles (6-10px) in #D4A843 at 0.4 opacity, positioned near the horizon line of the mountain silhouette and occasionally near headings. They pulse gently (scale 1 to 1.3 over 3s, ease-in-out, infinite) to suggest light catching on instrument glass. - **Ripple interaction:** On click/tap anywhere on the hero viewport, a circular ripple expands from the click point -- a thin ring of #8FBCD4 that scales from 0 to 300px diameter while fading from 0.6 to 0 opacity over 800ms. ## Prompts for Implementation **Full-screen narrative experience:** The site opens as a slow dawn over a CSS-rendered mountain range. For 2 seconds, only the landscape gradient is visible, then the reticle fades in (opacity 0 to 1 over 600ms) followed by the "archetypos" logotype typing itself letter-by-letter inside the reticle (typewriter effect, 80ms per character). Corner HUD readouts (coordinates, timestamp, version) appear with a stagger of 200ms each, sliding in from their respective edges. **Scroll behavior:** Use Intersection Observer to trigger panel appearances. Each content panel starts as invisible (opacity 0, translateY: 30px), then rises into view with a 500ms ease-out transition when 20% visible. Between panels, the radar-sweep animation plays (600ms duration). **Navigation interaction:** The semicircular compass navigation uses CSS transforms (each item positioned with rotate + translateX from a center origin point). On hover, draw a line from center to the item using a pseudo-element that scales from 0 to full width along the angle. The ripple at the endpoint is a separate animation (scale 0 to 1, opacity 1 to 0, 400ms). **Responsive approach:** On mobile (<768px), the HUD overlay simplifies -- reticle becomes a small fixed element in the top-left corner, compass nav converts to a horizontal scrollable strip at the bottom, content panels become full-width with reduced blur effects (for performance). The mountain silhouette reduces to 3 layers instead of 5+. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, generic hero-with-button patterns. No stock photography. No card grids. **Storytelling emphasis:** The narrative arc is: arrival (dawn, empty landscape) -> instrument activation (HUD elements appear) -> exploration (scrolling through archetype panels) -> summit (final panel with a broader view and synthesis). Each archetype panel should feel like a "reading" from the instrument -- data being observed and interpreted, not sold. ## Uniqueness Notes **Differentiators from other designs:** 1. **Compass-arc navigation replacing traditional navbar:** No other design uses a semicircular compass-heading navigation system. This radial nav with connecting sight-lines is structurally and interactively unique. 2. **CSS-only mountain panorama as persistent backdrop:** Building an entire mountain range from clip-path polygons and layered gradients (no images) creates a distinctive visual that doubles as the site's atmosphere. Unlike parallax photo backgrounds, this is fully generative and resolution-independent. 3. **Radar-sweep section transitions:** The conic-gradient rotation used between content sections mimics a radar screen scanning for new data -- a thematic transition mechanic not found in other designs in this collection. 4. **HUD instrument readouts as ambient metadata:** The corner-positioned coordinate/timestamp/version displays that update continuously give the page a living-instrument quality distinct from decorative animations. **Chosen seed/style:** scandinavian aesthetic, hud-overlay layout, rounded-sans typography (Nunito Sans), coastal-blend palette, ripple patterns, lens-flare imagery, mountain-landscape motifs, authoritative tone **Avoided overused patterns:** Avoided centered layout (93% frequency), card-grid layout (80%), photography imagery (73%), gradient-only palette (96%), parallax pattern (90%), scroll-triggered as primary interaction (83%), mono typography (90%), mysterious-moody tone (73%). Instead used hud-overlay (3%), ripple (26%), lens-flare (3%), coastal-blend (3%), rounded-sans typography (3%), authoritative tone (16%).