Every component, in every state it will actually reach.
A component is only finished when its empty, loading, error, and disabled states are drawn. This page holds all of them, at the sizes and contrasts they will ship at.
01
Tokens
Colour ramps, type scale, radius. Everything else on this page draws from here.
PRIMARY — KESUMBA
400
500
600
800
950
NEUTRAL — H 250°
000
050
100
200
500
700
900
TYPE SCALE
48 / 700 / -.03emDisplay
28 / 700 / -.025emHeading
17 / 400Body text runs at this size
13.5 / 400Secondary and captions
12 / mono$ npx caraka init
RADIUS · SPACING
4
8
11
15
100
02
Buttons
Six states per variant. A control with no disabled state is not finished.
PRIMARY
ApproveApproveApproveApproveApproveWorking
SECONDARY · GHOST · DANGER
DetailsDetailsDetailsCancelCancelReject
STATE ORDER — default · hover · active · focus · disabled · loading
Focus is always a 2px outline offset by 2px, never a colour swap. A disabled control never changes on hover, so the cursor tells the truth before the click does.
03
Inputs
Error text replaces the hint rather than stacking below it, so the field never grows on failure.
TEXT FIELD
default
~/dev/toko-api
Absolute path to the repository
focus
~/dev/toko-api
Absolute path to the repository
error
~/dev/toko-api
Not a git repository
disabled
~/dev/toko-api
Locked while a run is active
TOGGLE · SEGMENTED
read-onlyassistedtrusted
memory onheartbeat off
04
Status chips
Colour never carries meaning alone. The deuteranopia row shows why.
STATUS — GLYPH IS MANDATORY, COLOUR IS REINFORCEMENT
▸running⏸awaiting✓done✗failed⊘cancelled≡queued
SOLID · DOT · COUNT
▸running⏸awaiting✓done✗failedconnected3
COLOUR-BLIND CHECK — deuteranopia
▸running⏸awaiting✓done✗failed⊘cancelled
done and cancelled collapse to ΔE 2,5 here. The glyph is what still separates them.
05
Session rows
The product's core component. Six states plus the skeleton it shows while loading.
▸toko-api · rate limit login#a91
⏸toko-api · dependency audit#a92
≡web · hero revision (queued #2)#a93
✓toko-api · fix checkout 500#a88
✗api-gateway · prisma migrate#a84
⊘docs · restructure#a81
SKELETON — WHILE THE LIST LOADS
06
Approval card
The one component where a mistake costs real work. Every terminal state is drawn.
Each one names the thing that happened and the number attached to it.
ALERT · TOAST
i
Linear mode
Forum topics are unavailable here, so replies carry a [workspace · #id] header.
✓
18 tests passed
2 files changed on branch feat/login-rate-limit.
!
Weekly limit approaching
Claude is near its ceiling. Consider /switch codex for routine work.
✗
Agent stopped
Timeout after 30 minutes. Approved changes were kept.
08
Empty states
An empty state is a first-run tutorial. It always carries the exact command to fix it.
EMPTY STATES
○No sessions yetSend a task from the General topic and the first tab appears here.@workspace <task>
≡No workspacesPoint Caraka at a repository to get started.caraka ws add
◇Memory is emptyNothing has been remembered for this project yet./ingat <note>
⌕No matchesNo session matches that filter.clear filter
09
Terminal
Four severities in one block. Output is deterministic and safe to paste into an issue.
TERMINAL BLOCK
$ caraka doctor
✔ claude 2.4.1 · acp
✔ telegram · paired
! forum topics unavailable · linear mode
✗ allowFrom is empty · gateway will not start
▸ run npx caraka start
10
Loading
Indeterminate spinners for unknown waits, a determinate bar when progress is known.
LOADING
spinner
brand loop
determinate · 68%
11
Dialog
Reserved for actions that trusted mode still refuses to skip.
DIALOG
⚠ HIGH RISKForce-push to main?This rewrites history on a shared branch. Trusted mode does not skip this prompt.
CancelForce-push
12
Mark sizes
Where the ∞ pair holds together, and where it stops.
MARK — RING GEOMETRY IS EXPLICIT PX, NEVER PERCENT
ꦕ
96px
ꦕ
64px
ꦕ
46px
ꦕ
30px
BELOW 48PX — RINGS DROP, SOLID TILE ONLY
ꦕ32px
ꦕ24px
ꦕ16px
Percentage margins resolve against the container width, never its height. Ring offsets are written in px so the pair sits on the centre line at every size.
13
Error pages
Each one says what happened, what it means, and what to do next. None of them show a stack trace, and none of them apologise twice.
caraka.dev/404
ꦕ
404This page was never sent
The link is wrong, or the page moved. Nothing is broken on your side.
Go homeRead the docs
caraka.dev/500
ꦕ
500The gate did not open
Something failed on our side. It has been logged, and nothing you did caused it.
Try againReport it
gateway · offline
ꦕ
503Gateway is not running
Caraka is installed but the process is not up. Start it and the topic list comes back.
$caraka start
RetryView logs
agent · not found
ꦕ
424No coding agent installed
Caraka has no agent of its own. Install Claude Code, authenticate, then run init again.
$npm i -g @anthropic-ai/claude-code
Install guideCompare agents
RULES THIS KIT ENFORCES
01Colour is never the only signal. Every status carries a glyph, because done and cancelled sit at ΔE 2,5 under deuteranopia.
02Focus is a 2px outline offset by 2px. Never a colour swap, never a shadow, never removed.
03Kesumba 500 is for marks and buttons. Text and links use kesumba 400, which reaches 7,83:1 on the void.
04Every empty state carries the exact command that fills it. An empty screen with no next step is a dead end.
05Errors name what happened and what to do. No stack traces, no apology, no blame.
06Ring geometry is written in px. Percentage margins resolve against width, which puts the pair off-centre.
07Below 48px the rings drop and the mark becomes a solid tile. Site headers and footers use the tile. The one exception is the animated ∞ indicator, which is a loading component rather than the identity mark.
08Disabled controls do not react to hover. The cursor should tell the truth before the click does.