Orbit · Gmail Briefing

Single-connector Orbit template scoped to Gmail. The briefing renders as the Orbit Daily Digest email already opened inside Gmail's reading view — Gmail top header + the email chrome (toolbar / subject / sender / digest body / reply bar). There is no left rail, no inbox list, and no three-pane layout.

⚠️ 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: <header> (Gmail top bar) →

<main class="digest-wrap"> → <div class="email-chrome"> → toolbar / subject / sender row / digest body / reply bar.

• The Gmail top header has only the elements present in the example

(hamburger / wordmark / search bar / help / settings / app launcher / avatar). Do not add a left rail (no Compose button, no system labels, no Categories tabs, no colored label list).

• Do not render an inbox list of other emails. Only the opened

digest email is shown.

• Same digest-body sections in the same order: greeting → summary

strip → 需要处理 → 值得关注 → 仅供知悉 → digest footer.

• Same reply bar at the bottom (回复 / 全部回复 / 转发).
• Same <script> block at the end (action-btn / reply-btn link

injection).

Step 3. You may refresh mock copy (sender names, subjects, summary text, times) so it reads as "today", but you must not invent extra UI: no inbox listing, no left rail, no Categories tab strip, no extra digest sections, no chrome ornaments. If a detail is not already 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 (Gmail / Google Sans / Material chrome). 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 Gmail page, not as the user's brand.

Canvas tokens (use these exact values)

page bg:           #f6f8fc
surface:           #ffffff
border:            #e0e0e0
text:              #202124
text-secondary:    #5f6368
text-muted:        #80868b
surface-hover:     #f1f3f4

red (Gmail):       #D93025  /* Compose, important markers, accent */
blue:              #1a73e8  /* CTA / link */
yellow:            #f4b400  /* important ★ */
green:             #0f9d58
search bar bg:     #eaf1fb  /* light blue-tinted pill */

Type stack:

• 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
• Logo wordmark: Google Sans 22px medium
• Body: 14px / line-height 20px
• Email preview: 13px

Page sections (top to bottom — the page is one column, not a 3-pane app)

1. Gmail top header (<header>) — full width, white.

Left: hamburger (☰) + Gmail wordmark (Gmail, first G red). Center: rounded search bar (#eaf1fb bg, search icon left, settings icon right, placeholder 搜索邮件). Right: ❓ help, ⚙ settings, ▦ Google apps launcher, round avatar.

1. Email chrome (<main class="digest-wrap"> <div class="email-chrome">)

— the opened email lives directly under the header. No left rail, no inbox list. Sub-blocks in order:

a. Email toolbar — back / archive / delete / mark unread / label / spacer / prev / next.

b. Email subject area — <h1 class="email-subject"> with the digest subject (e.g. ☀ Eli, 你昨天的 6 封重要邮件 — Open Orbit Daily) followed by an inline Orbit tag.

c. Sender row — round avatar O + Open Orbit <orbit@opendesign.local> + 收件人 我 ▾ + date right-aligned + reply icon + more icon.

d. Digest body (<div class="digest-body">):

• greeting paragraph
• summary strip — 3 numeric cells (urgent / 值得关注 / 仅供知悉)
• section 🔴 需要处理 — cards with action-btn primary
• section 🟡 值得关注 — cards with action-btn ghost
• section ⚪ 仅供知悉 — cards
• digest-footer micro-tag

e. Reply bar — bottom row with 回复 / 全部回复 / 转发 buttons.

Pill / icon rules

• Avatars: round, 40px+ for sender, 32px for card, 28px for inline.
• Labels / tags: small rounded pills with no fill (dot + text) only

where they appear in the example.

• The single yellow important star (in the subject area or as a tag)

belongs to the Orbit digest only.

Implementation constraints (paired do / don't)

| Don't | Do | |---|---| | Render a left rail (Compose / system labels / colored labels) | Skip the rail entirely; the page is single-column under the header | | Render an inbox list of other emails | Show only the opened Orbit Daily Digest email | | Render a Categories tab strip (主要 / 社交 / 推广) | Skip it; the digest occupies the reading view directly | | Use non-Google typography | Use 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif | | Add drop shadows on the Gmail chrome | Flat surfaces; only the subtle Material 1 elevation when an element is focused | | Render avatars as squares | Always circles — sender 40px, card 32px, inline 28px | | Use lorem ipsum | Write real-shaped Gmail copy: "Q3 预算确认", "Login redesign 反馈", senders like Allen Liu / Marie / Nina Park | | Use dark mode | Stay on Gmail's default light theme (#f6f8fc page) | | Brand the Gmail chrome with Orbit | Orbit branding lives only inside the digest body (subject Orbit tag + footer micro-tag) | | Put yellow important stars on multiple inbox rows | Only the Orbit Daily Digest row can carry the important marker |