Show the machinery
Name files, paths, versions and consequences. Confidence comes from visible work, not vague automation.
+ Lift your
+
+ Identity system / 2026
+ Lift your
tools into
place.
+ Hoist is the setup rig for AI coding tools. Its identity feels engineered, dependable and active: less black-box magic, more visible machinery.
+ +
+ 
+ 1024 × 1024 / MASTER SVG
+
+
+ 1024 × 1024 / MASTER SVG
+
+
+
+ 01 / THE LIFT GATE
A gantry, an H, and one clear direction.
+
+
+ 
hoist
+
+ hoistPrimary lockupCanvas on midnight
+
+
+
+ Signal fieldDark mark
+
+
+
+ UtilityOne colour
+
+
+
+ 01A / FACE LAB
A helpful face, built from lifting machinery.
+
+
+
+
+
+
+ 01B / MECHANICAL LAB
One product. Six ways to lift.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 02 / RIGGING YARD
Warm canvas. Cold steel. A flash of safety orange.
+
+ Midnight 950
+ #101820 / primary fieldCanvas 100
+ #F5F0E6 / light fieldSteel 800
+ #24313D / raisedCanvas 200
+ #E6DFD1 / borderSignal 500
+ #F06A3C / actionMint 500
+ #52C7A5 / healthySky 500
+ #60A5FA / informationDanger 500
+ #E65353 / blocked
+
+
+ 03 / VOICE & TYPE
Human instructions, machine-readable details.
+
+
+
+ Aa
Hoist.
Hoist.
Manrope 800Display / UI / guidance
$ hoist
doctor
all clear
doctor
all clear
DM Mono 500Commands / versions / metadata
+
+
+ 04 / IN PRODUCT
The brand earns its keep inside the tool.
+
+
+ hoist
+
+ hoistLOCAL VAULT / UNLOCKED
+
+
+
+
+
+
+
+ Your toolchain
Harnesses, runtimes and package managers detected on this machine.
+Claude Code2.1.226 / npm global
installedOpenCode1.2.8 / Homebrew
installedCodex0.101.0 / npm global
installed
+
+
+ 05 / OPERATING RULES
Three checks keep the system recognisably Hoist.
+ 01
+ 02
+ 03
+
+ Signal with purpose
Orange means action. Mint means healthy. Keep chromatic colour scarce enough that every flash carries meaning.
Use plain verbs
Install. Connect. Check. Repair. Hoist sounds capable and direct, never clever at the user’s expense.
+}
+
+const THEME_OPTIONS = [
+ ['', 'rigging yard (default)'],
+ ['signal', 'signal orange'],
+ ['amber', 'amber'],
+ ['oxide', 'oxide'],
+ ['safety', 'safety yellow'],
+ ['cobalt', 'cobalt'],
+ ['teal', 'teal'],
+ ['plum', 'plum'],
+ ['coral', 'coral'],
+ ['lime', 'lime'],
+] as const
+
+function DevThemePicker() {
+ const [theme, setTheme] = useState(() => {
+ try { return localStorage.getItem('hoist.theme') ?? '' } catch { return '' }
+ })
+
+ useEffect(() => {
+ try { localStorage.setItem('hoist.theme', theme) } catch { /* ignore */ }
+ if (theme) document.documentElement.dataset.theme = theme
+ else delete document.documentElement.dataset.theme
+ }, [theme])
+
+ if (window.location.protocol === 'file:') return null
+
+ return (
+
+ )
+}
+
type SurfaceId = 'library' | 'harnesses' | 'keys' | 'gateway' | 'status' | 'doctor'
type LibraryFilter = 'all' | 'harnesses' | 'runtimes' | 'package-managers' | 'installed' | 'available'
@@ -435,6 +635,7 @@ export function App() {
return (