# DJ Booth Reference Image Skin Contract

This is the rulebook for turning one design reference image into a real DJ Booth skin.

The reference image is only a style source. It must not decide the layout. The DJ Booth skeleton decides every position, size, and usable control.

## Fixed Canvas

- Full booth skin canvas: `2166 x 1294`
- The skin must be built from transparent PNG/SVG layers.
- Every layer must be drawn to the exact size listed below.
- Controls stay in their DJ Booth positions. Do not move controls to match the reference image.

## Required Layers

| File name | Exact output size | Purpose |
|---|---:|---|
| `background.png` | `2166 x 1294` | Full page/backdrop environment behind the booth |
| `underlay.png` | `2166 x 1294` | Full booth decorative frame/background under the live UI |
| `left-deck-panel.png` | `581 x 965` | Left deck body texture, bevels, borders, trim |
| `right-deck-panel.png` | `581 x 965` | Right deck body texture, bevels, borders, trim |
| `mixer-panel.png` | `347 x 965` | Center mixer body texture, bevels, borders, trim |
| `left-screen-glass.png` | `505 x 183` | Left display glass/reflections only |
| `right-screen-glass.png` | `505 x 183` | Right display glass/reflections only |
| `mixer-screen-glass.png` | `309 x 185` | Mixer display glass/reflections only |
| `left-platter.png` | `451 x 373` | Left platter frame/ring/decorative non-spinning parts |
| `right-platter.png` | `451 x 373` | Right platter frame/ring/decorative non-spinning parts |
| `left-jog-wheel.png` | `451 x 373` | Left jog wheel surface/turntable personality layer |
| `right-jog-wheel.png` | `451 x 373` | Right jog wheel surface/turntable personality layer |
| `left-platter-ring.png` | `451 x 373` | Left outer platter ring, rim, bevel, strobe/dot trim |
| `right-platter-ring.png` | `451 x 373` | Right outer platter ring, rim, bevel, strobe/dot trim |
| `left-vinyl-record.png` | `451 x 373` | Left default spinning record/artwork plate |
| `right-vinyl-record.png` | `451 x 373` | Right default spinning record/artwork plate |
| `left-jog-led-ring.png` | `451 x 373` | Left jog lights/accent ring |
| `right-jog-led-ring.png` | `451 x 373` | Right jog lights/accent ring |
| `eq-knobs-a.png` | `72 x 367` | Deck A trim/hi/mid/low knob art |
| `eq-knobs-b.png` | `72 x 367` | Deck B trim/hi/mid/low knob art |
| `left-fx-knobs.png` | `69 x 199` | Left FX knob art |
| `right-fx-knobs.png` | `69 x 199` | Right FX knob art |
| `channel-fader-a.png` | `78 x 229` | Deck A fader rail/cap art |
| `channel-fader-b.png` | `78 x 229` | Deck B fader rail/cap art |
| `crossfader.png` | `249 x 50` | Crossfader rail/cap art |
| `left-cue-play-buttons.png` | `502 x 263` | Left cue/play controls and nearby accents |
| `right-cue-play-buttons.png` | `502 x 263` | Right cue/play controls and nearby accents |
| `left-performance-pads.png` | `502 x 263` | Left pad bank art |
| `right-performance-pads.png` | `502 x 263` | Right pad bank art |
| `left-hc-pad-images.png` | `502 x 263` | Left hot cue pad image states and pad face art |
| `right-hc-pad-images.png` | `502 x 263` | Right hot cue pad image states and pad face art |
| `left-tempo-slider.png` | `62 x 387` | Left tempo rail/cap art |
| `right-tempo-slider.png` | `62 x 387` | Right tempo rail/cap art |
| `vu-meters.png` | `309 x 88` | Master meter decorative housing only |
| `logos.png` | `284 x 58` | Skin-specific logo treatment |
| `shadows.png` | `2166 x 1294` | Full-canvas shadows, depth, occlusion |
| `glows.png` | `2166 x 1294` | Full-canvas lighting/glow accents |
| `decorative-overlays.png` | `2166 x 1294` | Garlands, bolts, trim, ornaments, sparks, etc. |

## CSS Image Rules

The layer files provide the body and decoration. The live controls also need themed CSS so users can feel the skin when they touch it.

Every premium skin must define:

- Button surface image style
- Button hover style
- Button active/lit style
- Pad surface style
- Cue/play button style
- Sync button style
- EQ knob surface style
- FX knob surface style
- Slider rail style
- Slider cap style
- Screen glass style
- Deck A accent color
- Deck B accent color
- Mixer accent color

## Reference Image Use

Use the reference image for:

- Materials
- Color palette
- Bevel style
- Lighting style
- Texture style
- Decorative motifs
- Button and knob personality

Do not use the reference image for:

- Control locations
- Control sizes
- Text positions
- Platter locations
- Slider locations
- Mixer proportions

## Generator Job

Given one reference image or one short theme idea, the generator must produce a DJ Booth skin package by doing this:

1. Extract the visual language: materials, colors, bevel shape, lighting direction, surface texture, trim style, and decorative motifs.
2. Ignore the reference layout completely.
3. Draw every required layer at the exact DJ Booth layer size.
4. Keep all transparent keep-clear areas transparent where the live UI must stay readable or clickable.
5. Create CSS token values for every live control state.
6. Render a `preview.png` using the actual DJ Booth skeleton, not the reference image layout.
7. Never stretch a source image to fit the booth. Redraw or crop only into the fixed layer slots.

## Live Control Surface Checklist

These live controls must be themed by CSS or exact-size layer art, not left as the default neon skin:

- Background image behind the booth
- Underlay image behind all live panels
- Top utility buttons
- Crate buttons
- Add music / Auto DJ / Think For Me buttons
- View / MIDI / Pro Engine / Gear buttons
- Screen frames and glass
- Waveform display frames
- Hot cue, In Key, Roll, FX mode buttons
- Jump buttons and 32/64/96 selector
- Auto loop, half, double buttons
- Eight performance pads
- Cue and Play buttons
- Sync buttons
- Nudge buttons
- Tempo slider rail and cap
- BPM LCD box
- EQ knobs and knob indicator lines
- FX knobs and knob indicator lines
- Channel fader rails and caps
- Crossfader rail, cap, and bypass switch
- Master meter housing
- Jog wheel images
- Platter ring images
- Hot cue pad images
- Jog/platter ring, inner record area, and light accents

## Output Package

Each skin folder must contain:

- All required layers above
- `manifest.json`
- `style.css` or CSS token block
- `preview.png`

The preview must show the real layered skin on the DJ Booth skeleton, not only the reference underlay.