01Palette · backgrounds & chrome
depth comes from bg layers, not shadows
bg_deep#1c1e2d
bg_base#24273a
bg_panel#2a2d42
bg_inset#1f2030
bg_hover#2f334a
bg_selected#363a54
border_faint#353a50
border_subtle#3f4358
border_active#8aadf4
focus ring1px blue
02Palette · text & accents
accents used sparingly for meaning, never decoration
text_heading#e4e6f3
text_primary#dadada
text_secondary#a5adcb
text_muted#7f849c
text_faint#6e738d
blue#8aadf4
lavender#b7bdf8
peach#f5a97f
green#a6da95
red#ed8796
yellow#eed49f
pink#f5bde6
mauve#c6a0f6
teal#8bd5ca
03Typography scale
IBM Plex Sans · Plex Serif · Cascadia Code
Build anything. Keep everything.
Workspace overview
Recent files
Anchor is the daily environment, the website, and the artifact pipeline — all expressed as positioned elements on canvases.
Mid-dense panels lean on this size — file lists, palette rows, secondary copy in chrome.
Status bar primary, tag chips, inline metadata.
cursor: 47:23 · saved: 14:23 · filter: 0.018s · mem: 187mb
Section · uppercase · 14% letterspacing
04Surfaces · the five layers
no shadows · depth via bg only
bg_deepcanvas underlay · inset panels#1c1e2d
bg_baseprimary surface · main bg#24273a
bg_panelraised · sidebars · status bar#2a2d42
bg_insetinputs · code · element fills#1f2030
bg_hoverrow hover · button hover#2f334a
bg_selectedselection · active row#363a54
05Buttons
22px tall · 2px radius
06Inputs & controls
22px height · 1px border · 2px radius
Document title
Filter tags
⌕
Visibility
Auto-tag on save
Notify Oracle of changes
Smooth filterRough filter
Editor confidence
on
Volume · 64 / 100
07Chips, tags, status flavors
10.5px mono · 1px border · 2px radius
Tag chips
writing
draft
essay
veblen ×
2026 ×
labor
ai
Status flavors
draft
review
scheduled
published
active
building
stale
conflict
idle
Tabs
Body
Outline
Notes 3
History
08Status bars · top & bottom · always present
top 24px · bottom 22px · bg_panel · 1px border edge
09List rows
file · recent · palette match
File rows
·veblen_labor.draft
·attention.essay
·notes_2026_04
·orblike.designdoc
Palette match — query "op"
▸Open document
▸Open recent…
▸Open panel · files
▸Propose tag…
10Selection chrome
1px blue · 8 handles · dot-grid bg
A loose note about the natural rate of attention. Distractions are normal.
The Practice of Attention
We often believe that clarity comes as a kind of revelation. In truth, it is more ordinary.
We often believe that clarity comes as a kind of revelation. In truth, it is more ordinary.
240×96 @ (288, 72)
11Agent identities
six agents · one accent each
OOraclemauve
EEditorpink
AArchitectblue
CComposerteal
LLibrarianyellow
KCartographerlavender
Agent panels mirror the global right-side shape; the left-edge accent on each chat row is the agent's hue. Status-bar dots use the same colors.
12Code · syntax tokens
cascadia code 11.5 · 1.55 line height
1-- Player entity. Procedural sub-modules as fields. 2local player = class() 3 4function player:new(x, y) 5 self.x, self.y = x, y 6 self.hp = 5 7 make_entity(self) -- assign id, register 8 self.timer = timer_new() 9 self.spring = spring_new() 10 self.collider = collider(self, 'player', 'dynamic', 'box', 12, 12) 11end 12 13function player:update(dt) 14 timer_update(self.timer, dt) 15 self.collider:sync() 16 if pressed('shoot') then self:fire() end 17end
13Inline patterns
element strip · accept/reject proposal
Daily notes
A rolling log of today's thoughts. Dottifications, tag suggestions.
Editor
suggestion · clarity
14:24
Consider tightening this clause to emphasize continuity. "This suggestion replaces the last sentence with a more direct, forward-looking alternative."
Tabaccept
Escdismiss
⌘⇧Ddon't show again
⌘.tag useful
14Modes · banded indicator
7 modes · accent color per band · keyboard cycle
CANVAS
WRITE
READ
CODE
MUSIC
BROWSE
GAME
⌘1–7 cycles · ⌘⇧M opens mode picker · current accent flows into the bottom-bar mode label and the agent affordances of the active panel.
15Metadata · diff · tooltip
utility components · 11px mono
fileessays/veblen_labor.draft
created2026-03-14 11:02
modified2026-04-22 14:23
words2,418
tagsessay · draft · veblen · labor · ai
links_in7
links_out12
elements11 (8 text · 2 quote · 1 figure)
self.collider:sync()
if pressed('fire') then self:shoot() end
if pressed('shoot') then self:fire() end
end
Open in canvas ⌘O
Editor · pink · suggesting edits…
16Inline text · highlights, links, mentions
used inside body prose & code
Anchor as a single, owned environment
The text you are reading lives as a text element on a canvas. The same canvas can hold a #figure below this paragraph, a code block beside it, or a tiny game running inside its own letterboxed frame.
When the search input contains the word attention, every match across the open canvases is highlighted in yellow. @Oracle messages appear inline using the agent's accent. The cursor's current line gets a faint peach rail.
17Composed sample · panel + input + chips
how primitives compose in real chrome
Recent
14 files
⌕
essay ×
notes
code
draft
+9
·attention.essay
·veblen_labor.draft
·soul_society.draft
·offerings_to_god.essay
18Rules · what this kit does and doesn't do
keep these in mind when extending
Geometry
corner radius 0–2px · borders always 1px · padding 4–8px default · status bars 22 / 24px · row heights 20–22px · panel sidebars 220–340px.
Color discipline
three bg layers carry depth · one accent per element max · accents always carry meaning · selection is bg_selected + 1px blue · errors red, success green, attention yellow.
Don'ts
no drop shadows · no gradients (except the brand glyph) · no rounded cards · no hero whitespace · no marketing-style empty states · no dark-mode-toggle chrome.