spinbox

Spinbox brand system

One palette, one mark and one type for the site, the dashboard and everything else that draws Spinbox - each color checked here, and copied from here by each of them. This page is the laboratory; the product is at the website.

1

In use

Sample screens drawn from the tokens. The words, rows and names in them are fixtures, there to show the palette at work: nothing in them is a decision.

The site
SpinboxSearch
spin-stack · self-hosted sandboxes

A virtual machine per workspace. A snapshot before, a diff after.

Sandboxes for people and agents that run in your own AWS account.

Evaluate → Install on AWS

On this page: Snapshots and rollbackTaking oneGoing backSeeing what changed

Snapshots and rollback

A snapshot is a point in a workspace's life that you can come back to. It lives in the installation's bucket, so it does not depend on any runner. Restore puts the disk back; --with-memory keeps the processes.

spin snapshot create demo --description clean --with-memory --wait
spin snapshot diff demo <after-id> --from <clean-id> --under /etc
A  /etc/greeting
M  /etc/hosts
D  /etc/issue
Caution. A memory snapshot resumes only on a runner that carries the same machine.
You want toSpinbox gives you
See what changedA file-by-file diff between two snapshots
UndoRestore the disk, or resume with the processes
The dashboard

Workspaces

NameStateHostLast snapshot
apirunningrunner-a12 min ago
agent-1waiting for a host——
ci-jobfailedrunner-b21 h ago
notesstopped—yesterday

Delete agent-1?

It goes to the trash with its disk; you can undelete it until its days are up.

done Snapshot clean published
The app, as it is

Screenshots spin's own dashboard suite takes of a real installation (shots/, by task screenshots).

2

Decisions

What the brand is: the mark and how it is used, and the palette, each color by what it is for. These are what palette.toml and the mark's cut hold.

The mark
The mark on its own ground
The tile, on its own ground: a dark page, the favicon, a link preview.
The mark without its ground
Clear: on a light page, a light header.

Sizes

64 · 32 · 16 px. Below 24 px the favicon's tile, never the clear mark: its seams close up.

Clear space

A quarter of the mark's height on every side, dashed above: no text or edge inside it.

Lockup

spinbox

The mark, then spinbox in IBM Plex Mono 600, its cap height the mark's middle disk.

Not

stretched
recolored
on the accent
the tile on white
Palette
3

Checks

What holds the decisions: the same page at a phone's and a tablet's width, and every pair of colors task palette measures.

Widths

This page at a phone's and a tablet's width (layout.phone, layout.tablet), in the mode and the view chosen above.

390 px
768 px
Perception

Every pair task palette holds, as drawn and in each view (dist/perception.js). Contrast is WCAG 2.2's; distance is CIEDE2000.

Every pair