# Design Language for archaic.works ## Aesthetics and Tone The visual identity of archaic.works draws from the materiality of archaeological fieldwork and the quiet reverence of museum conservation rooms. This is not a site about nostalgia -- it is a site about the persistence of objects across deep time. The aesthetic sits at the intersection of **wabi-sabi** and **dark academia**: surfaces that show wear, edges that are softened by centuries, text that emerges as if revealed through careful excavation. Think of the color of oxidized bronze left in a vitrine, the precise hand of an 18th-century cartographer's label, the way a conservator's desk lamp throws warm light across a fragment of cuneiform tablet. The mood is **scholarly-intellectual** with an undercurrent of wonder -- the kind of awe that comes from holding something that was last touched by human hands three thousand years ago. Every visual decision reinforces the idea that what you are seeing has survived, has endured, has been uncovered. The site itself feels like an artifact: something made with care, bearing the marks of its own making. The tone avoids both the sterile clinical distance of academic databases and the breathless sensationalism of pop archaeology. Instead it occupies the space between: informed, reverent, tactile, intimate. The user should feel as though they have entered a private study filled with carefully arranged specimens, each with a story encoded in its surface. ## Layout Motifs and Structure The layout uses a **timeline-vertical** structure crossed with a **layered-depth** system, organized around the metaphor of stratigraphic excavation. The page is conceptually a cross-section through accumulated time, with the most ancient material at the bottom and the most recent at the top -- but the user scrolls downward into the past, digging deeper. **Primary structure:** - **The Surface Layer (0-100vh):** A quiet, almost empty field -- a pale parchment ground with only the domain name rendered in thin sepia letterforms and a single hairline horizontal rule. Below the fold, a subtle animated line drawing of a topographic contour map slowly traces itself, suggesting the terrain that will be excavated. No navigation chrome, no menu. Just the name and the land. - **The First Stratum (100vh-300vh):** Content blocks appear as **specimen cards** -- rectangular modules with visible borders that recall museum catalog cards or archival index entries. Each card has a thin top edge in oxidized copper (#6B705C), a main body in warm ivory (#FAF3E0), and a subtle drop-shadow that makes it hover slightly above the parchment ground. Cards are arranged in a staggered **f-pattern** with deliberate leftward alignment and irregular vertical spacing, as though laid out on a researcher's desk. No card occupies more than 55% of the viewport width. - **The Deep Strata (300vh-600vh):** The background gradually darkens from parchment to a deep earth tone (#2C2416) as the user scrolls deeper. Content transitions from specimen cards to **fragment panels** -- irregularly shaped containers with rough, eroded edges created via CSS `clip-path: polygon()` with randomized vertices, suggesting broken pottery or stone tablets. Text within these fragments uses a lighter weight and increased letter-spacing, as if the inscription is wearing away. - **The Bedrock (600vh-800vh):** The final section is nearly black (#1A1611), with content appearing as thin luminous lines -- as if the user has reached a depth where only trace marks remain. A single large glyph (a cuneiform-style wedge mark rendered in SVG) pulses slowly in the center, like a heartbeat in the earth. **Navigation:** A narrow vertical sidebar on the right edge displays depth markers -- small horizontal ticks with labels like "Surface," "500 BCE," "2000 BCE," "Deep Time" -- functioning as both a scrollbar and a stratigraphic legend. This sidebar is rendered in a muted sepia tone and uses `position: sticky` to remain visible throughout the scroll. ## Typography and Palette **Typography:** - **Display / Headings:** "Cormorant Garamond" (Google Fonts) -- a high-contrast Garamond revival with sharp, elegant serifs and pronounced thick-thin stroke modulation. Used at sizes ranging from `clamp(1.8rem, 4vw, 4.5rem)` with weight 600. Its classical proportions and refined detailing evoke the title pages of scholarly monographs and the engraved plates of antiquarian publications. Letter-spacing set to `0.04em` for headings, giving each word room to breathe as if etched rather than printed. - **Body / Running text:** "Source Serif 4" (Google Fonts) -- a sturdy, readable transitional serif designed for extended reading. Weight 400 for body text, 300 for captions and metadata. Its slightly generous x-height and open counters ensure legibility even at the small sizes used for specimen card annotations. Line-height set to 1.72 for a spacious, unhurried reading rhythm that mirrors the contemplative pace of the site. - **Accents / Labels / Depth markers:** "Inconsolata" (Google Fonts) -- a monospace typeface with humanist proportions, used exclusively for the stratigraphic sidebar labels, coordinate references, and date stamps. Weight 400, set at 0.75rem with letter-spacing `0.12em` and text-transform `uppercase`. The monospace rhythm creates a clinical precision that contrasts with the organic warmth of the serif faces, suggesting the overlay of modern scientific measurement on ancient material. **Palette:** The palette is drawn from the actual colors found in archaeological contexts -- oxidized metals, fired clay, aged parchment, carbonized wood, limestone dust. | Role | Color | Hex | Source | |------|-------|-----|--------| | Background (surface) | Aged parchment | #FAF3E0 | Yellowed vellum | | Background (deep) | Dark earth | #2C2416 | Excavation trench soil | | Background (bedrock) | Near-black loam | #1A1611 | Carbonized organic layer | | Primary text | Warm charcoal | #3B3228 | Iron gall ink | | Secondary text | Faded sepia | #8B7355 | Aged photograph | | Accent 1 | Oxidized copper | #6B705C | Patinated bronze | | Accent 2 | Terracotta | #C17A56 | Fired clay fragment | | Accent 3 | Limestone dust | #D4C9A8 | Carved stone | | Highlight | Gilt trace | #B8953E | Gold leaf remnant | The palette intentionally avoids pure whites and pure blacks. Every value carries warmth and the suggestion of age. The gilt trace (#B8953E) is used sparingly -- only for the pulsing bedrock glyph and occasional emphasis marks -- to preserve its impact as a discovery moment, like finding gold in the dirt. ## Imagery and Motifs **No photographs. No stock imagery.** Every visual element is constructed from line drawing, SVG path animation, and CSS-generated texture. **Core motifs:** - **Topographic contour lines:** Thin SVG paths (#8B7355 at 40% opacity) that trace undulating contour lines across the background, animated with `stroke-dashoffset` to draw themselves slowly on scroll. These suggest the terrain being excavated and provide organic visual texture without competing with content. Line weight: 0.5px. Multiple overlapping contour sets at different scroll speeds create a subtle parallax-free depth effect using only opacity variation. - **Specimen card borders:** Each content card bears a thin top border in oxidized copper (#6B705C) and a bottom border in limestone dust (#D4C9A8), with left and right borders absent -- evoking the open edges of an index card pulled from a catalog drawer. A small circular stamp mark (12px diameter, #C17A56 at 30% opacity) appears in the upper-right corner of each card, suggesting a cataloging mark. - **Fragment erosion:** The deeper content panels use `clip-path` with intentionally irregular polygon points to create the appearance of broken edges. These clip paths are generated with slight CSS custom property variations (`--erosion-seed`) so each fragment has a unique silhouette. On scroll, the fragments slowly rotate by 0.5-1.5 degrees, as though being gently turned in the hand for examination. - **Cuneiform wedge glyphs:** A set of 6-8 abstract wedge-shaped SVG marks inspired by cuneiform script (but not reproducing actual characters) appear as decorative elements between sections. These are rendered in #D4C9A8 against darker backgrounds and serve as section dividers. Each glyph is constructed from 3-4 overlapping triangular paths with rounded joins. - **Grain texture overlay:** A CSS-generated noise texture (`background-image: url("data:image/svg+xml,...")` using an SVG `` filter) covers the entire page at 3-5% opacity, giving every surface the tactile quality of aged paper. The grain is slightly coarser in the deeper strata, suggesting rougher material. - **Hairline rules:** Extremely thin horizontal rules (0.5px, #8B7355) appear between content blocks, sometimes extending the full viewport width and sometimes stopping short, as if drawn by a ruling pen that ran out of ink. These replace the conventional use of spacing to separate sections. ## Prompts for Implementation **Narrative structure:** The site tells the story of excavation -- of descending through accumulated layers of time to find something luminous in the dark. The scroll is the dig. Implementation should serve this central metaphor at every level: 1. **The Drawing Surface (opening):** The topographic contour lines should be the first animated element the user sees. Implement using multiple `` elements with `` data representing smooth Bezier curves. Use `stroke-dasharray` and `stroke-dashoffset` animated via CSS `@keyframes` to draw the contours over 8-12 seconds. The animation should feel unhurried and meditative -- `cubic-bezier(0.25, 0.1, 0.25, 1.0)` easing. No Intersection Observer for this initial animation; it begins on page load. 2. **Specimen card entry:** As the user scrolls into the First Stratum, specimen cards should fade in with a combined opacity + translateY(20px) animation, each card delayed by 150ms from the previous. Use Intersection Observer with `threshold: 0.15` and `rootMargin: '-50px'`. The entry animation uses `cubic-bezier(0.22, 0.61, 0.36, 1)` over 600ms. Cards should feel as though they are being carefully placed on the desk, not flying in. 3. **Background stratum transition:** The background color shift from parchment (#FAF3E0) to dark earth (#2C2416) to bedrock (#1A1611) should be implemented as a continuous gradient keyed to scroll position. Use `requestAnimationFrame` to interpolate between the three color stops based on `window.scrollY / document.documentElement.scrollHeight`. The transition should be imperceptible at any given moment but dramatic over the full scroll distance -- the user should only realize the background has changed when they glance at the scrollbar. 4. **Fragment revelation in deep strata:** The fragment panels in the Deep Strata should appear with a `clip-path` animation that expands from a small sliver to the full irregular shape, as though the fragment is being uncovered from surrounding soil. Animate `clip-path: polygon(...)` using CSS transitions triggered by Intersection Observer. Duration: 1200ms with `cubic-bezier(0.16, 1, 0.3, 1)` for an organic, unhurried reveal. 5. **The bedrock glyph:** The final cuneiform glyph should pulse using a `box-shadow` glow animation in gilt trace (#B8953E) with `animation: glow 4s ease-in-out infinite`. The glow radius oscillates between 0px and 30px. This is the only element on the site with a looping animation, making it feel alive -- the one thing in the bedrock that still has a pulse. 6. **Depth sidebar:** Implement the stratigraphic sidebar using `position: fixed` on the right edge with `right: 16px`. The current depth indicator (a small filled circle, 6px, #C17A56) moves along the vertical axis in sync with scroll position. Transitions between named strata trigger a brief label fade-in animation. The sidebar should be hidden on viewports narrower than 768px to preserve the full-width excavation metaphor on mobile. **Technical preferences:** - Pure CSS animations wherever possible; JavaScript only for scroll-position interpolation and Intersection Observer - No animation libraries -- keep the dependency footprint at zero - Use CSS custom properties extensively for the stratum color system: `--stratum-bg`, `--stratum-text`, `--stratum-accent` updated via JS on scroll - Full-screen narrative experience with no conventional header/footer/navigation chrome - AVOID: CTA buttons, pricing blocks, stat-grids, testimonial carousels, feature comparison tables - All content should feel discovered, not presented -- no "Learn More" links, no "Get Started" buttons ## Uniqueness Notes **Differentiators from other designs:** 1. **Stratigraphic scroll-as-excavation:** No other design in the collection uses geological stratigraphy as its organizing metaphor. Where other sites scroll through sections, archaic.works scrolls through time itself -- each stratum of the page represents a different archaeological epoch, and the progressive darkening of the background physically simulates descending into the earth. The user is not browsing; they are digging. 2. **Sepia-nostalgic palette (0% frequency):** The palette is drawn entirely from archaeological material colors -- oxidized copper, terracotta, aged parchment, carbonized earth -- rather than from conventional web design color theory. No other design in the collection uses a sepia-nostalgic palette. The deliberate avoidance of pure black and pure white gives every surface the tonal warmth of a 19th-century photograph or a page from a leather-bound field journal. 3. **Fragment erosion via animated clip-path:** The irregular, eroded edges of the deep-stratum content panels are unique in the collection. While other designs use clean rectangles or rounded corners, archaic.works uses CSS `clip-path: polygon()` with randomized vertices to create the appearance of broken pottery shards or fractured stone tablets. The clip-path expansion animation during scroll revelation has no precedent in the other designs. 4. **Typography as archaeological inscription:** The three-font system (Cormorant Garamond / Source Serif 4 / Inconsolata) creates a deliberate layering of temporal registers: classical engraving, modern scholarly text, and scientific measurement notation. This typographic stratigraphy mirrors the visual stratigraphy of the page itself, reinforcing the excavation metaphor at the level of letterform. 5. **Absence of photography and stock imagery:** Every visual element is constructed from SVG line drawing, CSS-generated texture, and typographic composition. The site achieves its archaeological atmosphere through abstraction rather than representation -- topographic contours, cuneiform-inspired glyphs, and grain textures replace the photographs that dominate 90% of the other designs in the collection. 6. **Single pulsing element as emotional anchor:** The gilt-traced cuneiform glyph at the bedrock of the page is the only looping animation on the entire site. In a collection where 93% of designs use scroll-triggered animations, archaic.works reserves its single living, breathing element for the very end -- a discovery waiting in the dark, rewarding the user who scrolled all the way down. **Chosen seed/style:** sepia toned history **Avoided patterns from frequency analysis:** - corporate aesthetic (83% -- replaced with wabi-sabi / dark-academia hybrid) - photography imagery (90% -- replaced with SVG line drawing and CSS texture) - card-grid layout (90% -- replaced with timeline-vertical + f-pattern specimen cards) - centered layout (80% -- replaced with deliberate leftward alignment and staggered placement) - gradient palette (96% -- replaced with discrete stratum color stops interpolated via JS) - warm palette (93% -- replaced with sepia-nostalgic, a distinct tonal family) - mono typography (83% -- Inconsolata used only for accent labels, not as primary face) - scroll-triggered as dominant pattern (93% -- used sparingly, with emphasis on the continuous background interpolation and the single bedrock pulse)