# Components — which HTML to copy

Open the HTML (clickable in the published gallery) and the PNG. Steal markup + CSS, do not restyle from scratch.

## 01 Media OS — `tools/01-media-os.html`

![01](screenshots/01-media-os.png)

Top **pill nav**: logo tile, inset search well, circular icon buttons, primary “Upgrade” pill. Content: **bento** of neu cards (player, library, stats). Use for marketing shells, media dashboards, any “app header + cards”.

## 02 Motion Lab — `tools/02-motion-lab.html`

![02](screenshots/02-motion-lab.png)

Toggles, sliders in inset tracks, bounce easing, confetti canvas. Use when the user wants **playful** neu, not a dead admin theme.

## 03 GhostMesh — `tools/03-ghostmesh.html`

![03](screenshots/03-ghostmesh.png)

**100vh / 100vw**, no page scroll, dense HUD, mono readouts, rose “live” accents. Use for monitoring, mesh, ops walls. Do not use this density on a marketing landing page.

## 04 Health OS — `tools/04-health-os.html`

![04](screenshots/04-health-os.png)

Personnel registry, **Cairo** for Arabic names, table rows as small neu cards, status chips (emerald/amber). Use for bilingual records, HR, medical lists.

## 05 System OS — `tools/05-system-os.html`

![05](screenshots/05-system-os.png)

Sidebar + main canvas, “OS” metaphor, custom scrollbar on clay. Use for settings, multi-pane products.

## 06 Flow — `tools/06-flow-steps.html`

![06](screenshots/06-flow-steps.png)

Horizontal **stepper** (numbered neu circles, active = blue gradient), wizard body. Use for onboarding and multi-step forms.

## 07 Modals — `tools/07-modals.html`

![07](screenshots/07-modals.png)

Dialogs sit on a dim clay overlay; panel is a large `--neu-raised-lg` card with strong radius. Footer: ghost neu button + primary pill. Never a white Bootstrap modal.

## 08 Component vault — `tools/08-component-vault.html`

![08](screenshots/08-component-vault.png)

**Start here for atoms:** buttons, icon circles, inputs (inset), select, chips, toast (`.neu-toast`). Copy these before inventing new controls.

## 09 Messenger — `tools/09-messenger.html`

![09](screenshots/09-messenger.png)

List + thread. Incoming bubbles inset/subtle; outgoing = blue gradient pills. Composer is an inset well + circular send.

## 10 ID cards — `tools/10-id-cards.html`

![10](screenshots/10-id-cards.png)

Badge/ID layouts, avatar in a circular neu ring, mono ID strings. Use for profiles, access passes, employee cards.

## 11 Kinetic lab — `tools/11-kinetic-lab.html`

![11](screenshots/11-kinetic-lab.png)

25 named motion studies. Pick **one** motif for a product; do not enable the whole exhibition in production UI.

## 12 Analytics — `tools/12-analytics.html`

![12](screenshots/12-analytics.png)

Toolbar of circular tools, chart sitting in an inset well, KPI tiles as neu cards. Use for dashboards — charts stay muted (blue/slate), not rainbow.

## 13 Tickets — `tools/13-tickets.html`

![13](screenshots/13-tickets.png)

Kanban / incident hub: columns as inset lanes, tickets as raised cards, priority chips. Use for support and ops boards.

## 14 Calendar — `tools/14-calendar.html`

![14](screenshots/14-calendar.png)

Month grid, selected day = primary pill, events as small neu chips. Use for planners.

## 15 Chat mascots — `tools/15-chat-mascots.html`

![15](screenshots/15-chat-mascots.png)

Popovers, speech bubbles, mascot wells. Use for AI assistants and empty states — keep mascots **inside** neu circles, not flat stickers on white.