---
version: alpha
name: AI Cinematic Memory Studio Interface
description: "A current Awwwards-derived consumer AI video and memory product interface: soft black cinema canvas, warm pearl story surfaces, coral-red capture actions, lavender AI guidance, large emotional display typography, phone-viewfinder modules, clip timelines, camera coaching cards, and calm cinematic motion. The system fits AI video editors, personal memory apps, camera assistants, creator tools, and consumer AI products that must feel emotional without hiding concrete product flow."

colors:
  primary: "#ff5a4f"
  primary-hover: "#e8463d"
  on-primary: "#fff8f4"
  accent: "#8b6dff"
  accent-soft: "#ebe7ff"
  canvas: "#fff7ef"
  canvas-warm: "#f5eadc"
  surface-card: "#fffdfa"
  surface-soft: "#f1e4d4"
  surface-inset: "#ead8c3"
  ink: "#17110f"
  body: "#3f302b"
  muted: "#7d6b61"
  subtle: "#a99587"
  hairline: "#dfcab7"
  film-black: "#0d0b0a"
  film-surface: "#171311"
  film-muted: "#b7a89c"
  frame-line: "#2a221f"
  success: "#3c8f64"
  warning: "#c68132"
  danger: "#c9463d"
  highlight: "#ffd18a"
  sky: "#c8e5ff"

typography:
  display-xl:
    fontFamily: "Instrument Serif, Fraunces, Georgia, serif"
    fontSize: 76px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: 0
  display-lg:
    fontFamily: "Instrument Serif, Fraunces, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: 0
  heading-md:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 720
    lineHeight: 1.15
    letterSpacing: 0
  heading-sm:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 720
    lineHeight: 1.32
    letterSpacing: 0
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 430
    lineHeight: 1.58
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 460
    lineHeight: 1.48
    letterSpacing: 0
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 760
    lineHeight: 1.3
    letterSpacing: 0.04em
    textTransform: uppercase
  mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 12px
    fontWeight: 520
    lineHeight: 1.44
    letterSpacing: 0
    fontVariantNumeric: "tabular-nums"

rounded:
  xs: 4px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 32px
  phone: 38px
  pill: 9999px

spacing:
  base: 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 18px
  lg: 28px
  xl: 44px
  xxl: 72px
  section: 104px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
  story-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 20px
  phone-viewfinder:
    backgroundColor: "{colors.film-black}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.phone}"
    padding: 18px
  guidance-chip:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 12px
---

## Overview

AI Cinematic Memory Studio is a visual system for consumer AI products that turn raw footage, photos, voice, or everyday moments into emotional stories. The system abstracts a 2026 Awwwards Site of the Day pattern around an AI video agent, cinematic desktop storytelling, phone-based creation, clip selection, mood direction, camera guidance, and sharing.

The reusable idea is not the source brand. It is the interface posture: start with emotion, immediately reveal the product object, and keep every cinematic surface connected to a concrete workflow. The AI must feel like a director and crew, but the UI must still show add clips, describe mood, generate variants, guide framing, and share.

Best use cases:

- AI video editors and personal memory agents.
- Camera guidance and smart capture apps.
- Creator tools that need warmth rather than enterprise AI density.
- Mobile-first consumer AI products presented with a desktop immersive launch page.
- Campaigns where "feeling" and "workflow" must remain equally visible.

Do not use it for enterprise AI ops, compliance dashboards, developer docs, medical claims, or dense admin workflows.

## Colors

### Brand & Accent

- `primary` #ff5a4f is the capture and create action. Use it for "Create story", record controls, share, and the one emotional CTA per view.
- `accent` #8b6dff is AI guidance. It marks recommendations, scene sense, prompt chips, and coaching states.
- `highlight` #ffd18a is memory warmth. Use sparingly for timeline highlights, caption emphasis, or selected clip edges.
- `sky` #c8e5ff is only for camera composition aids: horizon, framing, and flow arcs.

### Surface

- `canvas` #fff7ef and `canvas-warm` #f5eadc carry the editorial story.
- `surface-card` #fffdfa is the default readable panel.
- `surface-soft` #f1e4d4 and `surface-inset` #ead8c3 support nested story notes, timeline rails, and secondary cards.
- `film-black` #0d0b0a is the cinematic device stage.

### Text

- `ink` #17110f is primary text on warm surfaces.
- `body` #3f302b is long text.
- `muted` #7d6b61 is metadata.
- On `film-black`, use `on-primary` for labels and `film-muted` for secondary text.

### Hairlines & Borders

Hairlines are warm, not neutral gray. `hairline` #dfcab7 is for editorial cards and warm UI. `frame-line` #2a221f is for viewfinder guides and dark device modules.

### Semantic

Use semantic colors as small labels only. Success, warning, and danger should not become large brand surfaces; this system is about gentle guidance, not alert severity.

## Typography

### Font Family

The system pairs a high-emotion serif display face with a quiet modern sans and a technical mono. Suggested open substitutes:

- Display: Instrument Serif, Fraunces, Georgia.
- UI/body: Inter, system-ui.
- Technical labels: JetBrains Mono, ui-monospace.

### Hierarchy

Display type is cinematic and low-weight. It should read like a title card or memory caption, not a SaaS hero headline. Keep letter spacing at 0 and use line-height under 1.05 for large emotional statements.

Body text remains small, plain, and grounded. It explains what the AI does: adds clips, listens to mood, selects versions, guides framing, and shares.

### Principles

- Use serif display for feeling and story moments.
- Use sans UI for product mechanics.
- Use mono for clip count, frame time, version labels, and AI state.
- Avoid all-caps cinematic shouting except small captions.

### Note on Font Substitutes

