orbit-linear

Orbit · Linear Briefing

Single-connector Orbit template scoped to Linear.

⚠️ 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 top toolbar (breadcrumb + view switcher + cycle strip + theme toggle), exactly those items
• Same left-rail entries in the same order
• Same issue groups ("Needs your attention" → "Updated yesterday") with the same row count and same expanded-by-default behavior
• Same priority-bar / status-dot system
• Same <script> block at the end (toggle / theme / keyboard / Linear link injection)

Step 3. You may refresh mock values (issue identifiers, titles, labels, ages, assignees) so they read as "today", but you must not add extra rail entries, extra groups, extra fields in the preview pane, or any chrome ornaments not already in example.html.

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 (Linear's signature compact UI). 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 Linear page, not as the user's brand.

Canvas tokens — light theme (default to ship)

page bg:           #f4f5f6
surface:           #ffffff
ink:               #1b1c1f
ink-2:             #37393e
ink-3 (muted):     #6c6f78
ink-4:             #9ea1a9

border:            rgba(0,0,0,0.06)
border-card:       rgba(0,0,0,0.08)
border-strong:     rgba(0,0,0,0.12)
hover row:         rgba(0,0,0,0.025)
active row:        rgba(0,0,0,0.05)

accent:            #5e6ad2
accent-bg:         rgba(94,106,210,0.06)

attention accent:  #c77d1a   /* "needs attention" group */
attention bg:      rgba(212,148,14,0.06)

shadow-card:       0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05)

Status dot palette (must use exactly these):

backlog:    #9ea1a9   /* gray, hollow ring */
todo:       #d4940e   /* yellow, dashed ring */
progress:   #2b80c5   /* blue, partial ring */
review:     #8759c7   /* purple, partial ring */
done:       #1a8d3a   /* green, filled */
canceled:   #6c6f78   /* gray with strike */

Priority icon = 4 small vertical bars, height ascending. Filled bars indicate level: 0 None → 4 Urgent. Urgent uses #d4513a; High uses #c77d1a; Medium/Low use #505259.

Type stack:

• 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
• Mono: 'Berkeley Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace
• Sizes: nav 13px, row title 13.5px, meta 12px, headers 11px caps with letter-spacing 0.04em

Page sections

1. Top toolbar — single row, 44px tall, no shadow, hairline border-bottom. Left: breadcrumb Orbit › Daily Digest › May 6 (13px, …›… separators in ink-4). Then a thin divider, then ▼ My issues view switcher. Right: 🔍 search, + new, ▦ display options, avatar.

2. Cycle progress strip — slot to the right of the breadcrumb area, one line: Cycle 12 · 60% complete · 3 days left. Render as 11px caps with a tiny inline progress bar (60px wide, 4px tall, accent fill).

3. Three-column main:

   • Left nav (240px): vertical, no background — items at 13px. Sections: Inbox · My issues · Active · Backlog · All issues, then a divider, then 📋 Triage · 🚫 Canceled · ✅ Completed. Active row: accent-bg background, accent ink. Bottom: a tiny Open Orbit · auto-generated 06:42 muted line.
   • Issue list (flex 1): two grouped sections.
     • Needs your attention — header in attention accent 11px caps; group block has attention bg very subtle background. Rows include: assigned + stale issues, high/urgent priority.
     • Updated yesterday — header 11px caps muted; rows of status changes and completions. Each row is one tight line: [priority bars] [identifier ENG-148] [status dot] [title……………] [labels] [cycle chip] [assignee avatar] Row height ~36px. Hover = hover row color.
   • Issue preview (360px right): the pre-selected issue. Title large (16px medium); ID + status pill below; description paragraphs; an Activity stream (small avatar + verbed action + timestamp); Labels chips at bottom; Cycle chip; Assignees row.

Identifier / chip rules

• Issue IDs (e.g. ENG-148) are mono, 12px, ink-3.
• Labels: rounded pill with a 4px colored dot, label text, optional ✕. Hue per label is arbitrary, choose realistic dev-team colors.
• Cycle chip: small rounded box Cycle 12 with hairline border.
• Status dots: 14px circles with internal ring/fill per state above.
• Priority bars: 4 short vertical bars right of identifier, fill bars per level.

Implementation constraints (paired do / don't)