# Design Language for makedon.quest ## Aesthetics and Tone makedon.quest is a historical storytelling experience exploring the legacy of ancient Macedonia -- from Philip II's unification to Alexander's vast campaigns that reshaped the ancient world. The aesthetic channels dark-academia crossed with classical antiquity: marble textures, weathered bronze tones, and the solemnity of museum galleries where ancient coins and cracked pottery sit behind glass. The tone is scholarly-intellectual yet opulent-grand, evoking the experience of walking through the Archaeological Museum of Thessaloniki at dusk, where the Vergina Sun gleams from gold artifacts under carefully directed spotlights. Every visual choice references the material culture of the Hellenistic world -- terracotta warmth, verdigris patina, limestone grit -- filtered through a modern editorial sensibility that treats each historical fact as a precious artifact to be displayed with reverence and drama. ## Layout Motifs and Structure **Primary layout: timeline-vertical with layered-depth** The site is organized as a monumental vertical timeline stretching from 808 BCE (founding of the Argead dynasty) to 168 BCE (fall of Macedonia to Rome). The timeline spine runs along the left third of the viewport as a continuous vertical bronze-colored line (2px, #8b7355), punctuated by era marker nodes styled as ancient Macedonian shield bosses (circular, with a raised-center effect via box-shadow and radial gradient). **Content Regions:** Each era occupies 150vh minimum. Content is presented in offset panels positioned to the right of the timeline spine, styled as museum display cards with a subtle 1px border in verdigris (#607d5e) and a cream interior (#faf3e3). Panels alternate between full-width narrative blocks and side-by-side artifact showcases (split-screen within the region, 55/45 ratio). **Layered Depth System:** Three depth layers create a museum-like dimensionality. The background holds a persistent marble texture (very subtle, 0.04 opacity repeating pattern in warm gray). The mid-layer holds the timeline spine, era markers, and content panels. The foreground holds decorative elements: column capitals at section tops, laurel wreath borders around key quotes, and floating date indicators that remain sticky during their era's scroll range. **Navigation:** A horizontal bar at the top styled as a frieze band (repeating Greek key/meander pattern in Deep Bronze #8b7355 on dark ground #2a2118) contains era labels that serve as jump links. The active era label is underlined with a gold bar that slides with an underline-draw animation (300ms, ease-out). ## Typography and Palette **Typography:** - **Display / Era Titles:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif with sharp, refined details that evoke classical inscription proportions. Used at clamp(2.5rem, 6vw, 5.5rem), weight 700, italic variant for primary era names. Letter-spacing: 0.04em. The sharp triangular serifs reference stone-carved Greek letterforms. - **Body / Historical Narrative:** "Source Serif 4" (Google Fonts) -- a sturdy, readable text serif with a warm texture and excellent performance at body sizes. Weight 400 for body, 600 for emphasis. 17px base, line-height 1.8. Its robust x-height and open counters ensure legibility against textured backgrounds. - **Inscriptions / Quotes:** "IM Fell English" (Google Fonts) -- an intentionally rough, historically-flavored serif that evokes early printing and manuscript traditions. Used exclusively for blockquotes from ancient sources (Plutarch, Arrian, Diodorus). 20px italic, with a 4px left border in Deep Bronze and a cream background panel. - **Labels / Dates / UI:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with a vintage elegance, used for timeline dates, navigation labels, and small metadata. Weight 600, 11-13px, uppercase, letter-spacing: 0.15em. **Palette:** | Role | Color | Hex | |------|-------|-----| | Marble White | Warm stone cream | #faf3e3 | | Obsidian Ground | Deep warm black | #2a2118 | | Deep Bronze | Aged metallic bronze | #8b7355 | | Verdigris | Oxidized copper green | #607d5e | | Vergina Gold | Macedonian star gold | #d4a017 | | Terracotta | Warm fired clay | #c67a4b | | Parchment Shadow | Mid-tone warm gray | #a89880 | The palette derives from the sepia-nostalgic and terracotta-warm families. Marble White serves as primary background with Obsidian Ground for alternate dark sections (used in 2 of 6 eras for contrast rhythm). Deep Bronze is the workhorse accent for lines, borders, and interactive states. Vergina Gold is reserved for high-emphasis moments: era transitions, the Vergina Sun motif, and hover highlights. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Vergina Sun**: A 16-pointed star motif inspired by the ancient Macedonian royal symbol found in the Vergina tombs. Rendered as an SVG with alternating long and short rays in Vergina Gold. It appears at three scales: as a 200px decorative element at the page header, as 40px section-end markers between eras, and as a 16px favicon. On the large instance, rays animate outward from center via a stagger animation (50ms per ray, scale from 0 to 1, spring easing) when the page loads. 2. **Greek Meander (Key Pattern)**: A continuous geometric border pattern rendered in CSS using repeating-linear-gradient, creating the classic Greek key motif in Deep Bronze on Obsidian Ground. Used as the navigation frieze, as horizontal rules between content blocks, and as a subtle border treatment on artifact display panels. The pattern is never broken or truncated -- it always completes full repetitions. 3. **Column Capital Brackets**: Stylized Ionic column capitals (simplified to CSS shapes: two spiral volutes as border-radius circles flanking a horizontal bar) frame the top of each era section. They serve as architectural brackets signaling a new historical period. Each capital is 60px tall, rendered in Parchment Shadow with a 1px Deep Bronze outline. As they enter the viewport, the volutes rotate inward from flat (rotateY 90deg to 0deg, 500ms, ease-out). 4. **Marble Texture Grain**: A subtle noise overlay (CSS background using a tiny repeating SVG pattern of random 1px dots at 0.03 opacity in warm gray) applied to all light-background surfaces. This prevents flat digital surfaces and evokes the natural grain of Pentelic marble without being distracting. 5. **Laurel Wreath Frames**: SVG laurel wreaths (two curved olive branches meeting at the top) surround key quotes and highlight boxes. Rendered in Verdigris with leaf details as individual path elements. On scroll-trigger, the two branches draw themselves via stroke-dashoffset animation from bottom to top (1.5s per branch, staggered by 200ms), meeting at the crown. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens on a full-viewport Obsidian Ground screen. After 600ms, the Vergina Sun assembles itself at center -- rays stagger outward from a golden point, each ray scaling in with a 50ms delay (total: 800ms for all 16 rays). The sun holds at full scale for 400ms, then contracts to 40px and floats to the top-left corner where it serves as the site identity mark. Simultaneously, the navigation frieze slides down from above (transform: translateY(-100%) to 0, 400ms), and the first era title types itself below in Playfair Display italic with a blinking Vergina Gold cursor. **Scroll-Driven Timeline:** As the user scrolls, the bronze timeline line on the left extends downward in real-time (the line's height is tied to scroll position via a simple scroll event listener setting CSS custom property --scroll-progress). Era marker shield bosses scale from 0.5 to 1 and gain a box-shadow glow in Vergina Gold when their Intersection Observer threshold (0.3) is crossed. Content panels slide-reveal from the right (translateX(30px) to 0, opacity 0 to 1, 500ms, stagger: 120ms between panels in the same era). **Dark/Light Era Alternation:** Eras alternate between Marble White and Obsidian Ground backgrounds, creating a visual rhythm that prevents monotony across the long scroll. Dark eras invert the text to Marble White and shift the timeline line color to Vergina Gold. The transition between light and dark uses a diagonal clip-path wipe (45-degree angle, 800ms) rather than a hard cut. **Artifact Showcase Interaction:** Within split-screen artifact sections, hovering over an artifact panel applies a subtle tilt-3d effect (perspective: 800px, rotateX: 2deg, rotateY: 3deg, following cursor position) and elevates the panel (translateZ: 8px, box-shadow expansion), simulating lifting an object off a museum shelf for closer inspection. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate gradient backgrounds, neon color accents, photography-heavy sections, card-grid layouts. **EMPHASIZE:** Architectural framing, material texture authenticity, progressive timeline revelation, scholarly quotation presentation, museum-gallery spatial feeling. ## Uniqueness Notes **Differentiators:** 1. **Archaeological museum as spatial metaphor**: No other design in the portfolio recreates the experience of walking through a physical museum gallery. The artifact display panels with tilt-3d hover, the column capital section brackets, and the marble texture grain all work together to simulate three-dimensional exhibition space within a flat web page. 2. **Bronze timeline with shield-boss era markers**: The continuous vertical timeline with Macedonian shield bosses as nodes is a unique navigational element that doubles as the site's primary visual motif. Unlike generic timeline implementations, every element derives from historically accurate material culture. 3. **Greek meander pattern as functional navigation frieze**: The meander (Greek key) border is not merely decorative but serves as the container for the primary navigation bar, merging ornamental pattern with functional UI in a way no other design attempts. 4. **Dual-era color alternation with diagonal clip-path transitions**: The systematic alternation between light marble and dark obsidian backgrounds, connected by angled clip-path wipes, creates a reading rhythm unique to this design and references the dramatic lighting shifts between museum gallery rooms. **Chosen seed/style:** sepia toned history **Avoided overused patterns:** corporate aesthetic, centered-only layout, gradient-dominant palette, minimal imagery style, counter-animate as sole animation, mysterious-moody tone **Preferred underused elements:** marble-classical motifs, sepia-nostalgic palette, terracotta-warm accents, timeline-vertical layout, scholarly-intellectual tone, slab-serif + elegant-serif typography pairing, tilt-3d interaction, underline-draw navigation