Calm toolsfor loud work.
Ten agents can make a lot of noise. The interface should not. These are the rules we design by, shown with the same tokens and components the desktop app uses.
- 01
Neutral chrome, earned orange.
The interface is a quiet neutral scale. Orange appears only for the brand mark, the active first-run step and merge lineage, so when you see it, it means something.
- 02
Compact by default.
13px interface text, a 38px tab strip, a 24px status bar and 8px corners. Density leaves room for the canvas, which is where the work is.
- 03
Status is never color alone.
Every branch state carries a text label alongside its color, and selection is shown with borders and a check, not with hue.
- 04
Motion moves; it never fades text.
Transitions use transforms, masks and color. Half-transparent text fails contrast, so we never cross-fade it. Reduced motion removes animation entirely.
- 05
Stable frames.
Switching tools never resizes the dock or moves the native pane. Panels scroll inside a fixed frame, so the layout holds still while agents work.
- 06
Keyboard first, pointer friendly.
Every frequent action has a shortcut and a visible focus ring. Drag, pan and zoom work with a pointer; arrows, Page Up and Down, and Home work without one.
A tree that keeps branching.
The mark is a cream branching tree on an orange tile: one trunk, three tapered branches, rounded junctions. It is used as approved artwork and is never redrawn, recolored or masked. The wordmark is set in the theme's foreground, with an optional full stop.
GetBranchIt.GetBranchIt.#ff5a1f#29160c#fff7f0Two themes, one vocabulary.
Light and dark are tuned independently but share semantic names. These chips read the live values from the app's theme files.
Light
--background--foreground--muted--border--brand--canvas--canvas-edge--status-success--status-warning--status-danger--status-info--status-neutral
Dark
--background--foreground--muted--border--brand--canvas--canvas-edge--status-success--status-warning--status-danger--status-info--status-neutral
The same parts, everywhere.
These are the desktop's shadcn-based controls and branch components, rendered at build time from the shared UI package. The site is not a mock-up of the app; it is made from it.
Native in the app. Expressive on the page.
The app uses the platform system font at 13px so it feels at home on macOS. The site sets display type in Geist with tight tracking, and both share the system monospace for code.
Branch it.
Checkout redesign · Running · 6 branches
getbranchit fork --dry-run
Fast, physical, and never in the way.
App motion is brief and functional. On this site, content rises out of a mask, lineage draws itself, and running agents pulse. Nothing fades text, and everything stops when you ask your system for reduced motion.
| Token | Value | Use |
|---|---|---|
--motion-fast | 120ms | Hover, press and focus feedback |
--motion-base | 160ms | Panels, menus and tool switches |
--motion-ease | cubic-bezier(0.2, 0, 0, 1) | Shared easing for the app shell |