# Design Language for archaic.works ## Aesthetics and Tone archaic.works presents a portfolio of timeless craftsmanship through the lens of Art Deco grandeur -- the geometric elegance of the Chrysler Building's lobby, the gilded lettering of a 1930s ocean liner's first-class dining room, the precision of Erté's fashion illustrations. But this is not museum reproduction; it is Art Deco reimagined as a living design system where honeyed neutrals replace the typical gold-and-black severity with something warmer, more inviting. Imagine walking into a Parisian atelier in 1928 where the architect has replaced marble with warm sandstone and the gilding with brushed brass -- still unmistakably Deco in its geometry, but softer, more approachable. The "archaic.works" name suggests craftsmanship that transcends time, and every design element reinforces this: flowing curves contained within rigid geometric frames, handcrafted details within a precision grid. The tone is bold-confident -- a master artisan who has nothing to prove but everything to show. ## Layout Motifs and Structure The layout employs a **minimal-navigation** philosophy where the navigation chrome is almost invisible, letting the Art Deco content architecture speak for itself. Flowing curves and staggered element reveals create a cinematic reveal experience. **Primary structure:** - **Opening viewport (100vh):** A honeyed warm background (#F5E6C8) with the "archaic" wordmark rendered in Commissioner at display scale (clamp(48px, 9vw, 120px)), centered vertically with generous negative space above and below. A flowing SVG curve in Warm Brass (#C9A84C) sweeps from the lower-left corner to the upper-right, passing behind the text -- this is the signature Deco flowing-curve motif. The ".works" suffix sits on this curve as if riding it, in a lighter weight. - **The Gallery (staggered reveal):** A single-column layout where portfolio pieces enter the viewport with staggered timing. Each piece is a full-width horizontal band (padding: 80px 0) with alternating alignment -- text-left/image-right, then text-right/image-left. Between each band, a flowing SVG curve divider (unique shape per divider) separates sections. Dividers use marble-texture fills clipped to the curve shape. - **The Craft (process section):** Three tall vertical panels side-by-side (33.3% width each on desktop), each with a geometric Art Deco frame border (stepped rectangles within rectangles, achieved with nested box-shadows or multiple borders). Each panel describes a craft stage with an oversized step number in Warm Brass and body text in the warm neutral palette. - **The Vault (archive section):** A masonry-like arrangement of smaller works, each in a Deco-framed container. Frames use the characteristic stepped-corner motif (CSS clip-path or border-image with a custom SVG) in Warm Brass against a Dark Walnut background. Items stagger into view as the user scrolls. - **Colophon (footer):** An Art Deco horizontal bar pattern -- alternating thick and thin horizontal lines in Warm Brass and Marble Cream -- with the "archaic.works" wordmark centered in Commissioner italic. ## Typography and Palette **Fonts:** - **Headlines:** "Commissioner" (Google Fonts) -- a versatile variable font that ranges from geometric sans to a warm humanist style. Used at weight 700, flair axis adjusted for a slightly Art Deco feel with refined letterforms. Size: clamp(32px, 5vw, 80px). Letter-spacing: 0.04em at display sizes for an engraved-signage quality. - **Body text:** "Lora" (Google Fonts) -- a well-balanced serif with roots in calligraphy, providing warmth and readability for longer text passages. Weight 400, italic for pull-quotes and emphasis. Line-height: 1.8, size: clamp(15px, 1.1vw, 17px). Its brushed terminals complement the Art Deco geometry. - **Accent/Numbers:** "Josefin Sans" (Google Fonts) -- an elegant geometric sans-serif with a vintage Art Deco DNA (inspired by 1920s typefaces). Used for step numbers, dates, and metadata. Weight 600, size varies by context. Letter-spacing: 0.06em. Rendered in Warm Brass. **Palette:** - **Honeyed Cream:** #F5E6C8 -- primary background, warm neutral canvas - **Dark Walnut:** #2C1810 -- primary text, rich dark brown - **Warm Brass:** #C9A84C -- primary accent, gilded highlights - **Marble Cream:** #F0E4D4 -- secondary background, subtle warmth - **Sandstone:** #D4A574 -- tertiary accent, warm mid-tone - **Deep Bronze:** #7D5A2F -- secondary text, darker gold - **Aged Ivory:** #FFFAF0 -- highlight backgrounds, lightest warm white ## Imagery and Motifs **Core visual motifs:** - **Flowing SVG curves:** Long, sweeping Bezier curves that arc across sections -- drawn in Warm Brass with 2-3px stroke weight. These curves serve as section dividers, text pathways, and decorative frames. Each curve is unique but shares the same visual weight. They animate with stroke-dashoffset on scroll entry (800ms, ease-in-out). - **Art Deco stepped frames:** Container borders using the characteristic Deco motif of concentric stepped rectangles. Implemented with multiple box-shadow layers: `box-shadow: inset 0 0 0 2px #C9A84C, inset 0 0 0 6px #F5E6C8, inset 0 0 0 8px #C9A84C, inset 0 0 0 12px #F5E6C8, inset 0 0 0 14px #C9A84C;`. This creates three nested brass lines separated by cream gaps. - **Marble texture accents:** CSS-generated marble-like texture using overlapping radial-gradients in cream/sandstone tones with slight opacity variation. Applied as fills within clipped SVG curves and as backgrounds for featured content blocks. Subtle and warm, not cold stone. - **Stagger reveal animations:** Portfolio items and vault pieces enter the viewport with a cascading stagger effect (each subsequent element delayed by 120ms). Each element translates upward (30px) and fades in (opacity 0 to 1) with a smooth ease-out over 500ms. - **Geometric sunburst accents:** Small Art Deco sunburst icons (radiating lines from a semicircle base) used as section ornaments and list markers. Rendered in Warm Brass SVG, 24px wide, with a brief rotate animation on hover (0deg to 15deg and back). ## Prompts for Implementation **Full-screen narrative opening:** On load, the Honeyed Cream background is immediate. The flowing SVG curve draws itself from lower-left to upper-right (stroke-dashoffset animation, 1200ms, ease-in-out). The "archaic" wordmark fades in along the curve (opacity 0 to 1, 600ms, starting at 800ms). The ".works" slides in along the curve path using CSS offset-path (or a simulated version with translateX/Y keyframes) arriving at its position at 1400ms. **Staggered gallery bands:** Implement each portfolio piece as a flex container with `flex-direction: row` (alternating `row-reverse` for even items). Content takes 45% width, visual placeholder takes 55% width. Between bands, the SVG curve dividers sit in `
` containers with `margin: -40px 0` to overlap slightly with adjacent bands, creating visual flow. **Art Deco triple-border frames:** Apply the multi-layer box-shadow system to `.deco-frame` containers. For the vault section's smaller items, reduce the shadow layers to two nested lines. On hover, animate the outermost shadow to expand slightly (`box-shadow` transition, 300ms) while the element lifts (translateY: -4px). **Minimal navigation:** Navigation is a thin fixed bar at the very top (height: 48px) with the "archaic" wordmark on the left in Josefin Sans and 3-4 text links on the right in Lora italic. Background: transparent, transitioning to Honeyed Cream with `backdrop-filter: blur(8px)` on scroll. No hamburger menu, no icons -- purely typographic navigation. **Marble texture generation:** Use `background: radial-gradient(ellipse at 30% 40%, rgba(212, 165, 116, 0.15), transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(201, 168, 76, 0.1), transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(240, 228, 212, 0.2), transparent 60%); background-color: #F5E6C8;`. Apply to curve fills via SVG pattern elements. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No neon colors. No dark mode. No tech aesthetic. No rounded corners on frames (all Deco corners are sharp or stepped). ## Uniqueness Notes **Differentiators from other designs:** 1. **Flowing SVG curves as structural connectors:** While other designs use straight lines or geometric dividers, this design employs long sweeping Bezier curves that physically connect sections, with text and elements positioned along these curves. The curves are both decorative and structural. 2. **Art Deco multi-layer border system:** The stepped concentric border treatment using multiple box-shadow layers creates a distinctive frame aesthetic not found in any other design. This is the defining micro-detail of the entire system. 3. **Honeyed-neutral palette warmth:** While Art Deco is typically rendered in black, gold, and jewel tones, this design uses a warmer, softer palette centered on cream and sandstone. The warmth makes the Deco geometry approachable rather than intimidating -- a unique tonal interpretation. 4. **Offset-path text positioning:** The ".works" suffix arriving at its position by traveling along the SVG curve using CSS offset-path (or animation equivalent) is a distinctive motion design choice not used elsewhere in the collection. **Planned seed:** art-deco, minimal-navigation, commissioner-versatile, honeyed-neutral, stagger, marble-texture, flowing-curves, bold-confident **Avoided overused patterns:** centered layout, card-grid, parallax, cursor-follow, mono typography, photography imagery, gradient palette, mysterious-moody tone, dark backgrounds