Orbit gmail

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.

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

2. 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. ☀ 你昨天的 6 封重要邮件 — Open Orbit Daily) followed by an inline Orbit tag.

   c. Sender row — round avatar O + Open Orbit <[email protected]> + 收件人 我 ▾ + 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