Back to Details

orbit-linear

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Orbit · Linear Briefing

Orbit · Linear 简报

Single-connector Orbit template scoped to Linear.
限定为Linear的单连接器Orbit模板。

⚠️ 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.
步骤1. 在编写任何输出之前，打开并阅读此文件夹中附带的
example.html
文件。该文件是标准设计模板 — 你的任务是复刻它，而非重新解读。
步骤2. 1:1镜像示例的结构：
  • 相同的DOM层级和类名
  • 相同的顶部工具栏（面包屑 + 视图切换器 + 周期进度条 + 主题切换），完全一致的组件
  • 相同的左侧导航条目，顺序一致
  • 相同的工单分组（“需你关注” → “昨日更新”），行数相同，默认展开行为一致
  • 相同的优先级栏/状态点系统
  • 末尾相同的
    <script>
    代码块（切换/主题/快捷键/Linear链接注入）
步骤3. 你可以更新模拟值（工单标识、标题、标签、时长、经办人）使其显示为“今日”，但不得添加额外的导航条目、额外分组、预览面板中的额外字段，或任何
example.html
中未包含的界面装饰。
以下章节是令牌与视觉语言的参考 — 并非扩展页面的许可。

⚠️ 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.
此Skill附带的
example.html
中内置了一套完整的视觉语言（Linear标志性的紧凑UI）。不得要求用户选择或附加设计系统，也不得将任何外部DESIGN.md令牌注入输出内容。
  • 如果当前项目已附加设计系统，忽略它。
  • 如果用户提供品牌令牌或Figma文件，忽略它们。
  • 仅使用
    example.html
    中定义的颜色/字体/圆角。
这是硬性约束：简报必须看起来像真实的Linear页面，而非用户的品牌页面。

Canvas tokens — light theme (default to ship)

Canvas令牌 — 浅色主题（默认发布版本）

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 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)
状态点调色板（必须严格使用以下颜色）：
backlog:    #9ea1a9   /* 灰色，空心环 */
todo:       #d4940e   /* 黄色，虚线环 */
progress:   #2b80c5   /* 蓝色，半填充环 */
review:     #8759c7   /* 紫色，半填充环 */
done:       #1a8d3a   /* 绿色，全填充 */
canceled:   #6c6f78   /* 灰色带删除线 */
优先级图标 = 4个小垂直条，高度递增。 填充的条表示优先级：0 无 → 4 紧急。 紧急使用
#d4513a
；高优先级使用
#c77d1a
；中/低优先级使用
#505259
。
字体栈：
  • 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
  • 等宽字体：
    'Berkeley Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace
  • 字号：导航13px，行标题13.5px，元信息12px，标题11px大写，字间距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.
  1. 顶部工具栏 — 单行，高44px，无阴影，底部细边框。 左侧：面包屑
    Orbit › Daily Digest › May 6
    （13px，
    …›…
    分隔符为
    ink-4
    颜色）。然后是细分隔线，接着是
    ▼ My issues
    视图切换器。 右侧：
    🔍 search
    、
    + new
    、
    ▦ display options
    、头像。
  2. 周期进度条 — 位于面包屑区域右侧，单行文本：
    Cycle 12 · 60% complete · 3 days left
    。渲染为11px大写文本，附带一个小型内嵌进度条（宽60px，高4px，强调色填充）。
  3. 三列主内容区：
    • 左侧导航（240px）：垂直布局，无背景 — 条目字号13px。 分区：
      Inbox · My issues · Active · Backlog · All issues
      ， 然后是分隔线，接着是
      📋 Triage · 🚫 Canceled · ✅ Completed
      。 当前激活行：背景为
      accent-bg
      ，文字为
      accent
      颜色。 底部：一行小型 muted 文本
      Open Orbit · auto-generated 06:42
      。
    • 工单列表（弹性占满剩余空间）：两个分组区域。
      • 需你关注 — 标题为
        attention accent
        颜色的11px大写文本； 分组块背景为非常淡的
        attention bg
        颜色。 行内容包括：已分配+停滞的工单、高/紧急优先级工单。
      • 昨日更新 — 标题为11px大写的muted文本；行内容为状态变更和已完成工单。 每行是紧凑的一行： 
        [优先级条] [工单标识 ENG-148] [状态点] [标题……………] [标签] [周期芯片] [经办人头像]
        行高约36px。悬停时显示
        hover row
        颜色。
    • 工单预览（右侧360px）：预选中的工单。 大标题（16px中等字重）；下方是工单ID+状态胶囊；描述段落；活动流（小型头像+动作动词+时间戳）；底部的标签芯片；周期芯片；经办人行。

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.
  • 工单ID（如
    ENG-148
    ）为等宽字体，12px，
    ink-3
    颜色。
  • 标签：圆角胶囊，带4px彩色圆点，标签文本，可选✕。 标签的色调可任意选择，需符合开发团队的真实配色。
  • 周期芯片：小型圆角框
    Cycle 12
    ，带细边框。
  • 状态点：14px圆形，内部环/填充样式符合上述状态定义。
  • 优先级条：标识右侧的4个短垂直条，根据优先级填充对应数量的条。

Implementation constraints (paired do / don't)

实现约束（禁止/允许事项）

Don'tDo
Add shadows beyond the listed 
shadow-card
token		Use only 
0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05)
for cards
Use bright colors outside the status paletteUse only the documented status hues (Backlog gray / Todo yellow / Progress blue / Review purple / Done green) and the 
#5e6ad2
accent
Use sans-serif typography that isn't InterUse 
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
Use airy row heightsKeep rows under 40px (target ~36px) — Linear is signature-dense
Use lorem ipsumWrite real-shaped Linear copy: identifiers like 
ENG-148
, 
DES-22
, 
INF-9
; cycle names like 
Cycle 12
; titles like "Auth middleware refactor"
Render avatars as squaresAlways circles, 18–24px
Ship the dark themeRender the light theme — 
#f4f5f6
page, 
#ffffff
cards
Use placeholder team prefixes like 
T-1
Use real-shaped team prefixes: 
ENG / DES / INF / OPS
禁止允许
添加超出
shadow-card
令牌定义的阴影		仅对卡片使用
0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05)
阴影
使用状态调色板之外的亮色仅使用文档中规定的状态色调（待办灰色/待处理黄色/进行中蓝色/审核紫色/已完成绿色）以及
#5e6ad2
强调色
使用非Inter的无衬线字体使用
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
使用宽松的行高行高保持在40px以下（目标约36px）— Linear以紧凑为标志性特点
使用Lorem Ipsum占位文本编写符合Linear风格的真实文本：如
ENG-148
、
DES-22
、
INF-9
这类标识；
Cycle 12
这类周期名称；“Auth中间件重构”这类标题
将头像渲染为方形始终使用圆形头像，尺寸18–24px
发布深色主题渲染浅色主题 — 页面背景
#f4f5f6
，卡片背景
#ffffff
使用
T-1
这类占位团队前缀		使用符合真实风格的团队前缀：
ENG / DES / INF / OPS