# Vynte Connect Design Spec

## Purpose

Vynte Connect is an internal macOS menu bar app for connecting to the VynteHome NetBird VPN. It should feel obvious to non-infrastructure users: open app, sign in, connect, then open internal apps.

## Visual Direction

Use the Vynte pitch deck style:

- Dark base with soft blue, orange, and pink warmth.
- Flame icon asset from `icon.png` as the app and menu bar logo.
- Montserrat typography.
- Minimal copy focused on comfort, home, and secure team access.

## Frames

### First Launch

- Header: VYNTE mark and wordmark.
- Title: `Private access for the team`
- Body: `Connect to VynteHome to open internal apps securely.`
- Primary action: `Connect to VynteHome`
- Secondary note: `Authentication opens in your browser.`

### NetBird Missing

- Title: `NetBird required`
- Body: `Vynte Connect uses the official NetBird client securely underneath. Install NetBird, then come back here.`
- Primary action: `Install NetBird`
- Secondary action: `Refresh status`

### Disconnected

- Status: gray dot.
- Title: `Ready to connect`
- Body: `Connect to open Vynte internal apps securely.`
- Primary action: `Connect to VynteHome`
- Help bullets:
  - `Authentication opens in your browser.`
  - `Internal apps unlock after the tunnel connects.`
  - `Vynte never stores your password.`

### Connecting

- Status: orange dot and spinner.
- Title: `Authenticating`
- Body: `Finishing NetBird registration...`
- Primary action disabled: `Connecting...`

### Connected

- Status: green dot.
- Title: `Connected`
- Body: `Secure tunnel active as <NetBird IP>.`
- Primary action: `Disconnect`
- App links:
  - `Vynte Home` -> `https://vynte.internal.vyntehome.com`
  - `Plane` -> `https://plane.internal.zachsharma.us`
- Show small reachability dots for internal links.

### Error

- Status: red dot.
- Title: `Needs attention`
- Body: concise error explanation.
- Primary action changes based on error:
  - Missing NetBird: `Install NetBird`
  - Other errors: `Connect to VynteHome`
- Footer always includes `Dashboard`, `Refresh`, and `Quit`.

## Figma Notes

Create a compact screen set, not a full design system. Suggested frame size: `384 x 560`, matching the app popover. Components to include:

- Vynte mark and wordmark lockup.
- Status card.
- Primary button.
- Internal app link row.
- Error/help bullet row.

Use the pitch deck background asset as a reference, but keep the actual app UI native SwiftUI so it remains lightweight.

The browser-reviewable mockup sheet is in `docs/vynte-connect-mockups.html`.