If Instrument Serif is unavailable, Fraunces or Georgia can preserve the editorial warmth. Do not replace it with a futuristic display face; the system should feel like memory and cinema, not sci-fi.

## Layout

### Spacing System

Use roomy vertical pacing around story sections, then dense, inspectable modules inside the phone, timeline, or guidance panel. Large emotional copy needs breathing room, but product states need compact alignment.

### Grid & Container

Default desktop layout is a two-plane composition:

- Left: emotional thesis, short copy, CTA, and metadata.
- Right: phone viewfinder, timeline, or AI guidance stack.

Internal product flows use a four-step rail: Add clips -> Talk to AI -> Finish edit -> Choose and share.

### Whitespace Philosophy

Whitespace should feel like a pause in a film edit. Do not fill every band with cards. Let story statements breathe, then anchor them with a concrete product object in the same viewport.

## Elevation & Depth

Depth is cinematic rather than glassy. Use:

- Phone body shadow against warm canvas.
- Inner dark viewfinder with thin frame lines.
- Small warm shadows under story cards.
- Timeline layers, clipped thumbnails, and caption strips.

Avoid generic glassmorphism, neon glow, and dashboard card shadows. If motion is added, it should look like timeline scrubbing, focus breathing, or camera coaching, not abstract particle atmosphere.

## Shapes

The shape system mixes device-soft and editorial-soft radii:

- Phone and major media frames: 32-38px.
- Story cards: 18-22px.
- Chips and capture actions: full pill.
- Timeline clips: 8-14px.
- Viewfinder guides: thin line geometry with no decorative radius.

Do not make every component a pill. Pills are for capture, share, mood, and guidance chips.

## Components

### Buttons

Primary button uses coral red, pill radius, and plain direct verbs: Create story, Try yourself, Add clips. Secondary buttons should be warm outline or text-only.

### Cards & Containers

Story cards pair a short emotional title with a functional detail. A card must answer one of these product questions:

- What raw material is being used?
- What mood or pace did the user ask for?
- What did the AI choose?
- What camera guidance is active?
- What version can be shared?

### Inputs & Forms

Inputs should feel like direction notes, not enterprise forms. Use large prompt fields for mood, pace, vibe, caption tone, or music style. Always show examples and generated variants.

### Navigation

Navigation can be minimal, but it must include a route into the app or download path. Avoid hiding everything behind cinematic scroll. Mobile must offer a simple static fallback.

### Signature Components

**Phone Viewfinder**: A dark rounded phone frame with live guidance chips, horizon line, safe-zone corners, and capture CTA.

**Story Rail**: Four compact steps showing add clips, talk to AI, finish edit, choose/share.

**Camera Coaching Cards**: Pose Mirror, Real-time Guidance, Flow Arcs, Lighting Spot, Scene Sense. Each card contains a visual cue, one sentence, and a status.

**Memory Strip**: A warm horizontal cluster of micro-moments such as slow movement, quiet laughter, warm evening, or almost forgotten. Keep it textual or abstract unless real user media is provided.

## Do's and Don'ts

Do:

- Show a concrete product object in the first viewport: phone, timeline, camera guide, clip rail, or generated story card.
- Pair emotional language with a visible workflow step.
- Reserve coral red for capture/create/share.
- Use lavender for AI guidance and scene intelligence.
- Provide reduced-motion and mobile fallbacks for cinematic scroll.
- Label AI decisions in human language: mood, pace, version, shot quality.

Don't:

- Copy Elva imagery, phone frames, app screens, QR codes, brand marks, or exact animation.
- Hide product mechanics behind pure atmosphere.
- Use generic AI gradients or abstract glowing blobs.
- Make the site desktop-only without a useful mobile explanation or download path.
- Use tiny low-contrast captions over video.
- Treat generated memories as real user evidence.

## Responsive Behavior

### Breakpoints

- Desktop: two-plane composition with phone/stage beside story copy.
- Tablet: stack story above phone, keep rail horizontal if space allows.
- Mobile: phone and story modules become vertical, sticky nav becomes plain header, cinematic scroll becomes static sections.

### Touch Targets

Capture, share, next, previous, and version controls must be at least 44px high. Camera coaching cards should be tappable only if they perform an action; otherwise keep them as readable status cards.

### Collapsing Strategy

Collapse the four-step story rail into numbered cards. Keep "Add clips", "Talk to AI", "Finish edit", and "Choose/share" visible. Do not collapse them into unlabeled dots.

### Image Behavior

Real user media is sensitive. For prototypes, use abstract film strips, gradient frames, drawn viewfinders, or clearly labeled placeholders. Production should require user permission, alt text, and privacy boundaries.

## Iteration Guide

1. Start by defining the memory object: videos, photos, voice notes, camera feed, or generated edits.
2. Write the four-step creation path before designing visuals.
3. Choose one emotional axis: calm, vivid, nostalgic, playful, or cinematic. Do not mix all of them.
4. Decide the AI guidance vocabulary: mood, pace, framing, light, pose, flow, caption, voice, or music.
5. Build first viewport with a product object, not only a quote.
6. Add motion only after the static flow is understandable.
7. Validate mobile fallback and reduced-motion behavior.

## Known Gaps

- The source site uses rich imagery and animation that are not copied here. This resource abstracts structure, tone, and interaction principles only.
- Exact colors, typefaces, and motion timing are inferred from public text and award context, not from a formal brand guideline.
- If used in production, replace all placeholder memories with licensed, consented media or generated placeholders clearly marked as such.
- The Awwwards listing confirms recency and award status; the live site confirms product narrative, AI director positioning, desktop cinematic emphasis, workflow, and camera guidance modules.

Evidence links:

- Awwwards Sites of the Day listing: https://www.awwwards.com/websites/sites_of_the_day/
- Elva live site: https://elvalabs.ai/