| version |
alpha |
| name |
Agent Ledger |
| description |
Design-system contract for the reference agent workbench. |
| colors |
| blueprint-paper |
ink |
panel |
panel-muted |
blueprint |
blueprint-strong |
primary |
blueprint-foreground |
signal |
signal-strong |
signal-foreground |
border |
line |
line-soft |
line-strong |
mist |
ink-muted |
ink-subtle |
surface-raised |
success |
warning |
destructive |
code |
#F3F6F7 |
#16252D |
#FFFFFF |
#E8EFF1 |
#325F73 |
#284E5E |
#325F73 |
#FFFFFF |
#C64F36 |
#AD402B |
#FFFFFF |
#C8D6DB |
#C8D6DB |
#D5E0E4 |
#B6C8CF |
#8EA9B4 |
#5D727A |
#65787F |
#F8FAFB |
#2F7D65 |
#A86618 |
#B83A3A |
#243941 |
|
| typography |
| ledger-title |
section-title |
body |
utility |
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Geist Variable |
2rem |
650 |
1.05 |
-0.03em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Geist Variable |
1rem |
650 |
1.25 |
-0.01em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Geist Variable |
0.875rem |
400 |
1.55 |
0em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
ui-monospace |
0.6875rem |
550 |
1.35 |
0.06em |
|
|
| rounded |
| sm |
md |
lg |
full |
4px |
8px |
12px |
999px |
|
| spacing |
| xs |
sm |
md |
lg |
xl |
4px |
8px |
16px |
24px |
32px |
|
| components |
| app-shell |
ledger-panel |
button-primary |
button-signal |
status-ready |
status-working |
status-failed |
surface-muted |
border-sample |
code-label |
button-primary-hover |
button-signal-hover |
ledger-divider |
ledger-divider-soft |
ledger-divider-dashed |
utility-caption |
utility-caption-subtle |
hover-affordance |
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.blueprint-paper} |
{colors.ink} |
{typography.body} |
{rounded.sm} |
16px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.panel} |
{colors.ink} |
{rounded.md} |
16px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.blueprint} |
{colors.blueprint-foreground} |
{typography.body} |
{rounded.md} |
8px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.signal} |
{colors.signal-foreground} |
{typography.body} |
{rounded.md} |
8px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.success} |
{colors.panel} |
{typography.utility} |
{rounded.full} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.warning} |
{colors.panel} |
{typography.utility} |
{rounded.full} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.destructive} |
{colors.panel} |
{typography.utility} |
{rounded.full} |
4px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.panel-muted} |
{colors.ink} |
{rounded.md} |
16px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.border} |
{colors.ink} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.panel} |
{colors.code} |
{typography.utility} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.blueprint-strong} |
{colors.blueprint-foreground} |
{typography.body} |
{rounded.md} |
8px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.signal-strong} |
{colors.signal-foreground} |
{typography.body} |
{rounded.md} |
8px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.line} |
{colors.ink} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.line-soft} |
{colors.ink} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.line-strong} |
{colors.ink} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.surface-raised} |
{colors.ink-muted} |
{typography.utility} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.panel} |
{colors.ink-subtle} |
{typography.utility} |
{rounded.sm} |
4px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.mist} |
{colors.ink} |
{rounded.md} |
8px |
|
|
Agent Ledger is a reference workbench for engineers who need to understand an
agent run at a glance. The interface should read like an operational record:
projects and tasks on the left, the active session on the right, and one durable
event spine connecting every state transition.
Desktop uses an asymmetric three-zone ledger: a narrow project rail, a task
field, and a wider session transcript. Mobile preserves the same order in a
single column. The slim session tape at the top always shows authentication,
transport, worker, and sandbox state.
Use blueprint paper, ink, and blue for the stable application shell. Oxide
signal is reserved for the primary “run agent” moment. Semantic success,
warning, and destructive colors describe real state only. Geist carries the
interface; IDs, timestamps, and event sequences use the platform monospace.
Use vendored shadcn source for application controls and official AI Elements
for conversation, markdown, prompt, tool, and approval surfaces. Base UI
primitives are wrapped and exported only from packages/ui; application code
does not import Base UI directly.
The event spine may reveal new entries with a 140ms opacity and translate
transition. No ambient animation, glowing orb, or decorative gradient is
allowed. Respect prefers-reduced-motion.
Do update this file before introducing a reusable visual token. Do make empty
and error states explain the next action. Do preserve visible focus and a
44-pixel mobile target. Owned application and packages/ui code uses semantic
token utilities; the two vendored component directories are the only source
exemptions. Keep rich transcript rendering behind its lazy feature boundary so
the production entry stays at or below 750 KiB. Do not use arbitrary feature
colors, glassmorphism, purple AI gradients, or raw markdown output.