Wild Week Athens 2026 — Design System Reference

1. Visual Theme & Atmosphere

Wild Week’s Athens edition leans hard into classical archaeology — a pale ash-grey canvas (rgb(203, 203, 203)) that reads like aged limestone, a single saturated ultramarine (rgb(7, 85, 187)) borrowed from vase-painting and Greek passport pages, and display type set in Albertus Nova Light that echoes carved stone lapidary letters. The page behaves like a printed exhibition catalogue: no gradients, no shadows, no glossy UI. Content blocks sit on slightly warmer stone-toned surfaces (rgb(221, 220, 215)) that separate by luminance swap rather than by outline, and the copy block layout — “THE FACTS” with single-letter indices D / P / H / I — reads as a museum placard. The tone is archaic, wry, deliberately unhurried. Not a tech brand. Not a hotel brand. Something closer to a private invitation printed on cardstock.

2. Color Palette & Roles

Foundation

• rgb(203, 203, 203) — page canvas (ash-grey stone)
• rgb(0, 0, 0) — ink (body text, borders)
• rgb(7, 85, 187) — Greek ultramarine (links, logotype, accent surfaces)

Warm stone surfaces (content blocks)

• rgb(232, 232, 232) — lightest panel (luminance 0.91)
• rgb(221, 221, 214) / rgb(221, 220, 215) / rgb(220, 219, 213) — a micro-gradient of sand-warmed stones (luminance 0.86–0.87), used almost interchangeably to break full-bleed monotony
• rgb(255, 255, 255) — hard white (rarely, reserved for inset content)

Accent surface

• rgb(7, 85, 187) — ultramarine block with black text — a single chromatic moment that carries the brand

Interactive

• Links: ultramarine default → darker royal rgb(5, 68, 150) on hover (a subtle tonal step, not a color swap)

The palette is deliberately narrow: one canvas grey, one pure ink, one saturated blue. The “warm stones” family exists only to give large panels faint tonal variation — you should never see more than two of them side-by-side.

3. Typography Rules

Typefaces

• Albertus Nova Light (weight 300) — the entire editorial voice: headlines, sub-heads, body prose, links. Albertus is a 1930s lapidary face with slightly flared serifs — it evokes inscriptions.
• system sans-serif — body fallback and tiny labels only

Scale

Principles

• Weight is locked at 300 across every heading and body element — the typographic character comes entirely from Albertus Nova’s shape, not from bold/light contrast.
• All display type is uppercase with positive tracking (+0.72px to +0.96px). This is not a trend choice — uppercase + wide tracking is what lapidary faces were designed for.
• Body paragraphs drop to 10px with near-zero tracking — almost fine-print scale — because the aesthetic is reference material, not a marketing page.
• OpenType features are explicitly enabled (cv03, cv04, cv09, cv11, blwf). The designer is hand-picking alternate glyphs — which means the type is doing deliberate decorative work.

What’s absent: no sans-serif display, no italics, no heavy weights, no modern geometric grotesk. The entire page talks in one carved voice.

4. Component Stylings

Links

• Default: ultramarine rgb(7, 85, 187) text, no underline by default (Framer’s link-text component manages this inline)
• Hover: darkens one step to rgb(5, 68, 150) — royal blue. No background flash.
• Focus: native 1px rgb(0, 95, 204) ring, not customised

Logotype / Hero plate

• The “WILD WEEK” wordmark is a hand-drawn treatment — not derived from the body face. It sits at full-bleed scale with an amphora silhouette positioned behind it.

Content panels

• Background: one of the warm-stone family (rgb(221, 220, 215) range)
• Border: none — separation comes from luminance swap against the ash-grey canvas
• Border-radius: 4px or 8px — small, paper-like corners, not pill shapes

Buttons / CTAs

• Minimal — the design avoids solid CTAs in favor of simple uppercase link text. Interaction cues live in the copy (“RSVP”, “APPLY”) rather than in chrome.

No shadows detected. Depth is entirely flat.

5. Layout Principles

