Date: 2026-05-24
Author: SCOUT
Purpose: Playbook for redesigning Genius (F:/projects/genius/index.html) based on best-in-class productivity cockpit products.
---
#0a0b0f bg, #6aa9ff accent, Inter + JetBrains Mono#14161c / #1b1e26 raised surfaces#56d39c, warn #f0b54e, danger #f4736bGenius already matches the cool-blue chat-first pattern confirmed by Harnoor (10/10 memory). The redesign should sharpen the structure and patterns, not the palette.
---
---
Core UI Signature:
Sidebar-first structure with Cmd+K command palette as the universal action layer. The sidebar IS the map; everything else is content.
Information Density:
Dense but controlled. Compact spacing, strong typographic hierarchy, minimal decoration. Information is packed but every element has a clear state (open, in-progress, done, canceled). Color is reserved for state, not decoration.
AI Summary Pattern:
Not a primary AI product. Issue state and metadata replace AI output -- the "summary" is the structured issue card itself (title, status, priority, assignee, label). Lesson: good structure eliminates the need for AI summaries.
Navigation Pattern:
Persistent left sidebar (workspace > team > project > view). Cmd+K for everything else. No tabs. No breadcrumbs. The sidebar IS the breadcrumb.
Transferable Pattern for Genius:
The status-pill system. Every item in Linear has a visible, color-coded status dot. Apply this to Genius: every project, task, or briefing card should show a tiny status indicator (active/stalled/done/blocked) at the left edge -- not just color, but a consistent 6px dot + label pattern. Lets you scan 20 items in 2 seconds.
---
Core UI Signature:
"Notes-first, AI-second." The primary artifact is the user's own rough notes; AI refines them in place rather than creating a parallel AI-report card.
Information Density:
Progressive disclosure: core note + summary visible immediately; action items, decisions, and linked meetings expand below. No transcript dumps visible by default.
AI Summary Pattern:
AI output is merged into the note, not displayed as a separate panel. Structured around operational utility: decisions -> action items -> highlights -> next steps. The AI summary feels like a cleaned-up version of your own notes, not a bot's output.
Navigation Pattern:
Timeline/chronological: pre-meeting brief -> live capture -> post-meeting summary -> cross-meeting follow-up. Chat over notes is a retrieval layer, not the main surface.
Transferable Pattern for Genius:
Inline AI refinement, not panel separation. Genius briefings should not display "AI says:" blocks. Instead, the AI content should be styled as a structured first-person brief -- decisions in bold, action items as inline checkboxes, key highlights as pull-quotes. The AI origin is implicit, the utility is explicit.
---
Core UI Signature:
Ritual-driven daily planning. The app frames your day as a deliberate commitment, not a task dump. Opening = planning ceremony. End of day = review ceremony.
Information Density:
Split-pane: tasks on the left, calendar/day on the right. The interface makes overcommitment visually obvious by showing how tasks fill available time. Low visual noise, calm color palette.
AI Summary Pattern:
Minimal AI in the classic Sunsama sense -- the "summary" is the daily commitment list itself. The UI forces the user to articulate what they intend to do, which is more useful than AI-generated plans.
Navigation Pattern:
Day-oriented with channel/project grouping on the left. No complex hierarchies. The current day is always the protagonist.
Transferable Pattern for Genius:
The daily commitment header. At the top of Genius's daily view, show a committed-task count vs. available-hours count (e.g., "3 tasks · ~4.5 hrs committed / 6 hrs available"). This single line creates planning awareness without a full calendar. Turns the task list into a daily contract, not a wish list.
---
Core UI Signature:
Calendar as the primary workspace. Tasks are not a list -- they are blocks on a timeline. The AI auto-populates the calendar; drag-and-drop is the manual override.
Information Density:
Dense calendar grid with color-coded block types (focus / meeting / task / buffer). Priority and deadline are visible on the block itself via badges and color intensity.
AI Summary Pattern:
"AI updated your plan" state is visible but unobtrusive. Rescheduling events show a brief explanation inline ("moved because meeting overlap"). The AI makes changes and explains them in one step.
Navigation Pattern:
Left panel: task input + project list. Center: calendar timeline. Detail drawer slides in on click. No separate "AI" section -- the calendar IS the AI output.
Transferable Pattern for Genius:
Time-block cards with duration + priority badges. Genius task cards should show estimated duration as a badge (e.g., ~45m) and priority as a colored left-border (red = P1, amber = P2, blue = P3). This lets you read the day's weight at a glance without opening any item.
---
Core UI Signature:
Daily notes as the default capture surface. Every note has a date anchor. Backlinks make structure emerge organically rather than requiring upfront organization.
Information Density:
Minimal chrome, strong whitespace, progressive disclosure. Backlinks appear below each note as a count + preview -- you see connections without being overwhelmed by them. Graph view is an exploration layer, not the home screen.
AI Summary Pattern:
AI appears as contextual toolbar actions (summarize, extract tasks, rewrite) -- never as a standalone screen. The note stays the primary artifact; AI is a verb, not a noun.
Navigation Pattern:
Primary: Notes / Daily Notes / Tasks / Search / AI. Secondary: Graph / Tags / Archive. Search is a first-class citizen, not buried.
Transferable Pattern for Genius:
Daily date anchor as the cockpit home state. When Genius loads, the first thing visible should be today's date as a large heading (e.g., Saturday, May 24 in Inter 800) above the briefing. Every session is time-grounded. The date header is the "you are here" marker.
---
Core UI Signature:
Speed as a design principle. Every interaction is optimized for <100ms feedback. Keyboard shortcuts for everything, command palette for the rest. The UI teaches you to be faster over time.
Information Density:
Split inbox: primary (needs action) separated from secondary (FYI, newsletters). AI triage surfaces the 3-5 emails that actually need a decision. The density is high but the decision queue is short.
AI Summary Pattern:
AI triage produces a prioritized decision queue, not a summary doc. AI reply drafts appear inline in the compose pane. The AI output is always immediately actionable -- not a report, but a draft or a prioritized list ready for one-key action.
Navigation Pattern:
Left sidebar: inbox, sent, snoozed, starred, custom views. Cmd+K: everything. The structure is flat and fast -- no nested folder hierarchies. Labels replace folders.
Transferable Pattern for Genius:
The decision-queue inbox. Genius should have a dedicated "Needs Action" section that surfaces only items requiring a decision or response -- AI-triaged from all connected sources. 5 items max visible. Each item has one primary action button (Reply / Schedule / Delegate / Defer). This is the most valuable real estate on the page.
---
Core UI Signature:
Deployment status as a first-class signal. The dashboard answers "is everything OK right now?" in under one second. Status pills, build timelines, and metric cards are the visual vocabulary.
Information Density:
5-7 core metrics per view. Metric cards: large number -> small delta -> mini sparkline. Progressive disclosure: overview -> drill-down -> logs. Near-black backgrounds with slightly lighter card surfaces for depth without shadows.
AI Summary Pattern:
Minimal AI in the traditional Vercel dashboard. The "summary" is the status system itself: green/amber/red at a glance. Lesson: a good status system makes AI summaries redundant for operational state.
Navigation Pattern:
Top-level project cards -> deployment list -> build logs. Breadcrumb trail for depth. Settings and analytics in secondary tabs. The home screen is always "current state of all projects."
Transferable Pattern for Genius:
KPI metric cards with sparklines. Each Genius project card should show 1-2 key metrics with a tiny 7-day sparkline SVG. This turns the project grid into a health dashboard at a glance -- same information density as Vercel's deployment grid.
Implementation detail: metrics row per card: [label] [number] [+/-delta] [7-point inline SVG sparkline]. Data from localStorage or injected by the Python briefing script.
---
Core UI Signature:
Flexibility at the cost of opinion. Notion AI reduces the "blank canvas" burden by turning unstructured content into structured outputs (summaries, tables, action items) inline.
Information Density:
Variable by design. Heavy use of database views (table, board, calendar, gallery) to surface the same data at different density levels. Toggle headers for progressive disclosure.
AI Summary Pattern:
AI is a workspace-wide query layer. "Ask AI" can answer "what's the status of project X?" by reading across all docs. Database autofill uses AI to structure raw content into typed properties. The key lesson: AI should read your workspace and give back structured answers, not just chat responses.
Navigation Pattern:
Left sidebar: workspace hierarchy. Breadcrumb at top. / commands inside the editor for inline creation without leaving context.
Transferable Pattern for Genius:
The / command inline quick-create. In any Genius text input or note field, typing / should surface a quick-action menu: /task, /project, /note, /brief, /remind. Eliminates modal dialogs for creation and keeps context intact.
---
Core UI Signature:
Split-pane between conversation and canvas/artifact. The chat is the input; the artifact panel is the output that can be directly edited. Memory is becoming a visible system feature, not a backend secret.
Information Density:
Moderate. Wide center conversation pane, collapsible left sidebar, optional right artifact panel. The key innovation is making AI output editable in place rather than requiring copy-paste workflows.
AI Summary Pattern:
Canvas mode: AI produces a structured document that the user edits directly, not just a read-only response. The AI summary becomes a living document, continuously refineable.
Navigation Pattern:
Left sidebar: conversation history, projects, custom GPTs. Center: conversation. Right: canvas/artifact drawer (collapsible). Model selector in top bar. Most refined 3-pane productivity layout in AI products today.
Transferable Pattern for Genius:
The persistent artifact drawer. Genius should have a right-side panel (collapsible) that holds the "active artifact" -- today's brief, the project being worked on, or the current task list. This panel persists as you navigate the left sidebar, maintaining context across sections.
---
Core UI Signature:
Bento grid: mixed-size modular tiles in a responsive masonry layout. Each tile has exactly one job. Size signals importance. The grid is the navigation.
Information Density:
High information density, low cognitive load. Each tile is self-contained and scannable. Grid requires no explanation -- position and size do the hierarchy work.
AI Summary Pattern:
No AI product. But the pattern is relevant: bento grids are how AI-generated dashboards should surface multiple data types without a complex sidebar hierarchy.
Navigation Pattern:
No traditional navigation -- the grid IS the navigation. Clicking a tile drills into it. Works because the total number of sections is small (8-12 tiles).
Transferable Pattern for Genius:
Mixed-size tile grid for the project overview. The Genius projects section should use a CSS grid with variable card sizes -- large cards (spanning 2 columns) for priority projects, small cards (1 column) for maintenance/passive projects. Size = importance. No numbered ranking needed.
---
---
A dedicated "Needs Action" section, AI-triaged, max 5 items, each with one primary action button.
This is the highest-value real estate in any chief-of-staff UI. Genius currently lacks a true inbox primitive.
Implementation: Fixed-height section near top, horizontal card strip. Each card: source icon + title + one action button (Reply / Schedule / Delegate / Defer) + dismiss. AI sorts by urgency. Max 5 cards. If empty, show "Inbox zero" state with accent color.
---
Stop showing "AI says:" blocks. Genius briefings should render as structured first-person content: bold decisions, inline checkboxes for action items, pull-quote formatting for highlights. AI origin is implied, not labeled.
Implementation: The GBRIEF banner content should render through a CSS template that applies structured-note formatting. Decisions: <strong> + left-border accent. Action items: <label><input type="checkbox"> text</label>. Highlights: styled blockquote. Remove any "AI" label from visible UI.
---
Every project and task card gets a 6px colored left-border + status text. Scan 20 items in 2 seconds.
Implementation: CSS variables for 5 states: active=#6aa9ff, stalled=#f0b54e, blocked=#f4736b, done=#56d39c, inactive=#5a6070. Every .card gets a data-status attribute and a matching ::before pseudo-element left-border (3px wide, full card height, border-radius on left).
---
Project cards show 1-2 metrics + a tiny 7-day SVG sparkline. Turns the project grid into a health dashboard.
Implementation: Each project card gets a metrics row at the bottom: [label] [number] [delta badge] [7-point polyline SVG 48x16px]. Data sourced from localStorage key genius_metrics_{project_slug} or injected by briefing script. Delta badge: green if positive, red if negative.
---
Page loads with today's date as a large heading above everything else. Every session is time-grounded.
Implementation: JS new Intl.DateTimeFormat('en-US', {weekday:'long', month:'long', day:'numeric'}).format(new Date()) injected into a <h1 class="today-anchor"> element. Style: Inter 800, font-size clamp(1.8rem, 4vw, 2.8rem), color var(--ink). Subtitle: current time + greeting (Good morning / afternoon / evening).
---
1. Full graph view as default -- exploration tool only, never home screen
2. "AI says:" labels on summaries -- makes output feel robotic, not authoritative
3. Chatbot-first home screen -- chat is a utility, not the cockpit itself
4. Equal-weight grid where everything looks the same -- kills visual hierarchy
5. More than 7 KPI tiles -- beyond that is noise, not signal
6. Status hidden in tables only -- must be scannable without opening any item
7. Modal dialogs for common creation actions -- use slash commands or inline forms
---
| Priority | Pattern | Source | Effort |
|---|---|---|---|
| P1 | Daily date anchor heading | Reflect | Low |
| P1 | Status-pill system (::before border) | Linear | Low |
| P1 | Inline briefing formatting (no AI label) | Granola | Medium |
| P2 | Decision-queue inbox section | Superhuman | Medium |
| P2 | KPI metric cards with sparklines | Vercel | Medium |
| P3 | Duration badges on task cards | Motion | Low |
| P3 | Committed-hours capacity header | Sunsama | Low |
| P3 | Mixed-size bento project grid | Bento.me | Medium |
| P4 | Slash-command quick-create | Notion | High |
| P4 | Persistent artifact drawer | ChatGPT | High |
---
1. Perplexity Sonar -- Linear UI patterns, 2026-05-24
2. Perplexity Sonar -- Granola AI UI patterns, 2026-05-24
3. Perplexity Sonar -- Sunsama UI patterns, 2026-05-24
4. Perplexity Sonar -- Motion AI UI patterns, 2026-05-24
5. Perplexity Sonar -- Reflect notes app UI patterns, 2026-05-24
6. Perplexity Sonar -- Superhuman email UI patterns, 2026-05-24
7. Perplexity Sonar -- Vercel dashboard UI patterns, 2026-05-24
8. Perplexity Sonar -- Notion AI UI patterns, 2026-05-24
9. Perplexity Sonar -- Mem AI UI patterns, 2026-05-24
10. Perplexity Sonar -- Bento.me UI patterns, 2026-05-24
11. Perplexity Sonar -- ChatGPT desktop UI patterns, 2026-05-24
12. Perplexity Sonar Pro -- Personal OS cockpit synthesis, 2026-05-24
13. Direct file read -- F:/projects/genius/index.html baseline, 2026-05-24