86 lines
3.9 KiB
Markdown
86 lines
3.9 KiB
Markdown
# 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`).
|