orbit-notion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orbit · Notion Briefing

Orbit · Notion 简报

Single-connector Orbit template scoped to Notion. The briefing renders as a real Notion page — same chrome, same block primitives, same typography.

限定为Notion的单连接器Orbit模板。简报会渲染为真实的Notion页面 — 相同的页面框架、相同的块基础元素、相同的排版。

⚠️ 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 H2 sections in the same order (文档变更 → 评论 / @ 提及 → 数据库变更)
Same bullet rows / comment cards / database table columns and rows
Same callout(s) and toggle block with the same copy
Same property chips at the top (Type / Owner / Created)
Same
```
<script>
```
block at the end (page-link → notion.so injection)

Step 3. You may refresh mock values (doc titles, mentioned people, edit timestamps) so they read as "today", but you must not invent extra blocks: no extra H2 sections, no extra callouts, no extra database columns, no extra emoji decorations. If a detail is not 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.

步骤1. 在编写任何输出之前，打开并阅读此文件夹中附带的

example.html

。该文件是标准设计 — 你的任务是重现它，而非重新诠释。

步骤2. 1:1镜像示例的结构：

相同的DOM层级和类名
相同顺序的H2章节（文档变更 → 评论 / @提及 → 数据库变更）
相同的项目符号行/评论卡片/数据库表格列和行
相同的提示框和折叠块，包含相同的文案
顶部相同的属性芯片（类型 / 所有者 / 创建时间）
末尾相同的
```
<script>
```
块（page-link → notion.so 注入）

步骤3. 你可以更新模拟值（文档标题、提及人员、编辑时间戳）使其显示为“今日”，但不得添加额外的块：不得新增H2章节、额外提示框、额外数据库列或额外表情装饰。如果某个细节不在

example.html

中，则不应出现在你的输出里。

以下章节是令牌和视觉语言的参考 — 并非扩展页面的许可。

⚠️ Design system policy

⚠️ 设计系统规则

This skill ships with its own complete visual language baked into

example.html