• Editorial split layout: a dominant hero stage with the wordmark + amphora, then a two-column facts/imagery grid, then a marble-frieze illustration that runs nearly full-bleed.
• Indexed labels: facts use single-letter keys (D. / P. / H. / I.) flush-left with right-aligned values — a catalogue-entry pattern borrowed from archaeological records.
• Body padding is zero at the element level; all composition happens inside Framer’s nested frames (noticeable from the unusually granular breakpoint list: 809, 810, 1389, 1390, 1399, 1400, 1599, 1799 — Framer’s responsive ramps).
• Content prefers long horizontal strips over contained cards — the frieze is allowed to bleed nearly edge-to-edge, reinforcing the “sculptural relief” frame.

6. Depth & Elevation

Depth is almost entirely absent. No box-shadow values in the extracted system. Separation between surfaces is achieved through two devices:

1. Luminance stepping — ash canvas (0.80) → warm stone panel (0.86) → lightest panel (0.91) → white (1.0). Adjacent surfaces sit only ~0.05 apart, which reads as the faintest shadow of paper-on-paper rather than a clear elevation change.
2. A single saturated block — the ultramarine panel breaks the near-monochrome composition and acts as the visual anchor. It’s the only “loud” surface on the page.

The absence of shadows is doctrinal. Adding one would collapse the lithograph atmosphere.

7. Do’s and Don’ts

Do

• Use rgb(203, 203, 203) as the canvas — it carries the limestone atmosphere.
• Lock typography to Albertus Nova Light at weight 300 for every heading and every body run.
• Set all display type uppercase with +0.7px to +1px tracking.
• Reserve rgb(7, 85, 187) for the logotype, links, and at most one full-bleed accent panel per view.
• Use the warm-stone surface family (rgb(221, 220, 215) ±) for content cards — never pure white, never dark grey.
• Treat body copy as reference prose — 10px, barely tracked, Albertus in text weight.
• Label sections with terse alphabetic indices (D / P / H / I) rather than icons or emoji.

Don’t

• Don’t introduce a second typeface as display — the page survives on Albertus alone.
• Don’t use bold weights. Hierarchy comes from size + case + tracking, never from weight.
• Don’t add drop-shadows, blurs, or gradients — depth must stay flat.
• Don’t use rounded pill buttons. Interaction is text-first, chrome-last.
• Don’t swap the ultramarine for a brighter or darker blue — rgb(7, 85, 187) is specifically passport / bureaucratic-blue, not royal, not electric.
• Don’t rely on hover micro-animations — the page moves almost not at all.

8. Responsive Behavior

Framer’s unusually dense breakpoint list — 809, 810, 1389, 1390, 1399, 1400, 1599, 1799 — suggests the layout is designed around fixed compositions at small laptop, large laptop, and desktop widths, with 1-pixel pairs handling Framer’s internal snap boundaries rather than meaningful user-facing breakpoints. Content scales by swapping grid layouts rather than reflowing type; the Albertus wordmark is an SVG/image, not live type, so it holds its proportions at any width. Body text never changes from 10px — which means on narrow screens the facts table becomes the primary reading surface while the hero plate shrinks proportionally.

9. Agent Prompt Guide

Build a UI in the Wild Week Athens style.

Set the canvas to rgb(203, 203, 203) (ash-grey limestone) and text to pure black. Use Albertus Nova Light at weight 300 for every headline and every body element — never switch weight, never switch family. All headings are uppercase with +0.7px–+1px letter-spacing. Body copy is tiny (10px), lightly tracked, set in the same face. Use rgb(7, 85, 187) — a saturated passport-blue — for links, logotype, and one full-bleed accent panel. Link hover darkens to rgb(5, 68, 150) with no background change. Content panels sit on warm stones in the rgb(221, 220, 215) family, stepped ~0.05 in luminance from the canvas — separation is tonal, never bordered, never shadowed. Use small border-radii only (4px / 8px), never pills. Organise information as catalogue entries: single-letter indices (D / P / H / I) flush-left, values right-aligned. Treat the page like a museum placard — archaic, unhurried, and confident that the typographic voice is doing the whole job.

Generated by Sparkbites — extracted from live CSS analysis