We are developing a web B2B SaaS project for managing a service business in the IT sector.
The project is currently in the development stage, there are no users yet, but there are examples of working pages that will serve as a benchmark for information architecture and user flows — you need to adapt/redesign them into a business, restrained, readable system design with a consistent style across all pages.
What needs to be developed
1. Main sections:
- Dashboard — analytics, key metrics, project statuses
- Projects — project cards, detailed pages, timeline
- Tasks — kanban board, lists, filtering, priorities, task card
- Clients — CRM client cards, contacts, interaction history
2. Resource rental:
- Rental agreements — list of agreements, details, statuses
- Resources — catalog of resources for rent (equipment, premises, etc.)
- Rental rates — setting up pricing plans, pricing history
3. Service
- Service agreements — list of agreements, details, statuses
- Work log - logging the execution of client service tasks within pricing plans
- Rental orders — managing orders, booking calendar
4. Finance:
- 🧾 Invoices — billing, templates, payment history
- 💳 Work pricing — accounting for the working time of performers, cost calculation
- 📈 Financial reporting — charts, tables, data export
5. Client portal:
- 👤 Client cabinet — personal cabinet for end clients
- 📊 Order status — tracking progress
- 📧 Communication — messenger, comments, notifications
6. Additional interfaces:
- ⚙️ Hub settings — customization, integrations
- 👥 Team management — roles, access rights
- 📖 Activity history — audit log, changes
This is not the entire functionality, everything needs to be discussed in detail separately, doing everything at once is not necessary, priority is discussed separately.
The project uses a universal card system (CardShell), where each entity (project, task, client, etc.) is displayed as a card with a unified structure. All cards use a tab system:
- Main information
- Related entities (for example, in Project → tabs: Details, Tasks, Finance)
- Activity/Comments
- Settings
Design requirements
Style
- Business professional style (B2B SaaS)
- Clean and minimalist — without unnecessary decorations
- Functional — focus on usability
- Modern — relevant UI trends of 2025
Color scheme
- Need to propose a new professional palette
- Support for light and dark themes (light/dark mode)
- Accent colors for statuses, priorities, alerts
Typography
- Clear hierarchy (H1-H6)
- Readability on different screens
- System fonts or web fonts (Geist, Inter, or analogs)
Components
- Uses Tailwind CSS and shadcn/ui components (Radix UI primitives)
- Need design for component states: default, hover, active, disabled, error
- Icons: Lucide Icons (shadcn/ui standard)
Technical requirements for the Figma project
- Cover (project description)
- Design System (colors, typography, components)
- Dashboard
- Projects
- Tasks
- Clients
- Contracts
- Rental Resources
- Rental Pricing
- Invoices
- Settings
Scope of work
- ~15-20 unique screens (list pages, detailed cards)
- ~30-50 components (buttons, forms, cards, tables)
- Design System (colors, typography, styles)
- Light + Dark theme
- Responsiveness desktop (1920px, 1440px, 1280px minimum)
