colour
one key ink on white stock, and plum for everything you act on. each ship keeps one bright spot for its mark and its chart series, and five status inks name the state of a run.
the wedge
every neutral is the key ink printed as a tint over the stock: light prints key over white, dark prints paper-white over key. each neutral role sits on one step, and the step is how much ink it carries.
- 100#16181d
- 98#2e2f32
- 88#646465
- 78#838384
- 64#a3a3a3
- 48#bfc0c0
- 32#d7d7d8
- 20#e7e7e7
- 12#f1f1f1
- 5#f9f9f9
- 0#ffffff
- 80#e7e7e7
- 60#cccccc
- 44#b2b2b2
- 24#888889
- 16#727273
- 10#5c5c5e
- 6#494a4c
- 4#3e3e40
- 3#37373a
- 1#242629
- 0#16181d
house ink
plum is the only control colour, on this site and inside every ship: primary actions, links, the focus ring, the current item, selection and the progress fill. hover and press take a step of their own in each mode.
primary#aa337a primary-hover#9a2f6f primary-press#8b2b65 accent#f7f2f4 selection#eee3e8 ring#aa337a
- label on primary
- 6.06:1
- primary on the page
- 6.06:1
primary#c074a1 primary-hover#cd80ad primary-press#d88eb9 accent#503246 selection#71455f ring#c074a1
- label on primary
- 5.29:1
- primary on the page
- 5.29:1
roles
shadcn's roles plus the system's own, each with the step or ink it is mixed from. key and paper are the wedge, house is plum, and the status roles borrow a state's ink.
| role | light | dark |
|---|---|---|
| background | #ffffffstock | #16181dstock |
| foreground | #16181dkey 100 | #e7e7e7paper 80 |
| card | #ffffffstock | #242629paper 1 |
| card-foreground | #16181dkey 100 | #e7e7e7paper 80 |
| popover | #ffffffstock | #242629paper 1 |
| popover-foreground | #16181dkey 100 | #e7e7e7paper 80 |
| primary | #aa337ahouse 100 | #c074a1house 100 |
| primary-foreground | #ffffffstock | #16181dstock |
| secondary | #f1f1f1key 12 | #3e3e40paper 4 |
| secondary-foreground | #16181dkey 100 | #e7e7e7paper 80 |
| muted | #f9f9f9key 5 | #242629paper 1 |
| muted-foreground | #646465key 88 | #b2b2b2paper 44 |
| accent | #f7f2f4house 12 | #503246house 14 |
| accent-foreground | #16181dkey 100 | #e7e7e7paper 80 |
| destructive | #16181dkey 100 | #e7e7e7paper 80 |
| destructive-foreground | #ffffffstock | #16181dstock |
| border | #e7e7e7key 20 | #37373apaper 3 |
| input | #838384key 78 | #888889paper 24 |
| ring | #aa337ahouse 100 | #c074a1house 100 |
| success | #5e6e42done glyph | #95a67bdone glyph |
| warning | #a48551waiting glyph | #e6c99awaiting glyph |
| info | #405d7brunning glyph | #94b0cdrunning glyph |
| rule | #16181dkey 100 | #727273paper 16 |
| ground | #2e2f32key 98 | #0d0f12key twice (50) |
| ground-foreground | #ffffffstock | #e7e7e7paper 80 |
| error | #7c3832failed text | #dca59afailed text |
| selection | #eee3e8house 24 | #71455fhouse 30 |
| disabled | #bfc0c0key 48 | #5c5c5epaper 10 |
| faint | #f9f9f9key 5 | #2e2f32paper 2 |
| code | #16181dkey 100 | #0d0f12key twice (50) |
ship spots
a ship's spot is its identity, never a control. it fills the one dithered region of the ship's mark and the ship's series in a chart, where a line screen at the ship's own angle keeps the series apart without colour. each spot stays at least 10 from plum (oklab delta e x 100), and its mark's dithered region keeps 3:1 on its tile.
orbitcomet blue#2d9ff2- angle
- 45°
- from plum
- 30.1
- region on tile
- 11.99:1
quantaquark green#39b357- angle
- 90°
- from plum
- 37.0
- region on tile
- 12.13:1
trisysflare orange#e9772a- angle
- 27°
- from plum
- 24.1
- region on tile
- 11.86:1
constellationnova violet#a970f0- angle
- 63°
- from plum
- 19.9
- region on tile
- 11.58:1
artifactsmanila gold#e3ae34- angle
- 135°
- from plum
- 34.9
- region on tile
- 13.24:1
solitoncanal indigo#6272e9- angle
- 117°
- from plum
- 22.5
- region on tile
- 11.02:1
orbitcomet blue#55acf3- angle
- 45°
- from plum
- 19.7
- region on tile
- 4.28:1
quantaquark green#4ec769- angle
- 90°
- from plum
- 29.2
- region on tile
- 3.84:1
trisysflare orange#f38745- angle
- 27°
- from plum
- 16.6
- region on tile
- 4.42:1
constellationnova violet#b085ec- angle
- 63°
- from plum
- 11.1
- region on tile
- 4.89:1
artifactsmanila gold#e7b546- angle
- 135°
- from plum
- 23.9
- region on tile
- 3.43:1
solitoncanal indigo#6a7be5- angle
- 117°
- from plum
- 16.4
- region on tile
- 6.19:1
statuses
one vocabulary everywhere: done, running, waiting, failed and queued. a badge prints a fill close to the stock, an edge at about half strength, a glyph square and the word, so a state never rests on colour alone. glyphs clear 3:1 and words 4.5:1 on their fill. failed is the one solid badge.
- donesuccess · tick
- glyph
#5e6e425.17:1- word
#4c5a346.94:1- fill
#f5f8f1- edge
#b6bab0
- runninginfo · i
- glyph
#405d7b6.35:1- word
#3a55717.17:1- fill
#f2f7fd- edge
#afb6bf
- waitingwarning · pause
- glyph
#a485513.22:1- word
#6f562a6.41:1- fill
#faf6ef- edge
#cfc2b3
- failederror · cross
- solid
#843c36label 7.83:1- glyph
#813933on the page 8.18:1- word
#7c3832on the page 8.51:1
- queuedneutral · dash
- glyph
#7d7e7e3.93:1- word
#6464655.70:1- fill
#fafbfb- edge
#bfc0c0
- donesuccess · tick
- glyph
#95a67b5.02:1- word
#95a67b5.02:1- fill
#2c322a- edge
#636f53
- runninginfo · i
- glyph
#94b0cd5.61:1- word
#94b0cd5.61:1- fill
#2c343e- edge
#627589
- waitingwarning · pause
- glyph
#e6c99a6.93:1- word
#e6c99a6.93:1- fill
#423b31- edge
#9a8667
- failederror · cross
- solid
#a55b4elabel 4.99:1- glyph
#dca59aon the page 8.37:1- word
#dca59aon the page 8.37:1
- queuedneutral · dash
- glyph
#8888893.78:1- word
#9f9f9f5.06:1- fill
#2e2f32- edge
#5a5b5c