Orbit · GitHub Briefing

Single-connector Orbit template scoped to GitHub.

⚠️ Source-of-truth protocol (read this first)

Step 1. Open and read the shipped example.html in this folder before writing any output. That file is the canonical design — your job is to reproduce it, not reinterpret it.

Step 2. Mirror the example's structure 1:1:

• Same DOM hierarchy and class names
• Same nav-bar items (and only those)
• Same left-rail filter list (and only those)
• Same event groups in the same order, with the same row count
• Same diff-preview placement, same CI-fail block, same attention block
• Same <script> block at the end (filter / hover / link injection)

Step 3. You may refresh mock values (PR numbers, titles, times, CI commit messages) so they read as "today", but you must not invent extra UI: no extra rail entries, no extra notifications, no extra event types, no extra badges, no extra chrome ornaments. If something is not already present in example.html, it does not belong in your output.

The sections below are a reference for tokens and visual language — not a license to extend the page.

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html (GitHub's Primer chrome). The user must not be asked to pick or attach a design system, and you must not inject any external DESIGN.md tokens into the output.

• If the active project has a design system attached, ignore it.
• If the user supplies brand tokens or a Figma file, ignore them.
• Use exclusively the colors / fonts / radii defined in example.html.

This is a hard constraint: the briefing must read as a real GitHub page, not as the user's brand.

Canvas tokens (use these exact values)

page bg:           #f6f8fa
card bg:           #ffffff
nav bar:           #24292f  /* GitHub black header */
nav text:          #ffffff
ink:               #1f2328
muted:             #59636e
border:            #d0d7de
hairline:          rgba(208,215,222,0.32)

state · open:      #1a7f37
state · merged:    #8250df
state · closed:    #cf222e
state · draft:     #6e7781

attention bg:      #fff8c5  /* yellow review-request block */
attention border:  #d4a72c
ci-fail bg:        #ffebe9
ci-fail border:    #cf222e

Type stack:

• -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• Sizes: nav 14px, headings 16/20px, body 14px, meta 12px

Page sections

1. Top nav bar — full-width, dark (#24292f), 60px tall. Left: octocat SVG logo (white, 32px) + search input (rgba(255,255,255,0.08) background, white placeholder ghosted). Right: + plus dropdown, notifications bell with red dot if unread > 0, round avatar.

2. Header row — light bar under the nav, 56px. Left: page breadcrumb Inbox · Daily Digest · May 6. Right: filter dropdown chips (Type ▾ Date ▾ Status ▾).

3. Two-pane main:

   • Left rail (240px): vertical filter list. Items: Inbox · Saved · Done · All then divider then Participating · Mentions · Review requests · Assigned · Comments. Active item: light gray pill background.
   • Main pane (flex 1): event stream grouped by category.

4. Category groups in main pane (in this order):

   • Review requests waiting on you — yellow attention block (bg #fff8c5, 1px border #d4a72c). Each row: avatar + repo path + PR title + reviewer-state row of small dots (✓ green / ⏳ yellow / ○ gray) + "X of Y reviewers" + age.
   • CI / Checks — each failed run is a red-bordered card (border-color #cf222e, bg #ffebe9) with a ✗ red glyph, run name, branch name (mono), commit message, age.
   • Issues assigned to you — plain rows, status circle (open green / closed red), title, repo path, age, label pills.
   • Activity — quieter rows for merges/closes; muted text, small merged purple pill or closed red pill.

5. Optional PR-diff preview — inline under one PR row, show 2–3 lines of mock code in a 12px monospace block with red − / green + prefixed lines and #ffebe9 / #dafbe1 row tints.

6. Footer — single line, 12px muted: Open Orbit · auto-generated 06:42 · GitHub only.

Pill / chip rules

• State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding. Foreground white, background by state color above.
• Labels (bug, p1, frontend …): GitHub label rounded pill, each with its own arbitrary color. Use varied real-world label hues.
• Reviewer dots: 8px filled circles, 2px gap, with ✓ ⏳ ○ glyphs only if you can keep them visually subtle.

Implementation constraints (paired do / don't)

Don't	Do
Mix light and dark themes	Stay on the light Primer theme (#f6f8fa page bg, #ffffff cards)
Use non-GitHub typography	Use -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif exclusively
Render avatars as squares or rounded squares	Always circles, with overlap ≤ 6px for reviewer stacks
Use shadows / gradients / glows on chrome	Flat surfaces; differentiate with #d0d7de 1px borders
Use lorem ipsum	Write real-shaped GitHub copy: PR titles like feat: orbit briefing card, branches like chore/upgrade-deps, commit subjects under 72 chars
Render a CI failure as a normal row	Wrap in a red-bordered card (#cf222e border, #ffebe9 bg) with a red ✗ glyph and run name
Render a review request as a normal row	Sit it in the yellow attention block (#fff8c5 bg, #d4a72c border) with reviewer status dots row
Use placeholder repo names like org/repo	Use nexu-io/open-design (this org's actual primary repo)
Pluck arbitrary label colors	Use realistic dev-team hues — bug red, enhancement blue, documentation light blue, frontend purple