# 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

1. **This file** — the map.
2. **`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.
3. **`logo/INTEGRATION.md`** — drop the live mark and the wordmark lockup into
   the chrome. Short; mostly a component API + static-asset reference.
4. 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`).