# twin high-fidelity HTML mockups

Static **HTML + CSS** screens aligned with [ux.md](../ux.md) and the Figma UI kit. **Self-contained** — no external `wireframes.css` dependency; base design tokens live in `hifi-common.css`, with a shared **e-learn** visual layer in `hifi-theme-el.css` (gray canvas, flat chrome, gradient primary CTAs — derived from `home-learn.html`).

**Device frame:** **iPhone 17 Pro Max (2025)** — 440 × 956 CSS px (logical layout).
**Desktop frame:** 1440 × 1024, 12-column grid, 120 px margin, 20 px gutter.
**No Blue/Gold header toggle** — mentee vs mentor mockups are separate files with role-appropriate accents.

## Figma-aligned tokens

| Token area | Source | CSS file |
|------------|--------|----------|
| Typography | Outfit + system UI (`--font-sans`) | `hifi-common.css` (Google Fonts import) |
| Icons | **Material Symbols Outlined** (ligatures, `FILL` 0, 24 opsz) | `hifi-common.css` `@import` + `.hifi-icon` / `.twin-btn__icon` |
| Color ramps | Primary purple `#4D4CFF`, semantic, brand bridge | `hifi-common.css :root` |
| Radius | Buttons 40 px, cards 18 px, inputs 12 px, chips 20 px | `--radius-*` variables |
| Elevation | 5-level shadow scale (Police Blue tint) | `--shadow-1` … `--shadow-5` |
| Inputs | 56 px height, 1.5 px border, 12 px radius | `hifi-components.css` |
| Buttons | Pill (40 px radius), Outfit 600, dual persona accents | `.twin-btn` family |

## View locally

Open [`index.html`](index.html) in a browser. For consistent font loading use a local server:

```bash
cd design/hifi-mockups
python3 -m http.server 8765
```

Then visit `http://127.0.0.1:8765/`.

## Import into Figma

- **html.to.design** or **Anima** browser plugin — import a URL or pasted HTML. Fonts (Outfit, Material Symbols) and CSS variables are picked up automatically.

## Icons (Material Symbols)

- UI glyphs use **ligature text** inside a styled span, not inline SVG (except the **twin signet** logo and decorative vectors on `landing-human.html`).
- **Tab / row icons:** `<span class="hifi-icon" aria-hidden="true">home</span>` — name matches [Google Fonts Icons](https://fonts.google.com/icons) (e.g. `arrow_forward`, `chevron_right`, `menu_book`). Modifiers: `hifi-icon--sm`, `hifi-icon--row`.
- **Trailing control on buttons:** `<span class="twin-btn__icon" aria-hidden="true">arrow_forward</span>` (inherits Material font from `.twin-btn__icon` in `hifi-common.css`).
- **Icon-only buttons:** `.twin-icon-btn` wraps the same `.twin-btn__icon` span; sizes are set per `--md` / `--sm` / `--xs`.
- **Secure Room composer send** uses the ligature as button text (`arrow_forward`) with `aria-label="Send message"`; the leading glyph uses `.hifi-room__input-icon` (Material font applied in `hifi-components.css`).
- **Print to PDF** from the browser, then place the PDF in Figma (less editable).
- For pixel-perfect frames, take **2× screenshots** and place as reference layers.

## File structure

| File | Role |
|------|------|
| `hifi-common.css` | Design tokens, layout grid, chrome, `.twin-btn` family |
| `hifi-components.css` | UI components (cards, inputs, avatars, pills, room widget, etc.) |
| `hifi-theme-el.css` | **E-learn theme** — load after the two above. Mobile: add class `el` on `.hifi-device`. Landings: `el-landing` on `body` with `hifi-landing-body`. Hub pages: `el-hub` on `body`. Desktop shell: `el-desktop` on `body`. Admin: `el-admin` on `body`. Kit pages: `el-kit` on `body`. **`home-dark.html` is not themed** (it uses the separate `.dk` dark palette); a future `.el--dark` could align it. |
| `hifi-controls.css` | **Checkboxes & radios** — load after `hifi-common.css`. Source: `scss/hifi-controls.scss` (`_checkbox.scss`, `_radio.scss`, `_control-tokens.scss`, `_root-controls.scss`). Demo: `form-controls-showcase.html`. |
| `scss/` | Sass mirror of palette (`_palette.scss`) and form controls; compile with `sass scss/hifi-controls.scss hifi-controls.css` from `design/hifi-mockups`. |
| `index.html` | Hub page linking all mockup screens |
| `landing.html` | Glass-hero landing page (no device frame) |
| `auth-*.html` | Email/password sign-in + remind password; phone + OTP (alternate mockups) |
| `home-blue.html`, `home-gold.html` | Dashboards per persona |
| `discover-power5.html` | Power 5 matching |
| `mentor-profile-drawer.html` | Profile bottom sheet |
| `pitch-builder.html` | 3-step pitch wizard |
| `active-pitches-blue.html` | Mentee pitch tracker |
| `pitch-queue-gold.html`, `pitch-detail-gold.html` | Mentor pitch queue + detail |
| `secure-room.html` | Threaded room with milestones + link vault |
| `progress-blue.html` | GP / trust level / badges |
| `impact-gold.html` | Mentor impact portfolio |
| `questionnaire-step.html` | Impact questionnaire sample step |
| `vouching-hub.html` | Vouch collection |
| `verification-pending.html` | Waiting state |
| `settings.html` | Profile / settings |
| `rotation-feedback.html` | Rotation 3 rejection feedback |
| `desktop-shell-blue.html` | Web app shell with sidebar |
| `admin-users.html` | Admin user management table |

## Related assets

- UX specification: [`../ux.md`](../ux.md)