---
name: maverick-simulator-new-design
description: Apply the new-design Maverick AI Simulator dark glassmorphic single-lens UI using the bundled assets, colored icons, glass parameters, background treatment, and placement rules.
---

# Maverick Simulator New Design 2

Use this skill when restyling the glasses simulator dashboard to match the supplied Everysight dark UI reference: a full-screen cinematic blue/black background, floating glass panels, a single smart-glasses lens viewed from behind, and colored utility/weather/menu icons.

## Assets

Use assets from `new-design/`:

- `background.jpg` or `background.png`: full-screen mountain road background.
- `glasses-back.png`: transparent single-eye glasses/lens asset from the wearer side. Put simulator output underneath this image, clipped to the lens area.
- `design-tokens.css`: reusable colors, glass panel styles, background overlays, and initial lens mask geometry.
- `icons/icon-everysight-mark.svg`: brand mark in the top-left header.
- `icons/icon-cloud.svg`, `icons/icon-wind.svg`, `icons/icon-droplet.svg`: weather HUD inside the lens.
- `icons/icon-assets.svg`, `icons/icon-animators.svg`, `icons/icon-params.svg`, `icons/icon-system-cache.svg`, `icons/icon-debug-logs.svg`, `icons/icon-cache.svg`: right rail and cache sections.
- `icons/icon-scene-objects.svg`, `icons/icon-upload.svg`, `icons/icon-search.svg`, `icons/icon-filter.svg`, `icons/icon-chevron-right.svg`, `icons/icon-chevron-down.svg`: object/upload/search controls.
- `icons/icon-battery.svg`, `icons/icon-brightness.svg`, `icons/icon-sensors.svg`, `icons/icon-touch.svg`: left control cards.

Do not create or use SVG files for simple circles, dots, toggle knobs, pills, progress fills, button backgrounds, or text-only commands. Build those as HTML/CSS so they scale cleanly and can reflect live state.

If the app does not already serve `new-design/`, add static routes for these files or copy them into the existing static asset pipeline. Prefer normal static asset URLs over base64.

## Theme Tokens

Use these values as the single source of truth:

```css
--nd2-bg: #070b12;
--nd2-surface: #101720;
--nd2-surface-2: #151d28;
--nd2-text: #f4f7fb;
--nd2-text-2: #a9b5c4;
--nd2-muted: rgba(169, 181, 196, 0.62);
--nd2-line: rgba(255, 255, 255, 0.1);
--nd2-yellow: #f3ef5e;
--nd2-purple: #6f42e8;
--nd2-red: #cf2f2f;
--nd2-green: #34f27a;
--nd2-blue: #4f8dff;
```

## Glass Effect

Use this effect for side panels, top stat clusters, search inputs, cache panels, and bottom settings bars:

```css
background: linear-gradient(180deg, rgba(17, 22, 31, 0.68), rgba(8, 12, 18, 0.52));
border: 1px solid rgba(210, 226, 255, 0.16);
border-radius: 20px;
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(18px) saturate(1.18);
-webkit-backdrop-filter: blur(18px) saturate(1.18);
```

Use smaller `12px` to `14px` radii for inputs and buttons. Keep cards readable but translucent. Do not nest cards inside cards.

## CSS-Built Shapes

Build these with HTML/CSS, not image assets:

- Recording dot: `8px` white circle inside the red `RECORDING` pill.
- Disconnected dot: `8px` red circle inside the dark connection pill.
- Connected dot: `8px` green circle when connected.
- Toggle tracks and knobs for `CLIPPING`, `BLACKS`, and `PARAMS`.
- Range/slider tracks, yellow progress fills, and slider thumbs.
- `POWER ON`, `STANDBY`, `LOAD`, `SAVE`, and `RESET` buttons. These are text buttons in the reference, not icon buttons.

Suggested CSS:

```css
.nd2-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--nd2-red);
  box-shadow: 0 0 14px currentColor;
}

.nd2-status-dot.is-connected {
  background: var(--nd2-green);
  color: var(--nd2-green);
}

.nd2-recording-pill {
  background: linear-gradient(180deg, #d83b36, #a91f1f);
  color: var(--nd2-text);
}

.nd2-command-power {
  background: linear-gradient(180deg, #fff76b, var(--nd2-yellow));
  color: #101720;
}

.nd2-command-load {
  background: linear-gradient(180deg, #8f62ff, var(--nd2-purple));
  color: var(--nd2-text);
}
```

