vynte-connect/docs/vynte-connect-design-spec.md

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.