Design system v1

The ConsequenceConsole.

Every surface Codewright ships is built from these tokens and components. Signals keep their jobs, depth is hard and structural, and monospace only appears where a machine is talking.

Foundations

Semantic tokens flip between light and dark; the five signal colors keep the same jobs in both. Depth is a hard offset — never a soft blur.

Color tokens

Rendered live from CSS custom properties — toggle the theme to watch them re-map.

background / foregroundThe quiet working canvas and its ink.
card / surface-deepRaised surfaces and the secondary tonal layer.
accent (Signal Acid)Safety and readiness. Never decoration.
consequence (Orange)Consequence and active status.
action (Blue)Interaction, focus, and structural depth.
warning (Yellow)Medium-risk state; changes with an undo path.

Hard depth

Crisp offsets, no blur. If it glows, it does not ship.

Type scale

One heavy sans for everything, a single serif turn for display emphasis, monospace only for machine content.

Display — the promise

Emphasis — one serif turn, never two

Body — explains what a command will actually do before it runs, in plain sentences with a readable measure.

Label — status and terminal chrome only

git reset --soft HEAD~1 — inline machine content earns its monospace.

Actions

Buttons press into the page: the shadow collapses on click, so the interaction itself feels physical. Focus is always a 3px action-blue outline.

Buttons

Primary, accent, destructive, outline, ghost, and link — each with hover, press, focus, disabled, and loading states.

Keyboard

Every flow works without a pointer.

⌘ K — search recipes

Enter — copy the rendered command

Esc — close the confirmation dialog

Signals

Risk is the product's honest voice: four levels, each a color plus a label — never color alone. Alerts carry undo paths, not fear.

Risk levels

From the recipe schema. A destructive recipe always requires confirmation and ships its undo.

Read-onlyInspects state without changing anything.

Low riskReversible with a routine follow-up command.

Medium riskChanges state; undo path documented.

DestructiveDeletes or overwrites; confirmation required.

Badges, chips & status

Categories, build environments, and live state.

gitdockernetworkingnew

localstagingproduction

BuildingVerifiedDraft

Undo path

Your commit is safe in the reflog. Run git reset --soft HEAD@{1} to restore it.

Changes state

This rewrites your local branch. Anything unpushed is affected; the undo path is documented below.

Confirmation required

Deletes all stopped containers and unused images. Codewright will show what goes away before it goes.

Verification

Expected output: the port reports no listener. If it still does, see troubleshooting.

Terminal

Mac-style chrome, real commands, and the inspect → act → verify shape every recipe follows. No cosplay: if it's monospace, a machine said it.

codewright run docker-prune-system

inspecting… 4 stopped containers · 2.1 GB reclaimable

docker system prune --filter "until=24h"

verify: docker system df shows 2.1 GB reclaimed

✓ done — undo: images re-pull on next run

Copyable command

The copy button confirms visibly and announces politely.

$git reflog --date=iso

Loading

Skeletons hold the layout; progress reports real numbers.

Forms

Recipe parameters render the command live. Validation is inline, errors are sentences, and the risk badge answers to what the command will actually do.

Kill the process on a port

Parameter inputs with live substitution — the interaction at the heart of every recipe page.

Port

The port the stuck process is holding.

Platform

Determines which shell the command targets.

Inspect before acting

Rendered command

Read-only

$lsof -i tcp:3000

Confirmation

Destructive recipes never run on a single click. The dialog restates the consequence and the way back.

Native <dialog>: focus trap, Esc, and top-layer come from the platform.

Structure

Platform tabs, recipe tables, troubleshooting disclosures, and breadcrumbs — the bones of the browse and detail surfaces.

Platform variants

Every recipe ships macOS, Linux, and Windows forms. Arrow keys move between tabs.

$lsof -ti tcp:3000 | xargs kill

The port is still busy after running the command

Another process may have claimed the port immediately — re-run the inspect step to see the new owner, or check for a process manager (pm2, systemd) configured to restart it.

kill: no such process

The process exited between inspect and act. Verify with the read-only step; if the port is free, the job is already done.

Recipe	Category	Risk
Undo the last commitgit-undo-last-commit	git	Low risk
Reclaim Docker disk spacedocker-prune-system	docker	Destructive
Kill the process on a portkill-process-on-port	processes	Medium risk
Inspect the refloggit-inspect-reflog	git	Read-only