## Background

Set the page body to `min-height: 100vh`, `overflow: hidden` on desktop, and place the background full viewport:

```css
background-image:
  radial-gradient(circle at 50% 36%, rgba(87, 133, 178, 0.18), transparent 38%),
  linear-gradient(90deg, rgba(4, 7, 12, 0.74), rgba(4, 7, 12, 0.24) 32%, rgba(4, 7, 12, 0.24) 68%, rgba(4, 7, 12, 0.78)),
  linear-gradient(180deg, rgba(3, 6, 12, 0.3), rgba(3, 6, 12, 0.72)),
  url("/path/to/new-design/background.jpg");
background-size: cover;
background-position: center;
```

## Glasses View

Center `glasses-back.png` as the main simulator viewport. Recommended size: `width: clamp(520px, 68vw, 980px)`, with the image above the simulator canvas.

Clip the simulator canvas or preview into this approximate lens aperture:

```css
left: 13.2%;
top: 20.6%;
width: 61.8%;
height: 67.6%;
border-radius: 15% 13% 18% 16% / 22% 20% 21% 24%;
overflow: hidden;
```

Layer order:

1. Background image and overlays.
2. Simulator canvas or preview clipped to the lens area.
3. Optional lens HUD/weather overlay.
4. `glasses-back.png` transparent frame on top.
5. Side/top/bottom control UI.

## Icon Placement

Top-left brand:
- Use `icon-everysight-mark.svg` in a glowing square.
- Text stack: `EVERYSIGHT`, `MAVERICK AI SIMULATOR`, `VERSION 1.23`, `THE WORLD THROUGH NEW EYES`.

Top bar:
- Stats: `FPS`, `OBJECTS`, `ANIMATORS`.
- Toggles: `CLIPPING`, `BLACKS`, `PARAMS`.
- Commands: text-only segmented buttons: yellow `POWER ON`, dark glass `STANDBY`, purple `LOAD`.
- Status: red `RECORDING` pill with a CSS white dot; dark connection pill with a CSS red/green status dot.

Left rail:
- Brightness card: `icon-brightness.svg`; yellow range fill.
- Battery card: `icon-battery.svg`; yellow charging indicator.
- Sensors card: `icon-sensors.svg`; gray disabled sliders.
- Touch injection card: `icon-touch.svg`; white pill buttons.

Lens HUD:
- `icon-cloud.svg` beside `21°` and `Cloudy`.
- `icon-wind.svg` beside wind speed and direction.
- `icon-droplet.svg` beside humidity.
- Keep HUD inside the lens, centered slightly right. Use white text and the icon colors already embedded in the SVGs.

Right rail:
- Scene objects header: `icon-scene-objects.svg`.
- Search input: `icon-search.svg`; filter button: `icon-filter.svg`.
- Uploads header: `icon-upload.svg`.
- Accordion rows: `icon-assets.svg`, `icon-animators.svg`, `icon-params.svg`, `icon-system-cache.svg`, `icon-debug-logs.svg`, plus `icon-chevron-right.svg` or `icon-chevron-down.svg`.

Bottom:
- Asset cache panel: `icon-cache.svg`; title `ASSET CACHE`; yellow numeric highlights.
- Footer settings: system/cache selector, reported firmware version input, yellow text-only `SAVE` button, dark text-only `RESET` button.

## Layout Rules

Keep the application as an actual simulator dashboard, not a landing page. Use compact labels, letter-spaced section headings, and dense controls. Desktop layout: left rail around `300px`, right rail around `320px`, top bar wrapping only when needed, central glasses viewport dominant but not covering the rails. Mobile/tablet: stack panels below the lens and preserve the lens aspect ratio.

Validate after applying: background visible, single lens centered, simulator content clipped to the transparent lens area, icons use the reference colors, glass panels are readable, and no text overlaps or spills out of buttons/cards.
