Archived
85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
# 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`.
|