---
name: nexu-io/orbit-notion
source: https://app.decimal.ai/s/nexu-io-orbit-notion@4/SKILL.md
source_sha256: 1a8893fe032a
---

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

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: Eli  ·  📅 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:
   *"Eli, 你昨天还有 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:
    `🚀 在 OpenDesign 里继续处理 →` 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)

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