TangibleXP look book
Four colour swatches and six design languages for the new dashboard, applied to one real screen: an application overview in the middle of a migration. Pick a swatch, a language and a mode; the screen re-skins live. The logo SVG is the source of truth: every swatch draws the real wordmark, and Moss now uses its exact colours.
Four swatches, plus Limestone as it was
Each swatch has a light and a dark palette. Limestone (v1) is the pre-retune version, kept so the logo retune can be compared. The six chips per row are sidebar, page, surface, primary, info and danger. The badge beside each name is that swatch's XP badge.
Six languages
The language sets type, corners, borders and depth; the swatch sets colour. Any swatch works with any language. Panel is the hybrid of Console's type and Instrument's surfaces.
Application overview, mid-migration
Built from the approved first scope: live progress from the migration's own steps, usage meters that say when a limit is exceeded, copyable access details, a command palette hint and an undo toast. Example data, modelled on a real production overview.
Overview
craftserving.com ↗Moving to a new origin
Started 09:01 by Pete · origin st4 → st6 (zfs)
- ✓Back up the site09:01 · 3m 12s
- ✓Build the destination09:04 · 1m 48s
- ✓Take the site offline09:06 · 14s
- 4Relay the datasince 09:06
- 5Bring the site up
- 6Move the application
- 7Clean up the source
- 8Back up the new home
The site is offline until “Bring the site up” finishes. If a step stalls, staff are notified and can resume it from where it stopped.
2 medium-severity issues found in the last health scan, 40 minutes ago. No critical issues.
Plan usage · Starter LMS
The database is 2.8× the plan's limit. Compare plans
Access
- Primary domain
- craftserving.com SSL active
- SSH / SFTP
craftserving@ssh.tangiblexp.com- Port
22- Database
- Open phpMyAdmin ↗
- Staging
- 2 environments · manage