---
version: alpha
name: Indigo Sensory Collection Interface
description: "A fashion, jewelry, music, and craft storytelling design system for sensory collection pages. It combines an indigo editorial field, warm shell reading surfaces, amber material accents, soft audio states, collection rails, maker pages, and microinteraction-ready object cards. The system is inspired by public Awwwards metadata for a current experimental single-page fashion/music case, but it does not copy that case's brand assets, jewelry imagery, sound, or exact art direction."

colors:
  primary: "#5C4DFF"
  on-primary: "#FFFFFF"
  primary-hover: "#776BFF"
  primary-focus: "#3826CC"
  canvas: "#F6EFE3"
  canvas-soft: "#FFF8EB"
  ink: "#141018"
  ink-muted: "#5D5363"
  ink-subtle: "#8C8193"
  indigo: "#24124D"
  indigo-soft: "#342069"
  indigo-ink: "#F9F2FF"
  indigo-muted: "#C9BDE4"
  shell: "#FFF8EB"
  shell-deep: "#E9DCC7"
  surface-card: "#FFF8EB"
  amber: "#F3B44B"
  mint-audio: "#9CE2C4"
  rose-metal: "#D7A69B"
  lilac: "#BBA6FF"
  hairline: "#D8CBEA"
  hairline-strong: "#9F8CD0"
  success: "#3E866D"
  warning: "#B9751E"
  danger: "#A34055"
  inverse-canvas: "#160F2E"
  inverse-surface-1: "#24124D"
  inverse-ink: "#F9F2FF"

typography:
  display-xl:
    fontFamily: Fraunces
    fontSize: 72px
    fontWeight: 620
    lineHeight: 0.98
    letterSpacing: 0
  display-lg:
    fontFamily: Fraunces
    fontSize: 54px
    fontWeight: 620
    lineHeight: 1.04
    letterSpacing: 0
  display-md:
    fontFamily: Fraunces
    fontSize: 38px
    fontWeight: 620
    lineHeight: 1.12
    letterSpacing: 0
  headline:
    fontFamily: Fraunces
    fontSize: 30px
    fontWeight: 620
    lineHeight: 1.16
    letterSpacing: 0
  card-title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 720
    lineHeight: 1.25
    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: 104px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 11px 16px
  button-secondary:
    backgroundColor: "{colors.shell}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 11px 16px
  collection-card:
    backgroundColor: "{colors.shell}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 16px
  audio-cue:
    backgroundColor: "{colors.mint-audio}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 7px 10px
  maker-panel:
    backgroundColor: "{colors.indigo}"
    textColor: "{colors.indigo-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 20px
  material-swatch:
    backgroundColor: "{colors.shell-deep}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 12px

motion:
  sensory-intro:
    purpose: "Introduce tone through material, sound, and object state while keeping skip/read paths available."
    properties: "opacity, transform, clip-path, CSS variables"
    duration: "300ms to 900ms"
    fallback: "Intro becomes a static collection title, material note, and audio state."
  collection-hover:
    purpose: "Reveal object metadata, material, and audio relationship."
    duration: "120ms to 260ms"
  sound-state:
    purpose: "Show whether audio is off, previewing, or playing without relying on sound alone."
    fallback: "Persistent text label and icon state for every audio control."

layout:
  hero: "Editorial sensory intro with a visible collection rail in the first viewport and a hint of maker content below."
  grid: "12-column desktop grid, 6-column tablet grid, 1-column mobile stack; collection rails may use stable-width horizontal cards."
  density: "Start atmospheric but quickly expose object names, materials, maker notes, and audio states."
  media: "Use generated or licensed object imagery, material swatches, silhouettes, or WebGL/Canvas abstractions; do not copy source jewelry photos or sound."

guidance:
  do:
    - "Make sensory cues legible through labels, captions, material notes, and audio status."
    - "Use indigo as an editorial field and warm shell surfaces for readable object detail."
    - "Pair microinteractions with product or story information: material, maker, sound, movement, or collection relationship."
    - "Keep the collection rail stable so hover, focus, and audio states do not resize cards."
  dont:
    - "Do not make sound the only way to understand the page."
    - "Do not hide object details behind long immersive intros."
    - "Do not copy jewelry imagery, brand marks, source audio, or exact animation sequences from case studies."
    - "Do not use one-note indigo pages; balance with shell, amber, mint, rose metal, and functional states."

caseStudy:
  source: "Awwwards Indigo Laboratory Site of the Day listing, June 18 2026"
  url: "https://www.awwwards.com/sites/indigo-laboratory"
  analysis: "The public Awwwards metadata highlights fashion, music and sound, experimental single-page storytelling, animation, sound-audio, microinteractions, GSAP, Nuxt.js, and Curtains.js, with page elements such as tale intro, collection, and maker views. This resource extracts the reusable pattern: sensory introduction, collection rail, maker context, audio state, and material microinteractions."
---

# Indigo Sensory Collection Interface

Use this design system for fashion, jewelry, craft, fragrance, music-led product storytelling, artist collections, exhibition microsites, and premium catalog experiences where objects need to feel tactile, audible, and narratively connected.

The system turns sensory atmosphere into interface structure. It uses an indigo editorial field, warm shell reading panels, amber and rose material accents, mint audio states, stable collection cards, maker panels, and restrained microinteractions. The user should always know what object they are inspecting, what material or story cue matters, and whether audio or motion is active.

## Overview

The core idea is sensory evidence. A collection page can be immersive without becoming vague: every motion cue, audio state, and material treatment should reveal something about an object. The first viewport should show a collection rail, object detail, or maker context, not just a full-screen ambience layer.

