SoftLAN Launcher — Design Handoff
This folder is the complete, current state of design for the SoftLAN Launcher. Everything an implementor needs to build the product is in here — and nothing that isn't. (The exploration mockups, logo concept boards, and variant studies live back in the project workspace; they're history, not handoff.)
Target codebase: Tauri + React desktop app. The references here are HTML/React prototypes that communicate the intended look, layout, and behavior — recreate them inside the codebase using its own patterns. They are not meant to be shipped as-is.
What's inside
design_handoff_softlan_launcher/
├── README.md ← you are here — start here
│
├── launcher/ ← THE APP
│ ├── SPEC.md full spec: every screen, component, token, interaction
│ └── design_reference/ the working prototype the spec describes
│ ├── SoftLAN Launcher.html open this to see all screens/variants
│ ├── styles.css
│ ├── data.jsx mock catalog + format helpers
│ ├── components.jsx Icon set, cards, modals, Settings dialog
│ └── launcher.jsx composes chrome + grid + modals
│
└── logo/ ← THE BRAND MARK
├── INTEGRATION.md how to ship the logo (component + assets + lockup)
├── pixel-live.jsx the live animated "S" + Wordmark + Lockup components
├── demo.html open to see the mark animate + the lockup
└── assets/
├── softlan-mark.svg static S (currentColor)
├── softlan-mark-blue.svg static S (fixed blue)
├── softlan-tile.svg app-icon tile (gradient + white S)
├── softlan-lockup.svg full lockup (icon + wordmark), on dark
├── softlan-lockup-ink.svg full lockup, on light
└── favicon.svg = tile, drop-in favicon
Two pieces, one product
| launcher/ | logo/ | |
|---|---|---|
| What | The full launcher UI redesign | The brand mark + wordmark lockup |
| Read first | launcher/SPEC.md |
logo/INTEGRATION.md |
| Preview | open launcher/design_reference/SoftLAN Launcher.html |
open logo/demo.html |
| Fidelity | High — final colors/type/spacing/interactions | Final — recolors live via the accent token |
The two share one design language. The accent color is a single token
(--accent, default #3b82f6) that drives the launcher's primary actions and
the logo — wire it once and both follow. The brand mark in the launcher's top
bar (launcher/SPEC.md → "Top bar → Brand") is the logo component from
logo/pixel-live.jsx at size={28}; the static 28px "S" in the mock is a
placeholder for it.
Recommended reading order
- This file — the map.
launcher/SPEC.md— the bulk of the work. Screens, components, data shapes, design tokens, interactions, and what's out of scope. Start at "Screens / views" and keep the "Design tokens" section open alongside.logo/INTEGRATION.md— drop the live mark and the wordmark lockup into the chrome. Short; mostly a component API + static-asset reference.- Open both preview files in a browser to see the real thing in motion.
Status
- Launcher: high-fidelity, decisions locked. Variant A is the chosen
chrome. Open questions (empty/error states, logs viewer, keyboard grid nav,
German strings, "server running" state) are listed at the end of
SPEC.md. - Logo: final. Live component + static assets + horizontal lockup (dark and light) all included.
Do not ship the Babel-in-browser setup, the design-canvas wrappers, or the
Tweaks panel from the prototypes — they're presentation scaffolding. The Tweaks
panel is superseded by the in-app Settings dialog (spec'd in SPEC.md).