# Components — which HTML to copy

Open the HTML 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)

Gold-plated **nav plaque**, Cinzel wordmark, media bento (player, library, stats) on damask. Use for app headers + cards.

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

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

Toggles, sliders in black inset tracks, bounce easing. Playful Victorian motion.

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

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

Full-viewport ops HUD, mono readouts, rose live accents on oxblood. Dense only.

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

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

Personnel registry, **Cairo** for Arabic, row plaques, status chips.

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

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

Sidebar + main canvas, gold scrollbar. Settings / multi-pane.

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

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

Stepper (active = gold plate), wizard body. Onboarding.

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

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

Dim black-blood overlay; plated dialog; ghost + gold footer. Never a white modal.

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

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

**Start here for atoms:** buttons, chips, inset fields, toast, dock.

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

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

Thread + composer. Outgoing = gold pills with black text; incoming = inset oxblood.

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

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

Passes, gold ring avatars, mono IDs.

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

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

25 motion studies. Pick one motif for production.

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

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

Toolbar + inset chart well, KPI plaques. Charts gold/blood, not rainbow.

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

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

Kanban: inset lanes, plated tickets, status chips.

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

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

Month grid, selected day = gold pill, event chips.

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

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

Popovers, bubbles, mascot wells inside gold-edged circles.