DESIGN.md

version	alpha
name	Corbits Triage
description	Night instrument. A graphite rail wrapping a light working pane, one heat signal for attention.
colors	primary paper pane sheet inset ink ink-soft ink-mute rule rule-strong heat heat-hover heat-press heat-ink heat-wash rail rail-text rail-mute rail-line rail-current ok bad ring night-field night-line night-bad #d44510 #e5e7ed #f6f7f9 #fdfdfe #d4d7e0 #12141a #2e323c #575d68 #c3c7d1 #959ba8 #d44510 #b83a0c #9c300a #1c0b06 #ead0c4 #0a0c11 #e8eaf0 #8b909c #16181e #2a1511 #1d6b42 #b1352c #b83a0c #141821 #2a2f3a #f07a6a
typography	page-title section-title card-title body lede supporting meta mono fontFamily fontSize fontWeight lineHeight letterSpacing Red Hat Display 2rem 650 1.1 -0.045em fontFamily fontSize fontWeight letterSpacing Red Hat Display 18px 650 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Red Hat Display 16px 620 1.3 -0.02em fontFamily fontSize lineHeight Red Hat Display 14px 1.45 fontFamily fontSize lineHeight Red Hat Display 14px 1.45 fontFamily fontSize lineHeight Red Hat Display 13px 1.4 fontFamily fontSize Red Hat Display 12px fontFamily fontSize Space Mono 12px
rounded	sm md 4px 8px
spacing	xs sm md lg xl pane-inset rail rail-collapsed topbar 4px 8px 12px 16px 24px 24px 212px 64px 52px
components	button button-hover button-primary button-primary-hover button-primary-active button-disabled field rail rail-item-current rail-meta rail-edge room secondary-text divider field-border focus-ring status-ok status-bad login-field-border login-error pane topbar priority-p0 priority-p1 toast login-field backgroundColor textColor rounded height padding {colors.sheet} {colors.ink} {rounded.sm} 40px 0 14px backgroundColor {colors.inset} backgroundColor textColor rounded height {colors.heat} {colors.heat-ink} {rounded.sm} 40px backgroundColor {colors.heat-hover} backgroundColor {colors.heat-press} backgroundColor textColor {colors.inset} {colors.ink-mute} backgroundColor textColor rounded height {colors.sheet} {colors.ink} {rounded.sm} 40px backgroundColor textColor width {colors.rail} {colors.rail-text} 212px backgroundColor textColor {colors.rail-current} {colors.heat} backgroundColor textColor {colors.rail} {colors.rail-mute} backgroundColor {colors.rail-line} backgroundColor textColor {colors.paper} {colors.ink} backgroundColor textColor {colors.pane} {colors.ink-soft} backgroundColor {colors.rule} backgroundColor {colors.rule-strong} backgroundColor {colors.ring} backgroundColor textColor {colors.pane} {colors.ok} backgroundColor textColor {colors.pane} {colors.bad} backgroundColor {colors.night-line} backgroundColor textColor {colors.rail} {colors.night-bad} backgroundColor textColor rounded {colors.pane} {colors.ink} {rounded.md} backgroundColor height {colors.pane} 52px backgroundColor textColor {colors.heat} {colors.heat-ink} backgroundColor textColor {colors.heat-wash} {colors.heat-ink} backgroundColor textColor rounded {colors.rail} {colors.rail-text} {rounded.md} backgroundColor textColor rounded height {colors.night-field} {colors.rail-text} {rounded.sm} 40px

Overview

Night instrument. A precise operator console for classifying pull requests: a graphite rail that wraps a light working pane, cool-gray type, and one heat signal. It is not a dashboard, not a GitHub clone, not newsprint, and not a generic AI product.

The operator sits in a queue for hours. The room is quiet, dense, and technical. The brand is the real Corbits mark plus materials (graphite, cool paper, heat), never a letter stamp, glass, or personality copy.

Colors

Materials, not decoration:

