Stow — Design Language
Working name. Check trademarks before launch.
Stow is an archive tool for macOS. The design goal is not "a nicer file list". It is an app that
answers the three questions people actually have when they meet an archive:
- What's in it? — see contents instantly, preview without extracting.
- Is it safe? — know before extracting whether anything is odd.
- What do I do next? — the right next step is already on screen.
And when packing: "Will it work on their computer?"
Principles
| Principle | What it means here |
|---|---|
| Native first | SwiftUI + AppKit, Liquid Glass, SF Symbols, system font, system controls. No web views, no custom chrome that fights the OS. |
| Content is the hero | Glass is the floating control layer; the archive's contents are the solid layer beneath. Never glass on glass. |
| Say it in a sentence | Options are expressed as a readable sentence ("Pack 12 items as ZIP for Windows PCs"), not a dialog of checkboxes. |
| Trust is visible | Every opened archive gets a safety summary. Risky things are explained in plain words, not error codes. |
| Fast hands, no animation | Keyboard actions and things done 100×/day never animate. Motion is reserved for spatial changes and rare moments. |
| Forgiving | Nothing touches the original until "Save". Every destructive step is undoable or staged. |
Vocabulary (our own — do not borrow competitor names)
| Concept | Name in Stow | Notes |
|---|---|---|
| Main window | Browser | Sidebar (archive card + folder tree), content, inspector |
| Compact quick window | Glance | Small floating window near the pointer for quick extract |
| Context actions | Next Steps | Floating glass capsule that appears for a selection |
| Drop shelf | Tray | Floating panel that collects files from anywhere |
| Purpose presets | "For…" destinations | Windows PCs · Macs · Linux & servers · Web upload |
| Compression dialog | Pack sentence | Sentence-builder with tappable tokens |
| Safety report | Checkup | Badge on the archive card + detail popover |
Color
- Accent — Amber
#D97B2B(light) /#F0954A(dark). Warm, like kraft paper and parcel tape;
stands apart from the sea of blue utilities. Used sparingly: primary button, selection tint,
the drop target, and the Checkup badge when everything is fine is green, not amber. - Everything else is system semantic color (
.primary,.secondary,.separator, materials). - Status: safe = system green, caution = system yellow, blocked = system red. Always paired with an
icon and words — never color alone.
Type
System font (SF Pro), Dynamic sizes via text styles. Hierarchy is weight + size together.
| Role | Style |
|---|---|
| Archive title on card | .title3, semibold |
| Section headers | .subheadline, semibold, secondary |
| Row title | .body |
| Metadata | .callout / .caption, secondary, monospaced digits for sizes & counts |
| Pack sentence | .title2, regular; tokens semibold in accent |
Numbers that change (counts, sizes, progress) use .monospacedDigit() and
.contentTransition(.numericText()) so they don't jitter.
Space & shape
- 4-pt grid. Spacing tokens: 4, 8, 12, 16, 24, 32.
- Corner radii are concentric: a window-level panel 16, cards inside 12, chips inside 8.
- Separation by spacing and subtle fills first; hairline separators only where lists need them.
Motion
Values from Apple's fluid-interface guidance and Emil Kowalski's design-engineering rules
(see .claude/skills/apple-design, .claude/skills/emil-design-eng).
| Moment | Motion | Value |
|---|---|---|
| Next Steps capsule appears | Spring, from bottom, scale 0.96 → 1 + opacity | response 0.32, damping 1.0 |
| Next Steps content changes on selection | None (frequent) — numbers use numeric text transition | — |
| Drop target on drag-over | Spring scale 1.0 → 1.015, accent tint fades in | response 0.25, damping 0.9 |
| Hover preview | 450 ms delay for the first; instant & unanimated for neighbours while one is open | 140 ms fade |
| Tray panel show/hide | Same edge in, same edge out | response 0.35, damping 1.0 |
| Pack sentence token change | Blur-crossfade of the token text | 180 ms |
| View-mode switch, keyboard nav, search filtering | No animation | — |
| Button press | System controls handle it | — |
Reduced Motion: springs become 150 ms opacity fades; nothing translates or scales.
Reduced Transparency: glass falls back to solid window background (the system does this for us).
Signature details
- Archive card at the top of the sidebar: format badge, file count, packed → unpacked size with a
compression bar, lock if encrypted, Checkup badge. - Checkup lists findings in plain words: "2 files would extract outside the folder — they'll be
kept inside", "1 app inside is not signed". - Pack sentence shows a live compatibility report underneath: names that will be adjusted for
Windows, Mac-only files left out, the estimated size. - Empty states teach: the welcome window is a drop target and says what dropping does.
Not doing (on purpose)
- No toolbar full of icons. Primary action (Extract) is prominent; the rest live in Next Steps and menus.
- No splash, no onboarding carousel.
- No animated keyboard navigation, no bouncing on menus.