- Added CalendarDayDetail component for displaying detailed event information for a selected day. - Created CalendarEventPill component to represent individual events in a compact format. - Introduced CalendarFilters component to filter events by project, stage type, and status. - Developed CalendarGrid component to render the calendar layout and manage event interactions. - Implemented CalendarView component to manage the overall calendar state and navigation. - Added useCalendar hook to fetch calendar events based on specified filters. - Created calendar-service to handle fetching events from the database with filtering capabilities. - Updated data model to include necessary fields for calendar events and filters. - Added system prompt and tools for AI assistant to manage calendar-related tasks.
2.5 KiB
2.5 KiB
HP CG Production Tracker
Design Context
Users
Production managers and CG artists use this tool equally. Managers track deliverables, deadlines, and team workload across projects. Artists check their tasks, update statuses, and log progress. Both need fast, glanceable information with minimal friction — the tool is open all day alongside creative applications.
Brand Personality
Bold, energetic, creative. This tracker reflects the creative CG work it manages. The "Oliver Agency palette" (forest green + coral) sets a distinctive, confident tone — not generic SaaS. The interface should feel alive and expressive while remaining a serious production tool.
Aesthetic Direction
- Visual tone: Colorful and status-heavy like Monday.com, with the production-pipeline structure of Shotgrid/ftrack. Dense but not cluttered — every pixel earns its place.
- Color usage: Lean into the status color system. Color is functional (communicating state) and expressive (reinforcing the creative brand). The forest green + coral palette is the signature — don't dilute it.
- Typography: Montserrat headings with tight tracking give weight and personality. The
label-upperpattern (uppercase + wide tracking) is an Oliver Agency signature — use it for navigation, section headers, and metadata labels. - Dark mode: First-class citizen, not an afterthought. The charcoal + bright green variant should feel equally polished.
- Anti-references: Generic gray SaaS dashboards. Overly minimal/sterile interfaces that could belong to any product. Avoid looking like a default shadcn template.
Design Principles
- Status at a glance: The most important information is where things stand. Use color, position, and density to make status immediately scannable without reading.
- Creative energy, production discipline: Bold visual choices (color, type, layout) paired with rigorous information architecture. Expressive doesn't mean chaotic.
- Density over simplicity: Users are power users with the tool open all day. Prefer information-dense layouts that reduce clicks over spacious layouts that look good in screenshots.
- Consistent signatures: The Oliver Agency palette,
label-uppertypography, forest green + coral accents, and soft-radius corners are brand signatures. Apply them consistently across all new UI. - Accessible by default: WCAG AA compliance. Sufficient contrast ratios, keyboard navigation, focus-visible rings, and screen reader support on all interactive elements.