---
version: alpha
name: AI Mystery Atelier Interface
description: "A luxury interactive-storytelling design system for AI-assisted mystery journeys, editorial commerce, invitation-only launches, and clue-led product experiences. It combines a warm ivory paper field, antique-gold actions, dark walnut stage panels, oxblood tension states, evidence cards, and conversational clue surfaces. The system is inspired by a current Awwwards Site of the Day pattern around AI-powered mystery interaction, but it must not copy proprietary brand marks, character names, campaign art, or product photography."

colors:
  primary: "#CAB588"
  on-primary: "#15110C"
  primary-hover: "#DCCAA5"
  primary-focus: "#8F7448"
  canvas: "#FEF1E1"
  canvas-soft: "#FBF6EE"
  ink: "#1A120D"
  ink-muted: "#5F5146"
  ink-subtle: "#8C7C70"
  surface-1: "#FFF8EE"
  surface-2: "#F1E4D4"
  surface-card: "#FFF8EE"
  surface-stage: "#211711"
  surface-stage-soft: "#2C2119"
  stage-ink: "#F9EFE2"
  stage-muted: "#C9B9A6"
  hairline: "#D7C6AE"
  hairline-strong: "#A88D61"
  oxblood: "#5B1F28"
  clue-blue: "#596E8F"
  success: "#537A5A"
  warning: "#A66E2A"
  danger: "#8B2733"
  inverse-canvas: "#15100B"
  inverse-surface-1: "#241A13"
  inverse-ink: "#F8EBDC"

typography:
  display-xl:
    fontFamily: Cormorant Garamond
    fontSize: 74px
    fontWeight: 560
    lineHeight: 0.96
    letterSpacing: 0
  display-lg:
    fontFamily: Cormorant Garamond
    fontSize: 56px
    fontWeight: 560
    lineHeight: 1.02
    letterSpacing: 0
  display-md:
    fontFamily: Cormorant Garamond
    fontSize: 40px
    fontWeight: 560
    lineHeight: 1.1
    letterSpacing: 0
  headline:
    fontFamily: Cormorant Garamond
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: 0
  card-title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 680
    lineHeight: 1.24
    letterSpacing: 0
  subhead:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 460
    lineHeight: 1.55
    letterSpacing: 0
  body-lg:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 430
    lineHeight: 1.58
    letterSpacing: 0
  body:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 430
    lineHeight: 1.56
    letterSpacing: 0
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 450
    lineHeight: 1.48
    letterSpacing: 0
  caption:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 760
    lineHeight: 1.35
    letterSpacing: 0
    textTransform: uppercase
  mono:
    fontFamily: SFMono-Regular
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  xs: 3px
  sm: 5px
  md: 8px
  lg: 8px
  xl: 8px
  pill: 9999px

spacing:
  base: 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 11px 16px
  button-secondary:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 11px 16px
  conversation-panel:
    backgroundColor: "{colors.surface-stage}"
    textColor: "{colors.stage-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 20px
  clue-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 14px
  evidence-chip:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 7px 10px
  stage-transition:
    backgroundColor: "{colors.surface-stage-soft}"
    textColor: "{colors.stage-ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 16px

motion:
  clue-reveal:
    purpose: "Reveal evidence priority and user progress, not decoration."
    properties: "opacity, transform, clip-path, filter"
    duration: "160ms to 520ms"
    fallback: "All clues stay visible as ordered evidence cards for prefers-reduced-motion."
  conversation-turn:
    purpose: "Show AI response, confidence, and next available action as separate states."
    duration: "180ms to 360ms"
  stage-transition:
    purpose: "Connect scenes, suspects, products, or campaign chapters without hiding navigation."
    fallback: "Static scene title, breadcrumb, and evidence count remain visible."

layout:
  hero: "Full-width editorial stage with a visible interactive clue surface in the first viewport and a hint of the evidence section below."
  grid: "12-column desktop grid, 6-column tablet grid, 1-column mobile stack; conversation panels span 5-7 columns and evidence rails span 4-6 columns."
  density: "Use sparse hero copy, then denser evidence grids after the user has a task."
  media: "Use abstracted product silhouettes, typed clues, or case objects; do not use copied campaign photography or proprietary characters."

