Use this prompt with nano-banana or similar design tools to generate a cohesive design system for PlanReview.
PlanReview is a collaborative technical planning and review platform for engineering teams. It enables teams to create structured implementation plans, gather stakeholder feedback through PR-style reviews, and export context packages for AI-assisted development.
Target Users: Engineering teams, tech leads, product managers, and individual contributors who need to plan and review technical implementations.
Core Value Proposition: Streamline the technical planning process with structured plans, collaborative reviews, and AI-ready context exports.
- Primary Background: Deep charcoal/slate (#0f1419 or similar)
- Secondary Background: Slightly lighter slate for cards/panels (#1a1f26)
- Elevated Surfaces: Subtle elevation with lighter backgrounds (#242b35)
- Text Primary: High contrast white/off-white (#f7f9fc)
- Text Secondary: Muted gray (#8b949e)
- Text Tertiary: Subtle gray for timestamps/metadata (#6e7681)
- Primary Accent: Vibrant blue (#3b82f6) - actions, links, focus states
- Success: Green (#22c55e) - approved status, success states
- Warning: Amber (#f59e0b) - in-review status, attention needed
- Danger: Red (#ef4444) - destructive actions, errors
- Info: Cyan (#06b6d4) - informational elements
- Font Family: Inter or system-ui stack
- Headings: Semi-bold to bold weights
- Body: Regular weight, high line-height for readability
- Code/Monospace: JetBrains Mono or similar for code snippets
- Subtle borders (#30363d) instead of heavy shadows
- Rounded corners (6-8px for cards, 4px for buttons)
- Minimal use of gradients
- Focus on content hierarchy and whitespace
- GitHub/Linear-inspired aesthetic
- Centered card on dark background
- Logo at top
- Email input field
- Password input field with show/hide toggle
- "Remember me" checkbox
- Primary "Sign In" button
- "Forgot password?" link
- "Don't have an account? Register" link
- Optional: Social login buttons (future GitHub OAuth)
- Similar layout to login
- Name input field
- Email input field
- Password input field with strength indicator
- Confirm password field
- Terms acceptance checkbox
- Primary "Create Account" button
- "Already have an account? Sign in" link
- Centered card
- Email input field
- Primary "Send Reset Link" button
- "Back to login" link
- New password field with strength indicator
- Confirm password field
- Primary "Reset Password" button
Layout: Sidebar navigation + main content area
- Logo/app name at top
- Organization switcher dropdown
- Navigation items:
- Dashboard (home icon)
- Plans (document icon)
- Reviews (git-pull-request icon)
- Teams (users icon)
- Settings (gear icon)
- User avatar + name at bottom with dropdown menu
- Header: "Welcome back, [Name]" + date
- Quick Stats Row:
- Total active plans
- Pending reviews (needs your action)
- Recently approved
- Draft plans
- Pending Reviews Section:
- List of review requests awaiting user's input
- Each item: Plan title, author avatar, team name, time since requested
- "Review" button on each
- Recent Plans Section:
- Grid or list of recently accessed/modified plans
- Plan card: Title, status badge, last updated, author
- Team Activity Feed (Optional):
- Recent comments, approvals, new plans from team
Layout: Full-width content area with filters
- Page title: "Plans"
- Team/filter selector dropdown
- Search input
- "New Plan" primary button
- Status filter pills: All | Draft | In Review | Approved | Archived
- Sort dropdown: Recently updated | Created date | Title
-
Card View Option:
- Plan title (prominent)
- Status badge (colored pill)
- Author avatar + name
- Team name
- Last updated timestamp
- Version number
- Comment count indicator
- Review status indicator (avatars of reviewers + status)
-
Table View Option:
- Columns: Title | Status | Author | Team | Updated | Reviews
- Row hover state
- Sortable columns
- Illustration
- "No plans yet" message
- "Create your first plan" CTA button
Layout: Two-column layout (main content + sidebar)
- Back button/breadcrumb
- Plan title (editable inline if draft + author)
- Status badge
- Action buttons:
- Edit (if draft + author)
- Request Review (if draft + author)
- Submit Review (if reviewer with pending review)
- Export
- More menu (archive, delete, etc.)
- Version indicator: "Version 3"
- Last updated: "Updated 2 hours ago"
- Author avatar + name
-
View Mode:
- Rendered markdown content
- Support for Mermaid diagrams
- Code syntax highlighting
- Headers, lists, tables, etc.
-
Edit Mode:
- Split-pane or tabbed markdown editor
- Toolbar: Bold, italic, headers, lists, code, link, image
- Preview toggle
- Auto-save indicator
-
Reviews Panel:
- Section header: "Reviews"
- Status summary: "2 approved, 1 pending"
- List of reviewers:
- Avatar
- Name
- Status (pending/approved/changes requested)
- Review comment preview
- Timestamp
- "Request Review" button (if applicable)
-
Comments Panel:
- Section header: "Comments (12)"
- Filter: All | Unresolved | Resolved
- Comment thread list:
- Author avatar + name
- Timestamp
- Comment content
- Reply count
- Resolve button
- Reply button
- "Add Comment" input at bottom
- Full-height right panel
- Slides in when "Comments" clicked
- Close button
- Same comment functionality as sidebar version
Layout: Full-screen editor experience
- Back/close button
- Plan title input
- Auto-save status indicator
- Preview toggle button
- Save button (if manual save)
- Left Pane: Markdown editor with syntax highlighting
- Right Pane: Live preview (toggleable)
- Toolbar:
- Text formatting (bold, italic, strikethrough)
- Headers (H1-H4)
- Lists (bullet, numbered, task)
- Code (inline, block)
- Links and images
- Tables
- Mermaid diagram block
- Horizontal rule
- Word/character count
- Line number
- Keyboard shortcuts hint
Layout: List with detail panel
- Page title: "Teams"
- Organization context
- "Create Team" button (if admin)
- Team cards:
- Team name
- Description
- Member count
- Plan count
- Member avatars (stacked)
- Team name + description
- Members Tab:
- Member list with roles
- Invite member button
- Remove member option
- Plans Tab:
- Settings Tab (if admin):
- Edit team name/description
- Delete team
Layout: Settings navigation + content area
- General
- Members
- Teams
- Billing (future)
- Danger Zone
- Organization name input
- Organization slug (read-only or editable)
- Logo upload
- Member list table:
- Avatar | Name | Email | Role | Joined | Actions
- Role dropdown (owner, admin, member)
- "Invite Member" button
- Remove member option
- Teams list
- Create/edit/delete teams
- Avatar upload
- Display name input
- Email (read-only or editable)
- Theme toggle (dark/light/system)
- Email notification preferences
- Default organization selector
- Change password
- Active sessions list
- Logout all sessions
- Fixed left sidebar
- Collapsible on mobile
- Icon + label navigation items
- Active state indication
- Organization switcher at top
- User menu at bottom
- Page title/breadcrumbs
- Search (global)
- Notifications bell
- User avatar dropdown
- Clickable path segments
- Current page (non-clickable)
- Separator character
- Dark background (#242b35)
- Subtle border (#30363d)
- Focus ring (primary accent)
- Label above
- Helper text below
- Error state with red border + message
- Disabled state
- Same styling as input
- Resizable
- Character count option
- Custom styled dropdown
- Search/filter option for long lists
- Multi-select variant
- Chevron indicator
- Custom styled
- Indeterminate state
- Label alignment
- Custom styled circular
- Group layout options
- On/off states
- Label options
- Variants:
- Primary (filled accent color)
- Secondary (subtle background)
- Ghost (transparent, text only)
- Danger (red for destructive actions)
- Sizes: sm, md, lg
- States: default, hover, active, disabled, loading
- Icon support (left/right)
- Connected buttons
- Single select behavior
- Image or initials fallback
- Sizes: xs, sm, md, lg, xl
- Online/offline indicator option
- Stacked avatar group
- Status colors (draft, in-review, approved, archived)
- Small text
- Optional icon
- Count badge variant
- Dark background
- Subtle border
- Hover state for interactive cards
- Header/body/footer sections
- Centered layout
- Illustration/icon
- Title
- Description
- CTA button
- Circular spinner
- Sizes to match button sizes
- Color variants
- Loading placeholder
- Text line skeleton
- Card skeleton
- Avatar skeleton
- Position: top-right
- Auto-dismiss
- Types: success, error, warning, info
- Dismiss button
- Progress bar option
- Centered overlay
- Dark semi-transparent backdrop
- Close button
- Header/body/footer
- Size variants
- Inline alert
- Types: success, error, warning, info
- Dismissible option
- Dark background
- Arrow pointing to trigger
- Delay on show
- Rich content tooltip
- Click or hover trigger
- Arrow indicator
- Sticky header option
- Hover row highlight
- Sortable columns
- Selectable rows
- Pagination footer
- Simple list items
- Interactive list items
- Dividers
- Group headers
- Underline style
- Pill style
- Vertical variant
- Badge count on tabs
- Expandable sections
- Icon rotation on expand
- Multiple or single open
- Draft: Gray/neutral
- In Review: Amber/yellow
- Approved: Green
- Archived: Muted gray
- Reviewer avatars (stacked)
- Status icon overlay
- Tooltip with details
- Nested replies
- Author info
- Timestamp
- Resolve/unresolve toggle
- Reply input
- Edit/delete menu
- Avatar of current user
- Textarea
- Submit button
- Cancel button
- Markdown preview option
- All standard markdown elements
- Mermaid diagram rendering
- Code syntax highlighting
- Copy code button
- Linkified headers
- Syntax highlighted editing
- Toolbar
- Split pane preview
- Auto-save indicator
- Version number badge
- "Outdated" warning for stale reviews
- Version history dropdown
- Search team members
- Avatar + name + role
- Selected state
- Multi-select
- Full sidebar navigation
- Two-column layouts
- All features visible
- Collapsible sidebar (hamburger menu)
- Single column with expandable panels
- Stacked layouts
- Bottom navigation bar
- Full-width cards
- Slide-out panels
- Simplified tables (card view)
- Button hover/press states (subtle scale + color shift)
- Card hover elevation
- Page transitions (fade or slide)
- Toast slide-in/out
- Modal fade + scale
- Skeleton pulse animation
- Spinner rotation
- Accordion expand/collapse
- Tab content crossfade
- Comment thread expand
- Status badge pulse on change
- WCAG 2.1 AA compliance
- Minimum contrast ratios for dark theme
- Focus indicators on all interactive elements
- Keyboard navigation support
- Screen reader labels
- Reduced motion option
- Skip navigation link
Copy the entire content of this document and provide it to nano-banana or your preferred design generation tool. The prompt provides comprehensive context for generating a cohesive dark theme design system optimized for engineering workflows.