Team Okrs

Team OKRs Template

Use this template when the artifact is a team-facing status / OKR / sprint console — not a personal todo, not a public marketing page, not a deck.

Use When

• The audience is a team, lead, or stakeholder reviewing collective progress — quarterly OKR review, sprint status, "this week" all-hands view.
• Surfaces needed: sprint hero with progress segments, workstream cards with owners, chronological activity feed with event types (shipped / blocked / reviewed / commented / uploaded), today's schedule, team presence, upcoming milestones.
• Look should feel like a polished internal tool (Linear / Asana / Notion-flavored), neutral and calm.

Avoid When

• The artifact is a personal todo / planner — too team-centric.
• The artifact is meant to be presented as slides (use a ppt/ deck template).
• The page is public marketing — wrong audience, wrong density.
• The data is purely analytical (charts, BI metrics) — use dashboard/ (more chart-oriented) instead.
• The content is a periodic narrative digest with prose — use Project Brief/ (notebook weekly digest).

Required Reading

Read this SKILL.md first. Do not read activity-stream.html by default.

Read activity-stream.html only when you need: the 4-segment sprint progress bar geometry, the event-badge taxonomy (green check / red alert / purple comment / amber up-arrow / dark review), the workstream-card layout, the schedule current-time indicator, or the team-presence dot pattern. Extract patterns; do not copy placeholder names, project titles, or class names wholesale.

Design Strategy

Decide the page's answer before placing components:

• "Are we on track this sprint?" → hero progress + status stats dominate
• "What did the team do this week?" → activity stream is the spine, hero shrinks
• "What's next?" → workstream cards + milestones dominate
• "Who's around right now?" → presence + schedule dominate

A single page can blend these but pick the lead question.

Design Structure / Visual Weight

The page is a composition of zones with deliberately different visual weight — not a stack of equal rows. Before placing any component, sketch the weight tiers:

• Hero (≈ 30–40% of first screen) — sprint title + 4-segment progress bar + 3–4 status stats. Dominant; answers the lead question immediately.
• Primary (main column body) — workstream cards (medium, varied internal hierarchy) and activity stream (chronological, badge-led). Cards must NOT all be the same height.
• Right rail (≈ 25–30% of width) — today's schedule, presence dots, upcoming milestones. Smaller type, tighter spacing, clearly secondary.
• Tertiary — filter chips, footers, legends. Quiet, low contrast.

Different roles get different shapes: hero is a wide banner with a progress geometry; workstream cards are rectangles with owner stacks; activity is a column of badge-led rows grouped by day; presence is a dot grid; schedule is a vertical time-axis. A reader should be able to tell role from silhouette alone, before reading any label.

Counter-example — do NOT ship this

A max-width: 1120px centered single column with a small masthead and N identical border-bottom: 1px solid rows (each row: number / title / one-line meta / tag chips / link). No hero geometry, no right rail, no weight variation — every line has the same height and density. That is a CSV with CSS: it satisfies "show all the data" but fails as a team/OKR surface, because the eye has nowhere to land first and no signal about what matters more.

If your draft reduces to "for each item, render a row" and no zone above the list is doing more visual work, stop and restart the layout — add a hero that answers the lead question, push at least one block into a right rail, and let card/row heights vary.

Layout Bias

Prefer:

• Inter with OpenType features enabled (ss01, cv11) + PingFang SC for CJK
• soft pastel status backgrounds with high-contrast colored dots, never tinting whole cards
• overlapping owner-avatar stacks for shared work
• chronological grouping in the activity feed (by day), with sub-grouped events under the day header
• right-rail used for time-bounded info (today, this week) — main column for status

Avoid:

• emoji as status indicators
• bouncy animations or playful illustrations
• dark gradients or "executive premium" overlays
• treating the activity feed as a social wall with likes / shares / reactions
• a wall of charts when status pills + progress segments would answer faster

Platform / Size

Desktop-first internal tool. Designed for ~ 1440px wide; sidebar / right-rail collapse below ~ 1100px. Not mobile-native.