# Design Language for archaic.studio ## Aesthetics and Tone The visual identity of archaic.studio is rooted in the collision between 1920s Art Deco opulence and the cold precision of a military command center's heads-up display. Imagine the interior of the Chrysler Building's lobby -- all chevron inlays, sunburst brass reliefs, and geometric symmetry -- but reconstructed as a translucent holographic overlay projected onto smoked amber glass. Every surface carries the weight of craftsmanship: gilded geometric borders, chamfered edges, and tiered architectural framing that echoes the stepped facades of Deco skyscrapers. But this is not a museum piece. The HUD overlay aesthetic introduces a layer of tactical authority -- thin ruled lines that track the viewport, coordinate readouts that pulse at the margins, and data-panel frames that snap into position as the user scrolls. The tone is authoritative and deliberate. archaic.studio speaks with the certainty of an institution that has existed for centuries and will exist for centuries more. There is no whimsy, no playfulness. Every element is placed with the precision of an architect's drafting table. The voice is low, measured, and declarative -- the kind of authority that does not need to raise its volume to command attention. Think of a master craftsman's workshop where every tool hangs in its ordained position, where the work speaks for itself. The mood sits at the intersection of ceremonial gravitas and technological surveillance -- a war room inside a cathedral, a control tower built from onyx and hammered bronze. ## Layout Motifs and Structure The layout follows a **hud-overlay** paradigm: the entire viewport is treated as a display panel with persistent framing elements that remain fixed while content scrolls beneath them. This is not a conventional scrolling website -- it is a command interface wrapped in architectural ornament. **Persistent HUD Frame:** A fixed border runs along all four edges of the viewport, inset by 24px. This border is a 1px ruled line in oxidized gold (#B8860B at 40% opacity) with small Art Deco corner ornaments -- geometric fan motifs rendered as SVG at each corner (40x40px). The top edge of the frame contains a thin horizontal rule with the domain name "ARCHAIC.STUDIO" letterspaced at 0.35em in 10px uppercase, anchored to the top-left. The bottom edge displays a subtle coordinate-style readout ("SEC.01 // DEPTH.0420") that updates as the user scrolls, tracking their position in the narrative. **Content Zones:** Within the HUD frame, content is organized into discrete full-viewport sections (100vh each) that function as "panels" in a vertical sequence. Each panel is self-contained, with its own internal grid: a 4-column structure with 48px gutters, where content occupies the center 2 columns and decorative geometric elements occupy the flanking columns. Transitions between panels use a hard vertical snap (CSS scroll-snap-type: y mandatory) -- there is no smooth scrolling between sections. Each snap is a deliberate, architectural threshold. **Panel Types:** - **Title Panel:** The opening panel. A single monumental heading centered vertically and horizontally within the HUD frame, flanked by symmetrical Deco line ornaments that extend from the text to the frame edges. Below the title, a single horizontal rule with a central diamond motif. - **Statement Panel:** A large block of display text (2-3 sentences maximum) presented in a wide centered column. Decorative vertical rules on both sides, with small chevron markers at the midpoint. - **Artifact Panel:** A full-bleed geometric abstract composition (SVG) that fills the viewport within the HUD frame, overlaid with a semi-transparent content card (480px wide, centered) containing a text block with a thin Deco border. - **Index Panel:** A structured list or registry, presented in a two-column layout within the center zone. Each item is separated by a thin horizontal rule with alternating chevron and diamond ornaments. **Spatial Relationships:** Generous negative space is critical. Content never crowds the HUD frame -- a minimum of 80px clearance from the fixed border to any content element. The overall impression should be of viewing precious objects through a display case, with the frame itself as part of the aesthetic experience. ## Typography and Palette **Typography:** - **Display / Hero Titles:** "Poiret One" (Google Fonts) -- a geometric Art Deco display typeface with perfectly circular bowls, even stroke widths, and an unmistakably 1920s silhouette. Used at 72px-120px for the main title and panel headings. Weight 400 (the only available weight), letter-spacing: 0.08em, text-transform: uppercase. Line-height: 1.1. The geometric precision of Poiret One mirrors the architectural symmetry of the Deco ornamental system. - **Section Headings / Labels:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif inspired by Scandinavian design with a vintage quality that complements the Deco aesthetic. Used at 18px-28px for section labels, HUD readouts, and navigational text. Weight 600 (SemiBold), letter-spacing: 0.25em, text-transform: uppercase. Line-height: 1.3. The wide letterspacing and geometric forms create the feel of engraved architectural signage. - **Body Text:** "Crimson Pro" (Google Fonts) -- an old-style serif with refined proportions, subtle stroke contrast, and excellent readability at body sizes. Used at 17px-19px for paragraph text and extended descriptions. Weight 400 (Regular) for body, Weight 300 (Light) for pull-quotes. Letter-spacing: 0.01em. Line-height: 1.7. Crimson Pro adds warmth and gravitas without competing with the geometric display types -- it reads like carefully set letterpress text. - **Monospace / Data Readouts:** "Share Tech Mono" (Google Fonts) -- a technical monospaced typeface with a clean, squared-off character that suits the HUD overlay aesthetic. Used at 10px-13px for the coordinate readouts, section indicators, and any metadata displayed within the persistent frame. Weight 400, letter-spacing: 0.15em. Line-height: 1.4. **Color Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Charred Obsidian | #1C1712 | Primary background, deep warm black with brown undertone | | Surface | Smoked Umber | #2A2218 | Content card backgrounds, panel surfaces | | Frame / Accent | Oxidized Gold | #B8860B | HUD frame lines, Deco ornaments, primary accent | | Highlight | Hammered Brass | #D4A843 | Active states, hover effects, emphasized text | | Text Primary | Aged Parchment | #E8DCC8 | Primary body text, headings | | Text Secondary | Dust Veil | #9C8E78 | Secondary text, captions, HUD readouts | | Warm Accent | Kiln Ember | #A0522D | Sparse accent for interactive states, link hover | | Decorative | Tarnished Copper | #7A6840 | Geometric ornament fills, divider details | The palette is warm-earthy throughout: deep charcoal-browns for backgrounds, oxidized metallics for structure, and parchment tones for text. There are no blues, no cool grays, no neon. Every color feels as though it has been exposed to centuries of patina -- warm, rich, and slightly muted by age. ## Imagery and Motifs **Geometric Abstract Compositions:** The primary visual content is geometric abstract art rendered entirely in SVG. These are not photographs, not illustrations of recognizable objects -- they are pure geometric compositions inspired by Art Deco architectural detailing. Each composition is built from a vocabulary of forms: concentric circles with radiating lines (sunburst motifs), nested chevrons stacked into pyramidal shapes, elongated diamond chains, parallel ruled lines creating moire-like interference patterns, and stepped ziggurats viewed from above as concentric rectangles. All geometric compositions use only the palette colors: oxidized gold (#B8860B) and hammered brass (#D4A843) strokes on the charred obsidian (#1C1712) background, with occasional fills of tarnished copper (#7A6840) at 20-30% opacity. Stroke widths are precisely 1px for fine detail lines and 2px for structural elements. No gradients within the SVG elements -- flat color only, achieving complexity through layering and repetition rather than shading. **HUD Ornamental System:** The persistent HUD frame is decorated with Art Deco corner ornaments: each corner features a quarter-fan motif (a 90-degree arc segmented by 5 radiating lines, creating a stylized sunrise). These are rendered as SVG paths with 1px oxidized gold strokes and no fill. At the midpoint of each frame edge, a small diamond marker (8x8px, rotated 45 degrees) serves as a visual anchor. **Decorative Dividers:** Between content elements, horizontal dividers use Deco-inspired patterns: a central diamond flanked by extending horizontal rules that terminate in small chevron caps. These dividers are 1px oxidized gold lines, never more than 60% of the viewport width, always centered. **Abstract Tech Overlays:** Subtle coordinate grid lines (0.5px, #9C8E78 at 15% opacity) create a faint technical drawing underlay visible behind content panels. This grid is a 120px square pattern that scrolls with the content, suggesting architectural blueprints or drafting paper. At panel transitions, thin horizontal scan-lines (1px, #B8860B at 8% opacity, spaced 4px apart) sweep across the viewport over 400ms, creating a brief data-readout effect. **Motif: The Stepped Pyramid:** A recurring motif throughout the design is the stepped pyramid or ziggurat viewed in cross-section: nested rectangles of decreasing width stacked vertically, like a Mayan temple or the stepped crown of an Art Deco skyscraper. This motif appears as a decorative element in panel corners, as a background watermark at very low opacity (3-5%), and as the structural logic for content hierarchy -- information is literally tiered in stepped levels of importance. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a vertical sequence of full-viewport panels, each snapping into place like the turning of a page in a bound codex. There is no visible navigation menu. The only navigation is the scroll itself, with the HUD frame's coordinate readout providing orientation. The opening panel is a 100vh title screen: the domain name "ARCHAIC.STUDIO" renders in Poiret One at 96px, letterspaced at 0.12em, perfectly centered. The text fades in over 2 seconds with a slight scale-up from 0.95 to 1.0. Below it, a decorative Deco divider line-draws from center outward over 1.2 seconds (using SVG stroke-dasharray/stroke-dashoffset animation). The HUD frame itself draws in from the four corners simultaneously over 1.5 seconds, starting as four corner ornaments that extend their connecting ruled lines until the full rectangular frame is complete. **Tilt-3D Panel Transitions:** As the user scrolls and panels snap into view, each new panel enters with a subtle CSS perspective transform: it begins tilted 3-5 degrees on the X-axis (as if the panel is a physical card being tilted toward the viewer from a slight distance) and flattens to 0 degrees over 600ms with an ease-out-cubic timing. This tilt-3d effect is applied to the content within the HUD frame only -- the frame itself remains fixed and flat, creating a parallax-like depth separation between the architectural frame and the content it displays. The transform-origin is set to "center top" so panels appear to hinge from their top edge. **HUD Coordinate Readout Animation:** The bottom-edge coordinate display updates with each panel snap. The update animation is a rapid counter-scroll effect: the existing text scrambles through random alphanumeric characters for 300ms (at 30ms intervals) before resolving to the new section indicator. This uses a JavaScript interval that cycles through characters from the set "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.//" before settling on the final string (e.g., "SEC.03 // DEPTH.2160"). **Geometric SVG Reveal Animations:** Each geometric abstract composition within Artifact Panels animates in using stroke-dasharray reveals: SVG paths begin fully dashed (invisible) and animate to fully solid over 1.5-2.5 seconds, with each path element staggered by 100ms. The effect creates the impression of a technical drawing being plotted in real-time by an invisible drafting arm. Concentric circles draw from the outermost ring inward. Radiating lines draw from center outward. Chevron stacks draw from top to bottom. **Scan-Line Transition Effect:** Between panel snaps, a brief scan-line overlay sweeps across the viewport: 200 horizontal lines (1px each, spaced 4px apart) in oxidized gold at 8% opacity appear at the top of the viewport and sweep downward over 400ms, then fade out over 200ms. This creates a momentary "data refresh" effect that reinforces the HUD aesthetic without being visually heavy. **Hover and Interactive States:** Interactive text elements (links, clickable items) use a border-bottom underline animation: a 1px line in oxidized gold draws from left to right on hover over 300ms. On the Index Panel, list items respond to hover with a subtle 1-degree tilt-3d rotation and a color shift from dust veil (#9C8E78) to hammered brass (#D4A843) over 200ms. **Performance Notes:** All animations should use CSS transforms and opacity only (GPU-composited properties). SVG stroke animations use CSS animation on stroke-dashoffset. The coordinate readout scramble is the only JavaScript animation. No canvas elements, no WebGL, no heavy libraries. The entire site should function as a single HTML file with embedded CSS and minimal JS. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hamburger menus, sticky headers (the HUD frame serves this purpose architecturally), gradient backgrounds, blur/glassmorphism effects, rounded corners on content elements (all corners are sharp, angular, Deco-precise), photography of any kind. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **HUD-overlay layout (2% frequency):** Only one other design in the entire collection uses a hud-overlay layout. archaic.studio makes the HUD frame a first-class architectural element -- not a sci-fi gimmick but a display case that elevates the Deco ornamental system. The fixed frame with updating coordinate readout creates a fundamentally different spatial relationship between the user and the content than any scrolling layout. 2. **Geometric-abstract imagery with zero photography (2% frequency):** While 91% of designs use "minimal" imagery and 55% use photography, archaic.studio relies entirely on SVG geometric compositions as its visual content. These are not decorative flourishes -- they are the primary visual artifacts, treated with the reverence of museum pieces displayed within the HUD frame. No other design in the collection uses geometric-abstract as its sole imagery mode. 3. **CSS scroll-snap panel architecture:** No other design uses mandatory vertical scroll-snap as its primary navigational mechanism. This creates a fundamentally different reading experience: discrete, deliberate, architectural. Each panel is a complete composition, not a section of a continuous scroll. 4. **Art Deco ornamental system as functional UI:** The Deco motifs (corner fans, diamond markers, chevron dividers) are not mere decoration -- they serve as navigational landmarks, section separators, and visual hierarchy indicators. The stepped pyramid motif recurs structurally (content tiering) and decoratively (watermarks, corner elements), creating a unified visual language where ornament and function are inseparable. 5. **Warm-earthy palette without any cool tones (2% frequency):** While 100% of designs use "warm" palettes and 97% use gradients, archaic.studio uses a strictly warm-earthy palette of charcoal-browns and oxidized metallics with zero blue, zero gray-blue, zero neon. The palette feels archaeological -- like colors found in excavated pottery and tarnished bronze artifacts. 6. **Tilt-3d as architectural transition (5% frequency):** The tilt-3d effect is used not as a hover gimmick but as a panel transition system that creates the sensation of physical cards being presented within the fixed HUD frame, reinforcing the depth separation between frame and content. **Documented Seed/Style:** aesthetic: art-deco, layout: hud-overlay, typography: display-bold, palette: warm-earthy, patterns: tilt-3d, imagery: geometric-abstract, motifs: abstract-tech, tone: authoritative **Avoided overused patterns:** asymmetric layout (97%), parallax animation (97%), stagger animation (94%), minimal imagery (91%), mono typography (97%), corporate aesthetic (50%), friendly tone (55%), photography imagery (55%). The design deliberately avoids smooth scrolling, staggered fade-in animations, monospaced body text, and any layout that relies on asymmetry as its primary compositional strategy. The symmetrical, snapping, frame-bound approach is a direct counterpoint to the collection's dominant aesthetic tendencies.