Developer workflow system

Repository state first, decorative chrome last.

A compact product interface for repositories, issues, pull requests, CI checks, and agent work queues. Blue is reserved for action and navigation; labels carry workflow state with text and color together.

Review components Inspect layout
interface-lab / resource-system
main a13f09c updated 4m ago
Checks passing
Issues 12 Pull requests 4 Actions Security
Normalize DESIGN.md token naming
#482 opened by Q · branch design-md-index
Review required
Add accessible table fallback to analytics preview
#481 assigned to UI agent · 2 linked commits
Open
Merge resource catalog license audit
#477 merged after 3 checks
Done

Color Palette

Colors are functional. The blue accent marks action, links, focus, and selected navigation. Workflow states use separate semantic hues with labels.

primary #0969da
Links, focus, primary action.
canvas #f6f8fa
App shell and grouped background.
hairline #d0d7de
Rows, cards, inputs, separators.
success #1a7f37
Passing, open, healthy states.

Typography

System sans handles product UI. Mono is reserved for identifiers and commands so technical data stays easy to scan.

display-xl · 48/1.08
Ship readable tools.
body · 14/1.5
Review queues, metadata, comments, and linked issues without inflating the interface.
mono · 12/1.5
git checkout design-md-index && npm run typecheck

Components

Rows, labels, repository cards, code chips, and scoped tabs are the system's workhorses.

interface-lab/design-md

Reusable design-system resources with light and dark previews.

ActiveTypeScriptupdated todayv0.4.2
Preview card overflows on mobile
Repro: 390px viewport · owner Frontend
Needs QA

Spacing & Layout

Use a 1280px product container, compact rows, and an 8/4 or 9/3 split for work object plus metadata.

Main work object: issue queue, pull request diff, checks table, package list, or agent task log.
Metadata rail: owner, labels, branch, milestones, permissions, activity, and next action.

Responsive Behavior

Metadata collapses below the work object. Tabs scroll horizontally. Rows stack state, owner, and timestamp below the title.

1024px
Move side metadata below main content.
720px
Use scrollable scoped tabs and stacked rows.
44px
Touch-first controls meet minimum tap targets.
No hover-only
All important state remains visible by default.