orbit-notion

Orbit · Notion Briefing

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

⚠️ 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.

Identity guard. Treat every person name or handle in example.html as mock content only. Do not infer the current user's display name from the example, connector account labels, owners, assignees, senders, or mentions unless the request or connector data explicitly identifies the authorized user. If no explicit current-user name is available, use neutral wording such as you, your, current user, 我, or 你.

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 (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.

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.

Page sections (top to bottom)

1. 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, ⋯.

2. Faint left sidebar (optional, may render as a 1px hairline rail) to imply Notion's workspace sidebar without rendering it in full.

3. Cover image — full-width strip ~200px tall, gray cover color #E9E5E0, optional small "Add cover" hint hidden in the corner.

4. 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: Current user · 📅 Created: 06:42.

5. Synopsis paragraph — one sentence, italic muted: "Auto-generated by Open Orbit from yesterday's Notion activity. 12 events across 8 docs and 2 databases."

6. 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.

7. 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.

8. Callout block — required. gray bg, 16px padding, rounded 6px, left side has a 24px emoji (e.g. 🌟 or 💡). Body: "你昨天还有 3 条评论没回 — 周三例会前看一下?"

9. 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).

10. 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).

11. Closing callout — second callout at the bottom acting as a CTA: 🚀 在 Open Design 里继续处理 → linked back to the OD project.

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.

Implementation constraints (paired do / don't)