(Notion's native page chrome and block system). 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 Notion page, not as the user's brand.

此Skill附带了完整的视觉语言，内置在

example.html

中（Notion的原生页面框架和块系统）。不得要求用户选择或附加设计系统，且不得将任何外部DESIGN.md令牌注入输出。

如果当前项目已附加设计系统，忽略它。
如果用户提供品牌令牌或Figma文件，忽略它们。
仅使用
```
example.html
```
中定义的颜色/字体/圆角。

这是硬性约束：简报必须看起来像真实的Notion页面，而非用户的品牌风格。

Canvas tokens (use these exact values)

画布令牌（请使用以下精确值）

ink (Notion black):  #37352F
text-secondary:      #787774
gray bg (block):     #F1F1EF
gray border:         #E3E2E0
gray light:          #F7F6F3
gray cover:          #E9E5E0
white surface:       #FFFFFF

blue:                #2383E2
blue bg:             #D3E5EF
blue text:           #24548A
green:               #4DAB60
green bg:            #DBEDDB
green text:          #1D6B2D
orange bg:           #FADEC9
orange text:         #93531D
yellow bg:           #FDE68A
callout bg:          #F1F1EF

Type stack:

-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'

Page title: 40px bold
H2: 24px semibold with 1.6em top margin
Body: 16px / line-height 1.5
Captions / breadcrumbs: 14px

Notion always uses generous left/right margins; center the content column at ~720px max width with the rest as

--gray-light

rails.

ink (Notion黑色):  #37352F
text-secondary:      #787774
gray bg (块):     #F1F1EF
gray border:         #E3E2E0
gray light:          #F7F6F3
gray cover:          #E9E5E0
white surface:       #FFFFFF

blue:                #2383E2
blue bg:             #D3E5EF
blue text:           #24548A
green:               #4DAB60
green bg:            #DBEDDB
green text:          #1D6B2D
orange bg:           #FADEC9
orange text:         #93531D
yellow bg:           #FDE68A
callout bg:          #F1F1EF

字体栈：

-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'

页面标题：40px 粗体
H2：24px 半粗体，上边距1.6em
正文：16px / 行高1.5
说明文字/面包屑：14px

Notion始终使用宽松的左右边距；内容列居中，最大宽度约720px，其余部分为

--gray-light

侧边栏。

Page sections (top to bottom)

页面章节（从上到下）

Top app bar — full-width, white, 45px tall. Left: Notion-style sidebar toggle (
```
«
```
), then breadcrumb path
```
Open Orbit › Daily Briefing › May 6
```
. Breadcrumb separators in
```
text-secondary
```
. Far right: 🔍 search, ⏱ updates, ⚙ share, ⋯.
Faint left sidebar (optional, may render as a 1px hairline rail) to imply Notion's workspace sidebar without rendering it in full.
Cover image — full-width strip ~200px tall, gray cover color
```
#E9E5E0
```
, optional small "Add cover" hint hidden in the corner.
Page header inside content column — emoji icon (60px) at top, then page title
```
早安简报 · 2026 年 5 月 6 日 (Wed)
```
in 40px bold, then a row of property chips (gray):
```
🗂 Type: Daily Briefing  ·  👤 Owner: Eli  ·  📅 Created: 06:42
```
.
Synopsis paragraph — one sentence, italic muted: "Auto-generated by Open Orbit from yesterday's Notion activity. 12 events across 8 docs and 2 databases."
H2 section: 📝 文档变更 — list of bullet rows. Each bullet:
```
📄 [doc title]
```
(bold, hover-link blue), then a soft-block child showing
```
[author avatar] [author] edited "[snippet of changed text]"
```
with
```
· 8h ago
```
muted on the right.
H2 section: 💬 评论 & @ 提及 — list of comment cards. Each card:
```
gray bg #F1F1EF
```
rounded 6px, 12px padding;
```
[avatar] [author] · in [doc title]
```
, then comment body in 15px regular, then a tiny "Reply" link. Highlight @-mentions with
```
blue text #24548A
```
underlined.
Callout block — required.
```
gray bg
```
, 16px padding, rounded 6px, left side has a 24px emoji (e.g. 🌟 or 💡). Body: "Eli, 你昨天还有 3 条评论没回 — 周三例会前看一下?"
H2 section: 🗄 数据库变更 — render as a Notion database table view inline. Columns:
```
Name | Status | Updated by | Updated
```
. Each cell has
```
gray border
```
1px, slight left/right padding, row height ~38px. Header row uses 12px caps
```
text-secondary
```
. Status column uses colored tag pills with the green/blue/orange bg + text colors above (
```
Done
```
green,
```
In Progress
```
blue,
```
Triage
```
orange,
```
Backlog
```
gray).
Toggle block — required. Show a
```
▶ See 4 more changes
```
collapsed toggle that, when expanded, would reveal additional rows. Render it collapsed (just the chevron + label).
Closing callout — second callout at the bottom acting as a CTA:
```
🚀 在 Open Design 里继续处理 →
```
linked back to the OD project.

顶部应用栏 — 全宽、白色、高45px。左侧：Notion风格的侧边栏切换按钮（
```
«
```
），然后是面包屑路径
```
Open Orbit › 每日简报 › 5月6日
```
。面包屑分隔符使用
```
text-secondary
```
颜色。最右侧：🔍 搜索、⏱ 更新、⚙ 分享、⋯。
浅色左侧边栏（可选，可渲染为1px细边框） 用于暗示Notion的工作区侧边栏，但无需完整渲染。
封面图片 — 全宽条带，高约200px，灰色封面色
```
#E9E5E0
```
，角落可隐藏一个小的“添加封面”提示。
内容列内的页面标题 — 顶部为60px表情图标，然后是40px粗体的页面标题
```
早安简报 · 2026年5月6日（周三）
```
，接着是一行灰色属性芯片：
```
🗂 类型: 每日简报 · 👤 所有者: Eli · 📅 创建时间: 06:42
```
。
摘要段落 — 一句话，斜体灰色： "由Open Orbit根据昨日Notion活动自动生成。涵盖8个文档和2个数据库中的12项事件。"
H2章节：📝 文档变更 — 项目符号行列表。每个项目符号：
```
📄 [文档标题]
```
（粗体，悬停链接为蓝色），然后是一个软块子项，显示
```
[作者头像] [作者] 编辑了 "[变更文本片段]"
```
，右侧灰色显示
```
· 8小时前
```
。
H2章节：💬 评论 & @提及 — 评论卡片列表。每个卡片：灰色背景
```
#F1F1EF
```
，圆角6px，内边距12px；
```
[头像] [作者] · 在 [文档标题] 中
```
，然后是15px常规字重的评论正文，接着是一个小的“回复”链接。使用蓝色文本
```
#24548A
```
并下划线高亮@提及内容。
提示框块 — 必填。灰色背景，内边距16px，圆角6px，左侧有一个24px表情（例如🌟或💡）。正文： "Eli，你昨天还有3条评论未回复 — 周三例会前查看一下？"
H2章节：🗄 数据库变更 — 内联渲染为Notion数据库表格视图。列：
```
名称 | 状态 | 更新者 | 更新时间
```
。每个单元格有1px灰色边框，左右有少量内边距，行高约38px。表头行使用12px大写字母，颜色为
```
text-secondary
```
。状态列使用彩色标签药丸，采用上述绿色/蓝色/橙色背景+文本颜色（“已完成”绿色，“进行中”蓝色，“待分类”橙色，“待办”灰色）。
折叠块 — 必填。显示一个折叠状态的
```
▶ 查看更多4项变更
```
折叠块，展开后会显示额外行。渲染为折叠状态（仅显示箭头+标签）。
结尾提示框 — 底部的第二个提示框作为行动号召：
```
🚀 在Open Design中继续处理 →
```
链接回OD项目。

Block formatting rules

块格式规则

Heading-block hover icon (
```
+ ⋮⋮
```
) can be hinted but kept subtle.
Use the exact Notion bullet glyph (
```
•
```
) and indentation (24px).
Database tags must be Notion's native pill shape: 2-em radius, 6×4 padding, 12px medium weight.
Avatars: 18px circles with letter + Notion-style soft pastel bg.

标题块悬停图标（
```
+ ⋮⋮
```
）可暗示但需保持低调。
使用精确的Notion项目符号符号（
```
•
```
）和缩进（24px）。
数据库标签必须是Notion原生的药丸形状：2em圆角，6×4内边距，12px中等字重。
头像：18px圆形，包含字母+Notion风格柔和淡色背景。

Implementation constraints (paired do / don't)

实现约束（注意事项）

Don't	Do
Borrow chrome from another connector (Material / Linear rows / GitHub pills)	Stay 100% in Notion's block primitives — H1 / H2 / bullet / callout / toggle / database table
Use lorem ipsum	Write real-shaped Notion copy: doc titles like `Q3 OKR` , `Onboarding 文档` , `团队周报` ; people like Marie / Bob / Lily; comments like "这一段需要你确认"
Mix serif typography in body	Notion is sans only — use the system stack with emoji fallbacks
Render avatars as squares	Always circles, 18px with letter + Notion-style soft pastel bg
Add shadows or gradients	Flat surfaces only; differentiate blocks with `#E3E2E0` 1px borders or `#F1F1EF` block backgrounds
Use loud accent colors outside the Notion palette	Use only the documented Notion blue / green / orange / yellow tag hues
Replace Notion's gray callout bg with a solid color	Callouts must use `#F1F1EF` gray bg + 24px emoji on the left
Use placeholder doc names like "Document 1"	Use real-shaped Notion titles in CJK or English that read like a real workspace

禁止	允许
借用其他连接器的框架（Material / Linear行 / GitHub药丸）	完全使用Notion的块基础元素 — H1/H2/项目符号/提示框/折叠块/数据库表格
使用占位文本	编写符合Notion风格的真实文案：文档标题如 `Q3 OKR` 、 `入职文档` 、 `团队周报` ；人员如Marie/Bob/Lily；评论如“这一段需要你确认”
正文中混合衬线字体	Notion仅使用无衬线字体 — 使用系统字体栈并包含表情回退
将头像渲染为方形	始终使用圆形，18px，包含字母+Notion风格柔和淡色背景
添加阴影或渐变	仅使用平面；通过1px `#E3E2E0` 边框或 `#F1F1EF` 块背景区分不同块
使用Notion调色板以外的醒目强调色	仅使用文档中指定的Notion蓝色/绿色/橙色/黄色标签色调
用纯色替换Notion的灰色提示框背景	提示框必须使用 `#F1F1EF` 灰色背景 + 左侧24px表情
使用“文档1”这类占位文档名称	使用中日韩或英文的真实Notion标题，使其看起来像真实工作区