This system works best when the page alternates between atmosphere and inspection. Use the hero to establish tone, then immediately show object names, material notes, audio states, and maker relationships. A beautiful transition is only useful when it helps the user move from story into selection.

## Colors

### Brand & Accent

- `primary` (#5C4DFF) is the electric indigo action color. Use it for selected states, primary actions, focus, and active collection items.
- `amber`, `rose-metal`, `mint-audio`, and `lilac` create sensory roles: material glow, metal warmth, audio state, and atmospheric highlight.
- `success`, `warning`, and `danger` are reserved for functional states. Do not overload material accents as errors or confirmations.

### Surface

- `canvas` (#F6EFE3) and `canvas-soft` (#FFF8EB) are warm reading surfaces.
- `indigo` and `indigo-soft` are editorial fields for hero, maker panels, and immersive transitions.
- `shell` and `shell-deep` support object cards, material swatches, and readable longform notes.

### Text

- Use `ink` on shell surfaces and `indigo-ink` on indigo panels.
- `ink-muted` and `indigo-muted` are for material captions, maker notes, timestamps, and audio labels.
- Avoid low-contrast lilac text on indigo. Lilac is an accent, not body copy.

## Typography

The typography pairs a soft editorial display face with precise sans interface text. Display sizes are for story titles, collection names, and maker moments. Interface text carries material details, audio labels, status, and actions.

Keep letter spacing at zero and maintain generous line height. The feeling should be tactile and composed, not noisy or nightclub-like.

## Layout

Use a full-width editorial hero with a visible collection rail in the first viewport. The collection rail can be horizontal on desktop and mobile, but every card must keep a stable width and visible focus state.

Recommended structure:

- Intro panel: title, collection premise, audio state, primary object.
- Collection rail: stable cards with material and active state.
- Maker section: process notes and object relationships.
- Sensory matrix: material, sound, motion, and story cues.
- Detail view: selected object, close reading, and next action.

## Elevation & Depth

Depth comes from contrast between indigo editorial fields and shell reading surfaces. Use shallow shadows only for selected objects or open maker panels. Material swatches can feel raised through border, texture, and color, but the collection rail should stay stable and scannable.

## Shapes

Use 8px cards for object, maker, and material panels. Pill shapes are reserved for audio states, collection filters, and compact material labels. Keep object thumbnails predictable with fixed aspect ratios so motion and focus states do not shift the layout.

## Components

### Collection Card

Use `collection-card` for objects in a rail or grid. Each card should have a stable size, object name, material cue, and one visible state such as "selected", "listening", "new", or "maker note".

### Audio Cue

Use `audio-cue` for sound states. Audio must have persistent text states such as "Audio off", "Previewing", or "Playing". Do not rely on waveform animation alone.

### Maker Panel

Use `maker-panel` for craft context, studio notes, process evidence, artist quotes, or collection philosophy. It should be visually immersive but still readable.

### Material Swatch

Use `material-swatch` to expose tactile vocabulary: metal, ceramic, lacquer, fabric, paper, glass, wood, stone, scent, or sound source. Pair color with text and texture labels.

## Page Structure

On mobile, lead with the selected object, then the rail, then maker notes. Avoid hiding all object detail behind gestures.

## Motion

Motion should feel like handling an object: reveal, rotate, slide, focus, and settle. Use short hover/focus transitions to expose material metadata. Use longer transitions only for the sensory intro or chapter changes.

Every animated cue needs an information role. A shimmer can signal selected material, a slide can reveal maker context, and a pulse can show audio playback. Decorative animation without object meaning should be removed.

## Implementation Notes

- Use semantic buttons for audio and object selection.
- Provide `aria-pressed` or equivalent state for audio toggles.
- Keep collection cards stable with explicit dimensions or aspect ratios.
- Provide reduced-motion alternatives for intro and object transitions.
- Use licensed, generated, or locally owned imagery. Do not copy source case assets.
- Store material and audio metadata as structured fields so future agents can search and recompose the collection.

## Case Study Extraction

The source Awwwards metadata is useful because it joins fashion, music, single-page storytelling, animation, microinteractions, and maker/collection views. The reusable pattern is a sensory object journey:

1. Establish a tactile and audible world.
2. Show the collection object immediately.
3. Reveal material and maker detail through microinteractions.
4. Keep sound state legible without sound.
5. Let motion support selection and story progression.

## Do's and Don'ts

Do make object, material, audio state, and maker context visible. Do use microinteractions to reveal product information, and do provide reduced-motion and no-audio equivalents.

Do not fall into these common failures:

- Long sensory intros before any object or collection is visible.
- Audio controls that depend on sound or waveform animation alone.
- Hover-only object metadata with no mobile equivalent.
- Indigo-only pages with no warm reading surfaces or functional status colors.
- Case-study copying: reused jewelry photos, exact audio, proprietary names, or copied motion sequences.

## Responsive Behavior

On mobile, lead with the selected object and its audio/material status, then the collection rail, then maker notes. Horizontal rails are acceptable only when every card has a stable width and keyboard/focus order remains logical. Hover reveals must become tap, disclosure, or persistent metadata.

## Iteration Guide

Begin by defining the object schema: name, material, sound state, maker note, and story relationship. Build the static collection rail before adding intro motion. Then verify three conditions: the page works with sound muted, the page works with reduced motion, and every object can be understood without hover.

## Known Gaps

This resource is derived from public Awwwards metadata, not the original source design files. Exact colors, typefaces, audio design, image treatment, and motion curves are inferred into a reusable system. Treat it as a practical interface direction for sensory collection work, not a reconstruction.