guidance:
  do:
    - "Start with an actionable mystery object: a clue, transcript, evidence board, or chapter state."
    - "Use warm ivory for reading surfaces and dark walnut panels for high-tension conversation or scene transitions."
    - "Separate AI answers, evidence confidence, and user actions so the experience feels inspectable."
    - "Keep luxury restraint through spacing, fine borders, serif display type, and limited metallic accents."
  dont:
    - "Do not copy luxury brand marks, campaign art, character names, or product photography from source cases."
    - "Do not use cinematic transitions that obscure where the user can click next."
    - "Do not make the entire interface beige and gold; use dark stage, oxblood, blue, and functional status colors."
    - "Do not rely on AI chat alone; pair every answer with evidence cards and explicit next steps."

caseStudy:
  source: "Awwwards Gucci: Mystery Unfolds Site of the Day, June 17 2026"
  url: "https://www.awwwards.com/sites/gucci-mystery-unfolds"
  analysis: "The public Awwwards profile describes an AI-powered mystery experience with Google Gemini, real-time conversations, clues, storytelling, gestures, interaction design, GSAP, and GraphQL. It also lists warm ivory and antique-gold palette values. This resource extracts the reusable design pattern: luxury mystery staging, conversational investigation, evidence hierarchy, and scene transitions."
---

# AI Mystery Atelier Interface

Use this design system for AI-assisted mystery journeys, editorial commerce launches, cultural campaigns, luxury product discovery, interactive lookbooks, private previews, and clue-led onboarding experiences where a user must investigate before acting.

The interface should feel like an elegant case file coming alive. It uses ivory reading surfaces, dark stage panels, antique-gold primary actions, serif display type, compact evidence chips, and conversational clues. The AI layer must stay inspectable: every generated answer needs a visible clue source, confidence cue, or next action.

## Overview

The core idea is luxury suspense with explicit interaction. A user should immediately understand what can be examined: a clue, transcript, archive object, chapter state, product detail, or evidence board. The first viewport should never be only atmosphere. It needs a live task surface that makes the narrative tangible.

This system can support dramatic transitions, but motion must clarify the story structure. A stage transition can move the user from one chapter to another, reveal a hidden clue, or connect an AI answer to evidence. It should not hide navigation, delay basic reading, or replace the need for clear labels.

## Colors

### Brand & Accent

