diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 1bcfb79..35bc1a1 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -1,7 +1,7 @@ name: Pages # Checks the palette, the mark and the screenshots against their sources on every push and pull request, and -# publishes main to GitHub Pages: preview.html with dist/, logos/, fonts/ and assets/ beside it. +# publishes main to GitHub Pages: index.html with dist/, logos/, fonts/ and assets/ beside it. on: push: diff --git a/README.md b/README.md index eee2ca1..22cb1e0 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The colors, type, layout and mark of Spin, written once, checked, and made into place that draws Spin reads: the website (Starlight), the dashboard (Tailwind, shadcn's variables) and anything else (`dist/tokens.json`). -**[See it](https://spin-stack.github.io/brand/preview.html)**: `preview.html` is the laboratory. +**[See it](https://spin-stack.github.io/brand/)**: `index.html` is the laboratory. It draws the site's landing and a docs page, the dashboard's workspaces with their states, a dialog and a toast; the app as it is, in screenshots spin's own suite takes; the mark's guide - sizes, clear space, the lockup, the grounds it goes on and what it is not; the palette by what @@ -20,7 +20,7 @@ through protanopia, deuteranopia or tritanopia, with every pair the palette is h ``` task # palette and mark: check, and write dist/ and logos/ task report # every pair, its contrast or its distance in each view -task preview # http://127.0.0.1:4330/preview.html +task preview # http://127.0.0.1:4330/ task check # what CI runs: fails on a pair below its floor, or a stale dist/ or logos/ ``` diff --git a/Taskfile.yml b/Taskfile.yml index b16d3ff..0af4685 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -33,7 +33,7 @@ tasks: - go run ./cmd/shots -spin {{.SPIN}} -from {{.SHOTS}} preview: - desc: Serve preview.html - the site, the dashboard and a phone's width in the palette, in either mode and through each deficiency - at http://127.0.0.1:4330/preview.html + desc: Serve index.html, the laboratory - the site, the dashboard and a phone's width in the palette, in either mode and through each deficiency - at http://127.0.0.1:4330/ cmds: - python3 -m http.server 4330 --bind 127.0.0.1 diff --git a/index.html b/index.html new file mode 100644 index 0000000..9e9bf49 --- /dev/null +++ b/index.html @@ -0,0 +1,334 @@ + + + + + +Spin brand + + + + + +
+
+
+
spin
+

Spin brand system

+

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

+
+ + +
+
+
+
+ +
+ The site +
+
SpinSearch
+ +
+
+ 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 toSpin 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).

+
+
+ +
+ 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

+
spin
+

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

+

Not

+
+
stretched
+
recolored
+
on the accent
+
the tile on white
+
+
+
+
+ +
+ Palette +
+
+ +
+ 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.

+
+
+
+ + + + diff --git a/preview.html b/preview.html index 011ccd7..fa7cd5a 100644 --- a/preview.html +++ b/preview.html @@ -1,334 +1,7 @@ - - - -Spin brand - - - - - -
-
-
-
spin
-

Spin brand system

-

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

-
- - -
-
-
-
- -
- The site -
-
SpinSearch
- -
-
- 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 toSpin 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).

-
-
- -
- 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

-
spin
-

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

-

Not

-
-
stretched
-
recolored
-
on the accent
-
the tile on white
-
-
-
-
- -
- Palette -
-
- -
- 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.

-
-
-
- - - - +Spin brand system + + + +

Spin brand system