• Rail (#0a0c11): Graphite tool body. The sidebar, toasts, mobile nav, and the login room. It wraps the working pane with an 8px gutter.
• Pane (#f6f7f9): The working surface inside the rail. Inside the pane, the paper token resolves to pane.
• Paper (#e5e7ed): The room outside the pane, such as the Connect task.
• Sheet (#fdfdfe): Controls and briefing cells lifted off the pane.
• Inset (#d4d7e0): Grouped fields, hover and pressed states, code wash.
• Ink (#12141a): Primary text, never pure black. ink-mute (#575d68) meets 4.5:1 on paper for supporting copy.
• Rule (#c3c7d1) and rule-strong (#959ba8): Hairline structure and control borders.
• Heat (#d44510): Attention only: the primary action, the current nav item, P0, and the human-gate mark. Text on heat uses heat-ink, not white.
• Ok (#1d6b42) and bad (#b1352c): Status, always paired with a readable label. Never "reject".
• Night tokens: Fields and errors on the graphite login room (night-field, night-line, night-bad).

Typography

One family carries the UI: Red Hat Display, a variable font (300 to 900), self-hosted. System sans is a fallback only.

Space Mono is for identifiers only: repository owner/name, SHAs, keys, posted comments, and diffs. It is never a technical costume on labels or body text.

The scale runs 28px page title, 18px section title, 14px body and lede, 13px supporting text, and 12px meta, with a 14px root. Mobile page titles drop to 1.75rem. Counts use tabular numerals. Everything is sentence case.

Layout

• Desktop is a full-bleed instrument: a 212px rail (64px collapsed) plus the pane filling the rest of the viewport. There is no centered content island.
• The pane inset is 24px on a 4px rhythm.
• The top bar is 52px and opaque.
• Lists, lanes, and rows span the pane. Form controls keep a readable measure (about 36rem), left-aligned.
• On a pull request, a 44px icon sliver sits on the pane's right edge and slides open to 240px over the canvas.
• At 720px and below, the rail hides, a 68px graphite bottom nav (icon plus label) takes over, and the document scrolls.
• Login and Connect are centered tasks in a full room, not portal pages.

Elevation & Depth

Depth comes from material, not shadow: the light pane sits inside the graphite rail. Structure is hairlines, not nested cards. Shadows are rare and reserved for the toast, menus, dialogs, and the open sliver (0 8px 24px at 14% graphite). There is no glass and no hard offset shadow.

Shapes

• Controls use 4px radii; the pane, dialogs, menus, and toasts use 8px.
• Pills appear only on compact chips and counts.
• Human-gated rows carry a 6px heat square, never a colored card border.
• Focus is a 2px heat ring with a 2px offset.

Components

• Buttons: one size (40px desktop, 44px touch) and one radius. Clusters align right. One heat primary per region. A disabled primary uses inset and mute ink, never faded heat.
• Pull request actions: Confirm and Dismiss appear only when an approval is pending. Secondary GitHub writes sit in a More menu.
• Board rows: title, then a mono identity line with state, owner, and age, then why and next action. Hover is a sheet wash.
• Fields: sheet background and strong rule; the border turns heat on focus.
• Tabs: selected tabs are underlined in heat.
• Toast: rail surface, status role.
• Empty states: a left-aligned mute sentence that names the condition.
• Mark: the real Corbits SVG at 28px (40px on login). Never a letter tile.
• Motion: 180ms cubic-bezier(0.2, 0.8, 0.2, 1) on hover, focus, color, and transform. Never animate width, height, or margin. The catching-up pulse is the only looping state.

Do's and Don'ts

Do:

• Use plain GitHub language: repository, pull request, review, webhook, GitHub App.
• Say what was inspected: the pull request, the linked issue, surrounding GitHub data, or the code versus CI.
• Present the score as confidence against the floor.
• Make errors name the failure and the next step.
• Use lucide icons at 1.7 stroke.

Don't:

• Put kickers or eyebrows above headings.
• Build page structure from same-size icon, heading, and text card grids, or nest cards.
• Use hero metric or KPI templates.
• Use gradient text, decorative glass, colored borders wider than 1px, or hard offset shadows.
• Use emoji or unicode as icons.
• Name a judge (no "the model", no product codenames) on pull request or check surfaces.
• Use "secure", "intelligent", "cockpit", "instrument", or "control plane" in the UI.
• Collect App ID, private key, client secret, or webhook secret anywhere except the GitHub App connection form.