- `primary` (#CAB588) is the antique-gold action color. Use it for primary buttons, selected clue states, progress markers, and explicit affordances.
- `primary-hover` and `primary-focus` support tactile hover/focus states. Keep focus visible, especially on dark stage panels.
- `oxblood` creates narrative tension for warnings, suspect states, chapter pivots, or unresolved evidence. Use it sparingly.
- `clue-blue` is a secondary clue or archive accent that prevents the palette from becoming one-note beige and gold.

### Surface

- `canvas` (#FEF1E1) is the ivory paper field for readable editorial content.
- `surface-1` and `surface-2` provide card and evidence layers. Borders should be visible and quiet.
- `surface-stage` and `surface-stage-soft` are dark walnut stage panels for AI conversation, cinematic transitions, and high-tension states.

### Text

- Use `ink` on light surfaces and `stage-ink` on stage panels.
- `ink-muted` and `stage-muted` label metadata, timestamps, source notes, and confidence details.
- Do not set long body copy in gold. Gold is an action and emphasis color, not a paragraph color.

## Typography

The type system pairs a literary serif display family with utilitarian sans body text. Use `display-xl`, `display-lg`, and `display-md` for scene titles and editorial chapter moments. Use `body`, `body-sm`, and `mono` for clue details, timestamps, transcript fragments, and interface metadata.

Keep letter spacing at zero. The feeling of luxury should come from proportion, hierarchy, spacing, and material contrast instead of wide tracking.

## Layout

The hero should be an editorial stage, not a decorative landing page. Show a real interaction surface in the first viewport: an evidence board, transcript, clue drawer, or AI conversation. Leave a hint of the next section so the page does not feel sealed.

After the hero, switch into task structure:

- Evidence grid for inspectable clues.
- Conversation column for AI inquiry.
- Chapter timeline for progress.
- Object detail panel for product or narrative artifacts.

## Elevation & Depth

Depth comes from surface role changes, borders, and narrative state rather than heavy shadows. Use ivory cards for evidence, dark stage panels for conversation, and subtle antique-gold borders for active clues. Shadows can appear on floating case files or modal inspections, but they should stay soft and rare.

## Shapes

Use crisp rectangles with 8px maximum card radii and pill chips for compact evidence states. Rounded corners should feel precise, not playful. The mark, object thumbnail, or clue artifact can carry a softer shape, but the interactive controls should remain consistent and easy to scan.

## Components

### Button Primary

Use `button-primary` for decisive narrative actions such as "Open clue", "Ask about evidence", "Confirm theory", or "Enter next scene". Button text should name the user's next move, not a vague marketing CTA.

### Conversation Panel

Use `conversation-panel` for AI-assisted investigation. It should include:

- A visible prompt or user question.
- The AI response.
- Source clue references or confidence labels.
- One primary next action and one quieter alternative.

### Clue Card

Use `clue-card` for evidence objects. A strong clue card has a title, source note, confidence or status, and a short explanation of why it matters. If the card is interactive, its selected and focused states must be visible without relying on color alone.

### Evidence Chip

Use `evidence-chip` for filters, source types, chapter counts, and status labels. Keep chip text short and functional.

### Stage Transition

Use `stage-transition` for scene changes, chapter reveals, and object inspections. It can be animated, but it must preserve a static fallback with scene title, breadcrumb, and evidence count.

## Page Structure

On mobile, prioritize the current clue and next action. Secondary evidence rails can become horizontal scroll regions only when each item keeps a stable width and accessible focus order.

## Motion

Motion is useful when it explains reveal, causality, or chapter progression. Use short transitions for clue reveals and conversation turns. Use longer transitions only for chapter changes, and always keep a reduced-motion path.

Avoid full-screen cinematic sequences that trap the user before they can inspect evidence. Suspense should sharpen interaction, not postpone it.

## Implementation Notes

- Use semantic buttons for clue actions and filters.
- Make focus rings visible on both ivory and dark stage surfaces.
- Pair every hover-only affordance with a persistent label or icon.
- Store AI answer references as structured data so an agent can render source-backed evidence cards.
- Provide a non-animated route through the same content for reduced-motion users.

## Case Study Extraction

The source Awwwards case is valuable because it shows how luxury storytelling can become an interactive investigation rather than a passive cinematic page. Its public profile emphasizes AI-powered mystery, real-time conversation, clues, gestures, storytelling, GSAP, and GraphQL. The reusable lesson is not the specific brand world; it is the interaction contract:

1. Begin with a mystery object the user can inspect.
2. Let AI conversation advance the investigation.
3. Attach every answer to evidence.
4. Use motion to connect scenes and clues.
5. Keep navigation and next actions visible.

## Do's and Don'ts

Do start with an inspectable clue, keep AI answers tied to evidence, preserve a clear next action, and use motion to clarify chapter progression.

Do not fall into these common failures:

- Beige-and-gold-only pages with no functional status colors.
- AI chat bubbles that produce answers without evidence references.
- Cinematic intros that hide the first actionable clue.
- Overly generic luxury typography with no interface metadata.
- Product storytelling that copies source campaign assets instead of abstracting the interaction pattern.

## Responsive Behavior

On mobile, collapse the experience around the active clue, the AI answer, and one next action. Evidence rails may scroll horizontally only when card width, focus order, and labels remain stable. Stage transitions should become short crossfades or static chapter states when there is not enough space for cinematic movement.

## Iteration Guide

Start every new page by naming the mystery object, evidence model, and next action. Then test whether a user can understand the first viewport with all motion disabled. Add decorative atmosphere only after clue hierarchy, AI source references, focus states, and mobile evidence browsing are working.

## Known Gaps

This resource is derived from public Awwwards metadata and visible palette tags, not a full private design file. Exact original typography, motion curves, component specs, and asset treatment are inferred. Treat this as a reusable interface system, not a faithful reconstruction of the referenced campaign.